增加造数的页面

src/components/User/Register.vue

@@ -0,0 +1,143 @@
+<template>
+  <div id="backgroud">
+    <div class="register-head" style="padding-top: 20px"></div>
+    <div class="model">
+      <div class="location-title"><h1>注册</h1></div>
+
+      <el-form ref="ruleForm" :model="ruleForm" status-icon :rules="rules" label-width="100px" class="demo-ruleForm">
+        <el-form-item label="学号" prop="studentId">
+          <el-input v-model="ruleForm.studentId" type="text" placeholder="学号" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="密码" prop="password">
+          <el-input v-model="ruleForm.password" type="password" placeholder="密码" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="确认密码" prop="checkPass">
+          <el-input v-model="ruleForm.checkPass" type="password" placeholder="确认密码" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="姓名" prop="name">
+          <el-input v-model="ruleForm.name" placeholder="姓名" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="性别" prop="gender">
+          <el-input v-model="ruleForm.gender" placeholder="性别" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="学院" prop="faculty">
+          <el-input v-model="ruleForm.faculty" type="text" placeholder="学院" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="年级" prop="grade">
+          <el-input v-model="ruleForm.grade" type="text" placeholder="年级" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button class="enter-btn" type="primary" :disabled="!select" @click="submitForm('ruleForm')">
+            立即注册
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Register } from '@/api/Userapi'
+
+export default {
+  name: 'Register',
+  data() {
+    const validatePass = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请输入密码'))
+        return
+      }
+      if (this.ruleForm.password !== '') {
+        this.$refs.ruleForm.validateField('checkPass')
+      }
+      callback()
+    }
+    const validatePass2 = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请再次输入密码'))
+      } else if (value !== this.ruleForm.password) {
+        callback(new Error('两次输入密码不一致!'))
+      } else {
+        callback()
+      }
+    }
+    const validateStudentId = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请输入学号'))
+        return
+      }
+      callback()
+    }
+
+    return {
+      select: true,
+      ruleForm: {
+        studentId: '',
+        password: '',
+        checkPass: '',
+        name: '',
+        gender: '',
+        faculty: '',
+        grade: ''
+      },
+      rules: {
+        studentId: [{ required: true, validator: validateStudentId, trigger: 'blur' }],
+        password: [{ required: true, validator: validatePass, trigger: 'blur' }],
+        checkPass: [{ required: true, validator: validatePass2, trigger: 'blur' }],
+        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
+        gender: [{ required: true, message: '请输入性别', trigger: 'blur' }],
+        faculty: [{ required: true, message: '请输入学院', trigger: 'blur' }],
+        grade: [{ required: true, message: '请输入年级', trigger: 'blur' }]
+      }
+    }
+  },
+  methods: {
+    open(message) {
+      this.$alert(message, '提示', {
+        confirmButtonText: '确定'
+      })
+    },
+    handleRegister() {
+      Register({
+        studentId: this.ruleForm.studentId,
+        password: this.ruleForm.password,
+        name: this.ruleForm.name,
+        gender: this.ruleForm.gender,
+        faculty: this.ruleForm.faculty,
+        grade: this.ruleForm.grade
+      }).then(data => {
+        if (data.code === 200 && data.success === 'true') {
+          this.open('注册成功')
+          this.$router.push({ name: 'login' })
+        } else {
+          this.open(data.message)
+        }
+      })
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          this.handleRegister()
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style>
+@import "../../assets/css/Form.css";
+
+.location-title {
+  text-align: center;
+}
+
+.register-head {
+  position: absolute;
+}
+
+.el-input {
+  float: left;
+  width: 80%;
+}
+</style>