注册登录功能开发

src/api/UserApi.ts

@@ -18,13 +18,22 @@ interface User {
   registerTime: string;
 }
 
+const PasswordSult = '4a6d74126bfd06d69406fcccb7e7d5d9'; // 密码加盐
+function encryptPassword(password: string): string {
+  const md5 = new Md5();
+  return md5.appendStr(`${password}${PasswordSult}`).end() as string;
+}
+
 /**
  * 用户注册
  * @param info
  * @returns
  */
 export async function register(info: RegisterInfo): Promise<User> {
-  const response = await api.post(`${UserUriBase}/register`, info);
+  const response = await api.post(`${UserUriBase}/register`, {
+    ...info,
+    password: encryptPassword(info.password),
+  });
   return response.data as User;
 }
 
@@ -33,21 +42,14 @@ interface LoginInfo {
   password: string;
 }
 
-const PasswordSult = 'sdfs';
-
 /**
  * 用户登录
  * @param loginInfo
  * @returns
  */
 export async function login(loginInfo: LoginInfo): Promise<string> {
-  const md5 = new Md5();
-  const encryptedPassword = md5
-    .appendStr(`${loginInfo.password}${PasswordSult}`)
-    .end();
-  const info = { ...loginInfo, password: encryptedPassword };
-  console.log(info);
-  const response = await api.post(`${UserUriBase}/login`, loginInfo);
+  const info = { ...loginInfo, password: encryptPassword(loginInfo.password) };
+  const response = await api.post(`${UserUriBase}/login`, info);
   return response.data;
 }
 

src/pages/UserLogin.vue

@@ -38,7 +38,7 @@
               </div>
 
               <div class="text-center">
-                <q-btn label="Login" type="submit" color="primary" />
+                <q-btn label="登录" type="submit" color="primary" />
               </div>
             </q-form>
           </q-card-section>
@@ -57,6 +57,7 @@ import { reactive } from 'vue';
 import { useRouter } from 'vue-router';
 
 const $q = useQuasar();
+const router = useRouter();
 
 const loginInfo = reactive({
   account: '',
@@ -64,11 +65,10 @@ const loginInfo = reactive({
 });
 
 async function doLogin() {
-  console.log(loginInfo);
   try {
     const token = await login(loginInfo);
     saveJwtToken(token);
-    useRouter().push({ name: 'home' });
+    router.push({ name: 'home' });
   } catch (err) {
     const apiErr = err as ApiError;
     $q.notify({

src/pages/UserRegister.vue

@@ -0,0 +1,94 @@
+<template>
+  <q-layout>
+    <q-page-container>
+      <q-page class="flex bg-image flex-center">
+        <q-card
+          v-bind:style="$q.screen.lt.sm ? { width: '80%' } : { width: '30%' }"
+          style="min-width: 350px"
+        >
+          <q-card-section>
+            <q-avatar size="100px" class="absolute-center shadow-10">
+              <img src="icons/favicon-96x96.png" />
+            </q-avatar>
+          </q-card-section>
+          <q-card-section>
+            <div class="text-center q-pt-lg">
+              <div class="col text-h6 ellipsis">注册</div>
+            </div>
+          </q-card-section>
+          <q-card-section>
+            <q-form @submit="doRegister" class="q-gutter-md">
+              <q-input
+                filled
+                v-model="loginInfo.name"
+                label="姓名"
+                lazy-rules
+              />
+
+              <q-input
+                filled
+                v-model="loginInfo.mobile"
+                label="手机号"
+                lazy-rules
+              />
+
+              <q-input
+                type="password"
+                filled
+                v-model="loginInfo.password"
+                label="密码"
+                lazy-rules
+              />
+
+              <div class="text-center q-gutter-md">
+                <q-btn label="注册" type="submit" color="primary" />
+                <q-btn label="取消" to="/login" color="secondary" />
+              </div>
+            </q-form>
+          </q-card-section>
+        </q-card>
+      </q-page>
+    </q-page-container>
+  </q-layout>
+</template>
+
+<script setup lang="ts">
+import { useQuasar } from 'quasar';
+import { register } from 'src/api/UserApi';
+import { ApiError } from 'src/boot/axios';
+import { reactive } from 'vue';
+import { useRouter } from 'vue-router';
+
+const $q = useQuasar();
+const router = useRouter();
+
+const loginInfo = reactive({
+  name: '',
+  mobile: '',
+  password: '',
+});
+
+async function doRegister() {
+  console.log(loginInfo);
+  try {
+    await register(loginInfo);
+    $q.notify({
+      type: 'positive',
+      message: '注册成功',
+    });
+    router.push({ name: 'login' });
+  } catch (err) {
+    const apiErr = err as ApiError;
+    $q.notify({
+      type: 'negative',
+      message: apiErr.title,
+    });
+  }
+}
+</script>
+
+<style>
+.bg-image {
+  background-image: linear-gradient(135deg, #5481fd 0%, #0e02b1 80%);
+}
+</style>