6 meses atrás · d0fc729119
--- a/fhKeeper/formulahousekeeper/articleBackend/.gitattributes
+++ b/fhKeeper/formulahousekeeper/articleBackend/.gitattributes
@@ -0,0 +1,2 @@
 
																+# Auto detect text files and perform LF normalization
															
 
																+* text=auto
															
--- a/fhKeeper/formulahousekeeper/articleBackend/.gitignore
+++ b/fhKeeper/formulahousekeeper/articleBackend/.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/fhKeeper/formulahousekeeper/articleBackend/.vscode/extensions.json
+++ b/fhKeeper/formulahousekeeper/articleBackend/.vscode/extensions.json
@@ -0,0 +1,3 @@
 
																+{
															
 
																+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
															
 
																+}
															
--- a/fhKeeper/formulahousekeeper/articleBackend/README.md
+++ b/fhKeeper/formulahousekeeper/articleBackend/README.md
@@ -0,0 +1,29 @@
 
																+# BigEventFront
															
 
																+
															
 
																+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) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
															
 
																+
															
 
																+## Customize configuration
															
 
																+
															
 
																+See [Vite Configuration Reference](https://vitejs.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/fhKeeper/formulahousekeeper/articleBackend/index.html
+++ b/fhKeeper/formulahousekeeper/articleBackend/index.html
@@ -0,0 +1,13 @@
 
																+<!DOCTYPE html>
															
 
																+<html lang="en">
															
 
																+  <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/fhKeeper/formulahousekeeper/articleBackend/jsconfig.json
+++ b/fhKeeper/formulahousekeeper/articleBackend/jsconfig.json
@@ -0,0 +1,8 @@
 
																+{
															
 
																+  "compilerOptions": {
															
 
																+    "paths": {
															
 
																+      "@/*": ["./src/*"]
															
 
																+    }
															
 
																+  },
															
 
																+  "exclude": ["node_modules", "dist"]
															
 
																+}
															
--- a/fhKeeper/formulahousekeeper/articleBackend/package-lock.json
+++ b/fhKeeper/formulahousekeeper/articleBackend/package-lock.json
--- a/fhKeeper/formulahousekeeper/articleBackend/package.json
+++ b/fhKeeper/formulahousekeeper/articleBackend/package.json
@@ -0,0 +1,25 @@
 
																+{
															
 
																+  "name": "bigeventfront",
															
 
																+  "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.6.5",
															
 
																+    "element-plus": "^2.4.4",
															
 
																+    "pinia": "^2.1.7",
															
 
																+    "pinia-persistedstate-plugin": "^0.1.0",
															
 
																+    "vue": "^3.3.11",
															
 
																+    "vue-router": "^4.2.5"
															
 
																+  },
															
 
																+  "devDependencies": {
															
 
																+    "@vitejs/plugin-vue": "^4.5.2",
															
 
																+    "sass": "^1.69.7",
															
 
																+    "vite": "^5.0.10"
															
 
																+  }
															
 
																+}
															
--- a/fhKeeper/formulahousekeeper/articleBackend/public/favicon.ico
+++ b/fhKeeper/formulahousekeeper/articleBackend/public/favicon.ico
--- a/fhKeeper/formulahousekeeper/articleBackend/src/App.vue
+++ b/fhKeeper/formulahousekeeper/articleBackend/src/App.vue
@@ -0,0 +1,15 @@
 
																+<script setup>
															
 
																+import LoginVue from './views/Login.vue';
															
 
																+</script>
															
 
																+
															
 
																+<template>
															
 
																+  <!--引入 Login.vue 文件，测试效果-->
															
 
																+  <!--<LoginVue></LoginVue>-->
															
 
																+  
															
 
																+  <!--声明路由标签，这样就可以自动根据访问路径加载对应的 vue 页面-->
															
 
																+  <router-view></router-view>
															
 
																+</template>
															
 
																+
															
 
																+<style scoped>
															
 
																+
															
 
																+</style>
															
--- a/fhKeeper/formulahousekeeper/articleBackend/src/api/article.js
+++ b/fhKeeper/formulahousekeeper/articleBackend/src/api/article.js
@@ -0,0 +1,43 @@
 
																+import request from '@/utils/request.js'
															
 
																+import { userTokenStore } from '@/stores/token.js'
															
 
																+// 文章标签列表查询
															
 
																+export const articleCategoryListService=()=>{
															
 
																+    const tokenStore=userTokenStore();
															
 
																+    // 在 pinia 中定义的 ref() 响应式数据，不需要 .value 格式赋值取值
															
 
																+    //console.log("当前进入了 article.js")
															
 
																+    //return request.get('/category',{headers:{'Authorization':tokenStore.token}})
															
 
																+    // 添加请求拦截器之后，就不用向上面这一行代码这样手动添加身份 token 了
															
 
																+    return request.get('/category')
															
 
																+}
															
 
																+
															
 
																+// 文章标签添加
															
 
																+export const articleCategoryAddService=(categoryData)=>{
															
 
																+    // 如果 categoryData 是json格式数据，这里可以直接附加
															
 
																+    return request.post('/category',categoryData);
															
 
																+}
															
 
																+
															
 
																+// 文章标签列表修改
															
 
																+export const articleCategoryUpdateService=(categoryData)=>{
															
 
																+    return request.put('/category',categoryData)
															
 
																+}
															
 
																+
															
 
																+// 文章标签列表删除
															
 
																+export const articleCategoryDeleteService=(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)
															
 
																+    return request.post('/article/insertOrUpdateArticle',articleData)
															
 
																+}
															
 
																+
															
 
																+// 删除文章
															
 
																+export const articleDeleteService=(params)=>{
															
 
																+    return request.get('/article/deleteById', {params:params})
															
 
																+}
															
