Auto Commit

.upm/store.json

-{"version":2,"languages":{"nodejs-npm":{"specfileHash":"58c9ae4e8687db16ea7925086afedf3b","lockfileHash":"2157a76123c004596bbf191d5ad4beb8"}}}

src/App.vue

-<script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
-</script>
-
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
-  </header>
-
-  <main>
-    <TheWelcome />
-  </main>
+  <router-view></router-view>
 </template>
-
-<style scoped>
-header {
-  line-height: 1.5;
+<script>
+export default {
+  name: 'App',
+}
+</script>
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+html,
+body,
+div,
+ul,
+h1,
+h2,
+h3,
+p {
+  padding: 0;
+  margin: 0;
+}
+.w100p {
+  width: 100%;
 }
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
+.txt-r {
+  text-align: right;
 }
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 </style>

src/main.js

 import { createApp } from 'vue'
 import App from './App.vue'
-
-import './assets/main.css'
-
-createApp(App).mount('#app')
+import router from './router'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+createApp(App).use(router).use(ElementPlus).mount('#app')

src/views/sign/index.css

+.page {
+  height: 100vh;
+}
+a {
+  color: blue;
+}
+.sign-box {
+  width: 400px;
+  background: #fff;
+  padding: 30px 30px;
+  border-radius: 4px;
+  box-shadow: 0 0 25px #cac6c6;
+}
+.title {
+  font-size: 20px;
+  line-height: 30px;
+  margin-bottom: 10px;
+  color: #000;
+}
+.flex {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
\ No newline at end of file

src/views/sign/register.vue

+<template>
+  <div class="page flex-center">
+    <div class="sign-box">
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <h3 class="title">系统注册</h3>
+        <el-form-item label="账号" prop="account">
+          <el-input
+            v-model="form.account"
+            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="cfpassword">
+          <el-input
+            v-model="form.cfpassword"
+            type="password"
+            placeholder="请确认密码"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="">
+          <el-button type="primary" class="w100p" @click="register"
+            >注册</el-button
+          >
+        </el-form-item>
+        <div class="txt-r">
+          <router-link to="/login">已有账号？去登录</router-link>
+        </div>
+      </el-form>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "register",
+  data() {
+    const validateCfpassword = (rule, value, callback) => {
+      if (value !== this.form.cfpassword) {
+        callback(new Error("两次密码输入不一致"));
+      } else {
+        callback();
+      }
+    };
+    return {
+      form: {
+        account: "",
+        password: "",
+        cfpassword: "",
+      },
+      rules: {
+        account: [
+          { required: true, message: "请输入用户名", trigger: ["change", "blur"] },
+          { pattern: /^[a-zA-Z][a-zA-Z0-9_-]{3,31}$/, message: '用户名由英文字母开头的长度3-32位字母、_和-组成', trigger: ["change", "blur"] },
+        ],
+        password: {
+          required: true,
+          min: 6,
+          message: "请输入至少6个字符的密码",
+          trigger: ["change", "blur"],
+        },
+        cfpassword: [
+          {
+            required: true,
+            message: "请确认密码",
+            trigger: ["change", "blur"],
+          },
+          {
+            validator: validateCfpassword,
+            trigger: ["change", "blur"],
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    register() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          // 模拟像后台请求数据
+          const post = (params) => {
+            // 模拟后台比对数据
+            return new Promise((resolve, reject) => {
+              const { account, password } = params
+              let db_user = localStorage.getItem("db_user");
+              if (db_user) {
+                db_user = JSON.parse(db_user);
+              } else {
+                db_user = []
+              }
+              if (!db_user.find((v) => v.account === account)) {
+                db_user.push({ account, password });
+                localStorage.setItem("db_user", JSON.stringify(db_user));
+                resolve ({ msg: '注册成功！'});
+              } else {
+                reject({msg: `用户名：${account}已存在！`});
+              }
+            })
+          };
+          post(this.form).then((res) => {
+            alert(`${res.msg}用户名：${this.form.account},密码： ${this.form.password}` );
+            this.$router.push("/");
+          }).catch(err => {
+            alert(err.msg);
+          })
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="css">
+@import url(./index.css);
+</style>
\ No newline at end of file