实现注册功能

src/main/resources/static/js/LoginStyle.js

@@ -1,22 +1,19 @@
 var Main = {
     data() {
-        var checkuserName = (rule, value, callback) => {
+        var checkName = (rule, value, callback) => {
             if (!value) {
                 return callback(new Error('用户名不能为空'));
-            } else {
-                callback();
             }
-            /*        setTimeout(() => {
+        };
-                      if (!Number.isInteger(value)) {
+        var checkNo = (rule, value, callback) => {
-                        callback(new Error('请输入数字值'));
+            if (!value) {
-                      } else {
+                return callback(new Error('学号不能为空'));
-                        if (value < 18) {
+            }
-                          callback(new Error('必须年满18岁'));
+        };
-                        } else {
+        var checkRealName = (rule, value, callback) => {
-                          callback();
+            if (!value) {
-                        }
+                return callback(new Error('真实姓名不能为空'));
-                      }
+            }
-                    }, 1000);*/
         };
         var validatePass = (rule, value, callback) => {
             if (value === '') {
@@ -31,7 +28,7 @@ var Main = {
         var validatePass2 = (rule, value, callback) => {
             if (value === '') {
                 callback(new Error('请再次输入密码'));
-            } else if (value !== this.ruleForm2.pass) {
+            } else if (value !== this.ruleForm2.colpassword) {
                 callback(new Error('两次输入密码不一致!'));
             } else {
                 callback();
@@ -39,23 +36,39 @@ var Main = {
         };
         return {
             ruleForm2: {
-                pass: '',
+                colname: '',
-                checkPass: '',
+                colpassword: '',
-                userName: '',
+                checkPass:'',
-                email: ''
+                colstudentno: '',
+                colrealname: '',
+                colemail: ''
             },
-            activeName: 'login',
             rules2: {
-                pass: [
+                colpassword: [
-                    {validator: validatePass, trigger: 'blur'}
+                    {required: true,validator: validatePass, trigger: 'blur'}
                 ],
                 checkPass: [
-                    {validator: validatePass2, trigger: 'blur'}
+                    {required: true,validator: validatePass2, trigger: 'blur'}
                 ],
-                userName: [
+                colstudentno: [
-                    {validator: checkuserName, trigger: 'blur'}
+                    {
-                ]
+                        required: true,
-            }
+                        validator: checkNo,
+                        trigger: 'blur'
+                    }
+                ],
+                colrealname: [
+                    {
+                        required: true,
+                        validator: checkRealName,
+                        trigger: 'blur'
+                    }
+                ],
+                colname: [
+                    {required: true,validator: checkName, trigger: 'blur'}
+                ],
+            },
+            activeName:'login',
         };
     },
     methods: {

src/main/resources/static/js/homePage.js

@@ -9,9 +9,75 @@ axios.get('http://localhost:8080/cms/download/findall')
     });*/
 var Main = {
     data() {
+        var checkName = (rule, value, callback) => {
+            if (!value) {
+                return callback(new Error('用户名不能为空'));
+            }
+        };
+        var checkNo = (rule, value, callback) => {
+            if (!value) {
+                return callback(new Error('学号不能为空'));
+            }
+        };
+        var checkRealName = (rule, value, callback) => {
+            if (!value) {
+                return callback(new Error('真实姓名不能为空'));
+            }
+        };
+        var validatePass = (rule, value, callback) => {
+            if (value === '') {
+                callback(new Error('请输入密码'));
+            } else {
+                if (this.ruleForm2.checkPass !== '') {
+                    this.$refs.ruleForm2.validateField('checkPass');
+                }
+                callback();
+            }
+        };
+        var validatePass2 = (rule, value, callback) => {
+            if (value === '') {
+                callback(new Error('请再次输入密码'));
+            } else if (value !== this.ruleForm2.colpassword) {
+                callback(new Error('两次输入密码不一致!'));
+            } else {
+                callback();
+            }
+        };
         return {
-            activeIndex: '1',
+            ruleForm2: {
-            activeIndex2: '1',
+                colname: '',
+                colpassword: '',
+                checkPass:'',
+                colstudentno: '',
+                colrealname: '',
+                colemail: ''
+            },
+            rules2: {
+                colpassword: [
+                    {required: true,validator: validatePass, trigger: 'blur'}
+                ],
+                checkPass: [
+                    {required: true,validator: validatePass2, trigger: 'blur'}
+                ],
+                colstudentno: [
+                    {
+                        required: true,
+                        validator: checkNo,
+                        trigger: 'blur'
+                    }
+                ],
+                colrealname: [
+                    {
+                        required: true,
+                        validator: checkRealName,
+                        trigger: 'blur'
+                    }
+                ],
+                colname: [
+                    {required: true,validator: checkName, trigger: 'blur'}
+                ],
+            },
+            activeName:'login',
             fileList: [{
                 name: 'food.jpeg',
                 url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
@@ -22,87 +88,101 @@ var Main = {
             DownloadList: []
         };
     },
-    mounted(){
+    mounted() {
-        this.$nextTick(()=>{
+        this.$nextTick(() => {
-            var that=this;
+            var that = this;
             axios.get('http://localhost:8080/cms/download/findall')
-            .then(function (response) {
+                .then(function (response) {
-                console.log(response.data);
+                    console.log(response.data);
-                that.DownloadList = response.data;
+                    that.DownloadList = response.data;
-            })
+                })
-            .catch(function (error) {
+                .catch(function (error) {
-                console.log(error);
+                    console.log(error);
-            });})
+                });
+        })
 
     },
     methods: {
-        handleClick(row) {
+        submitForm(formName) {
-            console.log(row.colfileid);
+            this.$refs[formName].validate((valid) => {
-        },
+                if (valid) {
-        submitUpload() {
+                    alert('submit!');
-            this.$refs.upload.submit();
+                } else {
-        },
+                    console.log('error submit!!');
-        handleRemove(file, fileList) {
+                    return false;
-            console.log(file, fileList);
+                }
-        },
-        handleDownload(row){
-            /*var url = window.location.protocol+"://"+window.location.host+":"+window.location.port+"/"*/
-            window.open("http://localhost:8080/cms/download/dodownload?fileId="+row.colfileid);
-        },
-        handlePreview(file) {
-            console.log(file);
-        },
-        handleExceed(files, fileList) {
-            this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
-        },
-        beforeRemove(file, fileList) {
-            return this.$confirm(`确定移除 ${ file.name }？`);
-        },
-        handleSelect(key, keyPath) {
-            console.log(key, keyPath);
-        },
-        handleOpen(key, keyPath) {
-            console.log(key, keyPath);
-        },
-        handleClose(key, keyPath) {
-            console.log(key, keyPath);
-        },
-        showMsg(msg) {
-            this.$message({
-                message: msg,
-                type: 'success'
             });
         },
-        notiSuccess(title, value) {
+        resetForm(formName) {
-            this.$notify({
+            this.$refs[formName].resetFields();
-                title: title,
-                message: value,
-                type: 'success'
-            });
-        },
-        notiWarning(title, value) {
-            this.$notify({
-                title: title,
-                message: value,
-                type: 'warning'
-            });
         },
+    handleClick(row) {
+        console.log(row.colfileid);
+    },
+    submitUpload() {
+        this.$refs.upload.submit();
+    },
+    handleRemove(file, fileList) {
+        console.log(file, fileList);
+    },
+    handleDownload(row) {
+        /*var url = window.location.protocol+"://"+window.location.host+":"+window.location.port+"/"*/
+        window.open("http://localhost:8080/cms/download/dodownload?fileId=" + row.colfileid);
+    },
+    handlePreview(file) {
+        console.log(file);
+    },
+    handleExceed(files, fileList) {
+        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
+    },
+    beforeRemove(file, fileList) {
+        return this.$confirm(`确定移除 ${ file.name }？`);
+    },
+    handleSelect(key, keyPath) {
+        console.log(key, keyPath);
+    },
+    handleOpen(key, keyPath) {
+        console.log(key, keyPath);
+    },
+    handleClose(key, keyPath) {
+        console.log(key, keyPath);
+    },
+    showMsg(msg) {
+        this.$message({
+            message: msg,
+            type: 'success'
+        });
+    },
+    notiSuccess(title, value) {
+        this.$notify({
+            title: title,
+            message: value,
+            type: 'success'
+        });
+    },
+    notiWarning(title, value) {
+        this.$notify({
+            title: title,
+            message: value,
+            type: 'warning'
+        });
+    },
 
-        notiInfo(title, value) {
+    notiInfo(title, value) {
-            this.$notify.info({
+        this.$notify.info({
-                title: title,
+            title: title,
-                message: value
+            message: value
-            });
+        });
-        },
+    },
 
-        notiError(title, value) {
+    notiError(title, value) {
-            this.$notify.error({
+        this.$notify.error({
-                title: title,
+            title: title,
-                message: value
+            message: value
-            });
+        });
-        }
     }
 }
+}
 var Ctor = Vue.extend(Main)
 var con = new Ctor().$mount('#app')
 //con.showMsg('登录成功');

src/main/resources/static/loginTest.html

@@ -0,0 +1,124 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>登录</title>
+    <!--
+        <link rel="stylesheet" type="text/css" href="styles.css">
+        -->
+    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+<!-- 先引入 Vue -->
+<script src="https://unpkg.com/vue/dist/vue.js"></script>
+<!-- 引入组件库 -->
+<script src="https://unpkg.com/element-ui/lib/index.js"></script>
+<div id="app">
+    <el-row type="flex" class="row-bg" justify="center">
+        <el-col
+                :md="12" :lg="12" :xl="12">
+            <div class="grid-content bg-purple">
+                <h2>登录系统</h2>
+            </div>
+        </el-col>
+    </el-row>
+    <el-row type="flex" class="row-bg" justify="center">
+        <el-col :md="12" :lg="12" :xl="12">
+            <div class="grid-content bg-purple">
+                <template>
+                    <el-tabs v-model="activeName"
+                             @tab-click="handleClick">
+                        <el-tab-pane label="登录"
+                                     name="login">
+                            <el-form :model="ruleForm2" status-icon
+                                     :rules="rules2" ref="ruleForm2" label-width="100px"
+                                     class="demo-ruleForm"
+                                     action="/cms/login/dologin"
+                                     method="POST" name="login">
+                                <el-form-item label="用户名"
+                                              prop="colname">
+                                    <el-input
+                                            v-model="ruleForm2.colname" name="colname"></el-input>
+                                </el-form-item>
+                                <el-form-item
+                                        label="密码" prop="colpassword">
+                                    <el-input type="password"
+                                              v-model="ruleForm2.colpassword" auto-complete="off" name="colpassword"></el-input>
+                                </el-form-item>
+                                <el-form-item>
+                                    <el-button type="primary"
+                                               native-type="submit">提交
+                                    </el-button>
+                                    <el-button @click="resetForm('ruleForm2')">重置</el-button>
+                                </el-form-item>
+                            </el-form>
+                        </el-tab-pane>
+                        <el-tab-pane
+                                label="注册" name="register">
+                            <el-form
+                                    :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2"
+                                    label-width="100px" class="demo-ruleForm"
+                                    action="/cms/register/doregister"
+                                    method="POST" name="register">
+                                <el-form-item label="用户名"
+                                              prop="colname">
+                                    <el-input
+                                            v-model="ruleForm2.colname" name="colname"></el-input>
+                                </el-form-item>
+                                <el-form-item
+                                        label="密码" prop="colpassword">
+                                    <el-input type="password"
+                                              v-model="ruleForm2.colpassword" auto-complete="off" name="colpassword"></el-input>
+                                </el-form-item>
+                                <el-form-item label="确认密码" prop="checkPass">
+                                    <el-input
+                                            type="password" v-model="ruleForm2.checkPass"
+                                            auto-complete="off" name="checkPass"></el-input>
+                                </el-form-item>
+                                <el-form-item prop="colemail" label="邮箱"
+                                              :rules="[
+      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
+      { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
+    ]">
+                                    <el-input v-model="ruleForm2.colemail" name="colemail"></el-input>
+                                </el-form-item>
+                                <el-form-item label="学号"
+                                              prop="colstudentno">
+                                    <el-input
+                                            v-model="ruleForm2.colstudentno" name="colstudentno"></el-input>
+                                </el-form-item>
+                                <el-form-item label="真实姓名"
+                                              prop="colrealname">
+                                    <el-input
+                                            v-model="ruleForm2.colrealname" name="colrealname"></el-input>
+                                </el-form-item>
+                                <el-form-item>
+                                    <el-button type="primary"
+                                               native-type="submit">提交
+                                    </el-button>
+                                    <el-button @click="resetForm('ruleForm2')">重置</el-button>
+                                </el-form-item>
+                            </el-form>
+                        </el-tab-pane>
+                    </el-tabs>
+                </template>
+            </div>
+        </el-col>
+    </el-row>
+</div>
+<script src="js/loginstyle.js"></script>
+<script src="js/msg.js"></script>
+<!--<body>
+&lt;!&ndash;<center>
+    <h1>登录系统</h1>
+    <form action="/cms/login/dologin" method="post">
+        <p>用户名：
+            <input type="text" name="colname"></p>
+        <p>密码：
+            <input type="password" name="colpassword"></p>
+        <input type="submit" value="登录">
+</center>&ndash;&gt;
+</form>-->
+</body>
+</html>

src/main/resources/templates/login.html

@@ -2,6 +2,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:th="http://www.thymeleaf.org">
 <head th:include="dist/thymeleaf/common_head :: header('登录')"></head>
+<link th:href="@{css/style.css}" rel="stylesheet">
 <body>
 <div th:insert="~{dist/thymeleaf/common_head :: #body_js}"></div>
 <div id="app">
@@ -25,16 +26,16 @@
                                      :rules="rules2" ref="ruleForm2" label-width="100px"
                                      class="demo-ruleForm"
                                      action="/cms/login/dologin"
-                                     method="POST" name="loginTest">
+                                     method="POST" name="login">
                                 <el-form-item label="用户名"
-                                              prop="userName">
+                                              prop="colname">
                                     <el-input
-                                            v-model="ruleForm2.userName" name="colname"></el-input>
+                                            v-model="ruleForm2.colname" name="colname"></el-input>
                                 </el-form-item>
                                 <el-form-item
-                                        label="密码" prop="pass">
+                                        label="密码" prop="colpassword">
                                     <el-input type="password"
-                                              v-model="ruleForm2.pass" auto-complete="off" name="colpassword"></el-input>
+                                              v-model="ruleForm2.colpassword" auto-complete="off" name="colpassword"></el-input>
                                 </el-form-item>
                                 <el-form-item>
                                     <el-button type="primary"
@@ -50,28 +51,38 @@
                                     :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2"
                                     label-width="100px" class="demo-ruleForm"
                                     action="/cms/register/doregister"
-                                    method="POST" name="loginTest">
+                                    method="POST" name="register">
                                 <el-form-item label="用户名"
-                                              prop="userName">
+                                              prop="colname">
                                     <el-input
-                                            v-model="ruleForm2.userName" name="userName"></el-input>
+                                            v-model="ruleForm2.colname" name="colname"></el-input>
                                 </el-form-item>
                                 <el-form-item
-                                        label="密码" prop="pass">
+                                        label="密码" prop="colpassword">
                                     <el-input type="password"
-                                              v-model="ruleForm2.pass" auto-complete="off" name="passWord"></el-input>
+                                              v-model="ruleForm2.colpassword" auto-complete="off" name="colpassword"></el-input>
                                 </el-form-item>
                                 <el-form-item label="确认密码" prop="checkPass">
                                     <el-input
                                             type="password" v-model="ruleForm2.checkPass"
-                                            auto-complete="off"></el-input>
+                                            auto-complete="off" name="checkPass"></el-input>
                                 </el-form-item>
-                                <el-form-item prop="email" label="邮箱"
+                                <el-form-item prop="colemail" label="邮箱"
                                               :rules="[
       { required: true, message: '请输入邮箱地址', trigger: 'blur' },
       { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
     ]">
-                                    <el-input v-model="ruleForm2.email"></el-input>
+                                    <el-input v-model="ruleForm2.colemail" name="colemail"></el-input>
+                                </el-form-item>
+                                <el-form-item label="学号"
+                                              prop="colstudentno">
+                                    <el-input
+                                            v-model="ruleForm2.colstudentno" name="colstudentno"></el-input>
+                                </el-form-item>
+                                <el-form-item label="真实姓名"
+                                              prop="colrealname">
+                                    <el-input
+                                            v-model="ruleForm2.colrealname" name="colrealname"></el-input>
                                 </el-form-item>
                                 <el-form-item>
                                     <el-button type="primary"
@@ -87,7 +98,7 @@
         </el-col>
     </el-row>
 </div>
-<script th:src="@{js/LoginStyle.js}"></script>
+<script th:src="@{js/loginstyle.js}"></script>
 <!--<body>
 &lt;!&ndash;<center>
     <h1>登录系统</h1>