--- a/fhKeeper/formulahousekeeper/articleBackend/src/api/user.js
+++ b/fhKeeper/formulahousekeeper/articleBackend/src/api/user.js
@@ -0,0 +1,44 @@
 
																+// 导入 request.js 请求工具
															
 
																+import request from '@/utils/request.js'
															
 
																+
															
 
																+// 提供调用注册接口的函数，使用箭头函数写法，registerData 表示函数接收的参数，userRegisterService 是函数名称
															
 
																+export const userRegisterService =(registerData)=>{
															
 
																+    // registerData 是 json 数据，无法直接当作 url 参数传递，因此需要处理
															
 
																+    // 借助于 UserSearchParams 完成传递
															
 
																+    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 userPasswordResetService=(resetData)=>{
															
 
																+    return request.patch('/user/updatePwd',resetData)
															
 
																+}
															
--- a/fhKeeper/formulahousekeeper/articleBackend/src/assets/avatar.jpg
+++ b/fhKeeper/formulahousekeeper/articleBackend/src/assets/avatar.jpg
--- a/fhKeeper/formulahousekeeper/articleBackend/src/assets/cover.jpg
+++ b/fhKeeper/formulahousekeeper/articleBackend/src/assets/cover.jpg
--- a/fhKeeper/formulahousekeeper/articleBackend/src/assets/default.png
+++ b/fhKeeper/formulahousekeeper/articleBackend/src/assets/default.png
--- a/fhKeeper/formulahousekeeper/articleBackend/src/assets/login_bg.jpg
+++ b/fhKeeper/formulahousekeeper/articleBackend/src/assets/login_bg.jpg
--- a/fhKeeper/formulahousekeeper/articleBackend/src/assets/login_title.png
+++ b/fhKeeper/formulahousekeeper/articleBackend/src/assets/login_title.png
--- a/fhKeeper/formulahousekeeper/articleBackend/src/assets/logo.png
+++ b/fhKeeper/formulahousekeeper/articleBackend/src/assets/logo.png
--- a/fhKeeper/formulahousekeeper/articleBackend/src/assets/logo2.png
+++ b/fhKeeper/formulahousekeeper/articleBackend/src/assets/logo2.png
--- a/fhKeeper/formulahousekeeper/articleBackend/src/assets/main.scss
+++ b/fhKeeper/formulahousekeeper/articleBackend/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/fhKeeper/formulahousekeeper/articleBackend/src/main.js
+++ b/fhKeeper/formulahousekeeper/articleBackend/src/main.js
@@ -0,0 +1,38 @@
 
																+// 替代 main.css 的 main.scss 文件
															
 
																+import './assets/main.scss'  
															
 
																+
															
 
																+import { createApp } from 'vue'
															
 
																+import App from './App.vue'
															
 
																+
															
 
																+// element-plus 相关内容
															
 
																+import ElementPlus from 'element-plus'
															
 
																+import 'element-plus/dist/index.css'
															
 
																+
															
 
																+// 导入路由
															
 
																+import router from '@/router/index.js'
															
 
																+
															
 
																+// 导入 pinia
															
 
																+import {createPinia} from 'pinia'
															
 
																+// 导入 persist 插件
															
 
																+import { createPersistedState } from 'pinia-persistedstate-plugin'
															
 
																+
															
 
																+// 导入中文组件
															
 
																+import locale from 'element-plus/dist/locale/zh-cn.js'
															
 
																+
															
 
																+// 页面创建相关代码
															
 
																+const app=createApp(App);
															
 
																+// 使用 pinia，使用 persist 插件
															
 
																+const pinia = createPinia();
															
 
																+const persist=createPersistedState()
															
 
																+pinia.use(persist)
															
 
																+app.use(pinia)
															
 
																+// 使用路由
															
 
																+app.use(router)
															
 
																+
															
 
																+// 使用element-plus 和他的中文语言包
															
 
																+app.use(ElementPlus,{locale});
															
 
																+
															
 
																+// 必须最后才能挂载，若先挂载，则 app.use 的那些配置都不生效了。
															
 
																+app.mount('#app');
															
 
																+
															
 
																+
															
--- a/fhKeeper/formulahousekeeper/articleBackend/src/router/index.js
+++ b/fhKeeper/formulahousekeeper/articleBackend/src/router/index.js
@@ -0,0 +1,36 @@
 
																+import { createRouter,createWebHistory } from "vue-router";
															
 
																+
															
 
																+// 导入组件，方便将访问路径与渲染的组件绑定
															
 
																+import LoginVue from '@/views/Login.vue'
															
 
																+import LayoutVue from '@/views/Layout.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 UserResetPassword from '@/views/user/UserResetPassword.vue'
															
 
																+
															
 
																+
															
 
																+// 定义路由关系redirect 属性是重定向，这里默认重定向到 /article/category
															
 
																+const routes=[
															
 
																+    {path:'/login',component:LoginVue},    
															
 
																+    {path:'/',component:LayoutVue,redirect:'/article/manage',children:[
															
 
																+        // 定义子路由
															
 
																+        {path:'/article/category',component:ArticleCategoryVue},
															
 
																+        {path:'/article/manage',component:ArticleManageVue},
															
 
																+        {path:'/user/avatar',component:UserAvatarVue},
															
 
																+        {path:'/user/info',component:UserInfoVue},
															
 
																+        {path:'/user/resetPassword',component:UserResetPassword},
															
 
																+
															
 
																+    ]}
															
 
																+]
															
 
																+
															
 
																+// 创建路由器
															
 
																+const router=createRouter({
															
 
																+    history:createWebHistory(),
															
 
																+    routes:routes
															
 
																+})
															
 
																+
															
 
																+// 导出路由
															
 
																+export default router
															
--- a/fhKeeper/formulahousekeeper/articleBackend/src/stores/token.js
+++ b/fhKeeper/formulahousekeeper/articleBackend/src/stores/token.js
@@ -0,0 +1,35 @@
 
																+// 定义 store
															
 
																+import {defineStore} from 'pinia'
															
 
																+// 导入响应式对象，后面会用
															
 
																+import {ref} from 'vue'
															
 
																+
															
 
																+/*
															
 
																+第一个参数：名字唯一性
															
 
																+第二个参数：函数，函数的内部可以定义状态的所有内容
															
 
																+
															
 
																+返回值：函数
															
 
																+*/
															
 
																+export const userTokenStore=defineStore('token',()=>{
															
 
																+    // 下面都是定义状态的内容
															
 
																+
															
 
																+    //1.响应式变量
															
 
																+    const token=ref('')
															
 
																+
															
 
																+    //2.定义一个函数修改token的值
															
 
																+    const setToken=(newToken)=>{
															
 
																+        token.value=newToken
															
 
																+    }
															
 
																+
															
 
																+    //3.函数，移除token的值
															
 
																+    const removeToken=()=>{
															
 
																+        token.value=''
															
 
																+    }
															
 
																+
															
 
																+    //4.返回定义的变量
															
 
																+    return {
															
 
																+        token,setToken,removeToken
															
 
																+    }
															
 
																+},{
															
 
																+    // 开启 persist 持久化存储插件
															
 
																+    persist:true
															
 
																+})
															
--- a/fhKeeper/formulahousekeeper/articleBackend/src/stores/userInfo.js
+++ b/fhKeeper/formulahousekeeper/articleBackend/src/stores/userInfo.js
@@ -0,0 +1,18 @@
 
																+import { defineStore } from "pinia";
															
 
																+import {ref} from 'vue'
															
 
																+const userInfoStore=defineStore('userInfo',()=>{
															
 
																+    //定义状态相关的内容
															
 
																+    const info=ref({})
															
 
																+
															
 
																+    const setInfo=(newInfo)=>{
															
 
																+        info.value=newInfo;
															
 
																+    }
															
 
																+
															
 
																+    const removeInfo=()=>{
															
 
																+        info.value={}
															
 
																+    }
															
 
																+
															
 
																+    return {info,setInfo,removeInfo}
															
 
																+},{persist:true})
															
 
																+
															
 
																+export default userInfoStore
															
--- a/fhKeeper/formulahousekeeper/articleBackend/src/utils/quillEditorOptions.js
+++ b/fhKeeper/formulahousekeeper/articleBackend/src/utils/quillEditorOptions.js
@@ -0,0 +1,41 @@
 
																+export const options = {
															
 
																+  theme: 'snow',
															
 
																+  debug: 'warn',
															
 
																+  modules: {
															
 
																+    // 工具栏配置
															
 
																+    toolbar: {
															
 
																+      container: [
															
 
																+        ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
															
 
																+        ['blockquote', 'code-block'], // 引用  代码块
															
 
																+        [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
															
 
																+        [{ indent: '-1' }, { indent: '+1' }], // 缩进
															
 
																+        [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
															
 
																+        [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
															
 
																+        [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
															
 
																+        [{ align: [] }], // 对齐方式
															
 
																+        ['clean'], // 清除文本格式
															
 
																+        ['link', 'image'], // 链接、图片、视频
															
 
																+      ],
															
 
																+      // ImageDrop: true,//支持图片拖拽
															
 
																+      // imageResize: { //支持图片大小尺寸修改
															
 
																+      //   displayStyles: {
															
 
																+      //     backgroundColor: 'black',
															
 
																+      //     border: 'none',
															
 
																+      //     color: 'white'
															
 
																+      //   },
															
 
																+      //   modules: ['Resize', 'DisplaySize','Toolbar']
															
 
																+      // }
															
 
																+    }
															
 
																+  },
															
 
																+  placeholder: '请输入公告内容...',
															
 
																+  // readOnly: props.readOnly,
															
 
																+  clipboard: {
															
 
																+    matchers: [
															
 
																+      ['img', (node, delta) => {
															
 
																+        const src = node.getAttribute('src');
															
 
																+        const id = node.getAttribute('id');
															
 
																+        delta.insert({ image: { src, 'id': id } });
															
 
																+      }],
															
 
																+    ],
															
 
																+  },
															
 
																+}
															
--- a/fhKeeper/formulahousekeeper/articleBackend/src/utils/request.js
+++ b/fhKeeper/formulahousekeeper/articleBackend/src/utils/request.js
@@ -0,0 +1,83 @@
 
																+//定制请求的实例
															
 
																+
															
 
																+//导入axios  npm install axios
															
 
																+import axios from 'axios';
															
 
																+
															
 
																+// 美化提示信息
															
 
																+import { ElMessage } from 'element-plus'  
															
 
																+
															
 
																+//定义一个变量,记录公共的前缀  ,  baseURL 此刻为了解决跨域问题，改成了 /api ，方便设置代理的时候进行替换
															
 
																+const baseURL = '/api';
															
 
																+const instance = axios.create({baseURL})
															
 
																+
															
 
																+// request.js 文件中，这样导入无法使用 router
															
 
																+//import { useRouter } from 'vue-router';
															
 
																+//const router=useRouter()
															
 
																+
															
 
																+
															
 
																+
															
 
																+// 添加请求拦截器
															
 
																+import {userTokenStore} from '@/stores/token.js'
															
 
																+instance.interceptors.request.use(
															
 
																+    (config)=>{
															
 
																+        //请求前的回调
															
 
																+        //添加token
															
 
																+        const tokenStore=userTokenStore();
															
 
																+        //判断有没有token
															
 
																+        if(tokenStore.token){
															
 
																+            config.headers.Authorization=tokenStore.token;
															
 
																+        }
															
 
																+        return config;
															
 
																+    },
															
 
																+    (err)=>{
															
 
																+        //请求错误的回调
															
 
																+        Promise.reject(err);
															
 
																+    }
															
 
																+)
															
 
																+
															
 
																+// 懒加载引入 router ，否则可能会导致加载时机不对，无法解析 Login.vue 视图，非常离谱的错误！
															
 
																+const getRouter = () => import('@/router');
															
 
																+//import router from '@/router'
															
 
																+//添加响应拦截器
															
 
																+instance.interceptors.response.use(
															
 
																+    async result=>{
															
 
																+        // 判断业务状态码
															
 
																+        if(result.data.code===0){
															
 
																+            return result.data;
															
 
																+        }
															
 
																+        // 业务状态码为1，就弹出服务器端返回从校验信息
															
 
																+        if(result.data.code===1){
															
 
																+            ElMessage.error(result.data)
															
 
																+        }
															
 
																+        else{
															
 
																+            // 若是操作失败
															
 
																+            //alert(result.data.msg?result.data.msg:'操作失败！');
															
 
																+            //alert('服务异常');    这里美化了提示信息
															
 
																+            ElMessage.error('服务异常')
															
 
																+        }
															
 
																+
															
 
																+        
															
 
																+
															
 
																+        // 异步操作的状态转换成失败
															
 
																+        return Promise.reject(result.data);
															
 
																+    },
															
 
																+    async err=>{
															
 
																+        const router = await getRouter()
															
 
																+        if(err.response.status==401){
															
 
																+            // 未登录，跳转到登录页面
															
 
																+            ElMessage.error('请先登录')
															
 
																+            //router.push('/login')
															
 
																+            router.default.push('/login');  // 注意这里使用 router.default
															
 
																+        }
															
 
																+        
															
 
																+        else{
															
 
																+            //alert('服务异常');    这里美化了提示信息
															
 
																+             ElMessage.error('服务异常')
															
 
																+            
															
 
																+        }
															
 
																+        return Promise.reject(err);//异步的状态转化成失败的状态
															
 
																+        
															
 
																+    }
															
 
																+)
															
 
																+
															
 
																+export default instance;
															
--- a/fhKeeper/formulahousekeeper/articleBackend/src/views/Layout.vue
+++ b/fhKeeper/formulahousekeeper/articleBackend/src/views/Layout.vue
@@ -0,0 +1,215 @@
 
																+<script setup>
															
 
																+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'
															
 
																+const userInfoStore=useUserInfoStore()
															
 
																+const getUserInfo=async()=>{
															
 
																+    //调用接口
															
 
																+    let result=await userInfoService();
															
 
																+    //用户信息存储到 pinia 中
															
 
																+    userInfoStore.setInfo(result.data)
															
 
																+}
															
 
																+getUserInfo();
															
 
																+
															
 
																+// 下拉菜单中条目被点击后执行的函数
															
 
																+import {useRouter} from 'vue-router'
															
 
																+const router=useRouter()
															
 
																+import { userTokenStore } from '@/stores/token.js';
															
 
																+import { ElMessageBox,ElMessage } from 'element-plus'
															
 
																+const tokenStore=userTokenStore();
															
 
																+const handleCommand=(command)=>{
															
 
																+    // 判断指令
															
 
																+    if(command==="logout"){
															
 
																+        //退出登录
															
 
																+        // 从 element-plus 上复制的代码
															
 
																+        ElMessageBox.confirm(
															
 
																+        '你确认要退出登录吗?',
															
 
																+        '温馨提示',
															
 
																+        {
															
 
																+        confirmButtonText: '确认',
															
 
																+        cancelButtonText: '取消',
															
 
																+        type: 'warning',
															
 
																+        }
															
 
																+    )
															
 
																+        .then(async() => {
															
 
																+            // 退出登录
															
 
																+            //1.清空pinia中存储的token和个人信息
															
 
																+            tokenStore.removeToken()
															
 
																+            userInfoStore.removeInfo()
															
 
																+            //2.跳转到登录页面
															
 
																+            router.push("/login")
															
 
																+
															
 
																+            ElMessage({
															
 
																+                type: 'success',
															
 
																+                message: '退出登录成功！',
															
 
																+            })
															
 
																+            
															
 
																+            
															
 
																+            })
															
 
																+            .catch(() => {
															
 
																+            ElMessage({
															
 
																+                type: 'info',
															
 
																+                message: '用户取消退出登录！',
															
 
																+            })
															
 
																+        })
															
 
																+
															
 
																+    }
															
 
																+    else{
															
 
																+        // 路由至个人信息相关功能模块
															
 
																+        router.push('/user/'+command)
															
 
																+    }
															
 
																+}
															
 
																+
															
 
																+</script>
															
 
																+
															
 
																+<template>
															
 
																+    <el-container class="layout-container">
															
 
																+        <!-- 左侧菜单 -->
															
 
																+        <el-aside width="200px">
															
 
																+            <div class="el-aside__logo"></div>
															
 
																+            <el-menu active-text-color="#ffd04b" background-color="#232323"  text-color="#fff"
															
 
																+                router>
															
 
																+                <!--index 属性的值不能重复，填写路由访问路径，有点像 href 属性-->
															
 
																+                <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>
															
 
																+        <!-- 右侧主区域 -->
															
 
																+        <el-container>
															
 
																+            <!-- 头部区域 -->
															
 
																+            <el-header>
															
 
																+                <div>文章后台系统：<strong>{{ userInfoStore.info.nickname }}</strong></div>
															
 
																+                <!--下拉菜单，注意这里的 @command，让其捆绑自定义的事件处理函数，用于对下面个人信息中捆绑的command属性进行处理-->
															
 
																+                <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>
															
 
																+                            <!--command 表示当前条目被点击后会触发，在事件函数上可以声明一个参数，接收条目对于的指令-->
															
 
																+                            <!--command="info" 这里的info指的是当初在 /router/index.js 中设置的路由-->
															
 
																+                            <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>
															
 
																+                <!--
															
 
																+                    <div style="width: 1290px; height: 570px;border: 1px solid red;">
															
 
																+                    内容展示区
															
 
																+                </div>
															
 
																+                -->
															
 
																+                <!--内容展示区，根据子路由显示不同的页面-->
															
 
																+                <router-view></router-view>
															
 
																+            </el-main>
															
 
																+            <!-- 底部区域 -->
															
 
																+            <el-footer>大事件 ©2023 Created by 文章后台系统</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;
															
 
																+    }
															
 
																+}
															
 
																+</style>
															
--- a/fhKeeper/formulahousekeeper/articleBackend/src/views/Login.vue
+++ b/fhKeeper/formulahousekeeper/articleBackend/src/views/Login.vue
@@ -0,0 +1,224 @@
 
																+<script setup>
															
 
																+import { User, Lock } from '@element-plus/icons-vue'
															
 
																+import { ref } from 'vue'
															
 
																+// 控制注册与登录表单的显示， 默认显示注册
															
 
																+const isRegister = ref(false)
															
 
																+
															
 
																+// 定义注册表单的数据模型，并绑定到对应的标签
															
 
																+const registerData=ref({
															
 
																+    username:'',
															
 
																+    password:'',
															
 
																+    rePassword:''
															
 
																+}
															
 
																+)
															
 
																+
															
 
																+// 自定义表单校验规则：校验二次密码是否和第一次输入的一致，参考 element-plus 官方文档编写
															
 
																+const checkRePassword=(rule,value,callback)=>{
															
 
																+    if(value===''){
															
 
																+        callback(new Error("请再次确认密码！"))
															
 
																+    }else if(value!==registerData.value.password){
															
 
																+        callback(new Error('请确保两次输入的密码一样！'))
															
 
																+    }else{
															
 
																+        callback()
															
 
																+    }
															
 
																+}
															
 
																+
															
 
																+
															
 
																+// 定义表单校验规则，由于使用的是 Element-Plus ，所以，表单校验规则需要参考官方文档进行编写
															
 
																+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 { ElMessage } from 'element-plus'
															
 
																+
															
 
																+// 点击注册按钮后，触发这里的方法，发送请求至后端接口，完成注册
															
 
																+import {userRegisterService,userLoginService} from '@/api/user.js'
															
 
																+const register=async()=>{
															
 
																+    // 上面自定义的 registerData 变量是 ref 响应式变量，要想获取值，需要 registerData.value
															
 
																+    let result=await userRegisterService(registerData.value)
															
 
																+    
															
 
																+    /*
															
 
																+    // 这里的 result.code 和 result.msg ，都是后端开发时，当初定义的返回数据 json 格式。
															
 
																+    if(result.code===0){
															
 
																+        // 成功了
															
 
																+        alert(result.msg?result.msg:'注册成功！')
															
 
																+    }else{
															
 
																+        // 失败了
															
 
																+        alert("注册失败！")
															
 
																+    }
															
 
																+    */
															
 
																+
															
 
																+    // 利用改良后的响应拦截器，若代码到这里，则说明成功。
															
 
																+    //alert(result.msg?result.msg:'注册成功！')
															
 
																+    // 美化提示信息的写法
															
 
																+    ElMessage({message: '注册成功！',type: 'success',})
															
 
																+
															
 
																+}
															
 
																+
															
 
																+// 绑定登录表单数据的时候，复用了注册表单的数据模型，因此这里没有重新定义登录数据模型
															
 
																+// 表单数据校验也是复用注册表单的，也没有创建新的规则
															
 
																+
															
 
																+// 使用路由，方便用户点击登录按钮后，能自动跳转主页
															
 
																+import {useRouter} from 'vue-router'
															
 
																+const router=useRouter()
															
 
																+
															
 
																+// 为了能记录后端的 token，这里使用 pinia
															
 
																+import {userTokenStore} from '@/stores/token.js'
															
 
																+const tokenStore=userTokenStore();
															
 
																+
															
 
																+// 登录功能点击后触发的函数
															
 
																+const login=async()=>{
															
 
																+    // 调用接口，完成登录
															
 
																+    let result=await userLoginService(registerData.value)
															
 
																+    
															
 
																+    /*
															
 
																+    if(result.code===0){
															
 
																+        alert(result.msg?result.msg:'登录成功！')
															
 
																+    }else{
															
 
																+        alert("登录失败！")
															
 
																+    }
															
 
																+    */
															
 
																+
															
 
																+    // 利用改良后的响应拦截器，若代码到这里，说明成功
															
 
																+    //alert(result.msg?result.msg:'登录成功！')
															
 
																+    // 美化提示信息的写法
															
 
																+    ElMessage({message: '登录成功！',type: 'success',})
															
 
																+    
															
 
																+    // 记录后端传过来的 token
															
 
																+    tokenStore.setToken(result.data);
															
 
																+
															
 
																+    // 跳转到主界面
															
 
																+    router.push('/')
															
 
																+}
															
 
																+
															
 
																+// 定义清空数据模型，使用户点击注册或返回按钮时，数据清空
															
 
																+const clearRegisterData=()=>{
															
 
																+    registerData.value={
															
 
																+        username:'',
															
 
																+        password:'',
															
 
																+        rePassword:''
															
 
																+    }
															
 
																+}
															
 
																+
															
 
																+</script>
															
 
																+
															
 
																+<template>
															
 
																+    <el-row class="login-page">
															
 
																+        <el-col :span="12" class="bg"></el-col>
															
 
																+        <el-col :span="6" :offset="3" class="form">
															
 
																+            <!-- 注册表单，使用 :model 绑定 script 标签中的的表单数据 registerData ，使用 :rules 绑定 rules 表单校验规则 -->
															
 
																+            <el-form ref="form" size="large" autocomplete="off" v-if="isRegister" :model="registerData" :rules="rules">
															
 
																+                <el-form-item>
															
 
																+                    <h1>注册</h1>
															
 
																+                </el-form-item>
															
 
																+                <!--prop 指定使用表单校验规则中 username 那一项-->
															
 
																+                <el-form-item prop="username">
															
 
																+                    <!-- v-model 绑定 script 标签中定义的 registerData.username -->
															
 
																+                    <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input>
															
 
																+                </el-form-item>
															
 
																+                <!--prop 指定使用表单校验规则中 password 那一项-->
															
 
																+                <el-form-item prop="password">
															
 
																+                    <!-- v-model 绑定 script 标签中定义的 registerData.password-->
															
 
																+                    <el-input :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password"></el-input>
															
 
																+                </el-form-item>
															
 
																+                <!--prop 指定使用表单校验规则中 rePassword 那一项-->
															
 
																+                <el-form-item prop="rePassword">
															
 
																+                    <!-- v-model 绑定 script 标签中定义的 registerData.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; clearRegisterData()" >
															
 
																+                        ← 返回
															
 
																+                    </el-link>
															
 
																+                </el-form-item>
															
 
																+            </el-form>
															
 
																+            <!-- 登录表单 ,这里复用注册表单的 registerData 变量信息，并复用注册表单的校验规则-->
															
 
																+            <el-form ref="form" size="large" autocomplete="off" :model="registerData" :rules="rules" v-else>
															
 
																+                <el-form-item>
															
 
																+                    <h1>登录</h1>
															
 
																+                </el-form-item>
															
 
																+                <!--prop 指定使用表单校验规则中 username 那一项-->
															
 
																+                <el-form-item prop="username">
															
 
																+                    <!--这里复用注册表单的 registerData.username-->
															
 
																+                    <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input>
															
 
																+                </el-form-item>
															
 
																+                <!--prop 指定使用表单校验规则中 password 那一项-->
															
 
																+                <el-form-item prop="password">
															
 
																+                    <!--这里复用注册表单的 registerData.password-->
															
 
																+                    <el-input name="password" :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.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; clearRegisterData()" >
															
 
																+                        注册 →
															
 
																+                    </el-link>
															
 
																+                </el-form-item>
															
 
																+            </el-form>
															
 
																+        </el-col>
															
 
																+    </el-row>
															
 
																+</template>
															
 
																+
															
 
																+<style lang="scss" scoped>
															
 
																+/* 样式 */
															
 
																+.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 {
															
 
																+        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/fhKeeper/formulahousekeeper/articleBackend/src/views/article/ArticleCategory.vue
+++ b/fhKeeper/formulahousekeeper/articleBackend/src/views/article/ArticleCategory.vue
@@ -0,0 +1,205 @@
 
																+<script setup>
															
 
																+import {
															
 
																+    Edit,
															
 
																+    Delete
															
 
																+} from '@element-plus/icons-vue'
															
 
																+import { ref } from 'vue'
															
 
																+const categorys = 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"
															
 
																+    }
															
 
																+])
															
 
																+
															
 
																+// 声明一个异步函数并使用
															
 
																+import {articleCategoryListService,articleCategoryAddService,articleCategoryUpdateService,articleCategoryDeleteService} from '@/api/article.js'
															
 
																+
															
 
																+
															
 
																+const articleCategoryList=async()=>{
															
 
																+    console.log("ArticleCategory.vue 的 async 异步方法成功进入。")
															
 
																+    let result=await articleCategoryListService();
															
 
																+    // 不明白为什么可以直接将返回的 data 赋值给 categorys.value 属性。但是他们的键名是一样的
															
 
																+    categorys.value=result.data;
															
 
																+}
															
 
																+// 必须调用一下才生效！
															
 
																+articleCategoryList();
															
 
																+
															
 
																+
															
 
																+// 弹窗部分代码
															
 
																+//控制添加分类的弹窗，默认false不显示
															
 
																+const dialogVisible = ref(false)
															
 
																+
															
 
																+//添加分类的数据模型，这里的模型和发送给后端添加分类的数据模型一致
															
 
																+const categoryModel = ref({
															
 
																+    categoryName: '',
															
 
																+    categoryAlias: ''
															
 
																+})
															
 
																+//添加分类的表单校验
															
 
																+const rules = {
															
 
																+    categoryName: [
															
 
																+        { required: true, message: '请输入分类名称', trigger: 'blur' },
															
 
																+    ],
															
 
																+    categoryAlias: [
															
 
																+        { required: true, message: '请输入分类别名', trigger: 'blur' },
															
 
																+    ]
															
 
																+}
															
 
																+
															
 
																+import {ElMessage} from 'element-plus'
															
 
																+// 调用接口，提交添加分类的表单数据
															
 
																+const addCategory=async()=>{
															
 
																+    // 调用接口
															
 
																+    let result=await articleCategoryAddService(categoryModel.value);
															
 
																+    // 如果能得到返回结果，说明成功了
															
 
																+    ElMessage.success(result.msg?result.msg:'添加成功！')
															
 
																+
															
 
																+    // 添加分类成功后，再刷新一下页面，并让当前弹窗消失，因此再调用一下
															
 
																+    articleCategoryList();
															
 
																+    dialogVisible.value=false;
															
 
																+}
															
 
																+
															
 
																+// 定义变量，控制标题的展示
															
 
																+const title=ref('');
															
 
																+// 展示编辑弹窗
															
 
																+const showDialog=(row)=>{
															
 
																+    dialogVisible.value=true;
															
 
																+    title.value='编辑分类';
															
 
																+    //数据拷贝
															
 
																+    categoryModel.value.categoryName=row.categoryName;
															
 
																+    categoryModel.value.categoryAlias=row.categoryAlias;
															
 
																+    //扩展id属性，将来需要传递给后端，完成分类的修改
															
 
																+    categoryModel.value.id=row.id;
															
 
																+}
															
 
																+
															
 
																+// 编辑分类
															
 
																+const updateCategory=async()=>{
															
 
																+    // 调用接口
															
 
																+    let result=await articleCategoryUpdateService(categoryModel.value);
															
 
																+    ElMessage.success(result.msg?result.msg:'修改成功！')
															
 
																+
															
 
																+    // 调用获取所有分类的函数
															
 
																+    articleCategoryList();
															
 
																+
															
 
																+    //隐藏弹窗
															
 
																+    dialogVisible.value=false;
															
 
																+}
															
 
																+
															
 
																+// 清空模型数据
															
 
																+const clearData=()=>{
															
 
																+    categoryModel.value.categoryName=''
															
 
																+    categoryModel.value.categoryAlias=''
															
 
																+}
															
 
																+
															
 
																+import { ElMessageBox } from 'element-plus'
															
 
																+// 删除分类
															
 
																+const deleteCategory=(row)=>{
															
 
																+    // 从 element-plus 上复制的代码
															
 
																+    ElMessageBox.confirm(
															
 
																+    '你确认要删除该分类信息吗?',
															
 
																+    'Warning',
															
 
																+    {
															
 
																+      confirmButtonText: '确认',
															
 
																+      cancelButtonText: '取消',
															
 
																+      type: 'warning',
															
 
																+    }
															
 
																+  )
															
 
																+    .then(async() => {
															
 
																+        // 调用删除接口
															
 
																+        let result=await articleCategoryDeleteService(row.id)
															
 
																+      ElMessage({
															
 
																+        type: 'success',
															
 
																+        message: '删除分类成功！',
															
 
																+      })
															
 
																+      //刷新列表
															
 
																+      articleCategoryList();
															
 
																+    })
															
 
																+    .catch(() => {
															
 
																+      ElMessage({
															
 
																+        type: 'info',
															
 
																+        message: '用户取消删除！',
															
 
																+      })
															
 
																+    })
															
 
																+
															
 
																+}
															
 
																+
															
 
																+
															
 
																+
															
 
																+</script>
															
 
																+<template>
															
 
																+    <el-card class="page-container">
															
 
																+        <template #header>
															
 
																+            <div class="header">
															
 
																+                <span >文章标签</span>
															
 
																+                <div class="extra">
															
 
																+                    <el-button type="primary" @click="dialogVisible=true;title='添加分类';clearData()">添加分类</el-button>
															
 
																+                </div>
															
 
																+            </div>
															
 
																+        </template>
															
 
																+        <!--这里的写法是 element-plus 表格的写法，官方文档示例代码就是这样写 prop 属性的-->
															
 
																+        <el-table :data="categorys" 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 }">-->
															
 
																+                <template #default="{row}">
															
 
																+                    <el-button :icon="Edit" circle plain type="primary" @click="showDialog(row)"></el-button>
															
 
																+                    <el-button :icon="Delete" circle plain type="danger" @click="deleteCategory(row)"></el-button>
															
 
																+                </template>
															
 
																+            </el-table-column>
															
 
																+            <template #empty>
															
 
																+                <el-empty description="没有数据" />
															
 
																+            </template>
															
 
																+        </el-table>
															
 
																+
															
 
																+        <!-- 添加分类弹窗 -->
															
 
																+<el-dialog v-model="dialogVisible" :title="title" width="30%">
															
 
																+    <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>
															
 
																+            <!--巧妙的利用 title 值实现当前走添加分类逻辑还是更新分类逻辑-->
															
 
																+            <el-button type="primary" @click="title=='添加分类'?addCategory():updateCategory()"> 确认 </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/fhKeeper/formulahousekeeper/articleBackend/src/views/article/ArticleManage.vue
