Merge pull request #4 from github-learning/dev

Dev

Author: github-learning

README1.md

@@ -20,3 +20,6 @@
 
 前后流程 角色 /
 是否踩过坑
+
+zrh test
+test2

src/apis/user.ts

@@ -19,17 +19,31 @@ export interface IUserLoginData {
   username: string
   password: string
 }
-
+export interface IUserRegisterData {
+  username: string
+  password: string
+  verPassword: string
+}
 export interface ILoginResponseData {
   token: string
 }
+
+export interface IRegisterResponseData {
+  id: string
+  username: string
+}
 // 登录接口
 export const login = (
   data: IUserLoginData
 ): Promise<Api<ILoginResponseData>> => {
   return request.post('/auth/login', data)
 }
-
+// 注册接口
+export const register = (
+  data: IUserRegisterData
+): Promise<Api<IRegisterResponseData>> => {
+  return request.post('/auth/register', data)
+}
 export interface IUsers {
   users: Profile[]
   total: number

src/main.ts

@@ -7,6 +7,7 @@ import element from './plugins/element'
 import directives from './directives/index'
 // 注册持久化插件
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+import './style.css'
 import './permission'
 const pinia = createPinia()
 // 如果您正在使用CDN引入，请删除下面一行。

src/permission.ts

@@ -3,7 +3,7 @@ import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'
 import { getToken } from '@/utils'
 NProgress.configure({ showSpinner: false })
-const whiteList = ['/login']
+const whiteList = ['/login', '/register']
 router.beforeEach(async (to) => {
   // 获取用户信息
   NProgress.start()

src/router/index.ts

@@ -42,7 +42,11 @@ const constantRoutes: RouteRecordRaw[] = [
     name: 'Login',
     component: () => import('@/views/login/index.vue')
   },
-
+  {
+    path: '/register',
+    name: 'register',
+    component: () => import('@/views/register/index.vue')
+  },
   {
     path: '/',
     name: 'layouts',

src/style.css

@@ -1,4 +1,4 @@
-:root {
+/* :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
@@ -11,18 +11,19 @@
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-}
+} */
 
 a {
+  text-decoration: none;
   font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
+  color: #646cffd7;
 }
+
 a:hover {
   color: #535bf2;
 }
 
-body {
+/* body {
   margin: 0;
   display: flex;
   place-items: center;
@@ -76,4 +77,42 @@ button:focus-visible {
   button {
     background-color: #f9f9f9;
   }
+} */
+
+/* 登陆注册页面样式 */
+.register-container,
+.login-container {
+  @apply min-h-screen bg-indigo-500;
+}
+
+.register-container .left,
+.register-container .right,
+.login-container .left,
+.login-container .right {
+  @apply flex items-center justify-center;
+}
+
+.register-container .right,
+.login-container .right {
+  @apply bg-light-50 flex-col;
+}
+
+.left > div > div:first-child {
+  @apply font-bold text-5xl text-light-50 mb-4;
+}
+
+.left > div > div:last-child {
+  @apply text-gray-200 text-sm;
+}
+
+.right .title {
+  @apply font-bold text-3xl text-gray-800;
+}
+
+.right > div {
+  @apply flex items-center justify-center my-5 text-gray-300 space-x-2;
+}
+
+.right .line {
+  @apply h-[1px] w-16 bg-gray-200;
 }

src/utils/helpers.ts

@@ -0,0 +1,7 @@
+export const sleep = (time: number = 1000): Promise<void> => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve()
+    }, time)
+  })
+}

src/views/login/index.vue

@@ -49,6 +49,10 @@
             >登 录</el-button
           >
         </el-form-item>
+        <span class="text-slate-400 text-sm float-right m-2"
+          >还没有账号？ 请
+          <router-link to="register"> 点击这里注册 </router-link>
+        </span>
       </el-form>
     </el-col>
   </el-row>
@@ -121,30 +125,4 @@ onBeforeUnmount(() => {
 })
 </script>
 
-<style scoped>
-.login-container {
-  @apply min-h-screen bg-indigo-500;
-}
-.login-container .left,
-.login-container .right {
-  @apply flex items-center justify-center;
-}
-.login-container .right {
-  @apply bg-light-50 flex-col;
-}
-.left > div > div:first-child {
-  @apply font-bold text-5xl text-light-50 mb-4;
-}
-.left > div > div:last-child {
-  @apply text-gray-200 text-sm;
-}
-.right .title {
-  @apply font-bold text-3xl text-gray-800;
-}
-.right > div {
-  @apply flex items-center justify-center my-5 text-gray-300 space-x-2;
-}
-.right .line {
-  @apply h-[1px] w-16 bg-gray-200;
-}
-</style>
+<style scoped></style>

src/views/register/index.vue

@@ -0,0 +1,150 @@
+<template>
+  <el-row class="register-container">
+    <el-col :lg="16" :md="12" class="left">
+      <div>
+        <div>欢迎光临</div>
+        <div>此站点是《vue3 + vite5 实战后台开发》演示项目</div>
+      </div>
+    </el-col>
+    <el-col :lg="8" :md="12" class="right">
+      <p class="title">用户注册</p>
+      <div>
+        <span class="line"></span>
+        <div>账号注册</div>
+        <span class="line"></span>
+      </div>
+      <el-form
+        ref="ruleFormRef"
+        class="w-[250px]"
+        :model="registerFormData"
+        :rules="rules"
+      >
+        <el-form-item prop="username">
+          <el-input
+            v-model="registerFormData.username"
+            autocomplete="off"
+            placeholder="请输入用户名"
+          >
+            <template #prefix>
+              <el-icon><user /></el-icon>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item prop="password">
+          <el-input
+            v-model="registerFormData.password"
+            type="password"
+            autocomplete="off"
+            placeholder="请输入密码"
+            show-password
+          >
+            <template #prefix>
+              <el-icon><lock /></el-icon>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item prop="verPassword">
+          <el-input
+            type="password"
+            v-model.number="registerFormData.verPassword"
+            placeholder="请确认密码"
+            show-password
+          >
+            <template #prefix>
+              <el-icon><lock /></el-icon>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            round
+            type="primary"
+            color="#626aef"
+            :loading="loading"
+            @click="submitForm(ruleFormRef)"
+            class="w-[250px]"
+          >
+            注册
+          </el-button>
+        </el-form-item>
+        <span class="text-slate-400 text-sm float-right m-2"
+          >已有帐号？返回
+          <router-link to="login"> 登陆 </router-link>
+        </span>
+      </el-form>
+    </el-col>
+  </el-row>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { reactive, ref } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import { register } from '@/apis/user'
+import { sleep } from '@/utils/helpers'
+const { proxy } = getCurrentInstance()!
+
+const ruleFormRef = ref<FormInstance>()
+const loading = ref(false)
+
+interface typeRegiser extends Record<string, string> {
+  username: string
+  password: string
+  verPassword: string
+}
+const registerFormData: typeRegiser = reactive({
+  username: '',
+  password: '',
+  verPassword: ''
+})
+const router = useRouter()
+
+const validatePass = (
+  _: unknown,
+  value: string,
+  callback: (error?: string | Error) => void
+) => {
+  if (value === '') {
+    callback(new Error('请确认密码'))
+  } else if (value.toString() !== registerFormData.password) {
+    callback(new Error('两次密码不一致'))
+  } else {
+    callback()
+  }
+}
+const rules = reactive<FormRules<typeof registerFormData>>({
+  username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
+  password: [{ required: true, trigger: 'blur', message: '请输入密码' }],
+  verPassword: [{ validator: validatePass, trigger: 'blur' }]
+})
+
+const submitForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+
+  formEl.validate(async (valid) => {
+    if (valid) {
+      loading.value = true
+      await register(registerFormData)
+        .then(async (res) => {
+          proxy?.$message.success(res.message)
+          await sleep()
+          router.push({
+            path: '/login'
+          })
+        })
+        .catch(() => {
+          for (const key in registerFormData) {
+            if (Object.prototype.hasOwnProperty.call(registerFormData, key)) {
+              registerFormData[key] = ''
+            }
+          }
+        })
+        .finally(() => {
+          loading.value = false
+        })
+    }
+  })
+}
+</script>
+
+<style lang="scss" scoped></style>