lenve · Bingjian-Zhu · May 29, 2019
diff --git a/blogserver/.vscode/launch.json b/blogserver/.vscode/launch.json
@@ -0,0 +1,21 @@
+{
+    // 使用 IntelliSense 了解相关属性。 
+    // 悬停以查看现有属性的描述。
+    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "java",
+            "name": "Debug (Launch) - Current File",
+            "request": "launch",
+            "mainClass": "${file}"
+        },
+        {
+            "type": "java",
+            "name": "Debug (Launch)-BlogserverApplication<blogserver>",
+            "request": "launch",
+            "mainClass": "org.sang.BlogserverApplication",
+            "projectName": "blogserver"
+        }
+    ]
+}
diff --git a/blogserver/src/main/java/org/sang/config/WebSecurityConfig.java b/blogserver/src/main/java/org/sang/config/WebSecurityConfig.java
@@ -26,6 +26,7 @@
  * Created by sang on 2017/12/17.
  */
 @Configuration
+// @EnableWebSecurity //2019-5-28 添加注解@EnableWebSecurity，避免造成不可预估的结果
 public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
     @Autowired
     UserService userService;
@@ -53,10 +54,12 @@ public boolean matches(CharSequence charSequence, String s) {
     @Override
     protected void configure(HttpSecurity http) throws Exception {
         http.authorizeRequests()
+                .antMatchers("/reg").permitAll()
                 .antMatchers("/admin/category/all").authenticated()
-                .antMatchers("/admin/**","/reg").hasRole("超级管理员")///admin/**的URL都需要有超级管理员角色，如果使用.hasAuthority()方法来配置，需要在参数中加上ROLE_,如下.hasAuthority("ROLE_超级管理员")
-                .anyRequest().authenticated()//其他的路径都是登录后即可访问
-                .and().formLogin().loginPage("/login_page").successHandler(new AuthenticationSuccessHandler() {
+                .antMatchers("/admin/**").hasRole("超级管理员")///admin/**的URL都需要有超级管理员角色，如果使用.hasAuthority()方法来配置，需要在参数中加上ROLE_,如下.hasAuthority("ROLE_超级管理员")
+                .anyRequest().authenticated().and()
+                //除注册、登录路径外的其他的路径都是登录后即可访问
+                .formLogin().loginPage("/login_page").successHandler(new AuthenticationSuccessHandler() {
             @Override
             public void onAuthenticationSuccess(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Authentication authentication) throws IOException, ServletException {
                 httpServletResponse.setContentType("application/json;charset=utf-8");
@@ -65,8 +68,7 @@ public void onAuthenticationSuccess(HttpServletRequest httpServletRequest, HttpS
                 out.flush();
                 out.close();
             }
-        })
-                .failureHandler(new AuthenticationFailureHandler() {
+        }).failureHandler(new AuthenticationFailureHandler() {
                     @Override
                     public void onAuthenticationFailure(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, AuthenticationException e) throws IOException, ServletException {
                         httpServletResponse.setContentType("application/json;charset=utf-8");

diff --git a/blogserver/src/main/java/org/sang/mapper/UserMapper.xml b/blogserver/src/main/java/org/sang/mapper/UserMapper.xml
@@ -7,7 +7,7 @@
         SELECT * FROM user WHERE username=#{username}
     </select>
     <insert id="reg" useGeneratedKeys="true" keyProperty="id">
-        INSERT INTO user set username=#{username},password=#{password},nickname=#{nickname}
+       INSERT INTO user set username=#{username},password=#{password},nickname=#{nickname},email=#{email}
     </insert>
     <update id="updateUserEmail">
         UPDATE user set email=#{email} WHERE id=#{id}

diff --git a/blogserver/src/main/resources/application.properties b/blogserver/src/main/resources/application.properties
@@ -1,7 +1,7 @@
 spring.datasource.type=com.alibaba.druid.pool.DruidDataSource
-spring.datasource.url=jdbc:mysql:///vueblog?useUnicode=true&characterEncoding=UTF-8
-spring.datasource.username=username
-spring.datasource.password=password
+spring.datasource.url=jdbc:mysql:///vueblog2?useUnicode=true&characterEncoding=UTF-8
+spring.datasource.username=root
+spring.datasource.password=Zbj123
 mybatis.config-location=classpath:/mybatis-config.xml
 
 server.port=8081

diff --git a/vueblog/src/components/Login.vue b/vueblog/src/components/Login.vue
@@ -9,6 +9,8 @@
       <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
     </el-form-item>
     <el-checkbox class="login_remember" v-model="checked" label-position="left">记住密码</el-checkbox>
+    <!-- <el-button class="signin" type="text">注册</el-button> -->
+    <el-link class="signin" v-on:click="Sign_In" type="primary">注册</el-link>
     <el-form-item style="width: 100%">
       <el-button type="primary" @click.native.prevent="submitClick" style="width: 100%">登录</el-button>
     </el-form-item>
@@ -32,6 +34,11 @@
         loading: false
       }
     },
+     mounted: function (){
+       var _this = this;
+       _this.loginForm.username = _this.$route.query.username===undefined?"sang":_this.$route.query.username;
+       _this.loginForm.password = _this.$route.query.password===undefined?"123":_this.$route.query.password;
+     },
     methods: {
       submitClick: function () {
         var _this = this;
@@ -57,11 +64,16 @@
           _this.loading = false;
           _this.$alert('找不到服务器⊙﹏⊙∥!', '失败!');
         });
+      },
+      Sign_In:function(){
+        var _this = this;
+        _this.$router.replace({path: '/signin'});
       }
     }
   }
 </script>
 <style>
+@import url("//unpkg.com/element-ui@2.8.2/lib/theme-chalk/index.css");
   .login-container {
     border-radius: 15px;
     background-clip: padding-box;
@@ -83,4 +95,8 @@
     margin: 0px 0px 35px 0px;
     text-align: left;
   }
+
+  .signin{
+    margin: 0px 0px 2px 30px;
+  }
 </style>
diff --git a/vueblog/src/components/PostArticle.vue b/vueblog/src/components/PostArticle.vue
@@ -40,7 +40,7 @@
           <el-button @click="saveBlog(0)">保存到草稿箱</el-button>
           <el-button type="primary" @click="saveBlog(1)">发表文章</el-button>
         </template>
-        <template v-else="from==post">
+        <template v-else-if="from==post">
           <el-button type="primary" @click="saveBlog(1)">保存修改</el-button>
         </template>
       </div>
@@ -228,6 +228,6 @@
     vertical-align: bottom;
   }
 
-  .post-article {
-  }
+  /* .post-article {
+  } */
 </style>
diff --git a/vueblog/src/components/SignIn.vue b/vueblog/src/components/SignIn.vue
@@ -0,0 +1,126 @@
+<template>
+  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="sign_from">
+  <el-form-item label="账号" prop="username">
+    <el-input v-model="ruleForm.username"></el-input>
+  </el-form-item>
+  <el-form-item label="用户名" prop="nickname">
+    <el-input v-model="ruleForm.nickname"></el-input>
+  </el-form-item>
+  <el-form-item label="密码" prop="password">
+    <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
+  </el-form-item>
+  <el-form-item label="确认密码" prop="checkPass">
+    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
+  </el-form-item>
+  <el-form-item label="邮箱" prop="email">
+    <el-input v-model="ruleForm.email"></el-input>
+  </el-form-item>
+  <el-form-item>
+    <el-button type="primary" @click="onSubmit">注册</el-button>
+    <el-button @click="back" >返回</el-button>
+  </el-form-item>
+  </el-form>
+</template>
+<script>
+  import {postRequest} from '../utils/api'
+  import {putRequest} from '../utils/api'
+  export default{
+   data() {
+        var validatePass = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请输入密码'));
+        } else {
+          if (this.ruleForm.checkPass !== '') {
+            this.$refs.ruleForm.validateField('checkPass');
+          }
+          callback();
+        }
+      };
+      var validatePass2 = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请再次输入密码'));
+        } else if (value !== this.ruleForm.password) {
+          callback(new Error('两次输入密码不一致!'));
+        } else {
+          callback();
+        }
+      };
+      return {
+        ruleForm: {
+          username: '',
+          nickname: '',
+          password: '',
+          checkPass:'',
+          email: ''
+        },
+         rules: {
+          username: [
+            { required: true, message: '请输入账号', trigger: 'blur' },
+            { min: 3, max: 64, message: '长度在 3 到 64 个字符', trigger: 'blur' }
+          ],
+             nickname: [
+            { required: true, message: '请输入用户名', trigger: 'blur' },
+            { min: 1, max: 64, message: '长度在 1 到 64 个字符', trigger: 'blur' }
+          ],
+          password: [
+            { required: true,validator: validatePass, trigger: 'blur' },
+            { min: 6, max: 64, message: '密码长度必须在 6 到 64 个字符', trigger: 'blur' }
+          ],
+          checkPass: [
+            { required: true,validator: validatePass2, trigger: 'blur' },
+            { min: 6, max: 64, message: '密码长度必须在 6 到 64 个字符', trigger: 'blur' }
+          ],
+          email:[
+            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
+            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
+          ]
+        }
+      }
+    },
+    methods: {
+      onSubmit:function() {
+        var _this = this;
+        this.loading = true;
+        //前台数据验证
+        //...
+        postRequest('/reg', {
+          username:  _this.ruleForm.username,
+          password: _this.ruleForm.password,
+          nickname: _this.ruleForm.nickname,
+          email: _this.ruleForm.email
+        }).then(resp=> {
+          _this.loading = false;
+          if (resp.status == 200) {
+            //成功
+            var json = resp.data;
+            if (json.status == 'success') {
+              _this.$alert('注册成功!', '成功!');
+              _this.$router.replace({path: '/',query:{username:_this.ruleForm.username,password:_this.ruleForm.password}});
+            } else {
+              _this.$alert(json.msg, '失败!');
+            }
+          } else {
+            //失败
+            _this.$alert('注册失败!', '失败!');
+          }
+        }, resp=> {
+          _this.loading = false;
+          _this.$alert('找不到服务器⊙﹏⊙∥!', '失败!');
+        });
+      },
+      back:function(){
+         var _this = this;
+        _this.$router.replace({path: '/'});
+      }
+    }
+  }
+</script>
+<style>
+@import url("//unpkg.com/element-ui@2.8.2/lib/theme-chalk/index.css");
+
+.sign_from{
+    padding-left: 33%;
+    height: 400px;
+    width: 30%;
+}
+</style>
diff --git a/vueblog/src/router/index.js b/vueblog/src/router/index.js
@@ -8,7 +8,7 @@ import DataCharts from '@/components/DataCharts'
 import PostArticle from '@/components/PostArticle'
 import UserMana from '@/components/UserMana'
 import BlogDetail from '@/components/BlogDetail'
-
+import Signin from '@/components/SignIn'
 Vue.use(Router)
 
 export default new Router({
@@ -19,6 +19,11 @@ export default new Router({
       hidden: true,
       component: Login
     }, {
+      path:'/signin',
+      name:'注册',
+      hidden:true,
+      component:Signin
+    },{
       path: '/home',
       name: '',
       component: Home,