+++ b/fhKeeper/formulahousekeeper/articleBackend/src/views/article/ArticleManage.vue
@@ -0,0 +1,416 @@
 
																+<script setup>
															
 
																+import {
															
 
																+    Edit,
															
 
																+    Delete
															
 
																+} from '@element-plus/icons-vue'
															
 
																+
															
 
																+import { ref } from 'vue'
															
 
																+
															
 
																+//文章标签数据模型
															
 
																+const categorys = ref([])
															
 
																+
															
 
																+//用户搜索时选中的分类id
															
 
																+const categoryId=ref('')
															
 
																+
															
 
																+//用户搜索时选中的发布状态
															
 
																+const state=ref('')
															
 
																+
															
 
																+//文章列表数据模型
															
 
																+const articles = ref([])
															
 
																+
															
 
																+const productList = ref([
															
 
																+    { id: '1', label: '工时管家' }, 
															
 
																+    { id: '2', label: '随访管家' }, 
															
 
																+    { id: '3', label: '项目管家' }, 
															
 
																+    { id: '4', label: '客户管家' }, 
															
 
																+    { id: '5', label: '生产车间管家' }, 
															
 
																+])
															
 
																+
															
 
																+//分页条数据模型
															
 
																+const pageNum = ref(1)//当前页
															
 
																+const total = ref(20)//总条数
															
 
																+const pageSize = ref(10)//每页条数
															
 
																+
															
 
																+//当每页条数发生了变化，调用此函数
															
 
																+const onSizeChange = (size) => {
															
 
																+    pageSize.value = size
															
 
																+    articleList();
															
 
																+}
															
 
																+//当前页码发生变化，调用此函数
															
 
																+const onCurrentChange = (num) => {
															
 
																+    pageNum.value = num
															
 
																+    articleList();
															
 
																+}
															
 
																+//回显文章标签
															
 
																+import {articleCategoryListService, articleListService,articleAddService, articleDeleteService} from '@/api/article.js'
															
 
																+const articleCategoryList=async()=>{
															
 
																+    let result = await articleCategoryListService();
															
 
																+    categorys.value=result.data;
															
 
																+}
															
 
																+articleCategoryList();
															
 
																+
															
 
																+//获取文章列表数据
															
 
																+const articleList=async()=>{
															
 
																+    let params={
															
 
																+        pageNum:pageNum.value,
															
 
																+        pageSize:pageSize.value,
															
 
																+        categoryId:categoryId.value?categoryId.value:null,
															
 
																+        state:state.value?state.value:null
															
 
																+    }
															
 
																+    let result =await articleListService(params);
															
 
																+    //渲染视图
															
 
																+    total.value=result.data.total;
															
 
																+    articles.value=result.data.items;
															
 
																+
															
 
																+    //处理数据，给数据模型扩展一个属性 categoryName ，分类名称
															
 
																+    for(let i=0;i<articles.value.length;i++){
															
 
																+        let article=articles.value[i];
															
 
																+        for(let j=0;j<categorys.value.length;j++){
															
 
																+            if(article.categoryId==categorys.value[j].id){
															
 
																+                article.categoryName=categorys.value[j].categoryName
															
 
																+            }
															
 
																+        }
															
 
																+    }
															
 
																+}
															
 
																+articleList()
															
 
																+
															
 
																+// 添加文章功能
															
 
																+import {Plus} from '@element-plus/icons-vue'
															
 
																+//控制抽屉是否显示
															
 
																+const visibleDrawer = ref(false)
															
 
																+//添加表单数据模型
															
 
																+const articleModel = ref({
															
 
																+    title: '',
															
 
																+    categoryId: '',
															
 
																+    coverImg: '',
															
 
																+    content:'',
															
 
																+    state:'',
															
 
																+    profile: '',
															
 
																+    productId: ''
															
 
																+})
															
 
																+const fileList = ref([])
															
 
																+
															
 
																+// 文章编辑器组件
															
 
																+import { QuillEditor } from '@vueup/vue-quill'
															
 
																+import '@vueup/vue-quill/dist/vue-quill.snow.css'
															
 
																+import { options } from '../../utils/quillEditorOptions'
															
 
																+
															
 
																+//导入token，方便编辑完文章后保存至服务器
															
 
																+import {userTokenStore} from '@/stores/token.js'
															
 
																+const tokenStore=userTokenStore();
															
 
																+
															
 
																+//上传成功的回调函数
															
 
																+const uploadSuccess=(result)=>{
															
 
																+    //将服务器响应的图片地址赋值给 articleModel 的 coverImg
															
 
																+    articleModel.value.coverImg=result.data;
															
 
																+    console.log(result.data)
															
 
																+}
															
 
																+
															
 
																+const fileExceedsLimit = () => {
															
 
																+    ElMessage.warning('只能上传一个文章封面')
															
 
																+}
															
 
																+
															
 
																+// 添加文章
															
 
																+import {ElMessage, ElMessageBox} from 'element-plus'
															
 
																+const addArticle=async(clickState)=>{
															
 
																+    // 把发布文章yes或草稿no赋值给数据模型
															
 
																+    articleModel.value.state=clickState;
															
 
																+    const { content, title, profile, categoryId, productId } = articleModel.value
															
 
																+    let str = ''
															
 
																+    if(!content) {
															
 
																+        str += '文章内容不能为空,'
															
 
																+    }
															
 
																+    if(!title) {
															
 
																+        str += '文章标题不能为空,'
															
 
																+    }
															
 
																+    if(!profile) {
															
 
																+        str += '文章封面不能为空,'
															
 
																+    }
															
 
																+    if(!categoryId || categoryId.length <= 0) {
															
 
																+        str += '文章标签不能为空,'
															
 
																+    }
															
 
																+    if(fileList.value.length <= 0) {
															
 
																+        str += '文章封面不能为空,'
															
 
																+    }
															
 
																+    if(!productId || productId == '0') {
															
 
																+        str += '文章所属产品不能为空,'
															
 
																+    }
															
 
																+    if(str) {
															
 
																+        ElMessage.warning(str)
															
 
																+        return
															
 
																+    }
															
 
																+    const formVla = { ...articleModel.value, categoryIds: (articleModel.value.categoryId || []).join(',') }
															
 
																+    delete formVla.categoryId
															
 
																+    const formData = new FormData()
															
 
																+    for (const key in formVla) {
															
 
																+        if(key == 'coverImg') {
															
 
																+            let file = fileList.value[0].raw
															
 
																+            if(!isFile(file)) {
															
 
																+                file = base64ToFile(file, 'image.png')
															
 
																+            }
															
 
																+            formData.append('coverImage', file)
															
 
																+        } else {
															
 
																+            formData.append(key, formVla[key])
															
 
																+        }
															
 
																+    }
															
 
																+    //调用接口
															
 
																+    // let result=await articleAddService(articleModel.value)
															
 
																+    let result=await articleAddService(formData)
															
 
																+    ElMessage.success(result.msg?result.msg:"添加文章成功！")
															
 
																+
															
 
																+    //让添加文章的抽屉消失
															
 
																+    visibleDrawer.value = false;
															
 
																+    //刷新当前列表
															
 
																+    articleList()
															
 
																+}
															
 
																+const isFile = (obj) => {
															
 
																+    return obj instanceof File;
															
 
																+}
															
 
																+
															
 
																+const base64ToFile = (base64String, fileName) => {
															
 
																+  const arr = base64String.split(',');
															
 
																+  const mime = arr[0].match(/:(.*?);/)[1];
															
 
																+  const bstr = atob(arr[1]);
															
 
																+  let n = bstr.length;
															
 
																+  const u8arr = new Uint8Array(n);
															
 
																+
															
 
																+  while (n--) {
															
 
																+    u8arr[n] = bstr.charCodeAt(n);
															
 
																+  }
															
 
																+
															
 
																+  return new File([u8arr], fileName, { type: mime });
															
 
																+}
															
 
																+// 修改文章
															
 
																+const editArticle = (row) => {
															
 
																+    const { categoryIds, content, title, profile, id, coverImg, productId } = row
															
 
																+    articleModel.value = {
															
 
																+        categoryId: categoryIds ? JSON.parse(categoryIds) : [],
															
 
																+        content,
															
 
																+        title,
															
 
																+        profile,
															
 
																+        id,
															
 
																+        coverImg: '',
															
 
																+        productId: productId
															
 
																+    }
															
 
																+    if(coverImg) {
															
 
																+        fileList.value = [{
															
 
																+            name: '图片',
															
 
																+            url: `data:image/jpeg;base64, ${coverImg}`,
															
 
																+            raw: `data:image/jpeg;base64, ${coverImg}`,
															
 
																+        }]
															
 
																+    } else {
															
 
																+        fileList.value = []
															
 
																+    }
															
 
																+    
															
 
																+
															
 
																+    visibleDrawer.value = true
															
 
																+}
															
 
																+
															
 
																+const deleteArticle = async (row) => {
															
 
																+    const { id, title } = row
															
 
																+    ElMessageBox.confirm(
															
 
																+        `确定删除【${title}】文章吗？`,
															
 
																+        {
															
 
																+            confirmButtonText: '确定',
															
 
																+            cancelButtonText: '取消',
															
 
																+            type: 'warning',
															
 
																+        }
															
 
																+    ).then(async () => {
															
 
																+        let result=await articleDeleteService({ id })
															
 
																+        ElMessage.success(result.message?result.message:"删除文章成功！")
															
 
																+        articleList()
															
 
																+    })
															
 
																+}
															
 
																+</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 categorys" 
															
 
																+                        :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="yes"></el-option>
															
 
																+                    <el-option label="草稿" value="no"></el-option>
															
 
																+                </el-select>
															
 
																+            </el-form-item>
															
 
																+            <el-form-item>
															
 
																+                <el-button type="primary" @click="articleList">搜索</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="categoryNames"></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="{ row }">
															
 
																+                    <el-button :icon="Edit" circle plain type="primary" @click="editArticle(row)"></el-button>
															
 
																+                    <el-button :icon="Delete" circle plain type="danger" @click="deleteArticle(row)"></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="`${articleModel.id ? '编辑文章' : '添加文章'}`" 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-input type="textarea"
															
 
																+                    :autosize="{ minRows: 2, maxRows: 4}" v-model="articleModel.profile" placeholder="请输入简介"></el-input>
															
 
																+                </el-form-item>
															
 
																+                <el-form-item label="文章标签">
															
 
																+                    <el-select placeholder="请选择" multiple v-model="articleModel.categoryId" style="width: 100%;">
															
 
																+                        <el-option v-for="c in categorys" :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="articleModel.productId" style="width: 100%;">
															
 
																+                        <el-option v-for="c in productList" :key="c.id" :label="c.label" :value="c.id">
															
 
																+                        </el-option>
															
 
																+                    </el-select>
															
 
																+                </el-form-item>
															
 
																+                <el-form-item label="文章封面">
															
 
																+                    <!--element-plus 的文件上传组件
															
 
																+                            auto-upload:是否自动上传
															
 
																+                            action: 服务器接口路径
															
 
																+                            name: 上传的文件字段名，也就是参数名称
															
 
																+                            headers: 设置上传的请求头
															
 
																+                            on-success: 上传成功的回调函数
															
 
																+                    -->
															
 
																+                    <el-upload
															
 
																+                        v-model:file-list="fileList"
															
 
																+                        list-type="picture-card"
															
 
																+                        :auto-upload="false"
															
 
																+                        :limit="1"
															
 
																+                        :on-exceed="fileExceedsLimit"
															
 
																+                    >
															
 
																+                        <el-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"
															
 
																+                            :options="options"
															
 
																+                            >
															
 
																+                        </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;
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+.avatar-uploader .el-upload {
															
 
																+    border: 1px dashed #d9d9d9;
															
 
																+    border-radius: 6px;
															
 
																+    cursor: pointer;
															
 
																+    position: relative;
															
 
																+    overflow: hidden;
															
 
																+}
															
 
																+.avatar-uploader .el-upload:hover {
															
 
																+    border-color: #409EFF;  
															
 
																+}
															
 
																+.avatar-uploader-icon {
															
 
																+    font-size: 28px;
															
 
																+    color: #8c939d;
															
 
																+    width: 178px;
															
 
																+    height: 178px;
															
 
																+    line-height: 178px;
															
 
																+    text-align: center;
															
 
																+}
															
 
																+.avatar {
															
 
																+    width: 178px;
															
 
																+    height: 178px;
															
 
																+    display: block;
															
 
																+}
															
 
																+</style>
															
