完善用户注册

src/components/Home.vue

@@ -88,7 +88,7 @@
                             <!-- <span class="code">验证码</span> -->
                             <img :src="imageUrl" @click="resetImg" class="vertify_img"/>
                         </el-form-item>
-                        <div style="display: flex;flex-direction: row;justify-content: space-between">
+                        <div style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;align-content: center">
                             <el-form-item prop="remember">
                                 <el-checkbox v-model="ruleForm.remember" class="remember">记住我</el-checkbox>
                             </el-form-item>
@@ -112,7 +112,59 @@
                     title="注册"
                     :visible.sync="registerDialogVisible"
                     width="25vw">
-                注册
+                <div>
+                    <el-form :model="resisterRuleForm" :rules="rules" ref="resisterRuleForm" class="form">
+                        <el-form-item prop="username">
+                            <!-- v-model：双向绑定，placeholder：不输入内容之前提示 -->
+                            <el-input
+                                prefix-icon="el-icon-user"
+                                v-model="resisterRuleForm.username"
+                                placeholder="用户名"
+                                auto-complete="off"
+                            ></el-input>
+                        </el-form-item>
+                        <el-form-item prop="password">
+                            <!-- type：密码显示* -->
+                            <el-input
+                                prefix-icon="el-icon-unlock"
+                                :type="passwordVisible"
+                                v-model="resisterRuleForm.password"
+                                placeholder="密码"
+                                auto-complete="new-password"
+                            >
+                                <i slot="suffix" :class="icon" @click="showPass"></i>
+                            </el-input>
+                        </el-form-item>
+                        <el-form-item prop="code" style="display: flex;flex-wrap: nowrap;flex-direction: row;">
+                            <el-input
+                                prefix-icon="el-icon-mobile-phone"
+                                type="text"
+                                placeholder="点击图片更换验证码"
+                                v-model="resisterRuleForm.code"
+                                class="vertify_code"
+                                auto-complete="false"
+                                style="width: 15.8vw"
+                            ></el-input>
+                            <!-- <span class="code">验证码</span> -->
+                            <img :src="imageUrl" @click="resetImg" class="vertify_img"/>
+                        </el-form-item>
+                        <div style="display: flex;flex-direction: row;justify-content: center;align-items: center;align-content: center">
+<!--                            <el-form-item prop="remember">-->
+<!--                                <el-checkbox v-model="ruleForm.remember" class="remember">记住我</el-checkbox>-->
+<!--                            </el-form-item>-->
+
+                            <el-link type="success" @click="loginFun()">已有账户？去登录!</el-link>
+                        </div>
+
+                        <div class="login-btn" style="margin-top: 10px;">
+                            <el-button type="primary" @click="resisterForm('resisterRuleForm')"
+                            >注册
+                            </el-button
+                            >
+                            <el-button @click="resetForm('ruleForm')">重置</el-button>
+                        </div>
+                    </el-form>
+                </div>
             </el-dialog>
         </el-main>
     </el-container>
@@ -137,6 +189,11 @@ export default {
                 code: null,
                 remember:null
             },
+            resisterRuleForm: {
+                username: null,
+                password: null,
+                code: null,
+            },
             rules: {
                 username: [
                     // required：规则，trigger：失去焦点触发
@@ -158,6 +215,12 @@ export default {
         closeLogin(){
             this.loginDialogVisible=false;
         },
+        openResister(){
+            this.registerDialogVisible=true;
+        },
+        closeRegister(){
+            this.registerDialogVisible=false;
+        },
         // ******登录*****
         account() {
             // console.log(this.getCookie("username"));
@@ -261,13 +324,72 @@ export default {
                 this.icon = "el-icon-lock";
             }
         },
+        loginFun(){
+            this.loginDialogVisible = true;
+            this.registerDialogVisible = false;
+        },
         // ******登录方法结束*****
 
         // ----------注册------------
         registerFun() {
             this.loginDialogVisible = false;
             this.registerDialogVisible = true;
-        }
+        },
+        resisterForm(formName) {
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    //取参数
+                    // let params = new URLSearchParams();
+                    // params.append("username", this.ruleForm.username);
+                    // params.append("password", this.ruleForm.password);
+                    // params.append("code", this.ruleForm.code);
+                    // params.append("remember",this.ruleForm.remember)
+                    if (this.checked == true) {
+                        //存入cookie
+                        this.setCookie(this.ruleForm.username, this.ruleForm.password,7); //保存7天
+                    } else {
+                        this.clearCookie();
+                    }
+
+                    //调用方法提交
+                    axios({
+                        method: 'post',
+                        // 请求的地址
+                        url: 'http://localhost:8082/helloGithub_war_exploded/userRegister',
+                        // URL 中的查询参数
+                        params: {
+                            username: this.resisterRuleForm.username,
+                            password: this.resisterRuleForm.password,
+                            code: this.resisterRuleForm.code,
+
+                        }
+                    }).then(function (res){
+                        // Vue.prototype.$message({
+                        //     message: '成功！',
+                        //     type: 'success'
+                        // });
+                        if(res.data.code===200){
+                            Vue.prototype.$notify({
+                                title: '成功',
+                                message: ('i', { style: 'color: teal'}, res.data.msg),
+                                type: 'success'
+                            });
+                        }else{
+                            Vue.prototype.$notify.error({
+                                title: '错误',
+                                message: res.data.msg
+                            });
+                        }
+                        console.log(res);
+                    });
+                } else {
+                    this.closeLogin();
+                    return false;
+                }
+                this.closeLogin();
+
+            });
+        },
         //----------注册结束----------
     }
 }