前端增加注册功能

ruoyi-framework/src/main/java/com/ruoyi/framework/web/service/SysRegisterService.java

@@ -46,10 +46,10 @@ public class SysRegisterService
 
         // 验证码开关
         boolean captchaEnabled = configService.selectCaptchaEnabled();
-        if (captchaEnabled)
-        {
-            validateCaptcha(username, registerBody.getCode(), registerBody.getUuid());
-        }
+//        if (captchaEnabled)
+//        {
+//            validateCaptcha(username, registerBody.getCode(), registerBody.getUuid());
+//        }
 
         if (StringUtils.isEmpty(username))
         {

vue2/vue/src/components/Register.vue

@@ -1,57 +1,170 @@
 <template>
-  <div class="login-container">
-    <div class="login-box">
-      <h2>注册</h2>
-      <form @submit.prevent="register">
-        <div class="input-group">
-          <i class="fas fa-user"></i>
-          <input type="text" v-model="username" placeholder="用户名" required />
-        </div>
-        <div class="input-group">
-          <i class="fas fa-lock"></i>
-          <input type="password" v-model="password" placeholder="密码" required />
-        </div>
-        <div class="input-group">
-          <i class="fas fa-lock"></i>
-          <input type="password" v-model="confirmPassword" placeholder="确认密码" required />
-        </div>
-        <button type="submit" class="login-button">注册</button>
-      </form>
-    </div>
+  <div id="register">
+    <el-row class="full-height" justify="center" align="middle">
+      <el-col :span="8">
+        <el-card shadow="never">
+          <h2 class="title">用户注册</h2>
+          <el-form :model="form" :rules="rules" ref="form" label-width="120px">
+            <el-form-item label="用户名" prop="username">
+              <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
+            </el-form-item>
+
+            <el-form-item label="密码" prop="password">
+              <el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
+            </el-form-item>
+
+            <el-form-item label="确认密码" prop="confirmPassword">
+              <el-input v-model="form.confirmPassword" type="password" placeholder="确认密码"></el-input>
+            </el-form-item>
+
+            <el-form-item>
+              <el-button type="primary" @click="submitForm" :loading="loading" style="width: 100%;">注册</el-button>
+            </el-form-item>
+
+            <!-- 让“返回登录”按钮与“注册”按钮同行 -->
+            <el-form-item>
+              <el-row gutter={10}>
+                <el-col :span="12" class="text-left">
+                  <el-button @click="goToLogin" type="text">返回登录</el-button>
+                </el-col>
+                <el-col :span="12" class="text-right">
+                  <el-button @click="clearForm" type="text" style="color: #999;">清除表单</el-button>
+                </el-col>
+              </el-row>
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
-import axios from 'axios';
+import axios from "axios";
 
 export default {
   data() {
     return {
-      username: '',
-      password: '',
-      confirmPassword: ''
+      loading: false,
+      form: {
+        username: '',
+        password: '',
+        confirmPassword: ''
+      },
+      rules: {
+        username: [
+          {required: true, message: '请输入用户名', trigger: 'blur'},
+          {min: 3, max: 20, message: '用户名长度在 3 到 20 个字符之间', trigger: 'blur'}
+        ],
+        password: [
+          {required: true, message: '请输入密码', trigger: 'blur'},
+          {min: 6, message: '密码长度不能小于 6 个字符', trigger: 'blur'}
+        ],
+        confirmPassword: [
+          {required: true, message: '请确认密码', trigger: 'blur'},
+          {validator: this.checkConfirmPassword, trigger: 'blur'}
+        ]
+      }
     };
   },
   methods: {
-    async register() {
-      if (this.password !== this.confirmPassword) {
-        alert('密码不匹配');
-        return;
-      }
+    async submitForm() {
+      this.loading = true;
       try {
-        const response = await axios.post('http://localhost:8080/register', {
-          username: this.username,
-          password: this.password
-        });
-        console.log('注册成功', response.data);
+        const response = await axios.post('http://localhost:8080/register', this.form);
+        if (response.data.code === 200) {
+          this.$message.success('注册成功');
+          await this.$router.push('/login');
+        } else {
+          this.$message.error('注册失败, ' + response.data.msg);
+        }
       } catch (error) {
-        console.error('注册失败', error);
+        this.$message.error('注册失败, ' + error);
+      } finally {
+        this.loading = false;
+      }
+    },
+    checkConfirmPassword(rule, value, callback) {
+      if (value !== this.form.password) {
+        callback(new Error('两次输入的密码不一致'));
+      } else {
+        callback();
       }
+    },
+    goToLogin() {
+      this.$router.push('/login');
+    },
+    clearForm() {
+      this.$refs.form.resetFields();
     }
   }
 };
 </script>
 
 <style scoped>
-/* 使用与 Login.vue 相同的样式 */
+#register {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.title {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.el-card {
+  padding: 20px;
+}
+
+.el-form-item {
+  margin-bottom: 20px;
+}
+
+.el-col {
+  width: 100%;
+}
+
+.el-card {
+  width: 100%;
+  max-width: 500px; /* Limit card width */
+}
+
+.el-form-item .el-input {
+  padding-right: 10px; /* Improve input field padding */
+}
+
+.el-button {
+  width: 100%; /* Make button full width */
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.el-row {
+  display: flex;
+  justify-content: space-between;
+}
+
+.el-button[type="text"] {
+  font-size: 14px;
+  color: #409EFF;
+}
+
+.el-button[type="primary"] {
+  background-color: #409EFF;
+  border-color: #409EFF;
+}
+
+.el-button[type="primary"]:hover {
+  background-color: #66b1ff;
+  border-color: #66b1ff;
+}
 </style>