--- a/fhKeeper/formulahousekeeper/articleBackend/src/views/user/UserAvatar.vue
+++ b/fhKeeper/formulahousekeeper/articleBackend/src/views/user/UserAvatar.vue
@@ -0,0 +1,105 @@
 
																+<script setup>
															
 
																+import { Plus, Upload } from '@element-plus/icons-vue'
															
 
																+import {ref} from 'vue'
															
 
																+import avatar from '@/assets/default.png'
															
 
																+const uploadRef = ref()
															
 
																+
															
 
																+import {userTokenStore} from '@/stores/token.js'
															
 
																+const tokenStore=userTokenStore()
															
 
																+
															
 
																+import useUserInfoStore from '@/stores/userInfo.js'
															
 
																+const userInfoStore=useUserInfoStore()
															
 
																+//用户头像地址
															
 
																+const imgUrl= ref(userInfoStore.info.userPic)
															
 
																+
															
 
																+// 图片上传成功的回调函数
															
 
																+const uploadSuccess=(result)=>{
															
 
																+    imgUrl.value=result.data
															
 
																+}
															
 
																+
															
 
																+import {userAvatarUpdateService} from '@/api/user.js'
															
 
																+import { ElMessage } from 'element-plus'
															
 
																+//头像修改
															
 
																+const updateAvatar=async()=>{
															
 
																+    //调用接口
															
 
																+     let result=await userAvatarUpdateService(imgUrl.value)
															
 
																+     ElMessage.success(result.msg?result.msg:"头像修改成功！")
															
 
																+
															
 
																+     //修改pinia中的数据
															
 
																+     userInfoStore.info.userPic=imgUrl.value;
															
 
																+}
															
 
																+</script>
															
 
																+
															
 
																+<template>
															
 
																+    <el-card class="page-container">
															
 
																+        <template #header>
															
 
																+            <div class="header">
															
 
																+                <span>更换头像</span>
															
 
																+            </div>
															
 
																+        </template>
															
 
																+        <el-row>
															
 
																+            <el-col :span="12">
															
 
																+                <!--
															
 
																+                    :auto-upload 自动上传
															
 
																+                    action="/api/upload"  别忘了这里的api是自己当初设置的前端路由标志，会被请求拦截器替换为空
															
 
																+                    name 是参数名称
															
 
																+                    :headers 是请求头，里面要加凭证
															
 
																+                    :on-success 是上传成功后要执行的回调函数
															
 
																+                -->
															
 
																+                <el-upload 
															
 
																+                    ref="uploadRef"
															
 
																+                    class="avatar-uploader" 
															
 
																+                    :show-file-list="false"
															
 
																+                    :auto-upload="true"
															
 
																+                    action="/api/upload"
															
 
																+                    name="file"
															
 
																+                    :headers="{'Authorization':tokenStore.token}"
															
 
																+                    :on-success="uploadSuccess"
															
 
																+                    >
															
 
																+                    <img v-if="imgUrl" :src="imgUrl" class="avatar" />
															
 
																+                    <img v-else :src="avatar" width="278" />
															
 
																+                </el-upload>
															
 
																+                <br />
															
 
																+                <el-button type="primary" :icon="Plus" size="large"  @click="uploadRef.$el.querySelector('input').click()">
															
 
																+                    选择图片
															
 
																+                </el-button>
															
 
																+                <el-button type="success" :icon="Upload" size="large" @click="updateAvatar">
															
 
																+                    上传头像
															
 
																+                </el-button>
															
 
																+            </el-col>
															
 
																+        </el-row>
															
 
																+    </el-card>
															
 
																+</template>
															
 
																+
															
 
																+<style lang="scss" scoped>
															
 
																+.avatar-uploader {
															
 
																+    :deep() {
															
 
																+        .avatar {
															
 
																+            width: 278px;
															
 
																+            height: 278px;
															
 
																+            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: 278px;
															
 
																+            height: 278px;
															
 
																+            text-align: center;
															
 
																+        }
															
 
																+    }
															
 
																+}
															
 
																+</style>
															
