first commit

2025-01-21 10:09:12 +08:00 · 2025-01-21 10:09:12 +08:00 · eedfd97bbd
commit eedfd97bbd
35 changed files with 5824 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}
--- a/README.md
+++ b/README.md
@ -0,0 +1,29 @@
+# big-event
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Compile and Minify for Production
+
+```sh
+npm run build
+```
--- a/index.html
+++ b/index.html
@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,26 @@
+{
+  "name": "big-event",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@vueup/vue-quill": "^1.2.0",
+    "axios": "^1.7.9",
+    "element-plus": "^2.9.3",
+    "pinia": "^2.3.0",
+    "pinia-persistedstate-plugin": "^0.1.0",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "sass": "^1.83.4",
+    "vite": "^6.0.5",
+    "vite-plugin-vue-devtools": "^7.6.8"
+  }
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+  <router-view></router-view>
+</template>
+
+
+
+<style>
+
+</style>
--- a/src/api/article.js
+++ b/src/api/article.js
@ -0,0 +1,31 @@
+import request from '@/utils/request'
+
+export const articleCategoryListService = () => {
+    /*const tokenStore = useTokenStore()
+    return request.get('/category', {
+        headers: {
+            Authorization: tokenStore.token //pinia里面定义的响应式数据不需要.value
+        }
+    })*/
+    return request.get('/category')
+}
+
+export const addCategoryService = (categoryData) => {
+    return request.post('/category', categoryData)
+}
+
+export const updateCategoryService = (categoryData) => {
+    return request.put(`/category`, categoryData)
+}
+
+export const deleteCategoryService = (id) => {
+    return request.delete(`/category?id=`+id)
+}
+
+export const articleListService = (params) => {
+    return request.get('/article', {params: params})
+}
+
+export const articleAddService = (articleData) => {
+    return request.post('/article',articleData)
+}
--- a/src/api/user.js
+++ b/src/api/user.js
@ -0,0 +1,48 @@
+import request from '@/utils/request'
+
+//注册接口
+export const userRegisterService = (registerData)=>{
+
+    const params = new URLSearchParams();
+    for(let key in registerData){
+        params.append(key,registerData[key]);
+    }
+
+     return request.post('/user/register',params);
+}
+
+//登录接口
+export const userLoginService = (loginData)=>{
+    const params = new URLSearchParams();
+    for(let key in loginData){
+        params.append(key,loginData[key]);
+    }
+
+    return request.post('/user/login',params);
+}
+
+//获取用户详细信息
+export const userInfoService = ()=>{
+    return request.get('/user/userinfo')
+}
+
+//修改个人信息
+export const userInfoUpdateService = (userInfoData)=>{
+   return request.put('/user/update',userInfoData)
+}
+
+//修改头像
+export const userAvatarUpdateService = (avatarUrl)=>{
+    const params = new URLSearchParams();
+    params.append('avatarUrl',avatarUrl)
+    return request.patch('/user/updateAvatar',params)
+}
+
+//修改密码
+export const userPasswordUpdateService = (passwordData) => {
+    return request.patch('/user/updatePwd', passwordData, {
+        headers: {
+            'Content-Type': 'application/json'
+        }
+    });
+}
--- a/src/assets/avatar.jpg
+++ b/src/assets/avatar.jpg
--- a/src/assets/base.css
+++ b/src/assets/base.css
@ -0,0 +1,86 @@
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+
+  --vt-c-indigo: #2c3e50;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+
+  --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
+
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
+
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition:
+    color 0.5s,
+    background-color 0.5s;
+  line-height: 1.6;
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
+    sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
--- a/src/assets/cover.jpg
+++ b/src/assets/cover.jpg
--- a/src/assets/default.png
+++ b/src/assets/default.png
--- a/src/assets/login_bg.jpg
+++ b/src/assets/login_bg.jpg
--- a/src/assets/login_title.png
+++ b/src/assets/login_title.png
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/logo.svg
+++ b/src/assets/logo.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
--- a/src/assets/logo2.png
+++ b/src/assets/logo2.png
--- a/src/assets/main.css
+++ b/src/assets/main.css
@ -0,0 +1,35 @@
+@import './base.css';
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  font-weight: normal;
+}
+
+a,
+.green {
+  text-decoration: none;
+  color: hsla(160, 100%, 37%, 1);
+  transition: 0.4s;
+  padding: 3px;
+}
+
+@media (hover: hover) {
+  a:hover {
+    background-color: hsla(160, 100%, 37%, 0.2);
+  }
+}
+
+@media (min-width: 1024px) {
+  body {
+    display: flex;
+    place-items: center;
+  }
+
+  #app {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: 0 2rem;
+  }
+}
--- a/src/assets/main.scss
+++ b/src/assets/main.scss
@ -0,0 +1,20 @@
+body {
+  margin: 0;
+  background-color: #f5f5f5;
+}
+
+/* fade-slide */
+.fade-slide-leave-active,
+.fade-slide-enter-active {
+  transition: all 0.3s;
+}
+
+.fade-slide-enter-from {
+  transform: translateX(-30px);
+  opacity: 0;
+}
+
+.fade-slide-leave-to {
+  transform: translateX(30px);
+  opacity: 0;
+}
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,21 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import { createPinia } from 'pinia';
+import {createPersistedState} from'pinia-persistedstate-plugin'
+
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+
+const pinia = createPinia()
+const persist = createPersistedState()
+
+const app = createApp(App)
+
+pinia.use(persist)
+app.use(pinia)
+app.use(ElementPlus,{locale:zhCn})
+app.use(router)
+
+app.mount('#app')
--- a/src/router/index.js
+++ b/src/router/index.js
@ -0,0 +1,36 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+import LoginView from '@/views/LoginView.vue'
+import LayoutView from '@/views/LayoutView.vue';
+
+import ArticleCategoryVue from '@/views/article/ArticleCategory.vue'
+import ArticleManageVue from '@/views/article/ArticleManage.vue'
+import UserAvatarVue from '@/views/user/UserAvatar.vue'
+import UserInfoVue from '@/views/user/UserInfo.vue'
+import UserResetPasswordVue from '@/views/user/UserResetPassword.vue'
+
+
+//define the routing table
+const routes = [
+    {path: '/login', component: LoginView},
+    {
+        path: '/', 
+        component: LayoutView,
+        redirect: '/article/category',
+        children:[
+            { path: '/article/category', component: ArticleCategoryVue },
+            { path: '/article/manage', component: ArticleManageVue },
+            { path: '/user/info', component: UserInfoVue },
+            { path: '/user/avatar', component: UserAvatarVue },
+            { path: '/user/resetPassword', component: UserResetPasswordVue }
+        ]
+    },
+]
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes: routes,
+})
+
+//export router
+export default router
--- a/src/stores/token.js
+++ b/src/stores/token.js
@ -0,0 +1,31 @@
+//定义store
+import {defineStore} from 'pinia'
+import {ref} from 'vue'
+/* 
+    第一个参数:名字,唯一性
+    第二个参数:函数,函数的内部可以定义状态的所有内容
+
+    返回值: 函数
+*/
+export const useTokenStore = defineStore('token',()=>{
+    //定义状态的内容
+
+    //1.响应式变量
+    const token = ref('')
+
+    //2.定义一个函数,修改token的值
+    const setToken = (newToken)=>{
+        token.value = newToken
+    }
+
+    //3.函数,移除token的值
+    const removeToken = ()=>{
+        token.value=''
+    }
+
+    return {
+        token,setToken,removeToken
+    }
+},{
+    persist:true//持久化存储
+});
--- a/src/stores/userInfo.js
+++ b/src/stores/userInfo.js
@ -0,0 +1,21 @@
+import {defineStore} from 'pinia'
+import {ref} from 'vue'
+const useUserInfoStore = defineStore('userInfo',()=>{
+    //定义状态相关的内容
+
+    const info = ref({})
+
+    const setInfo = (newInfo)=>{
+        info.value = newInfo
+    }
+
+
+    const removeInfo = ()=>{
+        info.value = {}
+    }
+
+    return {info,setInfo,removeInfo}
+
+},{persist:true})
+
+export default useUserInfoStore;
--- a/src/utils/request.js
+++ b/src/utils/request.js
@ -0,0 +1,53 @@
+//定制请求的实例
+
+//导入axios  npm install axios
+import axios from 'axios';
+import { useTokenStore } from '@/stores/token';
+import { ElMessage } from 'element-plus';
+//定义一个变量,记录公共的前缀  ,  baseURL
+const baseURL = '/api';
+const instance = axios.create({baseURL})
+
+//添加请求拦截器
+instance.interceptors.request.use(
+    (config)=>{
+        //获取token
+        const tokenStore = useTokenStore();
+        //给请求头添加token
+        if(tokenStore.token){
+            config.headers.Authorization = tokenStore.token;
+        }
+        return config;
+    },
+    err=>{
+        //请求错误使用把异步的状态转化成失败的状态
+        return Promise.reject(err);
+    }
+)
+
+import router from '@/router';
+
+//添加响应拦截器
+instance.interceptors.response.use(
+    result=>{
+        if (result.data.code === 0){
+            return result.data;
+        } else{
+            ElMessage.error(result.data.message?result.data.message:'服务异常');
+            return Promise.reject(result.data);
+        }
+    },
+    err=>{
+        //未登录，提示，并且跳转登录页面
+        if (err.response.status === 401){
+            ElMessage.info('请先登录');
+            router.push('/login');
+        }else{
+            ElMessage.error('服务异常');
+        }
+        
+        return Promise.reject(err);//异步的状态转化成失败的状态
+    }
+)
+
+export default instance;
--- a/src/views/LayoutView.vue
+++ b/src/views/LayoutView.vue
@ -0,0 +1,290 @@
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import {
+    Management,
+    Promotion,
+    UserFilled,
+    User,
+    Crop,
+    EditPen,
+    SwitchButton,
+    CaretBottom
+} from '@element-plus/icons-vue';
+import avatar from '@/assets/default.png';
+import { userInfoService } from '@/api/user.js';
+import useUserInfoStore from '@/stores/userInfo.js';
+import { useTokenStore } from '@/stores/token.js';
+import { useRouter } from 'vue-router';
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+const tokenStore = useTokenStore();
+const userInfoStore = useUserInfoStore();
+const router = useRouter();
+const isPortrait = ref(false);
+
+const getUserInfo = async () => {
+    let result = await userInfoService();
+    userInfoStore.setInfo(result.data);
+};
+
+const handleCommand = (command) => {
+    if (command === 'logout') {
+        ElMessageBox.confirm(
+            '您确认要退出吗?',
+            '温馨提示',
+            {
+                confirmButtonText: '确认',
+                cancelButtonText: '取消',
+                type: 'warning',
+            }
+        )
+            .then(async () => {
+                tokenStore.removeToken();
+                userInfoStore.removeInfo();
+                router.push('/login');
+                ElMessage({
+                    type: 'success',
+                    message: '退出登录成功',
+                });
+            })
+            .catch(() => {
+                ElMessage({
+                    type: 'info',
+                    message: '用户取消了退出登录',
+                });
+            });
+    } else {
+        router.push('/user/' + command);
+    }
+};
+
+const checkIsPortrait = () => {
+    isPortrait.value = window.innerWidth / window.innerHeight < 1;
+};
+
+onMounted(() => {
+    checkIsPortrait();
+    window.addEventListener('resize', checkIsPortrait);
+});
+
+onUnmounted(() => {
+    window.removeEventListener('resize', checkIsPortrait);
+});
+
+getUserInfo();
+</script>
+
+<template>
+    <el-container class="layout-container">
+        <!-- 左侧菜单（宽高比大于1时显示） -->
+        <el-aside v-if="!isPortrait" width="200px">
+            <div class="el-aside__logo"></div>
+            <el-menu active-text-color="#ffd04b" background-color="#232323" text-color="#fff" router>
+                <el-menu-item index="/article/category">
+                    <el-icon>
+                        <Management />
+                    </el-icon>
+                    <span>文章分类</span>
+                </el-menu-item>
+                <el-menu-item index="/article/manage">
+                    <el-icon>
+                        <Promotion />
+                    </el-icon>
+                    <span>文章管理</span>
+                </el-menu-item>
+                <el-sub-menu>
+                    <template #title>
+                        <el-icon>
+                            <UserFilled />
+                        </el-icon>
+                        <span>个人中心</span>
+                    </template>
+                    <el-menu-item index="/user/info">
+                        <el-icon>
+                            <User />
+                        </el-icon>
+                        <span>基本资料</span>
+                    </el-menu-item>
+                    <el-menu-item index="/user/avatar">
+                        <el-icon>
+                            <Crop />
+                        </el-icon>
+                        <span>更换头像</span>
+                    </el-menu-item>
+                    <el-menu-item index="/user/resetPassword">
+                        <el-icon>
+                            <EditPen />
+                        </el-icon>
+                        <span>重置密码</span>
+                    </el-menu-item>
+                </el-sub-menu>
+            </el-menu>
+        </el-aside>
+        <!-- 顶部菜单（宽高比小于1时显示） -->
+        <el-header v-if="isPortrait" class="mobile-header">
+            <el-menu mode="horizontal" active-text-color="#ffd04b" background-color="#232323" text-color="#fff" router>
+                <el-menu-item index="/article/category">
+                    <el-icon>
+                        <Management />
+                    </el-icon>
+                    <span>文章分类</span>
+                </el-menu-item>
+                <el-menu-item index="/article/manage">
+                    <el-icon>
+                        <Promotion />
+                    </el-icon>
+                    <span>文章管理</span>
+                </el-menu-item>
+                <el-sub-menu>
+                    <template #title>
+                        <el-icon>
+                            <UserFilled />
+                        </el-icon>
+                        <span>个人中心</span>
+                    </template>
+                    <el-menu-item index="/user/info">
+                        <el-icon>
+                            <User />
+                        </el-icon>
+                        <span>基本资料</span>
+                    </el-menu-item>
+                    <el-menu-item index="/user/avatar">
+                        <el-icon>
+                            <Crop />
+                        </el-icon>
+                        <span>更换头像</span>
+                    </el-menu-item>
+                    <el-menu-item index="/user/resetPassword">
+                        <el-icon>
+                            <EditPen />
+                        </el-icon>
+                        <span>重置密码</span>
+                    </el-menu-item>
+                </el-sub-menu>
+            </el-menu>
+            <el-dropdown placement="bottom-end" @command="handleCommand">
+                    <span class="el-dropdown__box">
+                        <el-avatar :src="userInfoStore.info.userPic ? userInfoStore.info.userPic : avatar" />
+                        <el-icon>
+                            <CaretBottom />
+                        </el-icon>
+                    </span>
+                    <template #dropdown>
+                        <el-dropdown-menu>
+                            <el-dropdown-item command="info" :icon="User">基本资料</el-dropdown-item>
+                            <el-dropdown-item command="avatar" :icon="Crop">更换头像</el-dropdown-item>
+                            <el-dropdown-item command="resetPassword" :icon="EditPen">重置密码</el-dropdown-item>
+                            <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
+                        </el-dropdown-menu>
+                    </template>
+                </el-dropdown>
+        </el-header>
+        <!-- 右侧主区域 -->
+        <el-container>
+            <!-- 头部区域 -->
+            <el-header v-if="!isPortrait">
+                <div>程序员：<strong>{{ userInfoStore.info.nickname }}</strong></div>
+                <el-dropdown placement="bottom-end" @command="handleCommand">
+                    <span class="el-dropdown__box">
+                        <el-avatar :src="userInfoStore.info.userPic ? userInfoStore.info.userPic : avatar" />
+                        <el-icon>
+                            <CaretBottom />
+                        </el-icon>
+                    </span>
+                    <template #dropdown>
+                        <el-dropdown-menu>
+                            <el-dropdown-item command="info" :icon="User">基本资料</el-dropdown-item>
+                            <el-dropdown-item command="avatar" :icon="Crop">更换头像</el-dropdown-item>
+                            <el-dropdown-item command="resetPassword" :icon="EditPen">重置密码</el-dropdown-item>
+                            <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
+                        </el-dropdown-menu>
+                    </template>
+                </el-dropdown>
+            </el-header>
+            <!-- 中间区域 -->
+            <el-main>
+                <router-view></router-view>
+            </el-main>
+            <!-- 底部区域 -->
+            <el-footer>大事件 ©2025 Created by xclele</el-footer>
+        </el-container>
+    </el-container>
+</template>
+
+<style lang="scss" scoped>
+.layout-container {
+    height: 100vh;
+
+    .el-aside {
+        background-color: #232323;
+
+        &__logo {
+            height: 120px;
+            background: url('@/assets/logo.png') no-repeat center / 120px auto;
+        }
+
+        .el-menu {
+            border-right: none;
+        }
+    }
+
+    .el-header {
+        background-color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .el-dropdown__box {
+            display: flex;
+            align-items: center;
+
+            .el-icon {
+                color: #999;
+                margin-left: 10px;
+            }
+
+            &:active,
+            &:focus {
+                outline: none;
+            }
+        }
+    }
+
+    .el-footer {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+        color: #666;
+    }
+
+    @media (orientation: portrait) {
+        .el-aside {
+            display: none;
+        }
+
+        .mobile-header {
+            display: flex;
+            background-color: #232323;
+            .el-menu {
+                width: 100%;
+            }
+            .el-dropdown__box {
+            display: flex;
+            align-items: center;
+
+            .el-icon {
+                color: #999;
+                margin-left: 10px;
+            }
+
+            &:active,
+            &:focus {
+                outline: none;
+            }
+        }
+        }
+
+    }
+}
+</style>
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@ -0,0 +1,223 @@
+<script setup>
+import { User, Lock } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+import { ref } from 'vue'
+//控制注册与登录表单的显示， 默认显示注册
+const isRegister = ref(false)
+//定义数据模型
+const registerData = ref({
+    username: '',
+    password: '',
+    rePassword: ''
+})
+
+const loginData = ref({
+    username: '',
+    password: '',
+})
+
+//repassword校验规则
+const checkRePassword = (rule, value, callback) => {
+    if (value === '') {
+        callback(new Error('请再次确认密码'))
+    } else if (value !== registerData.value.password) {
+        callback(new Error('两次输入密码不一致!'))
+    } else {
+        callback()
+    }
+}
+
+//定义表单校验规则
+const rules = {
+    username:[
+        { required: true, message: '请输入用户名', trigger: 'blur' },
+        { min: 5, max: 16, message: '长度在 5 到 16 个字符', trigger: 'blur' }
+    ],
+    password:[
+        { required: true, message: '请输入密码', trigger: 'blur' },
+        { min: 5, max: 16, message: '长度在 5 到 16 个字符', trigger: 'blur' }
+    ],
+    rePassword:[
+        {validator:checkRePassword, trigger: 'blur'}
+    ]
+}
+
+//调用后台接口注册
+import { userRegisterService,userLoginService } from '@/api/user.js'
+const register = async() => {
+    //registerdata是响应式对象，所以要用registerData.value
+    
+    let result = await userRegisterService(registerData.value)
+    if (result.code === 0){
+        //注册成功
+        ElMessage.success(result.msg? result.msg:'注册成功')
+    }else{
+        //注册失败
+        ElMessage.error('注册失败')
+    }
+}
+
+//调用后台接口登录
+import {useRouter} from 'vue-router';
+import { useTokenStore } from '@/stores/token.js';
+const router = useRouter();
+const tokenStore = useTokenStore();
+
+const login = async() => {
+    //loginData是响应式对象，所以要用loginData.value
+    let result = await userLoginService(loginData.value)
+    if (result.code === 0){
+        //登录成功
+        ElMessage.success(result.msg? result.msg:'登录成功')
+        //存储token
+        tokenStore.setToken(result.data)
+        router.push('/')
+    }else{
+        //登录失败
+        ElMessage.error('登录失败')
+    }
+}
+
+
+//根据宽高比判断是否为移动端
+import { onMounted, onUnmounted } from 'vue';
+
+const isPortrait = ref(false);
+
+const checkIsPortrait = () => {
+    isPortrait.value = window.innerWidth / window.innerHeight < 1;
+};
+
+onMounted(() => {
+    checkIsPortrait();
+    window.addEventListener('resize', checkIsPortrait);
+});
+
+onUnmounted(() => {
+    window.removeEventListener('resize', checkIsPortrait);
+});
+
+</script>
+
+<template>
+    <el-row class="login-page">
+        <el-col :span="12" class="bg" v-if="!isPortrait"></el-col>
+        <el-col :span="isPortrait ? 24 :12" :offset="0" class="form">
+            <!-- 注册表单 -->
+            <el-form ref="form" size="medium" autocomplete="off" v-if="isRegister" :model="registerData" :rules="rules">
+                <el-form-item>
+                    <h1>注册</h1>
+                </el-form-item>
+                <el-form-item prop="username">
+                    <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input>
+                </el-form-item>
+                <el-form-item prop="password">
+                    <el-input :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password"></el-input>
+                </el-form-item>
+                <el-form-item prop="rePassword">
+                    <el-input :prefix-icon="Lock" type="password" placeholder="请输入再次密码" v-model="registerData.rePassword"></el-input>
+                </el-form-item>
+                <!-- 注册按钮 -->
+                <el-form-item>
+                    <el-button class="button" type="primary" auto-insert-space @click="register">
+                        注册
+                    </el-button>
+                </el-form-item>
+                <el-form-item class="flex">
+                    <el-link type="info" :underline="false" @click="isRegister = false">
+                        ← 返回
+                    </el-link>
+                </el-form-item>
+            </el-form>
+            <!-- 登录表单 -->
+            <el-form ref="form" size="large" autocomplete="off" v-else :model="loginData" :rules="rules" @keyup.enter="login">   <!--复用登陆表单-->
+                <el-form-item>
+                    <h1>登录</h1>
+                </el-form-item>
+                <el-form-item prop="username">
+                    <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="loginData.username"></el-input>
+                </el-form-item>
+                <el-form-item prop="password">
+                    <el-input name="password" :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="loginData.password"></el-input>
+                </el-form-item>
+                <el-form-item class="flex">
+                    <div class="flex">
+                        <el-checkbox>记住我</el-checkbox>
+                        <el-link type="primary" :underline="false">忘记密码？</el-link>
+                    </div>
+                </el-form-item>
+                <!-- 登录按钮 -->
+                <el-form-item>
+                    <el-button class="button" type="primary" auto-insert-space @click="login">登录</el-button>
+                </el-form-item>
+                <el-form-item class="flex">
+                    <el-link type="info" :underline="false" @click="isRegister = true">
+                        注册 →
+                    </el-link>
+                </el-form-item>
+            </el-form>
+        </el-col>
+    </el-row>
+</template>
+
+<style lang="scss" scoped>
+/* 样式 */
+@media (orientation: Landscape){
+    .login-page {
+    height: 100vh;
+    background-color: #fff;
+
+    .bg {
+        background: url('@/assets/logo2.png') no-repeat 60% center / 240px auto,
+            url('@/assets/login_bg.jpg') no-repeat center / cover;
+        border-radius: 0 20px 20px 0;
+    }
+
+    .form {
+        width: 60%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        user-select: none;
+        padding: calc(10%) ;
+
+        .title {
+            margin: 0 auto;
+        }
+
+        .button {
+            width: 100%;
+        }
+
+        .flex {
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+        }
+    }
+}
+}
+
+@media (orientation: portrait) {
+    .form {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        user-select: none;
+
+        .title {
+            margin: 0 auto;
+        }
+
+        .button {
+            width: 100%;
+        }
+
+        .flex {
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+        }
+    }
+}
+</style>
--- a/src/views/article/ArticleCategory.vue
+++ b/src/views/article/ArticleCategory.vue
@ -0,0 +1,189 @@
+<script setup>
+import {
+    Edit,
+    Delete
+} from '@element-plus/icons-vue'
+import { ref } from 'vue'
+const categories = ref([
+    {
+        "id": 3,
+        "categoryName": "美食",
+        "categoryAlias": "my",
+        "createTime": "2023-09-02 12:06:59",
+        "updateTime": "2023-09-02 12:06:59"
+    },
+    {
+        "id": 4,
+        "categoryName": "娱乐",
+        "categoryAlias": "yl",
+        "createTime": "2023-09-02 12:08:16",
+        "updateTime": "2023-09-02 12:08:16"
+    },
+    {
+        "id": 5,
+        "categoryName": "军事",
+        "categoryAlias": "js",
+        "createTime": "2023-09-02 12:08:33",
+        "updateTime": "2023-09-02 12:08:33"
+    }
+])
+
+//控制添加分类弹窗
+const dialogVisible = ref(false)
+//控制删除确认弹窗
+const deleteDialogVisible = ref(false)
+//弹窗title
+const title=ref('')
+
+//显示编辑弹窗
+const showEditDialog = (row) => {
+    dialogVisible.value = true;
+    title.value = '编辑分类';
+    //数据拷贝
+    categoryModel.value.categoryName = row.categoryName;
+    categoryModel.value.categoryAlias = row.categoryAlias;
+    //扩展id属性
+    categoryModel.value.id = row.id;
+}
+
+//显示删除确认弹窗
+const showDeleteDialog = (row) => {
+    deleteDialogVisible.value = true;
+    //数据拷贝
+    categoryModel.value.categoryName = row.categoryName;
+    categoryModel.value.categoryAlias = row.categoryAlias;
+    //读取id属性
+    categoryModel.value.id = row.id;
+}
+
+//添加分类数据模型
+const categoryModel = ref({
+    categoryName: '',
+    categoryAlias: ''
+})
+//添加分类表单校验
+const rules = {
+    categoryName: [
+        { required: true, message: '请输入分类名称', trigger: 'blur' },
+    ],
+    categoryAlias: [
+        { required: true, message: '请输入分类别名', trigger: 'blur' },
+    ]
+}
+
+//按照分类获取文章列表
+import { articleCategoryListService,addCategoryService,updateCategoryService,deleteCategoryService } from '@/api/article.js'
+import { ElMessage } from 'element-plus'
+
+const articleCategoryList = async() => {
+    let result = await articleCategoryListService();
+    categories.value = result.data;
+}
+articleCategoryList();  //调用函数
+
+//添加分类
+const addCategory = async() => {
+    //调用接口添加分类
+    let result = await addCategoryService(categoryModel.value);
+    ElMessage.success(result.message ? result.message : '添加成功');
+
+    //刷新列表并关闭弹窗
+    articleCategoryList();
+    dialogVisible.value = false;
+}
+
+//编辑分类
+const updateCategory = async() => {
+    //调用接口编辑分类
+    let result = await updateCategoryService(categoryModel.value);
+    ElMessage.success(result.message ? result.message : '修改成功');
+
+    //刷新列表并关闭弹窗
+    articleCategoryList();
+    dialogVisible.value = false;
+}
+
+//删除分类
+const deleteCategory = async() => {
+    //调用接口删除分类
+    console.log(categoryModel.value.id)
+    let result = await deleteCategoryService(categoryModel.value.id);
+    ElMessage.success(result.message ? result.message : '删除成功');
+
+    //刷新列表
+    articleCategoryList();
+    deleteDialogVisible.value = false;
+}
+
+
+</script>
+<template>
+    <el-card class="page-container">
+        <template #header>
+            <div class="header">
+                <span>文章分类</span>
+                <div class="extra">
+                    <el-button type="primary" @click="title='添加分类';dialogVisible = true">添加分类</el-button>
+                </div>
+            </div>
+        </template>
+        <el-table :data="categories" style="width: 100%">
+            <el-table-column label="序号" width="100" type="index"> </el-table-column>
+            <el-table-column label="分类名称" prop="categoryName"></el-table-column>
+            <el-table-column label="分类别名" prop="categoryAlias"></el-table-column>
+            <el-table-column label="操作" width="100">
+                <template #default="{ row }">
+                    <el-button :icon="Edit" circle plain type="primary" @click="showEditDialog(row)"></el-button>
+                    <el-button :icon="Delete" circle plain type="danger" @click="showDeleteDialog(row)"></el-button>
+                </template>
+            </el-table-column>
+            <template #empty>
+                <el-empty description="没有数据" />
+            </template>
+        </el-table>
+
+        <!-- 添加，编辑分类弹窗 -->
+        <el-dialog v-model="dialogVisible" :title="title" width="400">
+            <el-form :model="categoryModel" :rules="rules" label-width="100px" style="padding-right: 30px">
+                <el-form-item label="分类名称" prop="categoryName">
+                    <el-input v-model="categoryModel.categoryName" minlength="1" maxlength="10"></el-input>
+                </el-form-item>
+                <el-form-item label="分类别名" prop="categoryAlias">
+                    <el-input v-model="categoryModel.categoryAlias" minlength="1" maxlength="15"></el-input>
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="dialogVisible = false">取消</el-button>
+                    <el-button type="primary" @click="title==='添加分类' ? addCategory() : updateCategory()"> 确认 </el-button>
+                </span>
+            </template>
+        </el-dialog>
+
+        <!--删除确认弹窗-->
+        <el-dialog title="提示" v-model="deleteDialogVisible" width="400">
+            <span>确认删除该分类吗？</span>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="deleteDialogVisible = false">取消</el-button>
+                    <el-button type="primary" @click="deleteCategory()"> 确认 </el-button>
+                </span>
+            </template>
+        </el-dialog>
+
+    </el-card>
+</template>
+
+<style lang="scss" scoped>
+.page-container {
+    min-height: 100%;
+    box-sizing: border-box;
+
+    .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+}
+
+</style>
--- a/src/views/article/ArticleManage.vue
+++ b/src/views/article/ArticleManage.vue
@ -0,0 +1,294 @@
+<script setup>
+import {
+    Edit,
+    Delete
+} from '@element-plus/icons-vue'
+
+import { ref } from 'vue'
+
+//文章分类数据模型
+const categories = ref([
+    {
+        "id": 1,
+        "categoryName": "dawdwa",
+        "categoryAlias": "adw",
+        "createTime": "2023-09-02 12:06:59",
+        "updateTime": "2023-09-02 12:06:59"
+    },
+    {
+        "id": 3,
+        "categoryName": "美食",
+        "categoryAlias": "my",
+        "createTime": "2023-09-02 12:06:59",
+        "updateTime": "2023-09-02 12:06:59"
+    },
+    {
+        "id": 4,
+        "categoryName": "娱乐",
+        "categoryAlias": "yl",
+        "createTime": "2023-09-02 12:08:16",
+        "updateTime": "2023-09-02 12:08:16"
+    },
+    {
+        "id": 5,
+        "categoryName": "军事",
+        "categoryAlias": "js",
+        "createTime": "2023-09-02 12:08:33",
+        "updateTime": "2023-09-02 12:08:33"
+    }
+])
+
+//用户搜索时选中的分类id
+const categoryId=ref('')
+
+//用户搜索时选中的发布状态
+const state=ref('')
+
+//文章列表数据模型
+const articles = ref([
+    {
+        "id": 5,
+        "title": "陕西旅游攻略",
+        "content": "兵马俑,华清池,法门寺,华山...爱去哪去哪...",
+        "coverImg": "https://big-event-gwd.oss-cn-beijing.aliyuncs.com/9bf1cf5b-1420-4c1b-91ad-e0f4631cbed4.png",
+        "state": "草稿",
+        "categoryId": 2,
+        "createTime": "2023-09-03 11:55:30",
+        "updateTime": "2023-09-03 11:55:30"
+    },
+    {
+        "id": 5,
+        "title": "陕西旅游攻略",
+        "content": "兵马俑,华清池,法门寺,华山...爱去哪去哪...",
+        "coverImg": "https://big-event-gwd.oss-cn-beijing.aliyuncs.com/9bf1cf5b-1420-4c1b-91ad-e0f4631cbed4.png",
+        "state": "草稿",
+        "categoryId": 2,
+        "createTime": "2023-09-03 11:55:30",
+        "updateTime": "2023-09-03 11:55:30"
+    },
+    {
+        "id": 5,
+        "title": "陕西旅游攻略",
+        "content": "兵马俑,华清池,法门寺,华山...爱去哪去哪...",
+        "coverImg": "https://big-event-gwd.oss-cn-beijing.aliyuncs.com/9bf1cf5b-1420-4c1b-91ad-e0f4631cbed4.png",
+        "state": "草稿",
+        "categoryId": 2,
+        "createTime": "2023-09-03 11:55:30",
+        "updateTime": "2023-09-03 11:55:30"
+    },
+])
+
+//分页条数据模型
+const pageNum = ref(1)//当前页
+const total = ref(20)//总条数
+const pageSize = ref(3)//每页条数
+
+//当每页条数发生了变化，调用此函数
+const onSizeChange = (size) => {
+    pageSize.value = size
+    getArticleList()
+}
+//当前页码发生变化，调用此函数
+const onCurrentChange = (num) => {
+    pageNum.value = num
+    getArticleList()
+}
+
+//按照分类获取文章列表
+import { articleCategoryListService } from '@/api/article.js'
+
+const articleCategoryList = async() => {
+    let result = await articleCategoryListService();
+    categories.value = result.data;
+}
+articleCategoryList();  //调用函数
+
+//从后端获取文章信息
+import { articleListService } from '@/api/article'
+const getArticleList = async() => {
+    const params = {
+        pageNum: pageNum.value,
+        pageSize: pageSize.value,
+        categoryId: categoryId.value ?categoryId.value :null,
+        state: state.value ? state.value : null
+    }
+
+    const result = await articleListService(params)
+    
+    total.value = result.data.total
+    articles.value = result.data.items
+}
+getArticleList()    //打开页面的时候获取文章列表
+
+import { QuillEditor } from '@vueup/vue-quill'
+import '@vueup/vue-quill/dist/vue-quill.snow.css'
+import {Plus} from '@element-plus/icons-vue'
+//控制抽屉是否显示
+const visibleDrawer = ref(false)
+//添加表单数据模型
+const articleModel = ref({
+    title: '',
+    categoryId: '',
+    coverImg: '',
+    content:'',
+    state:''
+})
+
+//添加文章
+import { articleAddService } from "@/api/article"
+import { ElMessage } from 'element-plus'
+const addArticle = async(clickState) => {
+    articleModel.value.state = clickState
+    let result = await articleAddService(articleModel.value)
+
+    ElMessage.success(result.message? result.message: '添加成功')
+    visibleDrawer.value = false
+    getArticleList()
+}
+
+</script>
+<template>
+    <el-card class="page-container">
+        <template #header>
+            <div class="header">
+                <span>文章管理</span>
+                <div class="extra">
+                    <el-button type="primary" @click="visibleDrawer=true">添加文章</el-button>
+                </div>
+            </div>
+        </template>
+        <!-- 搜索表单 -->
+        <el-form inline>
+            <el-form-item label="文章分类：">
+                <el-select placeholder="请选择" v-model="categoryId">
+                    <el-option 
+                        v-for="c in categories" 
+                        :key="c.id" 
+                        :label="c.categoryName"
+                        :value="c.id">
+                    </el-option>
+                </el-select>
+            </el-form-item>
+
+            <el-form-item label="发布状态：">
+                <el-select placeholder="请选择" v-model="state">
+                    <el-option label="已发布" value="已发布"></el-option>
+                    <el-option label="草稿" value="草稿"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" @click="getArticleList">搜索</el-button>
+                <el-button @click="categoryId='';state=''">重置</el-button>
+            </el-form-item>
+        </el-form>
+        <!-- 文章列表 -->
+        <el-table :data="articles" style="width: 100%">
+            <el-table-column label="文章标题" width="400" prop="title"></el-table-column>
+            <el-table-column label="分类" prop="categoryId"></el-table-column>
+            <el-table-column label="发表时间" prop="createTime"> </el-table-column>
+            <el-table-column label="状态" prop="state"></el-table-column>
+            <el-table-column label="操作" width="100">
+                <template #default>
+                    <el-button :icon="Edit" circle plain type="primary"></el-button>
+                    <el-button :icon="Delete" circle plain type="danger"></el-button>
+                </template>
+            </el-table-column>
+            <template #empty>
+                <el-empty description="没有数据" />
+            </template>
+        </el-table>
+        <!-- 分页条 -->
+        <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5 ,10, 15]"
+            layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
+            @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />
+
+        <!-- 抽屉 -->
+        <el-drawer v-model="visibleDrawer" title="添加文章" direction="rtl" size="50%">
+            <!-- 添加文章表单 -->
+            <el-form :model="articleModel" label-width="100px" >
+                <el-form-item label="文章标题" >
+                    <el-input v-model="articleModel.title" placeholder="请输入标题"></el-input>
+                </el-form-item>
+                <el-form-item label="文章分类">
+                    <el-select placeholder="请选择" v-model="articleModel.categoryId">
+                        <el-option v-for="c in categories" :key="c.id" :label="c.categoryName" :value="c.id">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="文章封面">
+
+                    <el-upload class="avatar-uploader" :auto-upload="false" :show-file-list="false">
+                        <img v-if="articleModel.coverImg" :src="articleModel.coverImg" class="avatar" />
+                        <el-icon v-else class="avatar-uploader-icon">
+                            <Plus />
+                        </el-icon>
+                    </el-upload>
+                </el-form-item>
+                <el-form-item label="文章内容">
+                    <div class="editor">
+                        <quill-editor
+                            theme="snow"
+                            v-model:content="articleModel.content"
+                            contentType="html"
+                            >
+                        </quill-editor>
+                    </div>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" @click="addArticle('已发布')">发布</el-button>
+                    <el-button type="info" @click="addArticle('草稿')">草稿</el-button>
+                </el-form-item>
+            </el-form>
+        </el-drawer>
+    </el-card>
+</template>
+<style lang="scss" scoped>
+.page-container {
+    min-height: 100%;
+    box-sizing: border-box;
+
+    .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+}
+
+/* 抽屉样式 */
+.avatar-uploader {
+    :deep() {
+        .avatar {
+            width: 178px;
+            height: 178px;
+            display: block;
+        }
+
+        .el-upload {
+            border: 1px dashed var(--el-border-color);
+            border-radius: 6px;
+            cursor: pointer;
+            position: relative;
+            overflow: hidden;
+            transition: var(--el-transition-duration-fast);
+        }
+
+        .el-upload:hover {
+            border-color: var(--el-color-primary);
+        }
+
+        .el-icon.avatar-uploader-icon {
+            font-size: 28px;
+            color: #8c939d;
+            width: 178px;
+            height: 178px;
+            text-align: center;
+        }
+    }
+}
+.editor {
+  width: 100%;
+  :deep(.ql-editor) {
+    min-height: 200px;
+  }
+}
+</style>
--- a/src/views/user/UserAvatar.vue
+++ b/src/views/user/UserAvatar.vue
@ -0,0 +1,3 @@
+<template>
+    更换头像
+</template>
--- a/src/views/user/UserInfo.vue
+++ b/src/views/user/UserInfo.vue
@ -0,0 +1,64 @@
+<script setup>
+import { ref } from 'vue'
+import useUserInfoStore from '@/stores/userInfo.js';
+
+const userInfoStore = useUserInfoStore()
+const userInfo = ref({...userInfoStore.info})    //解构info数组
+
+//更新个人信息
+import { userInfoUpdateService } from '@/api/user'
+import { ElMessage } from 'element-plus';
+const userInfoUpdate = async() =>{
+    let result = await userInfoUpdateService(userInfo.value)
+    if (result.code === 0){
+        //注册成功
+        ElMessage.success(result.message? result.message: '修改成功')
+        userInfoStore.setInfo(userInfo.value)
+    }else{
+        //注册失败
+        ElMessage.error('修改失败')
+    }
+}
+
+const rules = {
+    nickname: [
+        { required: true, message: '请输入用户昵称', trigger: 'blur' },
+        {
+            pattern: /^\S{2,10}$/,
+            message: '昵称必须是2-10位的非空字符串',
+            trigger: 'blur'
+        }
+    ],
+    email: [
+        { required: true, message: '请输入用户邮箱', trigger: 'blur' },
+        { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
+    ]
+}
+</script>
+<template>
+    <el-card class="page-container">
+        <template #header>
+            <div class="header">
+                <span>基本资料</span>
+            </div>
+        </template>
+        <el-row>
+            <el-col :span="12">
+                <el-form :model="userInfo" :rules="rules" label-width="100px" size="large">
+                    <el-form-item label="登录名称">
+                        <el-input v-model="userInfo.username" disabled></el-input>
+                    </el-form-item>
+                    <el-form-item label="用户昵称" prop="nickname">
+                        <el-input v-model="userInfo.nickname"></el-input>
+                    </el-form-item>
+                    <el-form-item label="用户邮箱" prop="email">
+                        <el-input v-model="userInfo.email"></el-input>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button type="primary" @click="userInfoUpdate">提交修改</el-button>
+                    </el-form-item>
+                </el-form>
+            </el-col>
+        </el-row>
+    </el-card>
+</template>
--- a/src/views/user/UserResetPassword.vue
+++ b/src/views/user/UserResetPassword.vue
@ -0,0 +1,82 @@
+<script setup>
+import { ref } from 'vue'
+
+const resetPwdData = ref({
+    old_pwd: '',
+    new_pwd: '',
+    re_pwd: ''
+})
+
+//修改完重新登录
+import useUserInfoStore from '@/stores/userInfo.js';
+import { useTokenStore } from '@/stores/token.js';
+import router from '@/router';
+
+const tokenStore = useTokenStore();
+const userInfoStore = useUserInfoStore();
+const reLogin = () => {
+    tokenStore.removeToken();
+    userInfoStore.removeInfo();
+    router.push('/login');
+}
+
+//更新个人密码
+import { userPasswordUpdateService } from '@/api/user'
+import { ElMessage } from 'element-plus';
+const userPasswordUpdate = async() =>{
+    console.log(resetPwdData.value)
+    let result = await userPasswordUpdateService(resetPwdData.value)
+    if (result.code === 0){
+        //修改成功
+        ElMessage.success(result.message? result.message:'修改成功')
+        userInfoStore.setInfo(userInfo.value)
+        reLogin()
+        ElMessage({type: 'success',message: '密码已修改，请用新密码重新登陆',});
+    }else{
+        //修改失败
+        ElMessage.error('修改失败')
+    }
+}
+
+const rules = {
+    old_pwd: [
+        { required: true, message: '请输入当前密码', trigger: 'blur' },
+        { min: 5, max: 16, message: '密码长度在 5 到 16 个字符', trigger: 'blur' }
+    ],
+    new_pwd: [
+        { required: true, message: '请输入新密码', trigger: 'blur' },
+        { min: 5, max: 16, message: '密码长度在 5 到 16 个字符', trigger: 'blur' }
+    ],
+    re_pwd: [
+        { required: true, message: '请确认新密码', trigger: 'blur' },
+        { min: 5, max: 16, message: '密码长度在 5 到 16 个字符', trigger: 'blur' }
+    ],
+}
+</script>
+<template>
+    <el-card class="page-container">
+        <template #header>
+            <div class="header">
+                <span>修改密码</span>
+            </div>
+        </template>
+        <el-row>
+            <el-col :span="12">
+                <el-form :model="resetPwdData" :rules="rules" label-width="100px" size="large">
+                    <el-form-item label="原密码" prop="old_pwd">
+                        <el-input v-model="resetPwdData.old_pwd" show-password="false"></el-input>
+                    </el-form-item>
+                    <el-form-item label="新密码" prop="new_pwd">
+                        <el-input v-model="resetPwdData.new_pwd" show-password="false"></el-input>
+                    </el-form-item>
+                    <el-form-item label="重复新密码" prop="re_pwd">
+                        <el-input v-model="resetPwdData.re_pwd" show-password="false"></el-input>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button type="primary" @click="userPasswordUpdate">提交修改</el-button>
+                    </el-form-item>
+                </el-form>
+            </el-col>
+        </el-row>
+    </el-card>
+</template>
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,27 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueDevTools from 'vite-plugin-vue-devtools'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    vueDevTools(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    },
+  },
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8080',  //后台服务所在的源
+        changeOrigin: true,   //更改源
+        rewrite: (path) => path.replace(/^\/api/, '') ///api换成空
+      }
+    }
+  }
+})
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>`