feat: 增加用户注册功能

src/api/resource.js

@@ -0,0 +1,5 @@
+import request from '../utils/request'
+
+export function getImgVerifyCode() {
+    return request.get('/resource/imgVerifyCode');
+}

src/api/user.js

@@ -0,0 +1,5 @@
+import request from '../utils/request'
+
+export function register(params) {
+    return request.post('/user/register', params);
+}

src/components/common/Top.vue

@@ -1,7 +1,9 @@
  <template>
   <div class="topMain">
     <div class="box_center cf">
-      <router-link :to="{ name: 'home' }" class="logo fl"><img :src="logo" alt="小说精品屋" /></router-link>
+      <router-link :to="{ name: 'home' }" class="logo fl"
+        ><img :src="logo" alt="小说精品屋"
+      /></router-link>
       <div class="searchBar fl">
         <div class="search cf">
           <input
@@ -16,16 +18,21 @@
           ></label>
         </div>
       </div>
-      <!--
+
-        <div class="bookShelf fr" id="headerUserInfo">
+      <div class="bookShelf fr" id="headerUserInfo">
-          <a class="sj_link" href="/user/favorites.html">我的书架</a>
+        <!--
-          <span class="user_link"
+        <a class="sj_link" href="/user/favorites.html">我的书架</a>-->
-            ><i class="line mr20">|</i
+        <span v-if="!token" class="user_link"
-            ><a href="/user/login.html" class="mr15">登录</a
+          ><!--<i class="line mr20">|</i
-            ><a href="/user/register.html">注册</a></span
+          >--><a href="/user/login.html" class="mr15">登录</a>
-          >
+          <router-link :to="{ name: 'register' }">注册</router-link>
-        </div>
+        </span>
-        -->
+        <span v-if="token" class="user_link"
+          ><!--<i class="line mr20">|</i
+          >--><a class="mr15">{{nickName}}</a
+          ><a @click="logout" href="javascript:void(0)">退出</a></span
+        >
+      </div>
     </div>
   </div>
 </template>
@@ -34,23 +41,34 @@
 import logo from "@/assets/images/logo.png";
 import { reactive, toRefs, onMounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
+import { getToken, getNickName,removeToken } from "@/utils/auth";
 export default {
   name: "Top",
   setup(props, context) {
     const state = reactive({
-      keyword:''
+      keyword: "",
-    })
+      nickName: getNickName(),
+      token: getToken(),
+    });
+    state.nickName = getNickName()
+    state.token = getToken()
     const route = useRoute();
     const router = useRouter();
     state.keyword = route.query.key;
     const searchByK = () => {
-      router.push({ path: '/bookClass',query:{'key':state.keyword}});
+      router.push({ path: "/bookClass", query: { key: state.keyword } });
-      context.emit('eventSerch',state.keyword);
+      context.emit("eventSerch", state.keyword);
+    };
+    const logout = () => {
+        removeToken()
+        state.nickName = ""
+        state.token = ""
     }
     return {
       ...toRefs(state),
       logo,
-      searchByK
+      searchByK,
+      logout
     };
   },
 };

src/router/index.js

