前后端实现用户注册

src/views/login/register.vue

@@ -48,7 +48,7 @@
               />
             </el-col>
           </el-form-item>
-          <el-form-item label="姓名" prop="name">
+          <!-- <el-form-item label="姓名" prop="name">
             <el-col :span="10">
               <el-input v-model="ruleForm.name" placeholder="请输入姓名" />
             </el-col>
@@ -72,7 +72,7 @@
             <el-col :span="10">
               <el-input v-model="ruleForm.position" placeholder="职位" />
             </el-col>
-          </el-form-item>
+          </el-form-item> -->
 
           <el-form-item label="密码" prop="pwd">
             <el-col :span="10">
@@ -94,23 +94,23 @@
               />
             </el-col>
           </el-form-item>
-          <el-form-item label="手机号" prop="phoneId">
+          <!-- <el-form-item label="手机号" prop="phoneId">
             <el-col :span="10">
               <el-input
                 v-model="ruleForm.phoneId"
                 placeholder="输入手机号并点击发送验证码"
               />
             </el-col>
-            <!-- <el-button
+            <el-button
               :loading="codeLoading"
               :disabled="isDisable"
               size="small"
               round
               @click="sendMsg"
-            >发送验证码不可用</el-button> -->
+            >发送验证码不可用</el-button>
 
             <span class="status">{{ statusMsg }}</span>
-          </el-form-item>
+          </el-form-item> -->
           <el-form-item>
             <el-button
               type="primary"
@@ -128,6 +128,7 @@
 </template>
 
 <script>
+import request from '@/utils/request'
 export default {
   name: 'Register',
   data() {
@@ -212,33 +213,61 @@ export default {
   },
   methods: {
     // 用户注册
-    register: function() {
-      this.$refs['ruleForm'].validate((valid) => {
+    register() {
+      if (this.form.password !== this.form.confirm) {
+        this.$message({
+          type: 'error',
+          message: '2次密码输入不一致！'
+        })
+        return
+      }
+
+      this.$refs['form'].validate((valid) => {
         if (valid) {
-          const user = {
-            // code: this.ruleForm.code,
-            // phoneId: this.ruleForm.phoneId
-            // password: encrypt(this.ruleForm.pwd)
-          }
-          // eslint-disable-next-line no-undef
-          register(user)
-            .then((res) => {
-              console.log(res)
+          request.post('/user/register', this.form).then(res => {
+            if (res.code === '0') {
+              this.$message({
+                type: 'success',
+                message: '注册成功'
+              })
+              this.$router.push('/login') // 登录成功之后进行页面的跳转，跳转到主页
+            } else {
               this.$message({
-                showClose: true,
-                message: '注册成功，正在跳转到登录界面...',
-                type: 'success'
+                type: 'error',
+                message: res.msg
               })
-              setTimeout(() => {
-                this.$router.push('/')
-              }, 2000)
-            })
-            .catch((err) => {
-              console.log(err.response.data.message)
-            })
+            }
+          })
         }
       })
     }
+    // register: function() {
+    //   this.$refs['ruleForm'].validate((valid) => {
+    //     if (valid) {
+    //       const user = {
+    //         // code: this.ruleForm.code,
+    //         // phoneId: this.ruleForm.phoneId
+    //         // password: encrypt(this.ruleForm.pwd)
+    //       }
+    //       // eslint-disable-next-line no-undef
+    //       register(user)
+    //         .then((res) => {
+    //           console.log(res)
+    //           this.$message({
+    //             showClose: true,
+    //             message: '注册成功，正在跳转到登录界面...',
+    //             type: 'success'
+    //           })
+    //           setTimeout(() => {
+    //             this.$router.push('/')
+    //           }, 2000)
+    //         })
+    //         .catch((err) => {
+    //           console.log(err.response.data.message)
+    //         })
+    //     }
+    //   })
+    // }
   }
 }
 </script>