--- a/fhKeeper/formulahousekeeper/articleBackend/src/views/user/UserInfo.vue
+++ b/fhKeeper/formulahousekeeper/articleBackend/src/views/user/UserInfo.vue
@@ -0,0 +1,61 @@
 
																+<script setup>
															
 
																+import { ref } from 'vue'
															
 
																+// 要想获取用户信息，那么登录后，直接从 pinia 中获取就可以了
															
 
																+import useUserInfoStore from '@/stores/userInfo.js'
															
 
																+import { userInfoUpdateService } from '@/api/user'
															
 
																+import { ElMessage } from 'element-plus'
															
 
																+const userInfoStore =useUserInfoStore()
															
 
																+const userInfo = ref({...userInfoStore.info})
															
 
																+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' }
															
 
																+    ]
															
 
																+}
															
 
																+
															
 
																+//修改个人信息
															
 
																+const updateUserInfo=async()=>{
															
 
																+    //调用接口
															
 
																+    let result=await userInfoUpdateService(userInfo.value)
															
 
																+    ElMessage.success(result.msg?result.msg:"用户信息修改成功！")
															
 
																+
															
 
																+    //个人信息修改成功后，pinia中的信息也要修改
															
 
																+    userInfoStore.setInfo(userInfo.value)
															
 
																+}
															
 
																+
															
 
																+</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="updateUserInfo">提交修改</el-button>
															
 
																+                    </el-form-item>
															
 
																+                </el-form>
															
 
																+            </el-col>
															
 
																+        </el-row>
															
 
																+    </el-card>
															
 
																+</template>
															
