├── .vscode
    └── extensions.json
├── vite.config.js
├── src
    ├── api
    │   ├── user.js
    │   └── article.js
    ├── assets
    │   ├── logo.jpg
    │   ├── avatar.jpg
    │   ├── cover.jpg
    │   ├── default.png
    │   ├── login1.jpg
    │   ├── login2.jpg
    │   └── main.scss
    ├── router
    │   └── index.js
    ├── stores
    │   ├── userInfo.js
    │   └── token.js
    ├── App.vue
    ├── main.js
    ├── utils
    │   └── request.js
    └── views
    │   ├── user
    │       ├── UserInfo.vue
    │       ├── UserAvatar.vue
    │       └── UserResetPassword.vue
    │   ├── article
    │       ├── ArticleCategory.vue
    │       └── ArticleManage.vue
    │   ├── Login.vue
    │   └── Layout.vue
├── public
    └── favicon.ico
├── jsconfig.json
├── index.html
├── .gitignore
├── README.md
└── package.json


/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["Vue.volar"]
3 | }
4 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dl0520dl/big-event/HEAD/vite.config.js


--------------------------------------------------------------------------------
/src/api/user.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dl0520dl/big-event/HEAD/src/api/user.js


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dl0520dl/big-event/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/api/article.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dl0520dl/big-event/HEAD/src/api/article.js


--------------------------------------------------------------------------------
/src/assets/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dl0520dl/big-event/HEAD/src/assets/logo.jpg


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dl0520dl/big-event/HEAD/src/router/index.js


--------------------------------------------------------------------------------
/src/assets/avatar.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dl0520dl/big-event/HEAD/src/assets/avatar.jpg


--------------------------------------------------------------------------------
/src/assets/cover.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dl0520dl/big-event/HEAD/src/assets/cover.jpg


--------------------------------------------------------------------------------
/src/assets/default.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dl0520dl/big-event/HEAD/src/assets/default.png


--------------------------------------------------------------------------------
/src/assets/login1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dl0520dl/big-event/HEAD/src/assets/login1.jpg


--------------------------------------------------------------------------------
/src/assets/login2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dl0520dl/big-event/HEAD/src/assets/login2.jpg


--------------------------------------------------------------------------------
/src/stores/userInfo.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dl0520dl/big-event/HEAD/src/stores/userInfo.js


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "paths": {
4 |       "@/*": ["./src/*"]
5 |     }
6 |   },
7 |   "exclude": ["node_modules", "dist"]
8 | }
9 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | </script>
 3 | 
 4 | <template>
 5 |   <router-view></router-view>
 6 | </template>
 7 | 
 8 | <style scoped>
 9 | 