@@ -14,6 +14,11 @@ const router = createRouter({
       name: 'home',
       component: () => import('@/views/Home')
     },
+    {
+      path: '/register',
+      name: 'register',
+      component: () => import('@/views/Register')
+    },
     {
       path: '/news/:id',
       name: 'news',

src/utils/auth.js

@@ -1,9 +1,10 @@
 
 const TokenKey = 'Authorization'
 
+const nickNameKey = 'nickName'
 
 export const getToken = () => {
-    localStorage.getItem(TokenKey);
+    return localStorage.getItem(TokenKey);
 }
 
 export const setToken = (token) => {
@@ -12,4 +13,12 @@ export const setToken = (token) => {
 
 export const removeToken = () =>  {
   return localStorage.removeItem(TokenKey)
-}
+}
+
+export const setNickName = (nickName) => {
+  return localStorage.setItem(nickNameKey, nickName)
+}
+
+export const getNickName = () => {
+  return localStorage.getItem(nickNameKey);
+}

src/views/Register.vue

@@ -0,0 +1,179 @@
+<template>
+  <Header />
+
+  <div class="main box_center cf">
+    <div class="userBox cf">
+      <form method="post" action="./register.html" id="form2">
+        <div class="user_l">
+          <h3>注册小说精品屋账号</h3>
+          <ul class="log_list">
+            <li><span id="LabErr"></span></li>
+            <li>
+              <input
+                v-model="username"
+                name="txtUName"
+                type="text"
+                id="txtUName"
+                class="s_input icon_name"
+                placeholder="请输入您的手机号码"
+              />
+            </li>
+            <li>
+              <input
+                v-model="password"
+                name="txtPassword"
+                type="password"
+                id="txtPassword"
+                class="s_input icon_key"
+                placeholder="请输入密码：6-20位字母/数字"
+              />
+            </li>
+            <li class="log_code cf">
+              <input
+                v-model="velCode"
+                name="TxtChkCode"
+                type="text"
+                maxlength="4"
+                id="TxtChkCode"
+                class="s_input icon_code"
+                placeholder="请输入验证码"
+              /><img
+                style="cursor: pointer"
+                class="code_pic"
+                :src="imgVerifyCode"
+                id="chkd"
+                @click="loadImgVerifyCode"
+              />
+            </li>
+            <li>
+              <input
+                type="button"
+                name="btnRegister"
+                value="注册"
+                id="btnRegister"
+                class="btn_red"
+                @click="registerUser"
+              />
+            </li>
+          </ul>
+        </div>
+      </form>
+      <div class="user_r">
+        <p class="tit">已有账号？</p>
+        <a href="/user/login.html" class="btn_ora_white">立即登录</a>
+        <!--
+        <div class="fast_login" style="display: none">
+          <div class="fast_tit">
+            <p class="lines"></p>
+            <span class="title">其他登录方式</span>
+          </div>
+          <ul class="fast_list">
+            <li class="login_wb">
+              <a href="/"
+                ><img
+                  src="/images/login_weibo.png"
+                  alt="微博登录"
+                  class="img"
+                /><span>微博登录</span></a
+              >
+            </li>
+            <li class="login_qq">
+              <a href="/"
+                ><img
+                  src="/images/login_qq.png"
+                  alt="QQ登录"
+                  class="img"
+                /><span>QQ登录</span></a
+              >
+            </li>
+            <li class="login_wx">
+              <a href="/"
+                ><img
+                  src="/images/login_weixin.png"
+                  alt="微信登录"
+                  class="img"
+                /><span>微信登录</span></a
+              >
+            </li>
+          </ul>
+        </div>
+        -->
+      </div>
+    </div>
+  </div>
+  <Footer />
+</template>
+
+<script>
+import "@/assets/styles/user.css";
+import { reactive, toRefs, onMounted, ref } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { ElMessage } from "element-plus";
+import { getImgVerifyCode } from "@/api/resource";
+import { register } from "@/api/user";
+import { setToken,setNickName } from "@/utils/auth";
+import Header from "@/components/common/Header";
+import Footer from "@/components/common/Footer";
+export default {
+  name: "register",
+  components: {
+    Header,
+    Footer,
+  },
+  setup() {
+    const route = useRoute();
+    const router = useRouter();
+
+    const state = reactive({
+      imgVerifyCode: "",
+      sessionId: "",
+      username: "",
+      password: "",
+      velCode: "",
+    });
+    onMounted(async () => {
+      loadImgVerifyCode();
+    });
+
+    const loadImgVerifyCode = async () => {
+      const { data } = await getImgVerifyCode();
+      state.imgVerifyCode = "data:image/png;base64," + data.img;
+      state.sessionId = data.sessionId;
+    };
+
+    const registerUser = async () => {
+      if (!state.username) {
+        ElMessage.error("用户名不能为空！");
+        return;
+      }
+      if (!/^1[3|4|5|6|7|8|9][0-9]{9}/.test(state.username)) {
+        ElMessage.error("手机号格式不正确！");
+      }
+      if (!state.password) {
+        ElMessage.error("密码不能为空！");
+        return;
+      }
+      if (!state.velCode) {
+        ElMessage.error("验证码不能为空！");
+        return;
+      }
+      if (!/^\d{4}/.test(state.velCode)) {
+        ElMessage.error("验证码格式不正确！");
+        return;
+      }
+      const { data } = await register(state);
+
+      setToken(data);
+      setNickName(state.username);
+      router.push({ path: "/home" });
+    };
+
+    return {
+      ...toRefs(state),
+      loadImgVerifyCode,
+      registerUser,
+    };
+  },
+};
+</script>
+