--- a/fhKeeper/formulahousekeeper/articleBackend/src/views/user/UserResetPassword.vue
+++ b/fhKeeper/formulahousekeeper/articleBackend/src/views/user/UserResetPassword.vue
@@ -0,0 +1,114 @@
 
																+<script setup>
															
 
																+import {ref} from 'vue'
															
 
																+
															
 
																+// 自定义表单校验规则：校验二次密码是否和第一次输入的一致，参考 element-plus 官方文档编写
															
 
																+const checkre_pwd=(rule,value,callback)=>{
															
 
																+    if(value===''){
															
 
																+        callback(new Error("请再次确认密码！"))
															
 
																+    }else if(value!==resetData.value.new_pwd){
															
 
																+        callback(new Error('请确保两次输入的密码一样！'))
															
 
																+    }else{
															
 
																+        callback()
															
 
																+    }
															
 
																+}
															
 
																+
															
 
																+
															
 
																+// 定义表单校验规则，由于使用的是 Element-Plus ，所以，表单校验规则需要参考官方文档进行编写
															
 
																+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:[
															
 
																+        {validator:checkre_pwd,trigger:'blur'}
															
 
																+    ]
															
 
																+}
															
 
																+
															
 
																+// 定义注册表单的数据模型，并绑定到对应的标签
															
 
																+const resetData=ref({
															
 
																+    old_pwd:'',
															
 
																+    new_pwd:'',
															
 
																+    re_pwd:''
															
 
																+}
															
 
																+)
															
 
																+
															
 
																+// 重置密码
															
 
																+import {userPasswordResetService} from '@/api/user.js'
															
 
																+import { ElMessage } from 'element-plus'
															
 
																+const resetPassword=async()=>{
															
 
																+    let result=await userPasswordResetService(resetData.value);
															
 
																+    ElMessage.success(result.msg?result.msg:"密码重置成功！")
															
 
																+}
															
 
																+
															
 
																+</script>
															
 
																+
															
 
																+<template>
															
 
																+    <el-col :span="6" :offset="3" class="form">
															
 
																+    <!-- 登录表单 ,这里复用注册表单的 resetData 变量信息，并复用注册表单的校验规则-->
															
 
																+    <el-form ref="form" size="large" autocomplete="off" :model="resetData" :rules="rules">
															
 
																+                <el-form-item>
															
 
																+                    <h1>密码重置</h1>
															
 
																+                </el-form-item>
															
 
																+                <!--prop 指定使用表单校验规则中 old_pwd 那一项-->
															
 
																+                <el-form-item prop="old_pwd">
															
 
																+                    <!--这里复用注册表单的 resetData.old_pwd-->
															
 
																+                    <el-input name="old_pwd" :prefix-icon="Lock" type="password" placeholder="请输入你的旧密码" v-model="resetData.old_pwd"></el-input>
															
 
																+                </el-form-item>
															
 
																+                <!--prop 指定使用表单校验规则中 password 那一项-->
															
 
																+                <el-form-item prop="new_pwd">
															
 
																+                    <!--这里复用注册表单的 resetData.password-->
															
 
																+                    <el-input name="new_pwd" :prefix-icon="Lock" type="password" placeholder="请输入要重置的密码" v-model="resetData.new_pwd"></el-input>
															
 
																+                </el-form-item>
															
 
																+                <el-form-item prop="re_pwd">
															
 
																+                    <!--这里复用注册表单的 resetData.re_pwd-->
															
 
																+                    <el-input name="re_pwd" :prefix-icon="Lock" type="password" placeholder="再次确认密码" v-model="resetData.re_pwd"></el-input>
															
 
																+                </el-form-item>
															
 
																+               
															
 
																+                <!-- 登录按钮 -->
															
 
																+                <el-form-item>
															
 
																+                    <!--添加点击事件，点击后进行登录操作-->
															
 
																+                    <el-button class="button" type="primary" auto-insert-space @click="resetPassword">重置密码</el-button>
															
 
																+                </el-form-item>
															
 
																+                
															
 
																+            </el-form>
															
 
																+        </el-col>
															
 
																+</template>
															
 
																+
															
 
																+<style lang="scss" scoped>
															
 
																+/* 样式 */
															
 
																+.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 {
															
 
																+        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/fhKeeper/formulahousekeeper/articleBackend/vite.config.js
+++ b/fhKeeper/formulahousekeeper/articleBackend/vite.config.js
@@ -0,0 +1,31 @@
 
																+import { fileURLToPath, URL } from 'node:url'
															
 
																+
															
 
																+import { defineConfig } from 'vite'
															
 
																+import vue from '@vitejs/plugin-vue'
															
 
																+
															
 
																+// https://vitejs.dev/config/
															
 
																+export default defineConfig({
															
 
																+  plugins: [
															
 
																+    vue(),
															
 
																+  ],
															
 
																+  resolve: {
															
 
																+    alias: {
															
 
																+      '@': fileURLToPath(new URL('./src', import.meta.url))
															
 
																+    }
															
 
																+  },
															
 
																+  // 服务器代理配置
															
 
																+  server:{
															
 
																+    host: '0.0.0.0',
															
 
																+    port: 18972,
															
 
																+    proxy:{
															
 
																+      '/api':{
															
 
																+        // target:'http://localhost:8080',  // 后台服务所在的源，用这个源替换前端服务源
															
 
																+        target:'http://47.101.180.183:8091',  // 后台服务所在的源，用这个源替换前端服务源
															
 
																+        // target:'http://192.168.2.17:8091',  // 后台服务所在的源，用这个源替换前端服务源
															
 
																+        changeOrigin:true,     // 开启修改源
															
 
																+        rewrite:(path)=>path.replace(/^\/api/,'')   // url路径中的 /api 将会被替换成 '' 
															
 
																+      }
															
 
																+    }
															
 
																+    
															
 
																+  }
															
 
																+})
	`@@ -0,0 +1,2 @@`
			`+# Auto detect text files and perform LF normalization`
			`+* text=auto`