10 | </style>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <link rel="icon" href="/favicon.ico">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Vite App</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script type="module" src="/src/main.js"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/src/assets/main.scss:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   background-color: #f5f5f5;
 4 | }
 5 | 
 6 | /* fade-slide */
 7 | .fade-slide-leave-active,
 8 | .fade-slide-enter-active {
 9 |   transition: all 0.3s;
10 | }
11 | 
12 | .fade-slide-enter-from {
13 |   transform: translateX(-30px);
14 |   opacity: 0;
15 | }
16 | 
17 | .fade-slide-leave-to {
18 |   transform: translateX(30px);
19 |   opacity: 0;
20 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | .DS_Store
12 | dist
13 | dist-ssr
14 | coverage
15 | *.local
16 | 
17 | /cypress/videos/
18 | /cypress/screenshots/
19 | 
20 | # Editor directories and files
21 | .vscode/*
22 | !.vscode/extensions.json
23 | .idea
24 | *.suo
25 | *.ntvs*
26 | *.njsproj
27 | *.sln
28 | *.sw?
29 | 
30 | *.tsbuildinfo
31 | 


--------------------------------------------------------------------------------
/src/stores/token.js:
--------------------------------------------------------------------------------
 1 | //定义store 
 2 | import {defineStore} from 'pinia'
 3 | import {ref} from 'vue'
 4 | 
 5 | export const useTokenStore = defineStore('token',()=>{
 6 | 
 7 |     const token = ref('')
 8 |     const setToken = (newToken)=>{
 9 |         token.value = newToken
10 |     }
11 | 
12 |     const removeToken = ()=>{
13 |         token.value = ''
14 |     }
15 |     return  {
16 |         token, setToken, removeToken 
17 |     }
18 | },{
19 |     //持久化存储
20 |     persist:true
21 | });
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # big-event前端代码
 2 | springBoot + vue3
 3 | 
 4 | ### 项目运行
 5 | 
 6 | ```sh
 7 | npm run dev
 8 | ```
 9 | 
10 | ### 页面概览
11 | ![image](https://github.com/user-attachments/assets/2c99912f-1d94-4b72-9732-da6a20da7c85)
12 | 
13 | ![image](https://github.com/user-attachments/assets/92b0b625-f1c2-4a8e-ad85-3270958e35b7)
14 | 
15 | ![image](https://github.com/user-attachments/assets/4cabec41-2250-4b5a-bc10-4b7f902733c6)
16 | 
17 | ![image](https://github.com/user-attachments/assets/3388bfd6-5d8c-424d-83c6-5e128cc7727c)
18 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "big-event",
 3 |   "version": "0.0.0",
 4 |   "private": true,
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "preview": "vite preview"
10 |   },
11 |   "dependencies": {
12 |     "@vueup/vue-quill": "^1.2.0",
13 |     "axios": "^1.7.2",
14 |     "element-plus": "^2.7.8",
15 |     "pinia": "^2.2.0",
16 |     "pinia-persistedstate-plugin": "^0.1.0",
17 |     "vue": "^3.4.29",
18 |     "vue-router": "^4.4.2"
19 |   },
20 |   "devDependencies": {
21 |     "@vitejs/plugin-vue": "^5.0.5",
22 |     "sass": "^1.77.8",
23 |     "vite": "^5.3.1"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 |  import './assets/main.scss'
 2 | 
 3 | import { createApp } from 'vue'
 4 | 
 5 | import ElementPlus from 'element-plus'
 6 | 
 7 | import 'element-plus/dist/index.css'
 8 | 
 9 | import App from './App.vue'
10 | 
11 | import router from '@/router'
12 | 
13 | import {createPinia} from 'pinia'
14 | 
15 | import { createPersistedState } from 'pinia-persistedstate-plugin'
16 | 
17 | import locale from 'element-plus/dist/locale/zh-cn.js'
18 | 
19 | const app = createApp(App);
20 | const pinia = createPinia();
21 | const persist = createPersistedState();
22 | pinia.use(persist)
23 | app.use(pinia)
24 | app.use(ElementPlus, {locale})
25 | app.use(router)
26 | 
27 | app.mount('#app')


--------------------------------------------------------------------------------
/src/utils/request.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios';
 2 | 
 3 | import { ElMessage } from 'element-plus'
 4 | 
 5 | import { useTokenStore } from '@/stores/token.js';
 6 | const baseURL = '/api';
 7 | const instance = axios.create({baseURL})
 8 | 
 9 | instance.interceptors.request.use(
10 |     (config)=>{
11 |         const tokenStore = useTokenStore();
12 |         if(tokenStore.token){
13 |             config.headers.Authorization = tokenStore.token
14 |         }
15 |         return config;
16 |     },
17 |     (err)=>{
18 |         Promise.reject(err)
19 |     }
20 | )
21 | 
22 | import router from '@/router'
23 | 
24 | 
25 | 
26 | instance.interceptors.response.use(
27 |     result=>{
28 | 
29 |         if(result.data.code === 0){
30 |             return result.data;
31 |         }
32 | 
33 |         ElMessage.error(result.data.msg ? result.data.msg : '服务异常')
34 | 
35 |         return Promise.reject(result.data)
36 |     },
37 |     err=>{
38 |         //判断响应状态码，如果为401，则证明未登录，提示登录，并跳转登陆页面
39 |         if(err.response.status === 401){
40 |             ElMessage.error('请先登录')
41 |             router.push('/login')
42 |         }else{
43 |             ElMessage.error('服务异常');
44 |         }
45 |       
46 |         return Promise.reject(err);
47 |     }
48 | )
49 | 
50 | export default instance;


--------------------------------------------------------------------------------
/src/views/user/UserInfo.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { ref } from 'vue'
 3 | import useUserInfoStore from '@/stores/userInfo.js';
 4 | const userInfoStore = useUserInfoStore();
 5 | const userInfo = ref({...userInfoStore.info})
 6 | 
 7 | const rules = {
 8 |     nickname: [
 9 |         { required: true, amessage: '请输入用户昵称', trigger: 'blur' },
10 |         {
11 |             pattern: /^\S{2,16}$/,
12 |             message: '昵称必须是2-16位的非空字符串',
13 |             trigger: 'blur'
14 |         }
15 |     ],
16 |     email: [
17 |         { required: true, message: '请输入用户邮箱', trigger: 'blur' },
18 |         { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
19 |     ]
20 | }
21 | 
22 | 
23 | import { userInfoUpdateService } from '@/api/user.js';
24 | import { ElMessage } from 'element-plus';
25 | const updateUserInfo = async ()=>{
26 |   
27 |     //调用接口
28 |     let result = await userInfoUpdateService(userInfo.value);
29 |     ElMessage.success(result.msg ? result.msg : '修改成功')
30 | 
31 |     //修改pinia中的信息
32 |     userInfoStore.setInfo(userInfo.value)
33 |    
34 | }
35 | 
36 | </script>
37 | <template>
38 |     <el-card class="page-container">
39 |         <template #header>
40 |             <div class="header">
41 |                 <span><strong>基本资料</strong></span>
42 |             </div>
43 |         </template>
44 |         <el-row>
45 |             <el-col :span="12">
46 |                 <el-form :model="userInfo" :rules="rules" label-width="100px" size="large">
47 |                     <el-form-item label="登录名称">
48 |                         <el-input v-model="userInfo.username" disabled></el-input>
49 |                     </el-form-item>
50 |                     <el-form-item label="用户昵称" prop="nickname">
51 |                         <el-input v-model="userInfo.nickname"></el-input>
52 |                     </el-form-item>
53 |                     <el-form-item label="用户邮箱" prop="email">
54 |                         <el-input v-model="userInfo.email"></el-input>
55 |                     </el-form-item>
56 |                     <el-form-item>
57 |                         <el-button type="primary" @click="updateUserInfo()">提交修改</el-button>
58 |                     </el-form-item>
59 |                 </el-form>
60 |             </el-col>
61 |         </el-row>
62 |     </el-card>
63 | </template>


--------------------------------------------------------------------------------
/src/views/user/UserAvatar.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { Plus, Upload } from '@element-plus/icons-vue'
 3 | import {ref} from 'vue'
 4 | import avatar from '@/assets/default.png'
 5 | const uploadRef = ref()
 6 | 
 7 | import useUserInfoStore  from '@/stores/userInfo';
 8 | import {useTokenStore} from '@/stores/token.js'
 9 | import { userAvatarUpdateService } from '@/api/user';
10 | import { ElMessage } from 'element-plus';
11 | const tokenStore= useTokenStore();
12 | const userInfoStore = useUserInfoStore();
13 | const imgUrl= ref(userInfoStore.info.userPic)
14 | //用户头像地址
15 | 
16 | //图片上传成功的回调函数
17 | const uploadSuccess = (result)=>{
18 |     imgUrl.value = result.data; 
19 | }
20 | 
21 | const updateAvatar = async()=>{
22 |     //调用接口
23 |     let result = await userAvatarUpdateService(imgUrl.value);
24 | 
25 |     ElMessage.success(result.msg ? result.msg : '修改成功')
26 | 
27 |     //修改pinia中的数据
28 |     userInfoStore.info.userPic = imgUrl.value;
29 | 
30 | }
31 | 
32 | </script>
33 | 
34 | <template>
35 |     <el-card class="page-container">
36 |         <template #header>
37 |             <div class="header">
38 |                 <span><strong>更换头像</strong></span>
39 |             </div>
40 |         </template>
41 |         <el-row>
42 |             <el-col :span="12">
43 |                 <el-upload 
44 |                     ref="uploadRef"
45 |                     class="avatar-uploader" 
46 |                     :show-file-list="false"
47 |                     :auto-upload="true"
48 |                     action="/api/upload"
49 |                     name="file"
50 |                     :headers="{'Authorization':tokenStore.token}"
51 |                     :on-success="uploadSuccess"
52 |                     >
53 |                     <img v-if="imgUrl" :src="imgUrl" class="avatar" />
54 |                     <img v-else :src="avatar" width="278" />
55 |                 </el-upload>
56 |                 <br />
57 |                 <el-button type="primary" :icon="Plus" size="large"  @click="uploadRef.$el.querySelector('input').click()">
58 |                     选择图片
59 |                 </el-button>
60 |                 <el-button type="success" :icon="Upload" size="large" @click="updateAvatar()">
61 |                     上传头像
62 |                 </el-button>
63 |             </el-col>
64 |         </el-row>
65 |     </el-card>
66 | </template>
67 | 
68 | <style lang="scss" scoped>
69 | .avatar-uploader {
70 |     :deep() {
71 |         .avatar {
72 |             width: 278px;
73 |             height: 278px;
74 |             display: block;
75 |         }
76 | 
77 |         .el-upload {
78 |             border: 1px dashed var(--el-border-color);
79 |             border-radius: 6px;
80 |             cursor: pointer;
81 |             position: relative;
82 |             overflow: hidden;
83 |             transition: var(--el-transition-duration-fast);
84 |         }
85 | 
86 |         .el-upload:hover {
87 |             border-color: var(--el-color-primary);
88 |         }
89 | 
90 |         .el-icon.avatar-uploader-icon {
91 |             font-size: 28px;
92 |             color: #8c939d;
93 |             width: 278px;
94 |             height: 278px;
95 |             text-align: center;
96 |         }
97 |     }
98 | }
99 | </style>


--------------------------------------------------------------------------------
/src/views/user/UserResetPassword.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import { ref } from 'vue'
  3 | import { userPasswordUpdateService } from '@/api/user'
  4 | import { ElMessage ,ElMessageBox} from 'element-plus'
  5 | 
  6 | import { useRouter } from 'vue-router';
  7 | const router = useRouter();
  8 | 
  9 | const passwordInfo = ref({
 10 |     oldPwd: '',
 11 |     newPwd: '',
 12 |     rePwd: ''
 13 | })
 14 | 
 15 | const checkRePassword = (rule, value, callback) => {
 16 |     if (value === '') {
 17 |         callback(new Error('确认密码不能为空'))
 18 |     } else if (value !== passwordInfo.value.newPwd) {
 19 |         callback(new Error('两次密码不一致'))
 20 |     } else {
 21 |         callback()
 22 |     }
 23 | }
 24 | 
 25 | const rules = {
 26 |     oldPwd: [
 27 |         { required: true, message: '请输入原密码', trigger: 'blur' },
 28 |         {
 29 |             pattern: /^\S{6,20}$/,
 30 |             message: '原密码必须是6-20位的非空字符串',
 31 |             trigger: 'blur'
 32 |         }
 33 |     ],
 34 |     newPwd: [
 35 |         { required: true, message: '请输入新密码', trigger: 'blur' },
 36 |         {
 37 |             pattern: /^\S{6,20}$/,
 38 |             message: '新密码必须是6-20位的非空字符串',
 39 |             trigger: 'blur'
 40 |         }
 41 |     ],
 42 |     rePwd: [
 43 |         { required: true, message: '请确认新密码', trigger: 'blur' },
 44 |         { validator: checkRePassword, trigger: 'blur' },
 45 |         {
 46 |             pattern: /^\S{6,20}$/,
 47 |             message: '新密码必须是6-20位的非空字符串',
 48 |             trigger: 'blur'
 49 |         }
 50 |     ]
 51 | }
 52 | 
 53 | const loading = ref(false)
 54 | 
 55 | const updatePassword = async () => {
 56 |     ElMessageBox.confirm(
 57 |     '确认修改密码？',
 58 |     'Warning',
 59 |     {
 60 |       confirmButtonText: '确认',
 61 |       cancelButtonText: '取消',
 62 |       type: 'warning',
 63 |     }
 64 |   )
 65 |     .then(async () => {
 66 |         const formattedData = {
 67 |         old_pwd: passwordInfo.value.oldPwd,
 68 |         new_pwd: passwordInfo.value.newPwd,
 69 |         re_pwd: passwordInfo.value.rePwd
 70 |     }
 71 |     loading.value = true;
 72 |     try {
 73 |         let result = await userPasswordUpdateService(formattedData)
 74 |         if (result.code === 0) {
 75 |             ElMessage.success(result.msg ? result.msg : '修改成功')
 76 |             passwordInfo.value = { oldPwd: '', newPwd: '', rePwd: '' }
 77 |             router.push('/login')
 78 |         } else {
 79 |             ElMessage.error(result.msg ? result.msg : '修改失败')
 80 |         }
 81 |     } catch (error) {
 82 |         ElMessage.error('修改失败')
 83 |     } finally {
 84 |         loading.value = false
 85 |     }
 86 |     })
 87 | }
 88 | 
 89 | 
 90 | //     const formattedData = {
 91 | //         old_pwd: passwordInfo.value.oldPwd,
 92 | //         new_pwd: passwordInfo.value.newPwd,
 93 | //         re_pwd: passwordInfo.value.rePwd
 94 | //     }
 95 | 
 96 | //     loading.value = true
 97 | //     try {
 98 | //         let result = await userPasswordUpdateService(formattedData)
 99 | //         if (result.code === 0) {
100 | //             ElMessage.success(result.msg ? result.msg : '修改成功')
101 | //             passwordInfo.value = { oldPwd: '', newPwd: '', rePwd: '' }
102 | //             router.push('/login')
103 | //         } else {
104 | //             ElMessage.error(result.msg ? result.msg : '修改失败')
105 | //         }
106 | //     } catch (error) {
107 | //         ElMessage.error('修改失败，请稍后再试')
108 | //     } finally {
109 | //         loading.value = false
110 | //     }
111 | // }
112 | </script>
113 | 
114 | <template>
115 |     <el-card class="page-container">
116 |         <template #header>
117 |             <div class="header">
118 |                 <span><strong>密码修改</strong></span>
119 |             </div>
120 |         </template>
121 |         <el-row>
122 |             <el-col :span="12">
123 |                 <el-form :model="passwordInfo" :rules="rules" label-width="100px" size="large">
124 |                     <el-form-item label="原密码" prop="oldPwd">
125 |                         <el-input v-model="passwordInfo.oldPwd" type="password"></el-input>
126 |                     </el-form-item>
127 |                     <el-form-item label="新密码" prop="newPwd">
128 |                         <el-input v-model="passwordInfo.newPwd" type="password"></el-input>
129 |                     </el-form-item>
130 |                     <el-form-item label="确认密码" prop="rePwd">
131 |                         <el-input v-model="passwordInfo.rePwd" type="password"></el-input>
132 |                     </el-form-item>
133 |                     <el-form-item>
134 |                         <el-button type="primary" @click="updatePassword" :loading="loading">确认修改</el-button>
135 |                     </el-form-item>
136 |                 </el-form>
137 |             </el-col>
138 |         </el-row>
139 |     </el-card>
140 | </template>
141 | 


--------------------------------------------------------------------------------
/src/views/article/ArticleCategory.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import {
  3 |     Edit,
  4 |     Delete
  5 | } from '@element-plus/icons-vue'
  6 | import { ref } from 'vue'
  7 | const categorys = ref([
  8 |     {
  9 |         "id": 3,
 10 |         "categoryName": "美食",
 11 |         "categoryAlias": "ms",
 12 |         "createTime": "2023-09-02 12:06:59",
 13 |         "updateTime": "2023-09-02 12:06:59"
 14 |     },
 15 |     {
 16 |         "id": 4,
 17 |         "categoryName": "娱乐",
 18 |         "categoryAlias": "yl",
 19 |         "createTime": "2023-09-02 12:08:16",
 20 |         "updateTime": "2023-09-02 12:08:16"
 21 |     },
 22 |     {
 23 |         "id": 5,
 24 |         "categoryName": "军事",
 25 |         "categoryAlias": "js",
 26 |         "createTime": "2023-09-02 12:08:33",
 27 |         "updateTime": "2023-09-02 12:08:33"
 28 |     }
 29 | ])
 30 | 
 31 | import {articleCategoryListService, articleCategoryAddService, articleCategoryUpdateService,articleCategoryDeleteService} from '@/api/article.js'
 32 | const articleCategoryList = async()=>{
 33 |     let result = await articleCategoryListService();
 34 |     categorys.value = result.data;
 35 | }
 36 | articleCategoryList(); 
 37 | const dialogVisible = ref(false)
 38 | 
 39 | //添加分类数据模型
 40 | const categoryModel = ref({
 41 |     categoryName: '',
 42 |     categoryAlias: ''
 43 | })
 44 | //添加分类表单校验
 45 | const rules = {
 46 |     categoryName: [
 47 |         { required: true, message: '请输入分类名称', trigger: 'blur' },
 48 |     ],
 49 |     categoryAlias: [
 50 |         { required: true, message: '请输入分类别名', trigger: 'blur' },
 51 |     ]
 52 | }
 53 | //调用接口，添加文章分类
 54 | import { ElMessage } from 'element-plus';
 55 | const addCategory = async()=>{ 
 56 |     //调用接口
 57 |     let result = await articleCategoryAddService(categoryModel.value);
 58 |     ElMessage.success(result.msg ? result.msg : '添加成功')
 59 | 
 60 |     //调用获取所有文章分类的函数
 61 |     articleCategoryList();
 62 |     dialogVisible.value = false;
 63 | }
 64 | 
 65 | const title = ref('')
 66 | 
 67 | //展示编辑弹窗
 68 | const showDialog = (row)=>{
 69 |     dialogVisible.value=true;
 70 |     title.value='编辑分类';
 71 |     categoryModel.value.categoryName = row.categoryName;
 72 |     categoryModel.value.categoryAlias = row.categoryAlias;
 73 |     //扩展id属性,传递给后台，完成分类的修改
 74 |     categoryModel.value.id = row.id
 75 | }
 76 | //编辑分类
 77 | const updateCategory = async()=>{
 78 |     //调用接口 
 79 |     let result = await articleCategoryUpdateService(categoryModel.value);
 80 |     ElMessage.success(result.msg ? result.msg : '修改成功')
 81 |     articleCategoryList();
 82 |     dialogVisible.value = false;
 83 | } 
 84 | 
 85 | //清空模型的数据
 86 | const clearData = ()=>{
 87 |     categoryModel.value.categoryAlias = '';
 88 |     categoryModel.value.categoryName = '';
 89 | }
 90 | 
 91 | //删除分类
 92 | import { ElMessageBox } from 'element-plus';
 93 | const deleteCategory = (row)=>{
 94 |     ElMessageBox.confirm(
 95 |     '确认删除此文章分类？',
 96 |     'Warning',
 97 |     {
 98 |       confirmButtonText: '确认',
 99 |       cancelButtonText: '取消',
100 |       type: 'warning',
101 |     }
102 |   )
103 |     .then(async () => {
104 |         let result = await articleCategoryDeleteService(row.id)
105 |       ElMessage({
106 |         type: 'success',
107 |         message: '删除成功',
108 |       })
109 |       //刷新列表
110 |       articleCategoryList();
111 |     })
112 |     .catch(() => {
113 |       ElMessage({
114 |         type: 'info',
115 |         message: '取消删除',
116 |       })
117 |     })
118 | }
119 | </script>
120 | <template>
121 |     <el-card class="page-container">
122 |         <template #header>
123 |             <div class="header">
124 |                 <span><strong>文章分类</strong></span>
125 |                 <div class="extra">
126 |                     <el-button type="primary" @click="dialogVisible=true;title='添加分类';clearData()">添加分类</el-button>
127 |                 </div>
128 |             </div>
129 |         </template>
130 |         <el-table :data="categorys" style="width: 100%">
131 |             <el-table-column label="序号" width="100" type="index"> </el-table-column>
132 |             <el-table-column label="分类名称" prop="categoryName"></el-table-column>
133 |             <el-table-column label="分类别名" prop="categoryAlias"></el-table-column>
134 |             <el-table-column label="操作" width="100">
135 |                 <template #default="{ row }">
136 |                     <el-button :icon="Edit" circle plain type="primary" @click="showDialog(row)"></el-button>
137 |                     <el-button :icon="Delete" circle plain type="danger" @click="deleteCategory(row)"></el-button>
138 |                 </template>
139 |             </el-table-column>
140 |             <template #empty>
141 |                 <el-empty description="没有数据" />
142 |             </template>
143 |         </el-table>
144 | 
145 |         <!-- 添加分类弹窗 -->
146 |         <el-dialog v-model="dialogVisible" :title="title" width="30%">
147 |             <el-form :model="categoryModel" :rules="rules" label-width="100px" style="padding-right: 30px">
148 |                 <el-form-item label="分类名称" prop="categoryName">
149 |                     <el-input v-model="categoryModel.categoryName" minlength="1" maxlength="10"></el-input>
150 |                 </el-form-item>
151 |                 <el-form-item label="分类别名" prop="categoryAlias">
152 |                     <el-input v-model="categoryModel.categoryAlias" minlength="1" maxlength="15"></el-input>
153 |                 </el-form-item>
154 |             </el-form>
155 |             <template #footer>
156 |                 <span class="dialog-footer">
157 |                     <el-button @click="dialogVisible = false">取消</el-button>
158 |                     <el-button type="primary" @click="title=='添加分类' ? addCategory() : updateCategory()"> 确认 </el-button>
159 |                 </span>
160 |             </template> 
161 |         </el-dialog>
162 |     </el-card>
163 | </template>
164 | 
165 | <style lang="scss" scoped>
166 | .page-container {
167 |     min-height: 100%;
168 |     box-sizing: border-box;
169 | 
170 |     .header {
171 |         display: flex;
172 |         align-items: center;
173 |         justify-content: space-between;
174 |     }
175 | }
176 | </style>


--------------------------------------------------------------------------------
/src/views/Login.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import { User, Lock } from '@element-plus/icons-vue'
  3 | import { ref } from 'vue'
  4 | import { ElMessage } from 'element-plus'
  5 | //控制注册与登录表单的显示， 默认显示注册
  6 | const isRegister = ref(false)
  7 | 
  8 | //数据模型
  9 | const registerData = ref({
 10 |     username:'',
 11 |     password:'',
 12 |     rePassword:''
 13 | })
 14 | 
 15 | const checkRePassword = (rule, value, callback)=>{
 16 |     if (value==='') {
 17 |         callback(new Error('请确认密码'))
 18 |     }else if(value !== registerData.value.password){
 19 |         callback(new Error('两次密码不一致'))
 20 |     }else{
 21 |         callback()
 22 |     }
 23 | }
 24 | 
 25 | //定义表单校验规则
 26 | 
 27 | const rules = {
 28 |     username:[
 29 |         {required:true, message:'请输入用户名',trigger:'blur'},
 30 |         {min:6, max:16, message:'请输入6-16位非空字符',trigger:'blur'}
 31 |     ],
 32 |     password:[
 33 |         {required:true, message:'请输入密码',trigger:'blur'},
 34 |         {min:6, max:16, message:'请输入6-16位非空字符',trigger:'blur'}
 35 |     ], 
 36 |     rePassword:[
 37 |         {validator:checkRePassword, trigger:'blur'}
 38 |     ]
 39 | }
 40 | 
 41 | import {userRegisterService, userLoginService} from '@/api/user.js'
 42 | 
 43 | 
 44 | const register = async()=>{
 45 |     let result = await userRegisterService(registerData.value);
 46 |     // if(result.code === 0){
 47 |     //     //成功
 48 |     //     alert(result.msg ? result.msg : '注册成功'); 
 49 |     // }else{
 50 |     //     //失败了
 51 |     //     alert('注册失败')
 52 |     // }
 53 |     //alert(result.msg ? result.msg : '注册成功')
 54 |     ElMessage.success(result.msg ? result.msg : '注册成功')
 55 | }
 56 | 
 57 | import  {useRouter} from 'vue-router'
 58 | import {useTokenStore} from '@/stores/token.js'
 59 | 
 60 | const router = useRouter()
 61 | const tokenStore = useTokenStore();
 62 | //定义登录函数
 63 | const login = async()=>{
 64 |     //调用接口，完成登录
 65 |     let result = await userLoginService(registerData.value);
 66 |     ElMessage.success(result.msg ? result.msg : '登录成功')
 67 |      
 68 | 
 69 |     //把得到的token存储到pinia中
 70 |     tokenStore.setToken(result.data)
 71 | 
 72 |     //跳转到首页
 73 |     router.push('/')
 74 | }
 75 | 
 76 | //定义清空函数
 77 | const clearRegisterData = ()=>{
 78 |     registerData.value={
 79 |         username:'',
 80 |         password:'',
 81 |         rePassword:''
 82 |     }
 83 | }
 84 | 
 85 | </script>
 86 | 
 87 | <template>
 88 |     <el-row class="login-page">
 89 |         <el-col :span="12" class="bg"></el-col>
 90 |         <el-col :span="6" :offset="3" class="form">
 91 |             <!-- 注册表单 -->
 92 |             <el-form ref="form" size="large" autocomplete="off" v-if="isRegister" :model="registerData" :rules="rules">
 93 |                 <el-form-item>
 94 |                     <h1>注册</h1>
 95 |                 </el-form-item>
 96 |                 <el-form-item prop="username">
 97 |                     <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input>
 98 |                 </el-form-item>   
 99 |                 <el-form-item prop="password">
100 |                     <el-input :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password"></el-input>
101 |                 </el-form-item>
102 |                 <el-form-item prop="rePassword">
103 |                     <el-input :prefix-icon="Lock" type="password" placeholder="请输入再次密码" v-model="registerData.rePassword"></el-input>
104 |                 </el-form-item>
105 |                 <!-- 注册按钮 -->
106 |                 <el-form-item>
107 |                     <el-button class="button" type="primary" auto-insert-space @click="register">
108 |                         注册
109 |                     </el-button>
110 |                 </el-form-item>
111 |                 <el-form-item class="flex">
112 |                     <el-link type="info" :underline="false" @click="isRegister = false; clearRegisterData()">
113 |                         ← 返回
114 |                     </el-link>
115 |                 </el-form-item>
116 |             </el-form>
117 |             <!-- 登录表单 -->
118 |             <el-form ref="form" size="large" autocomplete="off" v-else :model="registerData" :rules="rules">
119 |                 <el-form-item>
120 |                     <h1>登录</h1>
121 |                 </el-form-item>
122 |                 <el-form-item prop="username">
123 |                     <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input>
124 |                 </el-form-item>
125 |                 <el-form-item prop="password">
126 |                     <el-input name="password" :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password"></el-input>
127 |                 </el-form-item>
128 |                 <el-form-item class="flex">
129 |                     <div class="flex">
130 |                         <el-checkbox>记住我</el-checkbox>
131 |                         <el-link type="primary" :underline="false">忘记密码？</el-link>
132 |                     </div>
133 |                 </el-form-item>
134 |                 <!-- 登录按钮 -->
135 |                 <el-form-item>
136 |                     <el-button class="button" type="primary" auto-insert-space @click="login">登录</el-button>
137 |                 </el-form-item>
138 |                 <el-form-item class="flex">
139 |                     <el-link type="info" :underline="false" @click="isRegister = true; clearRegisterData()">
140 |                         注册 →
141 |                     </el-link>
142 |                 </el-form-item>
143 |             </el-form>
144 |         </el-col>
145 |     </el-row>
146 | </template>
147 | 
148 | <style lang="scss" scoped>
149 | /* 样式 */
150 | .login-page {
151 |     height: 100vh;
152 |     background-color: #fff;
153 | 
154 |     .bg {
155 |         // background: url('@/assets/logo2.png') no-repeat 60% center / 240px auto,
156 |            background: url('@/assets/logo.jpg') no-repeat center / cover;
157 |         border-radius: 0 15px 15px 0;
158 |     }
159 | 
160 |     .form {
161 |         display: flex;
162 |         flex-direction: column;
163 |         justify-content: center;
164 |         user-select: none;
165 | 
166 |         .title {
167 |             margin: 0 auto;
168 |         }
169 | 
170 |         .button {
171 |             width: 100%;
172 |         }
173 | 
174 |         .flex {
175 |             width: 100%;
176 |             display: flex;
177 |             justify-content: space-between;
178 |         }
179 |     }
180 | }
181 | </style>


--------------------------------------------------------------------------------
/src/views/Layout.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import {
  3 |     Management,
  4 |     Promotion,
  5 |     UserFilled,
  6 |     User,
  7 |     Crop,
  8 |     EditPen,
  9 |     SwitchButton,
 10 |     CaretBottom
 11 | } from '@element-plus/icons-vue'
 12 | import avatar from '@/assets/default.png' 
 13 | 
 14 | 
 15 | import { userInfoService } from '@/api/user.js'
 16 | import useUserInfoStore from '@/stores/userInfo.js'
 17 | import { useTokenStore } from '@/stores/token';
 18 | const tokenStore = useTokenStore();
 19 | const userInfoStore = useUserInfoStore();
 20 | //获取用户信息
 21 | const getUserInfo = async()=>{
 22 |   
 23 |     let result = await userInfoService();
 24 |     //更新用户信息到pinia
 25 |     userInfoStore.setInfo(result.data);
 26 | 
 27 | }
 28 | 
 29 | getUserInfo();
 30 | import { useRouter } from 'vue-router';
 31 | const router = useRouter();
 32 | import { ElMessage, ElMessageBox } from 'element-plus';
 33 | 
 34 | 
 35 | //用户操作命令处理
 36 | const handleCommand = (command)=>{
 37 |     //判断命令
 38 |     if(command === 'logout'){
 39 |         
 40 |     ElMessageBox.confirm(
 41 |     '确认退出登录',
 42 |     'Warning',
 43 |     {
 44 |       confirmButtonText: '退出登录',
 45 |       cancelButtonText: '取消',
 46 |       type: 'warning',
 47 |     }
 48 |   )
 49 |     .then(async () => {
 50 |         //清除本地token和userInfo
 51 |        
 52 |         tokenStore.removeToken();
 53 |         userInfoStore.removeInfo();
 54 | 
 55 |         //2.跳转到登录页面
 56 |         router.push('/login')
 57 | 
 58 |       ElMessage({
 59 |         type: 'success',
 60 |         message: '退出登录成功',
 61 |       })
 62 |     })
 63 |     .catch(() => {
 64 |       ElMessage({
 65 |         type: 'info',
 66 |         message: '取消退出',
 67 |       })
 68 |     })
 69 |     }else{
 70 |         router.push('/user/'+command)
 71 |     }
 72 | }
 73 | </script>
 74 | 
 75 | <template>
 76 |     <el-container class="layout-container">
 77 |         <!-- 侧边栏 -->
 78 |         <el-aside width="200px">
 79 |             <div class="el-aside__logo"></div>
 80 |             <el-menu active-text-color="#ffd04b" background-color="#232323"  text-color="#fff"
 81 |                 router>
 82 |                 <el-menu-item index="/article/category">
 83 |                     <el-icon>
 84 |                         <Management />
 85 |                     </el-icon>
 86 |                     <span>文章分类</span>
 87 |                 </el-menu-item>
 88 |                 <el-menu-item index="/article/manage">
 89 |                     <el-icon>
 90 |                         <Promotion />
 91 |                     </el-icon>
 92 |                     <span>文章管理</span>
 93 |                 </el-menu-item>
 94 |                 <el-sub-menu>
 95 |                     <template #title>
 96 |                         <el-icon>
 97 |                             <UserFilled />
 98 |                         </el-icon>
 99 |                         <span>个人中心</span>
100 |                     </template>
101 |                     <el-menu-item index="/user/info">
102 |                         <el-icon>
103 |                             <User />
104 |                         </el-icon>
105 |                         <span>基本资料</span>
106 |                     </el-menu-item>
107 |                     <el-menu-item index="/user/avatar">
108 |                         <el-icon>
109 |                             <Crop />
110 |                         </el-icon>
111 |                         <span>更换头像</span>
112 |                     </el-menu-item>
113 |                     <el-menu-item index="/user/resetPassword">
114 |                         <el-icon>
115 |                             <EditPen />
116 |                         </el-icon>
117 |                         <span>重置密码</span>
118 |                     </el-menu-item>
119 |                 </el-sub-menu>
120 |             </el-menu>
121 |         </el-aside>
122 |         <!-- 右侧主区域 -->
123 |         <el-container>
124 |             <!-- 头部区域 -->
125 |             <el-header>
126 |                 <div><strong>用户:{{ userInfoStore.info.nickname ? userInfoStore.info.nickname : userInfoStore.info.username }}</strong></div>
127 |                 <el-dropdown placement="bottom-end" @command="handleCommand">
128 |                     <span class="el-dropdown__box">
129 |                         <el-avatar :src="userInfoStore.info.userPic ? userInfoStore.info.userPic : avatar" />
130 |                         <el-icon>
131 |                             <CaretBottom />
132 |                         </el-icon>
133 |                     </span>
134 |                     <template #dropdown>
135 |                         <el-dropdown-menu>
136 |                             <el-dropdown-item command="info" :icon="User">基本资料</el-dropdown-item>
137 |                             <el-dropdown-item command="avatar" :icon="Crop">更换头像</el-dropdown-item>
138 |                             <el-dropdown-item command="resetPassword" :icon="EditPen">修改密码</el-dropdown-item>
139 |                             <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
140 |                         </el-dropdown-menu>
141 |                     </template>
142 |                 </el-dropdown>
143 |             </el-header>
144 |             <!-- 中间区域 -->
145 |             <el-main>
146 |                 <!-- <div style="width: 1290px; height: 570px;border: 1px solid red;">
147 |                     内容展示区
148 |                 </div> --> 
149 |                 <router-view></router-view>
150 |             </el-main>
151 |             <!-- 底部区域 -->
152 |             <el-footer>2024 Created by deligede</el-footer>
153 |         </el-container>
154 |     </el-container>
155 | </template>
156 | 
157 | <style lang="scss" scoped>
158 | .layout-container {
159 |     height: 100vh;
160 | 
161 |     .el-aside {
162 |         background-color: #232323;
163 | 
164 |         &__logo {
165 |             height: 120px;
166 |             background: url('@/assets/login2.jpg') no-repeat center / 220px auto;
167 |         }
168 | 
169 |         .el-menu {
170 |             border-right: none;
171 |         }
172 |     }
173 | 
174 |     .el-header {
175 |         background-color: #fff;
176 |         display: flex;
177 |         align-items: center;
178 |         justify-content: space-between;
179 | 
180 |         .el-dropdown__box {
181 |             display: flex;
182 |             align-items: center;
183 | 
184 |             .el-icon {
185 |                 color: #999;
186 |                 margin-left: 10px;
187 |             }
188 | 
189 |             &:active,
190 |             &:focus {
191 |                 outline: none;
192 |             }
193 |         }
194 |     }
195 | 
196 |     .el-footer {
197 |         display: flex;
198 |         align-items: center;
199 |         justify-content: center;
200 |         font-size: 14px;
201 |         color: #666;
202 |     }
203 | }
204 | </style>


--------------------------------------------------------------------------------
/src/views/article/ArticleManage.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import {
  3 |     Edit,
  4 |     Delete
  5 | } from '@element-plus/icons-vue'
  6 | 
  7 | import { ref, toHandlers } from 'vue'
  8 | 
  9 | //文章分类数据模型
 10 | const categorys = ref([
 11 |     {
 12 |         "id": 3,
 13 |         "categoryName": "美食",
 14 |         "categoryAlias": "my",
 15 |         "createTime": "2023-09-02 12:06:59",
 16 |         "updateTime": "2023-09-02 12:06:59"
 17 |     },
 18 |     {
 19 |         "id": 4,
 20 |         "categoryName": "娱乐",
 21 |         "categoryAlias": "yl",
 22 |         "createTime": "2023-09-02 12:08:16",
 23 |         "updateTime": "2023-09-02 12:08:16"
 24 |     },
 25 |     {
 26 |         "id": 5,
 27 |         "categoryName": "军事",
 28 |         "categoryAlias": "js",
 29 |         "createTime": "2023-09-02 12:08:33",
 30 |         "updateTime": "2023-09-02 12:08:33"
 31 |     }
 32 | ])
 33 | 
 34 | //用户搜索时选中的分类id
 35 | const categoryId=ref('')
 36 | 
 37 | //用户搜索时选中的发布状态
 38 | const state=ref('')
 39 | 
 40 | //文章列表数据模型
 41 | const articles = ref([
 42 |     {
 43 |         "id": 5,
 44 |         "title": "陕西旅游攻略",
 45 |         "content": "兵马俑,华清池,法门寺,华山...爱去哪去哪...",
 46 |         "coverImg": "https://big-event-gwd.oss-cn-beijing.aliyuncs.com/9bf1cf5b-1420-4c1b-91ad-e0f4631cbed4.png",
 47 |         "state": "草稿",
 48 |         "categoryId": 2,
 49 |         "createTime": "2023-09-03 11:55:30",
 50 |         "updateTime": "2023-09-03 11:55:30"
 51 |     },
 52 |     {
 53 |         "id": 5,
 54 |         "title": "陕西旅游攻略",
 55 |         "content": "兵马俑,华清池,法门寺,华山...爱去哪去哪...",
 56 |         "coverImg": "https://big-event-gwd.oss-cn-beijing.aliyuncs.com/9bf1cf5b-1420-4c1b-91ad-e0f4631cbed4.png",
 57 |         "state": "草稿",
 58 |         "categoryId": 2,
 59 |         "createTime": "2023-09-03 11:55:30",
 60 |         "updateTime": "2023-09-03 11:55:30"
 61 |     },
 62 |     {
 63 |         "id": 5,
 64 |         "title": "陕西旅游攻略",
 65 |         "content": "兵马俑,华清池,法门寺,华山...爱去哪去哪...",
 66 |         "coverImg": "https://big-event-gwd.oss-cn-beijing.aliyuncs.com/9bf1cf5b-1420-4c1b-91ad-e0f4631cbed4.png",
 67 |         "state": "草稿",
 68 |         "categoryId": 2,
 69 |         "createTime": "2023-09-03 11:55:30",
 70 |         "updateTime": "2023-09-03 11:55:30"
 71 |     },
 72 | ])
 73 | 
 74 | //分页条数据模型
 75 | const pageNum = ref(1)//当前页
 76 | const total = ref(20)//总条数
 77 | const pageSize = ref(3)//每页条数
 78 | 
 79 | //当每页条数发生了变化，调用此函数
 80 | const onSizeChange = (size) => {
 81 |     pageSize.value = size
 82 |     articleList()
 83 | }
 84 | //当前页码发生变化，调用此函数
 85 | const onCurrentChange = (num) => {
 86 |     pageNum.value = num
 87 |     articleList()
 88 | }
 89 | 
 90 | //回显自己的文章分类
 91 | import {articleCategoryListService} from '@/api/article.js'
 92 | const articleCategoryList = async()=>{
 93 |     let result = await articleCategoryListService();
 94 |     categorys.value = result.data; 
 95 | }
 96 |    
 97 | //获取文章数据
 98 | import { articleListService, articleAddService, articleUpdateService, articleDeleteService} from '@/api/article.js'
 99 | 
100 | const articleList = async()=>{
101 |     let params = {
102 |         pageNum:pageNum.value,
103 |         pageSize:pageSize.value,
104 |         categoryId:categoryId.value ? categoryId.value : null,
105 |         state:state.value ? state.value : null
106 |     }
107 |     let result = await articleListService(params);
108 | 
109 |     total.value = result.data.total;
110 |     articles.value = result.data.items;
111 | 
112 |     //根据分类编号渲染分类名称
113 |     for(let i = 0;i < articles.value.length; i++){
114 |         let article = articles.value[i];
115 |         for(let j = 0; j < categorys.value.length; j++){
116 |             if(article.categoryId == categorys.value[j].id){
117 |                 article.categoryName = categorys.value[j].categoryName;
118 |             }
119 |         }
120 |     }
121 |     
122 | }
123 | 
124 | articleCategoryList();
125 | articleList(); 
126 | 
127 | import { QuillEditor } from '@vueup/vue-quill'
128 | import '@vueup/vue-quill/dist/vue-quill.snow.css'
129 | 
130 | import {Plus} from '@element-plus/icons-vue'
131 | //控制抽屉是否显示
132 | const visibleDrawer = ref(false)
133 | //添加表单数据模型
134 | const articleModel = ref({
135 |     title: '',
136 |     categoryId: '',
137 |     coverImg: '',
138 |     content:'',
139 |     state:''
140 | })
141 | 
142 | import { useTokenStore } from '@/stores/token.js';
143 | const tokenStore = useTokenStore();
144 | 
145 | //上传图片成功的回调函数
146 | const uploadSuccess = (result)=>{
147 |     articleModel.value.coverImg = result.data;
148 |     console.log(result.data);
149 | }
150 | 
151 | //添加文章
152 | import { ClickOutside, dialogEmits, ElMessage, ElMessageBox } from 'element-plus';
153 | const addArticle = async (clickState)=>{
154 |     articleModel.value.state = clickState;
155 |     //调用接口
156 |     let result = await articleAddService(articleModel.value);
157 |     ElMessage.success(result.msg ? result.msg : '添加成功')
158 | 
159 |     articleList();
160 |     //隐藏抽屉
161 |     visibleDrawer.value = false;
162 | }
163 | 
164 | //控制标题展示
165 | const title = ref('')
166 | 
167 | const showDrawer = (row)=>{
168 |     visibleDrawer.value=true;
169 |     title.value='编辑文章';
170 |     articleModel.value.title = row.title;
171 |     articleModel.value.categoryId = row.categoryId;
172 |     articleModel.value.coverImg = row.coverImg;
173 |     articleModel.value.content = row.content;
174 |     articleModel.value.state = row.state;
175 |     articleModel.value.id = row.id
176 | }
177 | 
178 | const updateArticle = async(clickState)=>{
179 |     //调用接口
180 |     articleModel.value.state = clickState;
181 |     let result = await articleUpdateService(articleModel.value)
182 |     ElMessage.success(result.msg ? result.msg : '修改成功')
183 |     articleList();
184 |     visibleDrawer.value = false;
185 | }
186 | 
187 | //清空添加文章抽屉的数据
188 | const clearData = ()=>{
189 |     articleModel.value.title = '';
190 |     articleModel.value.categoryId = '';
191 |     articleModel.value.coverImg = '';
192 |     articleModel.value.content = '';
193 |     articleModel.value.state = '';
194 | 
195 | }
196 | 
197 | //删除文章
198 | const deleteArticle = (row)=>{
199 |     ElMessageBox.confirm(
200 |     '确认删除此文章？',
201 |     'Warning',
202 |     {
203 |       confirmButtonText: '确认',
204 |       cancelButtonText: '取消',
205 |       type: 'warning',
206 |     }
207 |   )
208 |     .then(async () => {
209 |         let result = await articleDeleteService(row.id)
210 |       ElMessage({
211 |         type: 'success',
212 |         message: '删除成功',
213 |       })
214 |       //刷新列表
215 |       articleList();
216 |     })
217 |     .catch(() => {
218 |       ElMessage({
219 |         type: 'info',
220 |         message: '取消删除',
221 |       })
222 |     })
223 | }
224 | 
225 | </script>
226 | <template>
227 |     <el-card class="page-container">
228 |         <template #header>
229 |             <div class="header">
230 |                 <span><strong>文章管理</strong></span>
231 |                 <div class="extra">
232 |                     <el-button type="primary" @click="visibleDrawer=true;title='添加文章';clearData()">添加文章</el-button>
233 |                 </div>
234 |             </div>
235 |         </template>
236 |         <!-- 搜索表单 -->
237 |         <el-form inline>
238 |             <el-form-item label="文章分类：">
239 |                 <el-select placeholder="请选择" v-model="categoryId" style="width:240px">
240 |                     <el-option 
241 |                         v-for="c in categorys" 
242 |                         :key="c.id" 
243 |                         :label="c.categoryName"
244 |                         :value="c.id">
245 |                     </el-option>
246 |                 </el-select>
247 |             </el-form-item>
248 | 
249 |             <el-form-item label="发布状态：" style="width:240px">
250 |                 <el-select placeholder="请选择" v-model="state">
251 |                     <el-option label="已发布" value="已发布"></el-option>
252 |                     <el-option label="草稿" value="草稿"></el-option>
253 |                 </el-select>
254 |             </el-form-item>
255 |             <el-form-item>
256 |                 <el-button type="primary" @click="articleList">搜索</el-button>
257 |                 <el-button @click="categoryId='', state=''">重置</el-button>
258 |             </el-form-item>
259 |         </el-form>
260 |         <!-- 文章列表 -->
261 |         <el-table :data="articles" style="width: 100%">
262 |             <el-table-column label="文章标题" width="400" prop="title"></el-table-column>
263 |             <el-table-column label="分类" prop="categoryName"></el-table-column>
264 |             <el-table-column label="发表时间" prop="createTime"> </el-table-column>
265 |             <el-table-column label="状态" prop="state"></el-table-column>
266 |             <el-table-column label="操作" width="100">
267 |                 <template #default="{ row }">
268 |                     <el-button :icon="Edit" circle plain type="primary" @click="showDrawer(row)"></el-button>
269 |                     <el-button :icon="Delete" circle plain type="danger" @click="deleteArticle(row)"></el-button>
270 |                 </template>
271 |             </el-table-column>
272 |             <template #empty>
273 |                 <el-empty description="没有数据" />
274 |             </template>
275 |         </el-table>
276 |         <!-- 分页条 -->
277 |         <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5 ,10, 15]"
278 |             layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
279 |             @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />
280 | 
281 |         <!-- 抽屉 -->
282 |         <el-drawer v-model="visibleDrawer" :title="title" direction="rtl" size="50%">
283 |             <!-- 添加文章表单 -->
284 |             <el-form :model="articleModel" label-width="100px" >
285 |                 <el-form-item label="文章标题" >
286 |                     <el-input v-model="articleModel.title" placeholder="请输入标题"></el-input>
287 |                 </el-form-item>
288 |                 <el-form-item label="文章分类">
289 |                     <el-select placeholder="请选择" v-model="articleModel.categoryId">
290 |                         <el-option v-for="c in categorys" :key="c.id" :label="c.categoryName" :value="c.id">
291 |                         </el-option>
292 |                     </el-select>
293 |                 </el-form-item>
294 |                 <el-form-item label="文章封面">
295 | 
296 |                     <el-upload class="avatar-uploader" :auto-upload="true" :show-file-list="false" action="/api/upload" 
297 |                     name="file"
298 |                     :headers="{'Authorization':tokenStore.token}"
299 |                     :on-success="uploadSuccess">
300 |                         <img v-if="articleModel.coverImg" :src="articleModel.coverImg" class="avatar" />
301 |                         <el-icon v-else class="avatar-uploader-icon">
302 |                             <Plus />
303 |                         </el-icon>
304 |                     </el-upload>
305 |                 </el-form-item>
306 |                 <el-form-item label="文章内容">
307 |                     <div class="editor">
308 |                         <quill-editor theme="snow" v-model:content="articleModel.content" contentType="html">
309 |                         </quill-editor>
310 |                     </div>
311 |                 </el-form-item>
312 |                 <el-form-item>
313 |                     <el-button type="primary" @click="title=='添加文章'? addArticle('已发布'):updateArticle('已发布')">发布</el-button>
314 |                     <el-button type="info" @click="title=='添加文章'? addArticle('草稿'):updateArticle('草稿')">草稿</el-button>
315 |                 </el-form-item>
316 |             </el-form>
317 |         </el-drawer>
318 |     </el-card>
319 | </template>
320 | <style lang="scss" scoped>
321 | .page-container {
322 |     min-height: 100%;
323 |     box-sizing: border-box;
324 | 
325 |     .header {
326 |         display: flex;
327 |         align-items: center;
328 |         justify-content: space-between;
329 |     }
330 | }
331 | /* 抽屉样式 */
332 | .avatar-uploader {
333 |     :deep() {
334 |         .avatar {
335 |             width: 178px;
336 |             height: 178px;
337 |             display: block;
338 |         }
339 | 
340 |         .el-upload {
341 |             border: 1px dashed var(--el-border-color);
342 |             border-radius: 6px;
343 |             cursor: pointer;
344 |             position: relative;
345 |             overflow: hidden;
346 |             transition: var(--el-transition-duration-fast);
347 |         }
348 | 
349 |         .el-upload:hover {
350 |             border-color: var(--el-color-primary);
351 |         }
352 | 
353 |         .el-icon.avatar-uploader-icon {
354 |             font-size: 28px;
355 |             color: #8c939d;
356 |             width: 178px;
357 |             height: 178px;
358 |             text-align: center;
359 |         }
360 |     }
361 | }
362 | .editor {
363 |   width: 100%;
364 |   :deep(.ql-editor) {
365 |     min-height: 200px;
366 |   }
367 | }
368 | </style>


--------------------------------------------------------------------------------