devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【SpringBoot3+Vue3】五【完】【实战篇】-前端（配合后端）

作者：不正经 | 2024-05-14 06:14:40

赞

踩

springboot3+vue3

目录

一、环境准备

1、创建Vue工程

2、安装依赖 

2.1 安装项目所需要的vue依赖 

2.2 安装element-plus依赖

2.2.1 安装

2.2.2 项目导入element-plus

2.3 安装axios依赖

2.4 安装sass依赖

3、目录调整

3.1 删除部分默认目录下文件

3.1.1 src/components下自动生成的内容(删除文件夹下全部内容)

3.1.2 src/assets 下自动生成的内容(删除文件夹下全部内容) 

3.2 api、utils、views目录处理

3.2.1 src下新建目录api、utils、views

 3.2.2 utils下新增request.js文件

3.3 将资料中的静态资源拷贝到assets目录下

3.4 修改app.vue生成的内容

4、启动项目验证

二、注册功能

1、页面搭建 

1.1 views下新建Login.vue

1.2 App.vue导入Login.vue

1.3 查看结果

2、为注册页面绑定数据与事件

2.1 定义数据模型Login.vue

 2.2 注册页面Login.vue表单校验

2.3 验证

3、注册页面后台接口调用 

3.1 启动后端服务

3.2 api目录下新建user.js文件

3.3 Login.vue页面完成调用

4、跨域问题解决

4.1 request.js

4.2 vite.config.js

5、测试验证

三、登录功能

1、登录Login.vue绑定数据 

2、 登录Login.vue数据校验

3、登录页面后端接口调用

3.1 user.js提供登录调用接口

3.2 Login.vue调用后端接口

4、测试验证

5、优化登录表单与注册表单数据显示问题（Login.vue）

四、优化axios响应拦截器与alert

1、axios响应拦截器

2.1 request.js 

2.2 优化Login.vue

2、使用element-plus优化alert

2.1 request.js引用ElMessage 组件处理

2.2  Login.vue引用ElMessage 组件处理

五、主页面布局 

1、Layout页面

1.1 views下新增Layout.vue

 1.2 App.vue导入Layout.vue

2、路由

 2.1 安装vue-router

2.2 创建路由器index.js

2.3 在main.js使用vue-router

2.4 App.vue中声明router-view标签

2.5  Login.vue优化登录成功跳转

2.6 测试验证

3、子路由

3.1 views下创建vue文件 

3.1.1 ArticleCategory.vue

3.1.2 ArticleManage.vue

3.1.3 UserAvatar.vue

3.1.4 UserInfo.vue

3.1.5 UserResetPassword.vue

3.2 index.js

3.3 Layout.vue声明router-view标签

3.4 测试验证

六、文章分类 

1、列表查询

1.1 article.js

1.2 ArticleCategory.vue

2、Pinia状态管理库

2.1 安装pinia

2.2 main.js导入pinia

2.3 定义store

2.4 使用Store

2.5 测试验证

 3、 使用axios请求拦截器解决token繁琐问题

​编辑 3.1 request.js添加请求拦截器

3.2 article.js移除之前添加的请求头

4、pinia-persistedstate-plugin持久化插件

4.1 安装

4.2 pinia中使用persist插件

4.3 在创建定义状态是配置持久化

5、未登录统一处理

6、添加文章分类

6.1  ArticleCategory.vue

6.2 在article.js中提供添加分类的函数

6.3 测试验证

7、修改文章分类 

7.1 修改分类弹窗页面

7.1.1 弹窗标题显示  ArticleCategory.vue

7.1.2 在弹窗上绑定标题 ArticleCategory.vue

7.1.3 为添加分类按钮绑定事件 ArticleCategory.vue

7.1.4 为修改分类按钮绑定事件 ArticleCategory.vue

7.2 修改数据回显 ArticleCategory.vue

7.3 修改文章分类接口调用

7.3.1 article.js中提供修改分类的函数

7.3.2 修改确定按钮的绑定事件 ArticleCategory.vue

7.3.3 调用接口完成修改的函数  ArticleCategory.vue

7.3.4 优化添加时数据回显

8、删除文章分类

 8.1 删除接口

8.2 删除确认框

 8.3 为删除按钮绑定事件

8.4 调用删除接口

8.5 测试验证

七、文章列表 

1、 文章列表查询

 1.1 文章列表页面组件ArticleManage.vue

1.2 解决分页控件英文显示问题main.js

1.3 文章分类数据回显ArticleMange.vue  

1.4 文章列表接口调用

1.4.1 article.js中提供获取文章列表数据的函数

1.4.2 ArticleManage.vue中，调用接口获取数据

1.4.3 当分页条的当前页和每页条数发生变化，重新发送请求获取数据

2 、搜索和重置

3、添加文章

3.1 添加文章抽屉组件

3.2 为添加文章按钮添加单击事件，展示抽屉

3.3 富文本编辑器

3.3.1 安装：

3.3.2 导入组件和样式：

3.3.3 页面使用quill组件：​

3.3.4 样式美化：

3.4 文章封面图片上传

3.5 添加文章接口调用

3.5.1 article.js中提供添加文章函数

3.5.2 为已发布和草稿按钮绑定事件

3.5.3 ArticleManage.vue中提供addArticle函数完成添加文章接口的调用

4、编辑文章

4.1 修改文章抽屉页面

4.1.1 抽屉标题显示 定义标题

4.1.2 在抽屉上绑定标题

4.1.3 为添加文章按钮绑定事件

4.1.4 为修改文章按钮绑定事件

4.2 数据回显

4.2.1 通过插槽的方式得到被点击按钮所在行的数据

4.2.2 回显函数

4.3 修改文章接口调用

4.3.1 article.js中提供修改文章的函数

4.3.2 修改发布与草稿按钮的绑定事件

4.3.3 调用接口完成修改的函数

5、删除文章

5.1 接口调用

5.2 为删除按钮绑定事件

5.3 添加删除弹窗，当用户点击确认后，调用接口删除分类

八、顶部导航栏信息展示

1、 user.js中提供获取个人信息的函数

2、 src/stores/userInfo.js中，定义个人中心状态

3、 Layout.vue中获取个人信息，并存储到pinia中

4、Layout.vue的顶部导航栏中，展示昵称和头像

九 、页面右上角下拉菜单el-dropdown中功能实现

1、路由实现：

2、 退出登录实现：

十、基本资料修改

1、 基本资料页面组件UserInfo.vue

2、 表单数据回显

3、 接口调用

十一、修改头像

1、 修改头像页面组件UserAvatar.vue

2、 头像回显

3、 头像上传

4、 上传头像接口调用

十二、 重置密码

1、user.js 重置密码

 2、UserResetPassword.vue

前言：本项目的终结篇，是一名vue3完成本次课程的前端页面。

一、环境准备

1、创建Vue工程

  1. npm init vue@latest
  2.  
  3. # 项目名称spring3vue3project

2、安装依赖 

进入到创建项目目录

2.1 安装项目所需要的vue依赖 

  1. # 项目所需要的vue依赖
  2. npm install

2.2 安装element-plus依赖

2.2.1 安装
  1. # 安装element-plus依赖
  2. npm install element-plus --save

2.2.2 项目导入element-plus

打开项目 

code .

修改src/main.js 

  1. import './assets/main.scss'
  2.  
  3. import { createApp } from 'vue'
  4. import ElementPlus from 'element-plus'
  5. import 'element-plus/dist/index.css'
  6.  
  7.  
  8. import App from './App.vue'
  9.  
  10. const app = createApp(App)
  11. app.use(ElementPlus)
  12.  
  13. app.mount('#app')

2.3 安装axios依赖

npm install axios

2.4 安装sass依赖

  1. # 安装sass依赖 好像是关于css的
  2. npm install sass -D

3、目录调整

直接进到项目文件夹下操作

3.1 删除部分默认目录下文件

3.1.1 src/components下自动生成的内容(删除文件夹下全部内容)

3.1.2 src/assets 下自动生成的内容(删除文件夹下全部内容) 

3.2 api、utils、views目录处理

3.2.1 src下新建目录api、utils、views

 3.2.2 utils下新增request.js文件
  1. // 定制请求实例
  2.  
  3. //导入axios
  4. import axios from 'axios'; 
  5.  
  6. //定义一个变量，记录公共的前缀baseURL
  7. const baseURL = 'http://localhost:8080'
  8. const instance = axios.create({baseURL})
  9.  
  10. // 添加响应拦截器
  11. instance.interceptors.response.use(
  12.     result=>{
  13.         return result.data;
  14.  
  15.     },
  16.     err=>{
  17.         alert('服务异常')
  18.         return Promise.reject(err);//异步的状态转化成失败的状态
  19.     }
  20. )
  21.  
  22. export default instance;

3.3 将资料中的静态资源拷贝到assets目录下

如需，关注，发私信

3.4 修改app.vue生成的内容

删除app.vue中自动生成的内容

  1. <script setup>
  2.  
  3. </script>
  4.  
  5. <template>
  6. 春天的菠菜
  7.  
  8. </template>
  9.  
  10.  
  11. <style scoped>
  12.  
  13. </style>

4、启动项目验证

npm run dev

二、注册功能

 

1、页面搭建 

1.1 views下新建Login.vue

  1. <script setup>
  2. import { User, Lock } from '@element-plus/icons-vue'
  3. import { ref } from 'vue'
  4. //控制注册与登录表单的显示， 默认显示注册
  5. const isRegister = ref(false)
  6. </script>
  7.  
  8. <template>
  9.     <el-row class="login-page">
  10.         <el-col :span="12" class="bg"></el-col>
  11.         <el-col :span="6" :offset="3" class="form">
  12.             <!-- 注册表单 -->
  13.             <el-form ref="form" size="large" autocomplete="off" v-if="isRegister">
  14.                 <el-form-item>
  15.                     <h1>注册</h1>
  16.                 </el-form-item>
  17.                 <el-form-item>
  18.                     <el-input :prefix-icon="User" placeholder="请输入用户名"></el-input>
  19.                 </el-form-item>
  20.                 <el-form-item>
  21.                     <el-input :prefix-icon="Lock" type="password" placeholder="请输入密码"></el-input>
  22.                 </el-form-item>
  23.                 <el-form-item>
  24.                     <el-input :prefix-icon="Lock" type="password" placeholder="请输入再次密码"></el-input>
  25.                 </el-form-item>
  26.                 <!-- 注册按钮 -->
  27.                 <el-form-item>
  28.                     <el-button class="button" type="primary" auto-insert-space>
  29.                         注册
  30.                     </el-button>
  31.                 </el-form-item>
  32.                 <el-form-item class="flex">
  33.                     <el-link type="info" :underline="false" @click="isRegister = false">
  34.                         ← 返回
  35.                     </el-link>
  36.                 </el-form-item>
  37.             </el-form>
  38.             <!-- 登录表单 -->
  39.             <el-form ref="form" size="large" autocomplete="off" v-else>
  40.                 <el-form-item>
  41.                     <h1>登录</h1>
  42.                 </el-form-item>
  43.                 <el-form-item>
  44.                     <el-input :prefix-icon="User" placeholder="请输入用户名"></el-input>
  45.                 </el-form-item>
  46.                 <el-form-item>
  47.                     <el-input name="password" :prefix-icon="Lock" type="password" placeholder="请输入密码"></el-input>
  48.                 </el-form-item>
  49.                 <el-form-item class="flex">
  50.                     <div class="flex">
  51.                         <el-checkbox>记住我</el-checkbox>
  52.                         <el-link type="primary" :underline="false">忘记密码？</el-link>
  53.                     </div>
  54.                 </el-form-item>
  55.                 <!-- 登录按钮 -->
  56.                 <el-form-item>
  57.                     <el-button class="button" type="primary" auto-insert-space>登录</el-button>
  58.                 </el-form-item>
  59.                 <el-form-item class="flex">
  60.                     <el-link type="info" :underline="false" @click="isRegister = true">
  61.                         注册 →
  62.                     </el-link>
  63.                 </el-form-item>
  64.             </el-form>
  65.         </el-col>
  66.     </el-row>
  67. </template>
  68.  
  69. <style lang="scss" scoped>
  70. /* 样式 */
  71. .login-page {
  72.     height: 100vh;
  73.     background-color: #fff;
  74.  
  75.     .bg {
  76.         background: url('@/assets/logo2.png') no-repeat 60% center / 240px auto,
  77.             url('@/assets/login_bg.jpg') no-repeat center / cover;
  78.         border-radius: 0 20px 20px 0;
  79.     }
  80.  
  81.     .form {
  82.         display: flex;
  83.         flex-direction: column;
  84.         justify-content: center;
  85.         user-select: none;
  86.  
  87.         .title {
  88.             margin: 0 auto;
  89.         }
  90.  
  91.         .button {
  92.             width: 100%;
  93.         }
  94.  
  95.         .flex {
  96.             width: 100%;
  97.             display: flex;
  98.             justify-content: space-between;
  99.         }
  100.     }
  101. }
  102. </style>

1.2 App.vue导入Login.vue

  1. <script setup>
  2. import LoginVue from '@/views/Login.vue'
  3.  
  4. </script>
  5.  
  6. <template>
  7. <LoginVue/>
  8. </template>
  9.  
  10.  
  11. <style scoped>
  12.  
  13. </style>

1.3 查看结果

2、为注册页面绑定数据与事件

2.1 定义数据模型Login.vue

  1. <script setup>
  2. import { User, Lock } from '@element-plus/icons-vue'
  3. import { ref } from 'vue'
  4. //控制注册与登录表单的显示， 默认显示注册
  5. const isRegister = ref(false)
  6.  
  7. //定义数据模型
  8.  
  9. const registerData = ref({
  10.     username:'',
  11.     password:'',
  12.     rePassword:''
  13. })
  14.  
  15.  
  16. </script>
  17.  
  18. <template>
  19.     <el-row class="login-page">
  20.         <el-col :span="12" class="bg"></el-col>
  21.         <el-col :span="6" :offset="3" class="form">
  22.             <!-- 注册表单 -->
  23.             <el-form ref="form" size="large" autocomplete="off" v-if="isRegister" :model="registerData">
  24.                 <el-form-item>
  25.                     <h1>注册</h1>
  26.                 </el-form-item>
  27.                 <el-form-item>
  28.                     <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input>
  29.                 </el-form-item>
  30.                 <el-form-item>
  31.                     <el-input :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password"></el-input>
  32.                 </el-form-item>
  33.                 <el-form-item>
  34.                     <el-input :prefix-icon="Lock" type="password" placeholder="请输入再次密码" v-model="registerData.rePassword"></el-input>
  35.                 </el-form-item>
  36.                 <!-- 注册按钮 -->
  37.                 <el-form-item>
  38.                     <el-button class="button" type="primary" auto-insert-space>
  39.                         注册
  40.                     </el-button>
  41.                 </el-form-item>
  42.                 <el-form-item class="flex">
  43.                     <el-link type="info" :underline="false" @click="isRegister = false">
  44.                         ← 返回
  45.                     </el-link>
  46.                 </el-form-item>
  47.             </el-form>
  48.             <!-- 登录表单 -->
  49.             <el-form ref="form" size="large" autocomplete="off" v-else>
  50.                 <el-form-item>
  51.                     <h1>登录</h1>
  52.                 </el-form-item>
  53.                 <el-form-item>
  54.                     <el-input :prefix-icon="User" placeholder="请输入用户名"></el-input>
  55.                 </el-form-item>
  56.                 <el-form-item>
  57.                     <el-input name="password" :prefix-icon="Lock" type="password" placeholder="请输入密码"></el-input>
  58.                 </el-form-item>
  59.                 <el-form-item class="flex">
  60.                     <div class="flex">
  61.                         <el-checkbox>记住我</el-checkbox>
  62.                         <el-link type="primary" :underline="false">忘记密码？</el-link>
  63.                     </div>
  64.                 </el-form-item>
  65.                 <!-- 登录按钮 -->
  66.                 <el-form-item>
  67.                     <el-button class="button" type="primary" auto-insert-space>登录</el-button>
  68.                 </el-form-item>
  69.                 <el-form-item class="flex">
  70.                     <el-link type="info" :underline="false" @click="isRegister = true">
  71.                         注册 →
  72.                     </el-link>
  73.                 </el-form-item>
  74.             </el-form>
  75.         </el-col>
  76.     </el-row>
  77. </template>
  78.  
  79. <style lang="scss" scoped>
  80. /* 样式 */
  81. .login-page {
  82.     height: 100vh;
  83.     background-color: #fff;
  84.  
  85.     .bg {
  86.         background: url('@/assets/logo2.png') no-repeat 60% center / 240px auto,
  87.             url('@/assets/login_bg.jpg') no-repeat center / cover;
  88.         border-radius: 0 20px 20px 0;
  89.     }
  90.  
  91.     .form {
  92.         display: flex;
  93.         flex-direction: column;
  94.         justify-content: center;
  95.         user-select: none;
  96.  
  97.         .title {
  98.             margin: 0 auto;
  99.         }
  100.  
  101.         .button {
  102.             width: 100%;
  103.         }
  104.  
  105.         .flex {
  106.             width: 100%;
  107.             display: flex;
  108.             justify-content: space-between;
  109.         }
  110.     }
  111. }
  112. </style>

 2.2 注册页面Login.vue表单校验

表单校验可看官网

  1. <script setup>
  2. import { User, Lock } from '@element-plus/icons-vue'
  3. import { ref } from 'vue'
  4. //控制注册与登录表单的显示， 默认显示注册
  5. const isRegister = ref(false)
  6.  
  7. //2.1定义数据模型
  8.  
  9. const registerData = ref({
  10.     username:'',
  11.     password:'',
  12.     rePassword:''
  13. })
  14.  
  15. //2.2自定义rePassword需要自定义校验规则校验规则的函数,三个参rule 规则,value 值,callback 回调函数
  16. const checkRePassword = (rule,value,callback)=>{
  17.     if(value === '' ){
  18.         callback(new Error('请再次确认密码！'))
  19.     }else if(value !== registerData.value.password){
  20.         callback(new Error('请确保两次密码输入一致性！'))
  21.     }else{
  22.         callback()  //校验通过
  23.     }
  24. }
  25.  
  26. //2.2 定义表单校验规则,rePassword需要自定义校验规则
  27. const rules = {
  28.     username:[
  29.         {required:true,message:'请输入用户名！',trigger:'blur'},
  30.         {min:5,max:16,message:'长度为5-16位非空字符',trigger:'blur'}
  31.     ],
  32.     password:[
  33.     {required:true,message:'请输入密码！',trigger:'blur'},
  34.         {min:5,max:16,message:'长度为5-16位非空字符',trigger:'blur'}
  35.     ],
  36.     rePassword:[
  37.         {validator:checkRePassword,trigger:'blur'}
  38.     ]
  39. }
  40.  
  41.  
  42.  
  43. </script>
  44.  
  45. <template>
  46.     <el-row class="login-page">
  47.         <el-col :span="12" class="bg"></el-col>
  48.         <el-col :span="6" :offset="3" class="form">
  49.             <!-- 注册表单 -->
  50.             <el-form ref="form" size="large" autocomplete="off" v-if="isRegister" :model="registerData" :rules="rules">  <!-- 2.1  :model="registerData"表单声明属性 --> <!-- 2.2  :rules="rules"绑定校验 -->
  51.                 <el-form-item>
  52.                     <h1>注册</h1>
  53.                 </el-form-item>
  54.                 <el-form-item prop="username">  <!-- 2.2 prop="username"绑定校验 -->
  55.                     <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input>  <!-- 2.1 v-model="registerData.username"绑定属性 -->
  56.                 </el-form-item>
  57.                 <el-form-item prop="password"> <!-- 2.2 prop="password"绑定校验 -->
  58.                     <el-input :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password"></el-input>  <!-- 2.1 v-model="registerData.password"绑定属性 -->
  59.                 </el-form-item>
  60.                 <el-form-item prop="rePassword">  <!-- 2.2 prop="rePassword"绑定校验 -->
  61.                     <el-input :prefix-icon="Lock" type="password" placeholder="请输入再次密码" v-model="registerData.rePassword"></el-input>  <!-- 2.1 v-model="registerData.rePassword"绑定属性 -->
  62.                 </el-form-item>
  63.                 <!-- 注册按钮 -->
  64.                 <el-form-item>
  65.                     <el-button class="button" type="primary" auto-insert-space>
  66.                         注册
  67.                     </el-button>
  68.                 </el-form-item>
  69.                 <el-form-item class="flex">
  70.                     <el-link type="info" :underline="false" @click="isRegister = false">
  71.                         ← 返回
  72.                     </el-link>
  73.                 </el-form-item>
  74.             </el-form>
  75.             <!-- 登录表单 -->
  76.             <el-form ref="form" size="large" autocomplete="off" v-else>
  77.                 <el-form-item>
  78.                     <h1>登录</h1>
  79.                 </el-form-item>
  80.                 <el-form-item>
  81.                     <el-input :prefix-icon="User" placeholder="请输入用户名"></el-input>
  82.                 </el-form-item>
  83.                 <el-form-item>
  84.                     <el-input name="password" :prefix-icon="Lock" type="password" placeholder="请输入密码"></el-input>
  85.                 </el-form-item>
  86.                 <el-form-item class="flex">
  87.                     <div class="flex">
  88.                         <el-checkbox>记住我</el-checkbox>
  89.                         <el-link type="primary" :underline="false">忘记密码？</el-link>
  90.                     </div>
  91.                 </el-form-item>
  92.                 <!-- 登录按钮 -->
  93.                 <el-form-item>
  94.                     <el-button class="button" type="primary" auto-insert-space>登录</el-button>
  95.                 </el-form-item>
  96.                 <el-form-item class="flex">
  97.                     <el-link type="info" :underline="false" @click="isRegister = true">
  98.                         注册 →
  99.                     </el-link>
  100.                 </el-form-item>
  101.             </el-form>
  102.         </el-col>
  103.     </el-row>
  104. </template>
  105.  
  106. <style lang="scss" scoped>
  107. /* 样式 */
  108. .login-page {
  109.     height: 100vh;
  110.     background-color: #fff;
  111.  
  112.     .bg {
  113.         background: url('@/assets/logo2.png') no-repeat 60% center / 240px auto,
  114.             url('@/assets/login_bg.jpg') no-repeat center / cover;
  115.         border-radius: 0 20px 20px 0;
  116.     }
  117.  
  118.     .form {
  119.         display: flex;
  120.         flex-direction: column;
  121.         justify-content: center;
  122.         user-select: none;
  123.  
  124.         .title {
  125.             margin: 0 auto;
  126.         }
  127.  
  128.         .button {
  129.             width: 100%;
  130.         }
  131.  
  132.         .flex {
  133.             width: 100%;
  134.             display: flex;
  135.             justify-content: space-between;
  136.         }
  137.     }
  138. }
  139. </style>

2.3 验证

3、注册页面后台接口调用 

3.1 启动后端服务

启动前面章节后端服务以及redis 

3.2 api目录下新建user.js文件

  1. //导入request.js请求工具
  2. import request from '@/utils/request.js'
  3.  
  4. // 提供调用注册接口的函数
  5. export const userRegisterService = (registerData) =>{
  6.     //借助于URLSearchParam完成参数传递
  7.     const params = new URLSearchParams();
  8.     for(let key in registerData){
  9.         params.append(key,registerData[key]);
  10.     }
  11.     return request.post('/user/register',params);
  12.     
  13. }

3.3 Login.vue页面完成调用

  1. <script setup>
  2. import { User, Lock } from '@element-plus/icons-vue'
  3. import { ref } from 'vue'
  4. // 3.3 导入注册的接口
  5. import { userRegisterService} from '@/api/user.js'
  6.  
  7. //控制注册与登录表单的显示， 默认显示注册
  8. const isRegister = ref(false)
  9.  
  10. //2.1定义数据模型
  11.  
  12. const registerData = ref({
  13.     username:'',
  14.     password:'',
  15.     rePassword:''
  16. })
  17.  
  18. //2.2自定义rePassword需要自定义校验规则校验规则的函数,三个参rule 规则,value 值,callback 回调函数
  19. const checkRePassword = (rule,value,callback)=>{
  20.     if(value === '' ){
  21.         callback(new Error('请再次确认密码！'))
  22.     }else if(value !== registerData.value.password){
  23.         callback(new Error('请确保两次密码输入一致性！'))
  24.     }else{
  25.         callback()  //校验通过
  26.     }
  27. }
  28.  
  29. //2.2 定义表单校验规则,rePassword需要自定义校验规则
  30. const rules = {
  31.     username:[
  32.         {required:true,message:'请输入用户名！',trigger:'blur'},
  33.         {min:5,max:16,message:'长度为5-16位非空字符',trigger:'blur'}
  34.     ],
  35.     password:[
  36.     {required:true,message:'请输入密码！',trigger:'blur'},
  37.         {min:5,max:16,message:'长度为5-16位非空字符',trigger:'blur'}
  38.     ],
  39.     rePassword:[
  40.         {validator:checkRePassword,trigger:'blur'}
  41.     ]
  42. }
  43.  
  44. //3.3 调用后台接口,完成注册
  45. const  register = async()=>{
  46.     // registerData 是一个响应式对象，如果要获取值需要.value
  47.     let result = await userRegisterService(registerData.value);
  48.     if(result.code ===1){
  49.         //注册成功
  50.         alert(result.msg?result.msg : '注册成功')
  51.  
  52.     }else{
  53.         // 注册失败
  54.         alert('注册失败')
  55.  
  56.     }
  57. }
  58.  
  59. </script>
  60.  
  61. <template>
  62.     <el-row class="login-page">
  63.         <el-col :span="12" class="bg"></el-col>
  64.         <el-col :span="6" :offset="3" class="form">
  65.             <!-- 注册表单 -->
  66.             <el-form ref="form" size="large" autocomplete="off" v-if="isRegister" :model="registerData" :rules="rules">  <!-- 2.1  :model="registerData"表单声明属性 --> <!-- 2.2  :rules="rules"绑定校验 -->
  67.                 <el-form-item>
  68.                     <h1>注册</h1>
  69.                 </el-form-item>
  70.                 <el-form-item prop="username">  <!-- 2.2 prop="username"绑定校验 -->
  71.                     <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input>  <!-- 2.1 v-model="registerData.username"绑定属性 -->
  72.                 </el-form-item>
  73.                 <el-form-item prop="password"> <!-- 2.2 prop="password"绑定校验 -->
  74.                     <el-input :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password"></el-input>  <!-- 2.1 v-model="registerData.password"绑定属性 -->
  75.                 </el-form-item>
  76.                 <el-form-item prop="rePassword">  <!-- 2.2 prop="rePassword"绑定校验 -->
  77.                     <el-input :prefix-icon="Lock" type="password" placeholder="请输入再次密码" v-model="registerData.rePassword"></el-input>  <!-- 2.1 v-model="registerData.rePassword"绑定属性 -->
  78.                 </el-form-item>
  79.                 <!-- 注册按钮 -->
  80.                 <el-form-item>
  81.                     <el-button class="button" type="primary" auto-insert-space @click="register"> <!-- 3.3  @click="register"  绑定注册单击事件 -->
  82.                         注册
  83.                     </el-button>
  84.                 </el-form-item>
  85.                 <el-form-item class="flex">
  86.                     <el-link type="info" :underline="false" @click="isRegister = false">
  87.                         ← 返回
  88.                     </el-link>
  89.                 </el-form-item>
  90.             </el-form>
  91.             <!-- 登录表单 -->
  92.             <el-form ref="form" size="large" autocomplete="off" v-else>
  93.                 <el-form-item>
  94.                     <h1>登录</h1>
  95.                 </el-form-item>
  96.                 <el-form-item>
  97.                     <el-input :prefix-icon="User" placeholder="请输入用户名"></el-input>
  98.                 </el-form-item>
  99.                 <el-form-item>
  100.                     <el-input name="password" :prefix-icon="Lock" type="password" placeholder="请输入密码"></el-input>
  101.                 </el-form-item>
  102.                 <el-form-item class="flex">
  103.                     <div class="flex">
  104.                         <el-checkbox>记住我</el-checkbox>
  105.                         <el-link type="primary" :underline="false">忘记密码？</el-link>
  106.                     </div>
  107.                 </el-form-item>
  108.                 <!-- 登录按钮 -->
  109.                 <el-form-item>
  110.                     <el-button class="button" type="primary" auto-insert-space>登录</el-button>
  111.                 </el-form-item>
  112.                 <el-form-item class="flex">
  113.                     <el-link type="info" :underline="false" @click="isRegister = true">
  114.                         注册 →
  115.                     </el-link>
  116.                 </el-form-item>
  117.             </el-form>
  118.         </el-col>
  119.     </el-row>
  120. </template>
  121.  
  122. <style lang="scss" scoped>
  123. /* 样式 */
  124. .login-page {
  125.     height: 100vh;
  126.     background-color: #fff;
  127.  
  128.     .bg {
  129.         background: url('@/assets/logo2.png') no-repeat 60% center / 240px auto,
  130.             url('@/assets/login_bg.jpg') no-repeat center / cover;
  131.         border-radius: 0 20px 20px 0;
  132.     }
  133.  
  134.     .form {
  135.         display: flex;
  136.         flex-direction: column;
  137.         justify-content: center;
  138.         user-select: none;
  139.  
  140.         .title {
  141.             margin: 0 auto;
  142.         }
  143.  
  144.         .button {
  145.             width: 100%;
  146.         }
  147.  
  148.         .flex {
  149.             width: 100%;
  150.             display: flex;
  151.             justify-content: space-between;
  152.         }
  153.     }
  154. }
  155. </style>

验证，存在跨域问题

4、跨域问题解决

4.1 request.js

  1. // 定制请求实例
  2.  
  3. //导入axios  npm install axios
  4. import axios from 'axios';
  5.  
  6. //定义一个变量，记录公共的前缀baseURL
  7. // const baseURL = 'http://localhost:8080'  
  8. const baseURL = '/api'          // 注释上面代码，解决跨域问题
  9. const instance = axios.create({baseURL})
  10.  
  11. // 添加响应拦截器
  12. instance.interceptors.response.use(
  13.     result=>{
  14.         return result.data;
  15.  
  16.     },
  17.     err=>{
  18.         alert('服务异常')
  19.         return Promise.reject(err);//异步的状态转化成失败的状态
  20.     }
  21. )
  22.  
  23. export default instance;

4.2 vite.config.js

  1. import { fileURLToPath, URL } from 'node:url'
  2.  
  3. import { defineConfig } from 'vite'
  4. import vue from '@vitejs/plugin-vue'
  5.  
  6. // https://vitejs.dev/config/
  7. export default defineConfig({
  8.   plugins: [
  9.     vue(),
  10.   ],
  11.   resolve: {
  12.     alias: {
  13.       '@': fileURLToPath(new URL('./src', import.meta.url))
  14.     }
  15.   }
  16.   ,
  17.   // server 部分都是为了解决跨域问题
  18.   server:{
  19.     proxy:{
  20.       '/api':{//获取路径中包含了/api的请求
  21.           target:'http://localhost:8080',//后台服务所在的源
  22.           changeOrigin:true,//修改源
  23.           rewrite:(path)=>path.replace(/^\/api/,'')///api替换为''
  24.       }
  25.     }
  26.   }
  27. })

5、测试验证

三、登录功能

 

1、登录Login.vue绑定数据 

  1. <script setup>
  2. import { User, Lock } from '@element-plus/icons-vue'
  3. import { ref } from 'vue'
  4. //二 注册 3.3 导入注册的接口
  5. import { userRegisterService} from '@/api/user.js'
  6.  
  7. //控制注册与登录表单的显示， 默认显示注册
  8. const isRegister = ref(false)
  9.  
  10. //二 注册 2.1定义数据模型
  11.  
  12. const registerData = ref({
  13.     username:'',
  14.     password:'',
  15.     rePassword:''
  16. })
  17.  
  18. //二 注册  2.2自定义rePassword需要自定义校验规则校验规则的函数,三个参rule 规则,value 值,callback 回调函数
  19. const checkRePassword = (rule,value,callback)=>{
  20.     if(value === '' ){
  21.         callback(new Error('请再次确认密码！'))
  22.     }else if(value !== registerData.value.password){
  23.         callback(new Error('请确保两次密码输入一致性！'))
  24.     }else{
  25.         callback()  //校验通过
  26.     }
  27. }
  28.  
  29. //二 注册  2.2 定义表单校验规则,rePassword需要自定义校验规则
  30. const rules = {
  31.     username:[
  32.         {required:true,message:'请输入用户名！',trigger:'blur'},
  33.         {min:5,max:16,message:'长度为5-16位非空字符',trigger:'blur'}
  34.     ],
  35.     password:[
  36.     {required:true,message:'请输入密码！',trigger:'blur'},
  37.         {min:5,max:16,message:'长度为5-16位非空字符',trigger:'blur'}
  38.     ],
  39.     rePassword:[
  40.         {validator:checkRePassword,trigger:'blur'}
  41.     ]
  42. }
  43.  
  44. // 二 注册  3.3 调用后台接口,完成注册
  45. const  register = async()=>{
  46.     // registerData 是一个响应式对象，如果要获取值需要.value
  47.     let result = await userRegisterService(registerData.value);
  48.     if(result.code ===1){
  49.         //注册成功
  50.         alert(result.msg?result.msg : '注册成功')
  51.  
  52.     }else{
  53.         // 注册失败
  54.         alert('注册失败')
  55.  
  56.     }
  57. }
  58.  
  59. // 三 登录 1 绑定数据 复用注册表单的数据模型
  60.  
  61. </script>
  62.  
  63. <template>
  64.     <el-row class="login-page">
  65.         <el-col :span="12" class="bg"></el-col>
  66.         <el-col :span="6" :offset="3" class="form">
  67.             <!-- 注册表单 -->
  68.             <el-form ref="form" size="large" autocomplete="off" v-if="isRegister" :model="registerData" :rules="rules">  <!-- 二 注册2.1  :model="registerData"表单声明属性 --> <!-- 二 注册2.2  :rules="rules"绑定校验 -->
  69.                 <el-form-item>
  70.                     <h1>注册</h1>
  71.                 </el-form-item>
  72.                 <el-form-item prop="username">  <!--二 注册 2.2 prop="username"绑定校验 -->
  73.                     <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input>  <!--二 注册 2.1 v-model="registerData.username"绑定属性 -->
  74.                 </el-form-item>
  75.                 <el-form-item prop="password"> <!-- 二 注册2.2 prop="password"绑定校验 -->
  76.                     <el-input :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password"></el-input>  <!-- 二 注册2.1 v-model="registerData.password"绑定属性 -->
  77.                 </el-form-item>
  78.                 <el-form-item prop="rePassword">  <!-- 2.2 prop="rePassword"绑定校验 -->
  79.                     <el-input :prefix-icon="Lock" type="password" placeholder="请输入再次密码" v-model="registerData.rePassword"></el-input>  <!-- 二 注册2.1 v-model="registerData.rePassword"绑定属性 -->
  80.                 </el-form-item>
  81.                 <!-- 注册按钮 -->
  82.                 <el-form-item>
  83.                     <el-button class="button" type="primary" auto-insert-space @click="register"> <!-- 二 注册3.3  @click="register"  绑定注册单击事件 -->
  84.                         注册
  85.                     </el-button>
  86.                 </el-form-item>
  87.                 <el-form-item class="flex">
  88.                     <el-link type="info" :underline="false" @click="isRegister = false">
  89.                         ← 返回
  90.                     </el-link>
  91.                 </el-form-item>
  92.             </el-form>
  93.             <!-- 登录表单 -->
  94.             <el-form ref="form" size="large" autocomplete="off" v-else model="registerDate">  <!-- 三 登录 3.1  :model="registerData"表单声明属性，复用注册 -->
  95.                 <el-form-item>
  96.                     <h1>登录</h1>
  97.                 </el-form-item>
  98.                 <el-form-item>
  99.                     <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input> <!--三 登录 3.1 v-model="registerData.username"绑定属性 -->
  100.                 </el-form-item>
  101.                 <el-form-item>
  102.                     <el-input name="password" :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password"></el-input> <!--三 登录 3.1 v-model="registerData.password"绑定属性 -->
  103.                 </el-form-item>                
  104.                 <el-form-item class="flex">
  105.                     <div class="flex">
  106.                         <el-checkbox>记住我</el-checkbox>
  107.                         <el-link type="primary" :underline="false">忘记密码？</el-link>
  108.                     </div>
  109.                 </el-form-item>
  110.                 <!-- 登录按钮 -->
  111.                 <el-form-item>
  112.                     <el-button class="button" type="primary" auto-insert-space>登录</el-button>
  113.                 </el-form-item>
  114.                 <el-form-item class="flex">
  115.                     <el-link type="info" :underline="false" @click="isRegister = true">
  116.                         注册 →
  117.                     </el-link>
  118.                 </el-form-item>
  119.             </el-form>
  120.         </el-col>
  121.     </el-row>
  122. </template>
  123.  
  124. <style lang="scss" scoped>
  125. /* 样式 */
  126. .login-page {
  127.     height: 100vh;
  128.     background-color: #fff;
  129.  
  130.     .bg {
  131.         background: url('@/assets/logo2.png') no-repeat 60% center / 240px auto,
  132.             url('@/assets/login_bg.jpg') no-repeat center / cover;
  133.         border-radius: 0 20px 20px 0;
  134.     }
  135.  
  136.     .form {
  137.         display: flex;
  138.         flex-direction: column;
  139.         justify-content: center;
  140.         user-select: none;
  141.  
  142.         .title {
  143.             margin: 0 auto;
  144.         }
  145.  
  146.         .button {
  147.             width: 100%;
  148.         }
  149.  
  150.         .flex {
  151.             width: 100%;
  152.             display: flex;
  153.             justify-content: space-between;
  154.         }
  155.     }
  156. }
  157. </style>

2、 登录Login.vue数据校验

  1. <script setup>
  2. import { User, Lock } from '@element-plus/icons-vue'
  3. import { ref } from 'vue'
  4. //二 注册 3.3 导入注册的接口
  5. import { userRegisterService} from '@/api/user.js'
  6.  
  7. //控制注册与登录表单的显示， 默认显示注册
  8. const isRegister = ref(false)
  9.  
  10. //二 注册 2.1定义数据模型
  11.  
  12. const registerData = ref({
  13.     username:'',
  14.     password:'',
  15.     rePassword:''
  16. })
  17.  
  18. //二 注册  2.2自定义rePassword需要自定义校验规则校验规则的函数,三个参rule 规则,value 值,callback 回调函数
  19. const checkRePassword = (rule,value,callback)=>{
  20.     if(value === '' ){
  21.         callback(new Error('请再次确认密码！'))
  22.     }else if(value !== registerData.value.password){
  23.         callback(new Error('请确保两次密码输入一致性！'))
  24.     }else{
  25.         callback()  //校验通过
  26.     }
  27. }
  28.  
  29. //二 注册  2.2 定义表单校验规则,rePassword需要自定义校验规则
  30. const rules = {
  31.     username:[
  32.         {required:true,message:'请输入用户名！',trigger:'blur'},
  33.         {min:5,max:16,message:'长度为5-16位非空字符',trigger:'blur'}
  34.     ],
  35.     password:[
  36.     {required:true,message:'请输入密码！',trigger:'blur'},
  37.         {min:5,max:16,message:'长度为5-16位非空字符',trigger:'blur'}
  38.     ],
  39.     rePassword:[
  40.         {validator:checkRePassword,trigger:'blur'}
  41.     ]
  42. }
  43.  
  44. // 二 注册  3.3 调用后台接口,完成注册
  45. const  register = async()=>{
  46.     // registerData 是一个响应式对象，如果要获取值需要.value
  47.     let result = await userRegisterService(registerData.value);
  48.     if(result.code ===1){
  49.         //注册成功
  50.         alert(result.msg?result.msg : '注册成功')
  51.  
  52.     }else{
  53.         // 注册失败
  54.         alert('注册失败')
  55.  
  56.     }
  57. }
  58.  
  59. // 三 登录 1 绑定数据 复用注册表单的数据模型
  60. // 三 登录 2  数据校验 复用注册表单的数据校验
  61.  
  62. </script>
  63.  
  64. <template>
  65.     <el-row class="login-page">
  66.         <el-col :span="12" class="bg"></el-col>
  67.         <el-col :span="6" :offset="3" class="form">
  68.             <!-- 注册表单 -->
  69.             <el-form ref="form" size="large" autocomplete="off" v-if="isRegister" :model="registerData" :rules="rules">  <!-- 二 注册2.1  :model="registerData"表单声明属性 --> <!-- 二 注册2.2  :rules="rules"绑定校验 -->
  70.                 <el-form-item>
  71.                     <h1>注册</h1>
  72.                 </el-form-item>
  73.                 <el-form-item prop="username">  <!--二 注册 2.2 prop="username"绑定校验 -->
  74.                     <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input>  <!--二 注册 2.1 v-model="registerData.username"绑定属性 -->
  75.                 </el-form-item>
  76.                 <el-form-item prop="password"> <!-- 二 注册2.2 prop="password"绑定校验 -->
  77.                     <el-input :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password"></el-input>  <!-- 二 注册2.1 v-model="registerData.password"绑定属性 -->
  78.                 </el-form-item>
  79.                 <el-form-item prop="rePassword">  <!-- 2.2 prop="rePassword"绑定校验 -->
  80.                     <el-input :prefix-icon="Lock" type="password" placeholder="请输入再次密码" v-model="registerData.rePassword"></el-input>  <!-- 二 注册2.1 v-model="registerData.rePassword"绑定属性 -->
  81.                 </el-form-item>
  82.                 <!-- 注册按钮 -->
  83.                 <el-form-item>
  84.                     <el-button class="button" type="primary" auto-insert-space @click="register"> <!-- 二 注册3.3  @click="register"  绑定注册单击事件 -->
  85.                         注册
  86.                     </el-button>
  87.                 </el-form-item>
  88.                 <el-form-item class="flex">
  89.                     <el-link type="info" :underline="false" @click="isRegister = false">
  90.                         ← 返回
  91.                     </el-link>
  92.                 </el-form-item>
  93.             </el-form>
  94.             <!-- 登录表单 -->
  95.             <el-form ref="form" size="large" autocomplete="off" v-else model="registerDate" rules="rules">  <!-- 三 登录 3.1  :model="registerData"表单声明属性，复用注册 --> <!-- 三 登录 3.2  :rules="rules"绑定校验 -->
  96.                 <el-form-item>
  97.                     <h1>登录</h1>
  98.                 </el-form-item>
  99.                 <el-form-item prop="username"> <!--三 登录 3.2  prop="username"绑定校验 -->
  100.                     <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input> <!--三 登录 3.1 v-model="registerData.username"绑定属性 -->
  101.                 </el-form-item>
  102.                 <el-form-item prop="username"> <!--三 登录 3.2  prop="username"绑定校验 -->
  103.                     <el-input name="password" :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password"></el-input> <!--三 登录 3.1 v-model="registerData.password"绑定属性 -->
  104.                 </el-form-item>               
  105.                 <el-form-item class="flex">
  106.                     <div class="flex">
  107.                         <el-checkbox>记住我</el-checkbox>
  108.                         <el-link type="primary" :underline="false">忘记密码？</el-link>
  109.                     </div>
  110.                 </el-form-item>
  111.                 <!-- 登录按钮 -->
  112.                 <el-form-item>
  113.                     <el-button class="button" type="primary" auto-insert-space>登录</el-button>
  114.                 </el-form-item>
  115.                 <el-form-item class="flex">
  116.                     <el-link type="info" :underline="false" @click="isRegister = true">
  117.                         注册 →
  118.                     </el-link>
  119.                 </el-form-item>
  120.             </el-form>
  121.         </el-col>
  122.     </el-row>
  123. </template>
  124.  
  125. <style lang="scss" scoped>
  126. /* 样式 */
  127. .login-page {
  128.     height: 100vh;
  129.     background-color: #fff;
  130.  
  131.     .bg {
  132.         background: url('@/assets/logo2.png') no-repeat 60% center / 240px auto,
  133.             url('@/assets/login_bg.jpg') no-repeat center / cover;
  134.         border-radius: 0 20px 20px 0;
  135.     }
  136.  
  137.     .form {
  138.         display: flex;
  139.         flex-direction: column;
  140.         justify-content: center;
  141.         user-select: none;
  142.  
  143.         .title {
  144.             margin: 0 auto;
  145.         }
  146.  
  147.         .button {
  148.             width: 100%;
  149.         }
  150.  
  151.         .flex {
  152.             width: 100%;
  153.             display: flex;
  154.             justify-content: space-between;
  155.         }
  156.     }
  157. }
  158. </style>

3、登录页面后端接口调用

3.1 user.js提供登录调用接口

  1. //导入request.js请求工具
  2. import request from '@/utils/request.js'
  3.  
  4. // 二  注册函数  提供调用注册接口的函数
  5. export const userRegisterService = (registerData) =>{
  6.     //借助于URLSearchParam完成参数传递
  7.     const params = new URLSearchParams();
  8.     for(let key in registerData){
  9.         params.append(key,registerData[key]);
  10.     }
  11.     return request.post('/user/register',params);
  12.     
  13. }
  14.  
  15. // 三  登录函数 提供调用登录接口的函数
  16. export const userLoginService = (loginData)=>{
  17.     //借助于URLSearchParam完成参数传递
  18.     const params = new URLSearchParams();
  19.     for(let key in loginData){
  20.         params.append(key,loginData[key]);
  21.     }
  22.     return request.post('/user/login',params);
  23.  
  24. }

3.2 Login.vue调用后端接口

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

4、测试验证

 

5、优化登录表单与注册表单数据显示问题（Login.vue）

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

四、优化axios响应拦截器与alert

1、axios响应拦截器

2.1 request.js 

（上图右侧的文件名错误）

  1. // 定制请求实例
  2.  
  3. //导入axios  npm install axios
  4. import axios from 'axios';
  5.  
  6. //定义一个变量，记录公共的前缀baseURL
  7. // const baseURL = 'http://localhost:8080'  
  8. const baseURL = '/api'          // 注释上面代码，解决跨域问题
  9. const instance = axios.create({baseURL})
  10.  
  11. // 添加响应拦截器
  12. instance.interceptors.response.use(
  13.     result=>{
  14.         // 判断业务状态码
  15.         if(result.data.code === 1){
  16.             //成功，正常返回数据
  17.             return result.data;
  18.         }
  19.         // 操作失败
  20.         alert(result.data.msg?result.data.msg : '服务异常')
  21.         // 异步操作的状态转换为失败
  22.         return Promise.reject(result.data)
  23.  
  24.     },
  25.     err=>{
  26.         alert('服务异常')
  27.         return Promise.reject(err);//异步的状态转化成失败的状态
  28.     }
  29. )
  30.  
  31. export default instance;

2.2 优化Login.vue

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

2、使用element-plus优化alert

2.1 request.js引用ElMessage 组件处理

  1. // 定制请求实例
  2.  
  3. //导入axios  npm install axios
  4. import axios from 'axios';
  5. // 四 4.2 element-plus封装的组件
  6. import { ElMessage } from 'element-plus';
  7.  
  8. //定义一个变量，记录公共的前缀baseURL
  9. // const baseURL = 'http://localhost:8080'  
  10. const baseURL = '/api'          // 注释上面代码，解决跨域问题
  11. const instance = axios.create({baseURL})
  12.  
  13. // 添加响应拦截器
  14. instance.interceptors.response.use(
  15.     result=>{
  16.         // 四  4.1 判断业务状态码
  17.         if(result.data.code === 1){
  18.             //成功，正常返回数据
  19.             return result.data;
  20.         }
  21.         // 操作失败
  22.         // alert(result.data.msg?result.data.msg : '服务异常')  
  23.         // 四 4.2 优化alert
  24.         ElMessage.error(result.data.msg?result.data.msg : '服务异常')
  25.         // 异步操作的状态转换为失败
  26.         return Promise.reject(result.data)
  27.  
  28.     },
  29.     err=>{
  30.         alert('服务异常')
  31.         return Promise.reject(err);//异步的状态转化成失败的状态
  32.     }
  33. )
  34.  
  35. export default instance;

2.2  Login.vue引用ElMessage 组件处理

  1. <script setup>
  2. import { User, Lock } from '@element-plus/icons-vue'
  3. import { ref } from 'vue'
  4. //二 注册 3.3 导入注册的接口 //三 登录 3.3 导入登录的接口
  5. import { userRegisterService,userLoginService} from '@/api/user.js'
  6.  
  7. // 四 4.2 element-plus封装的组件
  8. import { ElMessage } from 'element-plus';
  9.  
  10. //控制注册与登录表单的显示， 默认显示注册
  11. const isRegister = ref(false)
  12.  
  13. //二 注册 2.1定义数据模型
  14.  
  15. const registerData = ref({
  16.     username:'',
  17.     password:'',
  18.     rePassword:''
  19. })
  20.  
  21. //二 注册  2.2自定义rePassword需要自定义校验规则校验规则的函数,三个参rule 规则,value 值,callback 回调函数
  22. const checkRePassword = (rule,value,callback)=>{
  23.     if(value === '' ){
  24.         callback(new Error('请再次确认密码！'))
  25.     }else if(value !== registerData.value.password){
  26.         callback(new Error('请确保两次密码输入一致性！'))
  27.     }else{
  28.         callback()  //校验通过
  29.     }
  30. }
  31.  
  32. //二 注册  2.2 定义表单校验规则,rePassword需要自定义校验规则
  33. const rules = {
  34.     username:[
  35.         {required:true,message:'请输入用户名！',trigger:'blur'},
  36.         {min:5,max:16,message:'长度为5-16位非空字符',trigger:'blur'}
  37.     ],
  38.     password:[
  39.     {required:true,message:'请输入密码！',trigger:'blur'},
  40.         {min:5,max:16,message:'长度为5-16位非空字符',trigger:'blur'}
  41.     ],
  42.     rePassword:[
  43.         {validator:checkRePassword,trigger:'blur'}
  44.     ]
  45. }
  46.  
  47. // 二 注册  3.3 调用后台接口,完成注册
  48. const  register = async()=>{
  49.     // registerData 是一个响应式对象，如果要获取值需要.value
  50.     let result = await userRegisterService(registerData.value);
  51.     /* 使用axios的 request.js 统一处理了，优化这里代码
  52.     if(result.code ===1){
  53.         //注册成功
  54.         alert(result.msg?result.msg : '注册成功')
  55.  
  56.     }else{
  57.         // 注册失败
  58.         alert('注册失败')
  59.  
  60.     } */
  61.     // 四 4.2 优化alert
  62.     // alert(result.msg?result.msg : '注册成功')
  63.     ElMessage.success(result.msg?result.msg : '注册成功')
  64. }
  65.  
  66. // 三 登录 1 绑定数据 复用注册表单的数据模型
  67. // 三 登录 2  数据校验 复用注册表单的数据校验
  68. // 三 登录 3  登录函数
  69. const login  = async()=>{ 
  70.     //调用接口完成登录
  71.     let result = await userLoginService(registerData.value);
  72.       /* 使用axios的 request.js 统一处理了，优化这里代码
  73.     if(result.code ===1){
  74.         //登录成功
  75.         alert(result.msg?result.msg : '登录成功')
  76.  
  77.     }else{
  78.         // 登录失败
  79.         alert('登录失败')
  80.  
  81.     }*/
  82.     // 四 4.2 优化alert
  83.     // alert(result.msg?result.msg : '登录成功')
  84.     ElMessage.success(result.msg?result.msg : '登录成功')
  85.  
  86. }
  87. // 三 登录 4 定义函数清空数据模型数据(将数据清空)
  88. const clearRegisterDate = ()=>{
  89.     registerData.value={
  90.         username:'',
  91.         password:'',
  92.         rePassword:''
  93.     }
  94.  
  95. }
  96.  
  97.  
  98. </script>
  99.  
  100. <template>
  101.     <el-row class="login-page">
  102.         <el-col :span="12" class="bg"></el-col>
  103.         <el-col :span="6" :offset="3" class="form">
  104.             <!-- 注册表单 -->
  105.             <el-form ref="form" size="large" autocomplete="off" v-if="isRegister" :model="registerData" :rules="rules">  <!-- 二 注册2.1  :model="registerData"表单声明属性 --> <!-- 二 注册2.2  :rules="rules"绑定校验 -->
  106.                 <el-form-item>
  107.                     <h1>注册</h1>
  108.                 </el-form-item>
  109.                 <el-form-item prop="username">  <!--二 注册 2.2 prop="username"绑定校验 -->
  110.                     <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input>  <!--二 注册 2.1 v-model="registerData.username"绑定属性 -->
  111.                 </el-form-item>
  112.                 <el-form-item prop="password"> <!-- 二 注册2.2 prop="password"绑定校验 -->
  113.                     <el-input :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password"></el-input>  <!-- 二 注册2.1 v-model="registerData.password"绑定属性 -->
  114.                 </el-form-item>
  115.                 <el-form-item prop="rePassword">  <!-- 2.2 prop="rePassword"绑定校验 -->
  116.                     <el-input :prefix-icon="Lock" type="password" placeholder="请输入再次密码" v-model="registerData.rePassword"></el-input>  <!-- 二 注册2.1 v-model="registerData.rePassword"绑定属性 -->
  117.                 </el-form-item>
  118.                 <!-- 注册按钮 -->
  119.                 <el-form-item>
  120.                     <el-button class="button" type="primary" auto-insert-space @click="register"> <!-- 二 注册3.3  @click="register"  绑定注册单击事件 -->
  121.                         注册
  122.                     </el-button>
  123.                 </el-form-item>
  124.                 <el-form-item class="flex">
  125.                     <el-link type="info" :underline="false" @click="isRegister = false;clearRegisterDate()"> <!--三 登录 4  调用函数clearRegisterDate() 清空数据 -->
  126.                         ← 返回
  127.                     </el-link>
  128.                 </el-form-item>
  129.             </el-form>
  130.             <!-- 登录表单 -->
  131.             <el-form ref="form" size="large" autocomplete="off" v-else model="registerDate" rules="rules">  <!-- 三 登录 3.1  :model="registerData"表单声明属性，复用注册 --> <!-- 三 登录 3.2  :rules="rules"绑定校验 -->
  132.                 <el-form-item>
  133.                     <h1>登录</h1>
  134.                 </el-form-item>
  135.                 <el-form-item prop="username"> <!--三 登录 3.2  prop="username"绑定校验 -->
  136.                     <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input> <!--三 登录 3.1 v-model="registerData.username"绑定属性 -->
  137.                 </el-form-item>
  138.                 <el-form-item prop="username"> <!--三 登录 3.2  prop="username"绑定校验 -->
  139.                     <el-input name="password" :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password"></el-input> <!--三 登录 3.1 v-model="registerData.password"绑定属性 -->
  140.                 </el-form-item>                
  141.                 <el-form-item class="flex">
  142.                     <div class="flex">
  143.                         <el-checkbox>记住我</el-checkbox>
  144.                         <el-link type="primary" :underline="false">忘记密码？</el-link>
  145.                     </div>
  146.                 </el-form-item>
  147.                 <!-- 登录按钮 -->
  148.                 <el-form-item>
  149.                     <el-button class="button" type="primary" auto-insert-space @click="login">登录</el-button>
  150.                 </el-form-item>
  151.                 <el-form-item class="flex">
  152.                     <el-link type="info" :underline="false" @click="isRegister = true;clearRegisterDate()">  <!--三 登录 4  调用函数clearRegisterDate() 清空数据 -->
  153.                         注册 →
  154.                     </el-link>
  155.                 </el-form-item>
  156.             </el-form>
  157.         </el-col>
  158.     </el-row>
  159. </template>
  160.  
  161. <style lang="scss" scoped>
  162. /* 样式 */
  163. .login-page {
  164.     height: 100vh;
  165.     background-color: #fff;
  166.  
  167.     .bg {
  168.         background: url('@/assets/logo2.png') no-repeat 60% center / 240px auto,
  169.             url('@/assets/login_bg.jpg') no-repeat center / cover;
  170.         border-radius: 0 20px 20px 0;
  171.     }
  172.  
  173.     .form {
  174.         display: flex;
  175.         flex-direction: column;
  176.         justify-content: center;
  177.         user-select: none;
  178.  
  179.         .title {
  180.             margin: 0 auto;
  181.         }
  182.  
  183.         .button {
  184.             width: 100%;
  185.         }
  186.  
  187.         .flex {
  188.             width: 100%;
  189.             display: flex;
  190.             justify-content: space-between;
  191.         }
  192.     }
  193. }
  194. </style>

五、主页面布局 

1、Layout页面

1.1 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. </script>
  14.  
  15. <template>
  16.     <!-- element-plus 中的容器 -->
  17.     <el-container class="layout-container">
  18.         <!-- 左侧菜单 -->
  19.         <el-aside width="200px">
  20.             <div class="el-aside__logo"></div>
  21.             <!-- element-plus 菜单标签 -->
  22.             <el-menu active-text-color="#ffd04b" background-color="#232323"  text-color="#fff"
  23.                 router>
  24.                 <el-menu-item >
  25.                     <el-icon>
  26.                         <Management />
  27.                     </el-icon>
  28.                     <span>文章分类</span>
  29.                 </el-menu-item>
  30.                 <el-menu-item >
  31.                     <el-icon>
  32.                         <Promotion />
  33.                     </el-icon>
  34.                     <span>文章管理</span>
  35.                 </el-menu-item>
  36.                 <el-sub-menu >
  37.                     <template #title>
  38.                         <el-icon>
  39.                             <UserFilled />
  40.                         </el-icon>
  41.                         <span>个人中心</span>
  42.                     </template>
  43.                     <el-menu-item >
  44.                         <el-icon>
  45.                             <User />
  46.                         </el-icon>
  47.                         <span>基本资料</span>
  48.                     </el-menu-item>
  49.                     <el-menu-item >
  50.                         <el-icon>
  51.                             <Crop />
  52.                         </el-icon>
  53.                         <span>更换头像</span>
  54.                     </el-menu-item>
  55.                     <el-menu-item >
  56.                         <el-icon>
  57.                             <EditPen />
  58.                         </el-icon>
  59.                         <span>重置密码</span>
  60.                     </el-menu-item>
  61.                 </el-sub-menu>
  62.             </el-menu>
  63.         </el-aside>
  64.         <!-- 右侧主区域 -->
  65.         <el-container>
  66.             <!-- 头部区域 -->
  67.             <el-header>
  68.                 <div>编码集中营：<strong>春天的菠菜</strong></div>
  69.                 <el-dropdown placement="bottom-end">
  70.                     <span class="el-dropdown__box">
  71.                         <el-avatar :src="avatar" />
  72.                         <el-icon>
  73.                             <CaretBottom />
  74.                         </el-icon>
  75.                     </span>
  76.                     <template #dropdown>
  77.                         <el-dropdown-menu>
  78.                             <el-dropdown-item command="profile" :icon="User">基本资料</el-dropdown-item>
  79.                             <el-dropdown-item command="avatar" :icon="Crop">更换头像</el-dropdown-item>
  80.                             <el-dropdown-item command="password" :icon="EditPen">重置密码</el-dropdown-item>
  81.                             <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
  82.                         </el-dropdown-menu>
  83.                     </template>
  84.                 </el-dropdown>
  85.             </el-header>
  86.             <!-- 中间区域 -->
  87.             <el-main>
  88.                 <div style="width: 1290px; height: 570px;border: 1px solid red;">
  89.                     内容展示区
  90.                 </div>
  91.             </el-main>
  92.             <!-- 底部区域 -->
  93.             <el-footer>国际大事件 ©2023 Created by 春天的菠菜</el-footer>
  94.         </el-container>
  95.     </el-container>
  96. </template>
  97.  
  98. <style lang="scss" scoped>
  99. .layout-container {
  100.     height: 100vh;
  101.  
  102.     .el-aside {
  103.         background-color: #232323;
  104.  
  105.         &__logo {
  106.             height: 120px;
  107.             background: url('@/assets/logo.png') no-repeat center / 120px auto;
  108.         }
  109.  
  110.         .el-menu {
  111.             border-right: none;
  112.         }
  113.     }
  114.  
  115.     .el-header {
  116.         background-color: #fff;
  117.         display: flex;
  118.         align-items: center;
  119.         justify-content: space-between;
  120.  
  121.         .el-dropdown__box {
  122.             display: flex;
  123.             align-items: center;
  124.  
  125.             .el-icon {
  126.                 color: #999;
  127.                 margin-left: 10px;
  128.             }
  129.  
  130.             &:active,
  131.             &:focus {
  132.                 outline: none;
  133.             }
  134.         }
  135.     }
  136.  
  137.     .el-footer {
  138.         display: flex;
  139.         align-items: center;
  140.         justify-content: center;
  141.         font-size: 14px;
  142.         color: #666;
  143.     }
  144. }
  145. </style>

 1.2 App.vue导入Layout.vue

  1. <script setup>
  2. import LoginVue from '@/views/Login.vue'
  3. import LayoutVue from '@/views/Layout.vue';
  4.  
  5. </script>
  6.  
  7. <template>
  8. <LoginVue/>
  9. <!-- 五 LayoutVue-->
  10. <LayoutVue/>
  11. </template>
  12.  
  13.  
  14. <style scoped>
  15.  
  16. </style>

2、路由

 

 2.1 安装vue-router

npm install vue-router@4

2.2 创建路由器index.js

src下新增router文件夹，在router下新增index.js

  1. import { createRouter, createWebHistory } from 'vue-router'
  2.  
  3. //导入组件
  4. import LoginVue from '@/views/Login.vue'
  5. import LayoutVue from '@/views/Layout.vue'
  6.  
  7.  
  8.  
  9. //定义路由关系
  10. const routes = [
  11.     { path: '/login', component: LoginVue },
  12.     { path: '/', component: LayoutVue }  
  13. ]
  14.  
  15. //创建路由器
  16. const router = createRouter({
  17.     history: createWebHistory(),
  18.     routes: routes
  19. })
  20.  
  21. //导出路由
  22. export default router

2.3 在main.js使用vue-router

  1. import './assets/main.scss'  // 本项目使用sass
  2.  
  3. import { createApp } from 'vue'
  4. import ElementPlus from 'element-plus'
  5. import 'element-plus/dist/index.css'
  6. //五 2.3 
  7. import router from '@/router'
  8.  
  9.  
  10. import App from './App.vue'
  11.  
  12.  
  13. const app = createApp(App)
  14. //五 2.3 
  15. app.use(router)
  16.  
  17.  
  18. app.use(ElementPlus)
  19. app.mount('#app')

2.4 App.vue中声明router-view标签

  1. <script setup>
  2. // 五  2.4
  3. // import LoginVue from '@/views/Login.vue'
  4. // import LayoutVue from '@/views/Layout.vue';
  5.  
  6. </script>
  7.  
  8. <template>
  9.     <!-- 五  2.4 -->
  10.     <router-view></router-view>
  11.     <!-- 五  2.4 -->
  12. <!-- <LoginVue/> -->
  13. <!-- 五 1.1 LayoutVue-->
  14. <LayoutVue/>
  15. </template>
  16.  
  17.  
  18. <style scoped>
  19.  
  20. </style>

2.5  Login.vue优化登录成功跳转

  1. <script setup>
  2. import { User, Lock } from '@element-plus/icons-vue'
  3. import { ref } from 'vue'
  4. //二 注册 3.3 导入注册的接口 //三 登录 3.3 导入登录的接口
  5. import { userRegisterService,userLoginService} from '@/api/user.js'
  6.  
  7. // 四 4.2 element-plus封装的组件
  8. import { ElMessage } from 'element-plus';
  9.  
  10. // 五 2.5 导入路由
  11. import {useRouter} from 'vue-router'
  12.  
  13. // 五 2.5 调用路由
  14. const router = useRouter()
  15.  
  16. //控制注册与登录表单的显示， 默认显示注册
  17. const isRegister = ref(false)
  18.  
  19. //二 注册 2.1定义数据模型
  20.  
  21. const registerData = ref({
  22.     username:'',
  23.     password:'',
  24.     rePassword:''
  25. })
  26.  
  27. //二 注册  2.2自定义rePassword需要自定义校验规则校验规则的函数,三个参rule 规则,value 值,callback 回调函数
  28. const checkRePassword = (rule,value,callback)=>{
  29.     if(value === '' ){
  30.         callback(new Error('请再次确认密码！'))
  31.     }else if(value !== registerData.value.password){
  32.         callback(new Error('请确保两次密码输入一致性！'))
  33.     }else{
  34.         callback()  //校验通过
  35.     }
  36. }
  37.  
  38. //二 注册  2.2 定义表单校验规则,rePassword需要自定义校验规则
  39. const rules = {
  40.     username:[
  41.         {required:true,message:'请输入用户名！',trigger:'blur'},
  42.         {min:5,max:16,message:'长度为5-16位非空字符',trigger:'blur'}
  43.     ],
  44.     password:[
  45.     {required:true,message:'请输入密码！',trigger:'blur'},
  46.         {min:5,max:16,message:'长度为5-16位非空字符',trigger:'blur'}
  47.     ],
  48.     rePassword:[
  49.         {validator:checkRePassword,trigger:'blur'}
  50.     ]
  51. }
  52.  
  53. // 二 注册  3.3 调用后台接口,完成注册
  54. const  register = async()=>{
  55.     // registerData 是一个响应式对象，如果要获取值需要.value
  56.     let result = await userRegisterService(registerData.value);
  57.     /* 使用axios的 request.js 统一处理了，优化这里代码
  58.     if(result.code ===1){
  59.         //注册成功
  60.         alert(result.msg?result.msg : '注册成功')
  61.  
  62.     }else{
  63.         // 注册失败
  64.         alert('注册失败')
  65.  
  66.     } */
  67.     // 四 4.2 优化alert
  68.     // alert(result.msg?result.msg : '注册成功')
  69.     ElMessage.success(result.msg?result.msg : '注册成功')
  70. }
  71.  
  72. // 三 登录 1 绑定数据 复用注册表单的数据模型
  73. // 三 登录 2  数据校验 复用注册表单的数据校验
  74. // 三 登录 3  登录函数
  75. const login  = async()=>{ 
  76.     //调用接口完成登录
  77.     let result = await userLoginService(registerData.value);
  78.       /* 使用axios的 request.js 统一处理了，优化这里代码
  79.     if(result.code ===1){
  80.         //登录成功
  81.         alert(result.msg?result.msg : '登录成功')
  82.  
  83.     }else{
  84.         // 登录失败
  85.         alert('登录失败')
  86.  
  87.     }*/
  88.     // 四 4.2 优化alert
  89.     // alert(result.msg?result.msg : '登录成功')
  90.     ElMessage.success(result.msg?result.msg : '登录成功')
  91.     // 五 2.5 跳转首页 借助于路由
  92.     router.push('/')
  93.  
  94. }
  95. // 三 登录 4 定义函数清空数据模型数据(将数据清空)
  96. const clearRegisterDate = ()=>{
  97.     registerData.value={
  98.         username:'',
  99.         password:'',
  100.         rePassword:''
  101.     }
  102.  
  103. }
  104.  
  105.  
  106. </script>
  107.  
  108. <template>
  109.     <el-row class="login-page">
  110.         <el-col :span="12" class="bg"></el-col>
  111.         <el-col :span="6" :offset="3" class="form">
  112.             <!-- 注册表单 -->
  113.             <el-form ref="form" size="large" autocomplete="off" v-if="isRegister" :model="registerData" :rules="rules">  <!-- 二 注册2.1  :model="registerData"表单声明属性 --> <!-- 二 注册2.2  :rules="rules"绑定校验 -->
  114.                 <el-form-item>
  115.                     <h1>注册</h1>
  116.                 </el-form-item>
  117.                 <el-form-item prop="username">  <!--二 注册 2.2 prop="username"绑定校验 -->
  118.                     <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input>  <!--二 注册 2.1 v-model="registerData.username"绑定属性 -->
  119.                 </el-form-item>
  120.                 <el-form-item prop="password"> <!-- 二 注册2.2 prop="password"绑定校验 -->
  121.                     <el-input :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password"></el-input>  <!-- 二 注册2.1 v-model="registerData.password"绑定属性 -->
  122.                 </el-form-item>
  123.                 <el-form-item prop="rePassword">  <!-- 2.2 prop="rePassword"绑定校验 -->
  124.                     <el-input :prefix-icon="Lock" type="password" placeholder="请输入再次密码" v-model="registerData.rePassword"></el-input>  <!-- 二 注册2.1 v-model="registerData.rePassword"绑定属性 -->
  125.                 </el-form-item>
  126.                 <!-- 注册按钮 -->
  127.                 <el-form-item>
  128.                     <el-button class="button" type="primary" auto-insert-space @click="register"> <!-- 二 注册3.3  @click="register"  绑定注册单击事件 -->
  129.                         注册
  130.                     </el-button>
  131.                 </el-form-item>
  132.                 <el-form-item class="flex">
  133.                     <el-link type="info" :underline="false" @click="isRegister = false;clearRegisterDate()"> <!--三 登录 4  调用函数clearRegisterDate() 清空数据 -->
  134.                         ← 返回
  135.                     </el-link>
  136.                 </el-form-item>
  137.             </el-form>
  138.             <!-- 登录表单 -->
  139.             <el-form ref="form" size="large" autocomplete="off" v-else model="registerDate" rules="rules">  <!-- 三 登录 3.1  :model="registerData"表单声明属性，复用注册 --> <!-- 三 登录 3.2  :rules="rules"绑定校验 -->
  140.                 <el-form-item>
  141.                     <h1>登录</h1>
  142.                 </el-form-item>
  143.                 <el-form-item prop="username"> <!--三 登录 3.2  prop="username"绑定校验 -->
  144.                     <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input> <!--三 登录 3.1 v-model="registerData.username"绑定属性 -->
  145.                 </el-form-item>
  146.                 <el-form-item prop="username"> <!--三 登录 3.2  prop="username"绑定校验 -->
  147.                     <el-input name="password" :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password"></el-input> <!--三 登录 3.1 v-model="registerData.password"绑定属性 -->
  148.                 </el-form-item>                
  149.                 <el-form-item class="flex">
  150.                     <div class="flex">
  151.                         <el-checkbox>记住我</el-checkbox>
  152.                         <el-link type="primary" :underline="false">忘记密码？</el-link>
  153.                     </div>
  154.                 </el-form-item>
  155.                 <!-- 登录按钮 -->
  156.                 <el-form-item>
  157.                     <el-button class="button" type="primary" auto-insert-space @click="login">登录</el-button>
  158.                 </el-form-item>
  159.                 <el-form-item class="flex">
  160.                     <el-link type="info" :underline="false" @click="isRegister = true;clearRegisterDate()">  <!--三 登录 4  调用函数clearRegisterDate() 清空数据 -->
  161.                         注册 →
  162.                     </el-link>
  163.                 </el-form-item>
  164.             </el-form>
  165.         </el-col>
  166.     </el-row>
  167. </template>
  168.  
  169. <style lang="scss" scoped>
  170. /* 样式 */
  171. .login-page {
  172.     height: 100vh;
  173.     background-color: #fff;
  174.  
  175.     .bg {
  176.         background: url('@/assets/logo2.png') no-repeat 60% center / 240px auto,
  177.             url('@/assets/login_bg.jpg') no-repeat center / cover;
  178.         border-radius: 0 20px 20px 0;
  179.     }
  180.  
  181.     .form {
  182.         display: flex;
  183.         flex-direction: column;
  184.         justify-content: center;
  185.         user-select: none;
  186.  
  187.         .title {
  188.             margin: 0 auto;
  189.         }
  190.  
  191.         .button {
  192.             width: 100%;
  193.         }
  194.  
  195.         .flex {
  196.             width: 100%;
  197.             display: flex;
  198.             justify-content: space-between;
  199.         }
  200.     }
  201. }
  202. </style>

2.6 测试验证

登录页面：   http://127.0.0.1:5173/login

3、子路由

 

3.1 views下创建vue文件 

 

3.1.1 ArticleCategory.vue
  1. <template>
  2.     文章分类
  3. </template>
3.1.2 ArticleManage.vue
  1. <template>
  2.     文章管理
  3. </template>
3.1.3 UserAvatar.vue
  1. <template>
  2.     更换头像
  3. </template>
3.1.4 UserInfo.vue
  1. <template>
  2.     基本资料
  3. </template>
3.1.5 UserResetPassword.vue
  1. <template>
  2.     重置密码
  3. </template>

3.2 index.js

  1. import { createRouter, createWebHistory } from 'vue-router'
  2.  
  3. //导入组件
  4. import LoginVue from '@/views/Login.vue'
  5. import LayoutVue from '@/views/Layout.vue'
  6.  
  7. import ArticleCategoryVue from '@/views/article/ArticleCategory.vue'
  8. import ArticleManageVue from '@/views/article/ArticleManage.vue'
  9. import UserAvatarVue from '@/views/user/UserAvatar.vue'
  10. import UserInfoVue from '@/views/user/UserInfo.vue'
  11. import UserResetPasswordVue from '@/views/user/UserResetPassword.vue'
  12.  
  13. //定义路由关系
  14. const routes = [
  15.     { path: '/login', component: LoginVue },
  16.     {
  17.         path: '/', component: LayoutVue,redirect:'/article/manage', children: [
  18.             { path: '/article/category', component: ArticleCategoryVue },
  19.             { path: '/article/manage', component: ArticleManageVue },
  20.             { path: '/user/info', component: UserInfoVue },
  21.             { path: '/user/avatar', component: UserAvatarVue },
  22.             { path: '/user/resetPassword', component: UserResetPasswordVue }
  23.         ]
  24.     }
  25. ]
  26.  
  27. //创建路由器
  28. const router = createRouter({
  29.     history: createWebHistory(),
  30.     routes: routes
  31. })
  32.  
  33. //导出路由
  34. export default router

3.3 Layout.vue声明router-view标签

  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. </script>
  14.  
  15. <template>
  16.     <!-- element-plus 中的容器 -->
  17.     <el-container class="layout-container">
  18.         <!-- 左侧菜单 -->
  19.         <el-aside width="200px">
  20.             <div class="el-aside__logo"></div>
  21.             <!-- element-plus 菜单标签 -->
  22.             <el-menu active-text-color="#ffd04b" background-color="#232323"  text-color="#fff"
  23.                 router>
  24.                 <el-menu-item index="/article/category">  <!-- 五 3.3  -->
  25.                     <el-icon>
  26.                         <Management />
  27.                     </el-icon>
  28.                     <span>文章分类</span>
  29.                 </el-menu-item>
  30.                 <el-menu-item index="/article/manage">  <!-- 五 3.3  -->
  31.                     <el-icon>
  32.                         <Promotion />
  33.                     </el-icon>
  34.                     <span>文章管理</span>
  35.                 </el-menu-item>
  36.                 <el-sub-menu >
  37.                     <template #title>
  38.                         <el-icon>
  39.                             <UserFilled />
  40.                         </el-icon>
  41.                         <span>个人中心</span>
  42.                     </template>
  43.                     <el-menu-item index="/user/info">  <!-- 五 3.3  -->
  44.                         <el-icon>
  45.                             <User />
  46.                         </el-icon>
  47.                         <span>基本资料</span>
  48.                     </el-menu-item>
  49.                     <el-menu-item index="/user/avatar">  <!-- 五 3.3  -->
  50.                         <el-icon>
  51.                             <Crop />
  52.                         </el-icon>
  53.                         <span>更换头像</span>
  54.                     </el-menu-item>
  55.                     <el-menu-item index="/user/resetPassword">  <!-- 五 3.3  -->
  56.                         <el-icon>
  57.                             <EditPen />
  58.                         </el-icon>
  59.                         <span>重置密码</span>
  60.                     </el-menu-item>
  61.                 </el-sub-menu>
  62.             </el-menu>
  63.         </el-aside>
  64.         <!-- 右侧主区域 -->
  65.         <el-container>
  66.             <!-- 头部区域 -->
  67.             <el-header>
  68.                 <div>编码集中营：<strong>春天的菠菜</strong></div>
  69.                 <el-dropdown placement="bottom-end">
  70.                     <span class="el-dropdown__box">
  71.                         <el-avatar :src="avatar" />
  72.                         <el-icon>
  73.                             <CaretBottom />
  74.                         </el-icon>
  75.                     </span>
  76.                     <template #dropdown>
  77.                         <el-dropdown-menu>
  78.                             <el-dropdown-item command="profile" :icon="User">基本资料</el-dropdown-item>
  79.                             <el-dropdown-item command="avatar" :icon="Crop">更换头像</el-dropdown-item>
  80.                             <el-dropdown-item command="password" :icon="EditPen">重置密码</el-dropdown-item>
  81.                             <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
  82.                         </el-dropdown-menu>
  83.                     </template>
  84.                 </el-dropdown>
  85.             </el-header>
  86.             <!-- 中间区域 -->
  87.             <el-main>
  88.                 <!-- 五 3.3  -->
  89.                 <!-- <div style="width: 1290px; height: 570px;border: 1px solid red;">
  90.                     内容展示区
  91.                 </div> -->
  92.                 <router-view></router-view>
  93.             </el-main>
  94.             <!-- 底部区域 -->
  95.             <el-footer>国际大事件 ©2023 Created by 春天的菠菜</el-footer>
  96.         </el-container>
  97.     </el-container>
  98. </template>
  99.  
  100. <style lang="scss" scoped>
  101. .layout-container {
  102.     height: 100vh;
  103.  
  104.     .el-aside {
  105.         background-color: #232323;
  106.  
  107.         &__logo {
  108.             height: 120px;
  109.             background: url('@/assets/logo.png') no-repeat center / 120px auto;
  110.         }
  111.  
  112.         .el-menu {
  113.             border-right: none;
  114.         }
  115.     }
  116.  
  117.     .el-header {
  118.         background-color: #fff;
  119.         display: flex;
  120.         align-items: center;
  121.         justify-content: space-between;
  122.  
  123.         .el-dropdown__box {
  124.             display: flex;
  125.             align-items: center;
  126.  
  127.             .el-icon {
  128.                 color: #999;
  129.                 margin-left: 10px;
  130.             }
  131.  
  132.             &:active,
  133.             &:focus {
  134.                 outline: none;
  135.             }
  136.         }
  137.     }
  138.  
  139.     .el-footer {
  140.         display: flex;
  141.         align-items: center;
  142.         justify-content: center;
  143.         font-size: 14px;
  144.         color: #666;
  145.     }
  146. }
  147. </style>

3.4 测试验证

六、文章分类 

1、列表查询

1.1 article.js

api下新建article.js

  1. //导入request.js请求工具
  2. import request from '@/utils/request.js'
  3.  
  4. // 六  文章分类列表查询函数  
  5. export const articleCategoryListService = (registerData) =>{    
  6.     return request.get('/category');
  7.     
  8. }

1.2 ArticleCategory.vue

  1. <script setup>
  2. // 六 1.2 声明一个异步函数
  3. import {articleCategoryListService} from '@/api/article.js'
  4.  
  5. import {
  6.     Edit,
  7.     Delete
  8. } from '@element-plus/icons-vue'
  9. import { ref } from 'vue'
  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. // 六 1.2 声明一个异步函数
  35. const articleCategoryList = async()=>{
  36.     let result = await articleCategoryListService()
  37.     categorys.value = result.data;
  38.  
  39. }
  40. articleCategoryList();
  41.  
  42. </script>
  43. <template>
  44.     <el-card class="page-container">
  45.         <template #header>
  46.             <div class="header">
  47.                 <span>文章分类</span>
  48.                 <div class="extra">
  49.                     <el-button type="primary">添加分类</el-button>
  50.                 </div>
  51.             </div>
  52.         </template>
  53.         <el-table :data="categorys" style="width: 100%">
  54.             <el-table-column label="序号" width="100" type="index"> </el-table-column>
  55.             <el-table-column label="分类名称" prop="categoryName"></el-table-column>
  56.             <el-table-column label="分类别名" prop="categoryAlias"></el-table-column>
  57.             <el-table-column label="操作" width="100">
  58.                 <template #default="{ row }">
  59.                     <el-button :icon="Edit" circle plain type="primary" ></el-button>
  60.                     <el-button :icon="Delete" circle plain type="danger"></el-button>
  61.                 </template>
  62.             </el-table-column>
  63.             <template #empty>
  64.                 <el-empty description="没有数据" />
  65.             </template>
  66.         </el-table>
  67.     </el-card>
  68. </template>
  69.  
  70. <style lang="scss" scoped>
  71. .page-container {
  72.     min-height: 100%;
  73.     box-sizing: border-box;
  74.  
  75.     .header {
  76.         display: flex;
  77.         align-items: center;
  78.         justify-content: space-between;
  79.     }
  80. }
  81. </style>

此时页面访问存在token问题

2、Pinia状态管理库

2.1 安装pinia

npm install pinia

2.2 main.js导入pinia

在main.js中，引入pinia，创建pinia实例，并调用vue应用实例的use方法使用pinia

  1. import './assets/main.scss'  // 本项目使用sass
  2.  
  3. import { createApp } from 'vue'
  4. import ElementPlus from 'element-plus'
  5. import 'element-plus/dist/index.css'
  6. //五 2.3 
  7. import router from '@/router'
  8.  
  9.  
  10. import App from './App.vue'
  11. //六 2.2
  12. import {createPinia} from 'pinia'
  13.  
  14. const app = createApp(App)
  15. //六 2.2
  16. const pinia = createPinia();
  17. app.use(pinia)
  18. //五 2.3 
  19. app.use(router)
  20.  
  21.  
  22. app.use(ElementPlus)
  23. app.mount('#app')

2.3 定义store

在src/stores目录下定义token.js

  1. //定义store
  2. import {defineStore} from 'pinia'
  3. import {ref} from 'vue'
  4. /* 
  5.     第一个参数:名字,唯一性
  6.     第二个参数:函数,函数的内部可以定义状态的所有内容
  7.  
  8.     返回值: 函数
  9. */
  10. export const useTokenStore = defineStore('token',()=>{
  11.     //定义状态的内容
  12.  
  13.     //1.响应式变量
  14.     const token = ref('')
  15.  
  16.     //2.定义一个函数,修改token的值
  17.     const setToken = (newToken)=>{
  18.         token.value = newToken
  19.     }
  20.  
  21.     //3.函数,移除token的值
  22.     const removeToken = ()=>{
  23.         token.value=''
  24.     }
  25.  
  26.     return {
  27.         token,setToken,removeToken
  28.     }
  29. });

2.4 使用Store

在需要使用状态的地方，导入@/stores/*.js , 使用即可

在Login.vue中导入@/stores/token.js, 并且当用户登录成功后，将token保存pinia中

  1. <script setup>
  2. import { User, Lock } from '@element-plus/icons-vue'
  3. import { ref } from 'vue'
  4. //二 注册 3.3 导入注册的接口 //三 登录 3.3 导入登录的接口
  5. import { userRegisterService,userLoginService} from '@/api/user.js'
  6.  
  7. // 四 4.2 element-plus封装的组件
  8. import { ElMessage } from 'element-plus';
  9.  
  10. // 五 2.5 导入路由
  11. import {useRouter} from 'vue-router'
  12.  
  13. // 六  2.4 导入token状态
  14. import { useTokenStore } from '@/stores/token.js'
  15.  
  16. // 五 2.5 调用路由
  17. const router = useRouter()
  18.  
  19. // 六  2.4   调用useTokenStore得到状态
  20. const tokenStore = useTokenStore();
  21.  
  22. //控制注册与登录表单的显示， 默认显示注册
  23. const isRegister = ref(false)
  24.  
  25. //二 注册 2.1定义数据模型
  26.  
  27. const registerData = ref({
  28.     username:'',
  29.     password:'',
  30.     rePassword:''
  31. })
  32.  
  33. //二 注册  2.2自定义rePassword需要自定义校验规则校验规则的函数,三个参rule 规则,value 值,callback 回调函数
  34. const checkRePassword = (rule,value,callback)=>{
  35.     if(value === '' ){
  36.         callback(new Error('请再次确认密码！'))
  37.     }else if(value !== registerData.value.password){
  38.         callback(new Error('请确保两次密码输入一致性！'))
  39.     }else{
  40.         callback()  //校验通过
  41.     }
  42. }
  43.  
  44. //二 注册  2.2 定义表单校验规则,rePassword需要自定义校验规则
  45. const rules = {
  46.     username:[
  47.         {required:true,message:'请输入用户名！',trigger:'blur'},
  48.         {min:5,max:16,message:'长度为5-16位非空字符',trigger:'blur'}
  49.     ],
  50.     password:[
  51.     {required:true,message:'请输入密码！',trigger:'blur'},
  52.         {min:5,max:16,message:'长度为5-16位非空字符',trigger:'blur'}
  53.     ],
  54.     rePassword:[
  55.         {validator:checkRePassword,trigger:'blur'}
  56.     ]
  57. }
  58.  
  59. // 二 注册  3.3 调用后台接口,完成注册
  60. const  register = async()=>{
  61.     // registerData 是一个响应式对象，如果要获取值需要.value
  62.     let result = await userRegisterService(registerData.value);
  63.     /* 使用axios的 request.js 统一处理了，优化这里代码
  64.     if(result.code ===1){
  65.         //注册成功
  66.         alert(result.msg?result.msg : '注册成功')
  67.  
  68.     }else{
  69.         // 注册失败
  70.         alert('注册失败')
  71.  
  72.     } */
  73.     // 四 4.2 优化alert
  74.     // alert(result.msg?result.msg : '注册成功')
  75.     ElMessage.success(result.msg?result.msg : '注册成功')
  76. }
  77.  
  78. // 三 登录 1 绑定数据 复用注册表单的数据模型
  79. // 三 登录 2  数据校验 复用注册表单的数据校验
  80. // 三 登录 3  登录函数
  81. const login  = async()=>{ 
  82.     //调用接口完成登录
  83.     let result = await userLoginService(registerData.value);
  84.       /* 使用axios的 request.js 统一处理了，优化这里代码
  85.     if(result.code ===1){
  86.         //登录成功
  87.         alert(result.msg?result.msg : '登录成功')
  88.  
  89.     }else{
  90.         // 登录失败
  91.         alert('登录失败')
  92.  
  93.     }*/
  94.     // 四 4.2 优化alert
  95.     // alert(result.msg?result.msg : '登录成功')
  96.     ElMessage.success(result.msg?result.msg : '登录成功')
  97.  
  98.     // 六  2.4  保存token存储到pinia
  99.     tokenStore.setToken(result.data)
  100.     
  101.     // 五 2.5 跳转首页 借助于路由
  102.     router.push('/')
  103.  
  104. }
  105. // 三 登录 4 定义函数清空数据模型数据(将数据清空)
  106. const clearRegisterDate = ()=>{
  107.     registerData.value={
  108.         username:'',
  109.         password:'',
  110.         rePassword:''
  111.     }
  112.  
  113. }
  114.  
  115.  
  116. </script>
  117.  
  118. <template>
  119.     <el-row class="login-page">
  120.         <el-col :span="12" class="bg"></el-col>
  121.         <el-col :span="6" :offset="3" class="form">
  122.             <!-- 注册表单 -->
  123.             <el-form ref="form" size="large" autocomplete="off" v-if="isRegister" :model="registerData" :rules="rules">  <!-- 二 注册2.1  :model="registerData"表单声明属性 --> <!-- 二 注册2.2  :rules="rules"绑定校验 -->
  124.                 <el-form-item>
  125.                     <h1>注册</h1>
  126.                 </el-form-item>
  127.                 <el-form-item prop="username">  <!--二 注册 2.2 prop="username"绑定校验 -->
  128.                     <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input>  <!--二 注册 2.1 v-model="registerData.username"绑定属性 -->
  129.                 </el-form-item>
  130.                 <el-form-item prop="password"> <!-- 二 注册2.2 prop="password"绑定校验 -->
  131.                     <el-input :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password"></el-input>  <!-- 二 注册2.1 v-model="registerData.password"绑定属性 -->
  132.                 </el-form-item>
  133.                 <el-form-item prop="rePassword">  <!-- 2.2 prop="rePassword"绑定校验 -->
  134.                     <el-input :prefix-icon="Lock" type="password" placeholder="请输入再次密码" v-model="registerData.rePassword"></el-input>  <!-- 二 注册2.1 v-model="registerData.rePassword"绑定属性 -->
  135.                 </el-form-item>
  136.                 <!-- 注册按钮 -->
  137.                 <el-form-item>
  138.                     <el-button class="button" type="primary" auto-insert-space @click="register"> <!-- 二 注册3.3  @click="register"  绑定注册单击事件 -->
  139.                         注册
  140.                     </el-button>
  141.                 </el-form-item>
  142.                 <el-form-item class="flex">
  143.                     <el-link type="info" :underline="false" @click="isRegister = false;clearRegisterDate()"> <!--三 登录 4  调用函数clearRegisterDate() 清空数据 -->
  144.                         ← 返回
  145.                     </el-link>
  146.                 </el-form-item>
  147.             </el-form>
  148.             <!-- 登录表单 -->
  149.             <el-form ref="form" size="large" autocomplete="off" v-else model="registerDate" rules="rules">  <!-- 三 登录 3.1  :model="registerData"表单声明属性，复用注册 --> <!-- 三 登录 3.2  :rules="rules"绑定校验 -->
  150.                 <el-form-item>
  151.                     <h1>登录</h1>
  152.                 </el-form-item>
  153.                 <el-form-item prop="username"> <!--三 登录 3.2  prop="username"绑定校验 -->
  154.                     <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input> <!--三 登录 3.1 v-model="registerData.username"绑定属性 -->
  155.                 </el-form-item>
  156.                 <el-form-item prop="username"> <!--三 登录 3.2  prop="username"绑定校验 -->
  157.                     <el-input name="password" :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password"></el-input> <!--三 登录 3.1 v-model="registerData.password"绑定属性 -->
  158.                 </el-form-item>                
  159.                 <el-form-item class="flex">
  160.                     <div class="flex">
  161.                         <el-checkbox>记住我</el-checkbox>
  162.                         <el-link type="primary" :underline="false">忘记密码？</el-link>
  163.                     </div>
  164.                 </el-form-item>
  165.                 <!-- 登录按钮 -->
  166.                 <el-form-item>
  167.                     <el-button class="button" type="primary" auto-insert-space @click="login">登录</el-button>
  168.                 </el-form-item>
  169.                 <el-form-item class="flex">
  170.                     <el-link type="info" :underline="false" @click="isRegister = true;clearRegisterDate()">  <!--三 登录 4  调用函数clearRegisterDate() 清空数据 -->
  171.                         注册 →
  172.                     </el-link>
  173.                 </el-form-item>
  174.             </el-form>
  175.         </el-col>
  176.     </el-row>
  177. </template>
  178.  
  179. <style lang="scss" scoped>
  180. /* 样式 */
  181. .login-page {
  182.     height: 100vh;
  183.     background-color: #fff;
  184.  
  185.     .bg {
  186.         background: url('@/assets/logo2.png') no-repeat 60% center / 240px auto,
  187.             url('@/assets/login_bg.jpg') no-repeat center / cover;
  188.         border-radius: 0 20px 20px 0;
  189.     }
  190.  
  191.     .form {
  192.         display: flex;
  193.         flex-direction: column;
  194.         justify-content: center;
  195.         user-select: none;
  196.  
  197.         .title {
  198.             margin: 0 auto;
  199.         }
  200.  
  201.         .button {
  202.             width: 100%;
  203.         }
  204.  
  205.         .flex {
  206.             width: 100%;
  207.             display: flex;
  208.             justify-content: space-between;
  209.         }
  210.     }
  211. }
  212. </style>

在article.js中导入@/stores/token.js, 从pinia中获取到存储的token，在发起查询文章分类列表的时候把token通过请求头的形式携带给服务器

  1. //导入request.js请求工具
  2. import request from '@/utils/request.js'
  3. // 六 2.4 导入@/stores/token.js
  4. import { useTokenStore } from '@/stores/token.js'
  5.  
  6. // 六  文章分类列表查询函数  
  7. export const articleCategoryListService = (registerData) =>{    
  8.     // 六 2.4获取token状态
  9.     const tokenStore = useTokenStore()
  10.     //通过请求头Authorization携带token
  11.     return request.get('/category', { headers: { 'Authorization': tokenStore.token } });
  12.     
  13. }

2.5 测试验证

 3、 使用axios请求拦截器解决token繁琐问题

当进入主页后，将来要与后台交互，都需要携带token，如果每次请求都写这样的代码，将会比较繁琐，此时可以将携带token的代码通过请求拦截器统一处理

 3.1 request.js添加请求拦截器

在 src/util/request.js中

  1. // 定制请求实例
  2.  
  3. //导入axios  npm install axios
  4. import axios from 'axios';
  5. // 四 4.2 element-plus封装的组件
  6. import { ElMessage } from 'element-plus';
  7.  
  8. // 六  3 导入token状态
  9. import { useTokenStore } from '@/stores/token.js';
  10.  
  11. //定义一个变量，记录公共的前缀baseURL
  12. // const baseURL = 'http://localhost:8080'  
  13. const baseURL = '/api'          // 注释上面代码，解决跨域问题
  14. const instance = axios.create({baseURL})
  15. //六  3 添加请求拦截器
  16. instance.interceptors.request.use(
  17.     (config)=>{
  18.         //在发送请求之前做什么
  19.         let tokenStore = useTokenStore()
  20.         //如果token中有值，在携带
  21.         if(tokenStore.token){
  22.             config.headers.Authorization=tokenStore.token
  23.         }
  24.         return config
  25.     },
  26.     (err)=>{
  27.         //如果请求错误做什么
  28.         Promise.reject(err)
  29.     }
  30. )
  31.  
  32. // 添加响应拦截器
  33. instance.interceptors.response.use(
  34.     result=>{
  35.         // 四  4.1 判断业务状态码
  36.         if(result.data.code === 1){
  37.             //成功，正常返回数据
  38.             return result.data;
  39.         }
  40.         // 操作失败
  41.         // alert(result.data.msg?result.data.msg : '服务异常')  
  42.         // 四 4.2 优化alert
  43.         ElMessage.error(result.data.msg?result.data.msg : '服务异常')
  44.         // 异步操作的状态转换为失败
  45.         return Promise.reject(result.data)
  46.  
  47.     },
  48.     err=>{
  49.         alert('服务异常')
  50.         return Promise.reject(err);//异步的状态转化成失败的状态
  51.     }
  52. )
  53.  
  54. export default instance;

3.2 article.js移除之前添加的请求头

  1. //导入request.js请求工具
  2. import request from '@/utils/request.js'
  3. // 六 2.4 导入@/stores/token.js
  4. import { useTokenStore } from '@/stores/token.js'
  5.  
  6. // 六  文章分类列表查询函数  
  7. export const articleCategoryListService = (registerData) =>{    
  8.     // 六 2.4获取token状态
  9.     // 六 3.2
  10.     // const tokenStore = useTokenStore()
  11.     //通过请求头Authorization携带token
  12.     // return request.get('/category', { headers: { 'Authorization': tokenStore.token } });
  13.     
  14.     return request.get('/category');
  15.     
  16. }
  17.

4、pinia-persistedstate-plugin持久化插件

4.1 安装

npm install pinia-persistedstate-plugin

4.2 pinia中使用persist插件

在main.js中

  1. import './assets/main.scss'  // 本项目使用sass
  2.  
  3. import { createApp } from 'vue'
  4. import ElementPlus from 'element-plus'
  5. import 'element-plus/dist/index.css'
  6. //五 2.3 
  7. import router from '@/router'
  8.  
  9.  
  10. import App from './App.vue'
  11. //六 2.2
  12. import {createPinia} from 'pinia'
  13.  
  14. // 六  4.2 导入持久化插件
  15. import {createPersistedState} from'pinia-persistedstate-plugin'
  16.  
  17. const app = createApp(App)
  18. //六 2.2
  19. const pinia = createPinia();
  20. // 六  4.2
  21. const persist = createPersistedState()
  22. //六  4.2 pinia使用持久化插件
  23. pinia.use(persist)
  24. app.use(pinia)
  25. //五 2.3 
  26. app.use(router)
  27.  
  28.  
  29. app.use(ElementPlus)
  30. app.mount('#app')

4.3 在创建定义状态是配置持久化

在src/stores/token.js中

  1. //定义store
  2. import {defineStore} from 'pinia'
  3. import {ref} from 'vue'
  4. /* 
  5.     第一个参数:名字,唯一性
  6.     第二个参数:函数,函数的内部可以定义状态的所有内容
  7.  
  8.     返回值: 函数
  9. */
  10. export const useTokenStore = defineStore('token',()=>{
  11.     //定义状态的内容
  12.  
  13.     //1.响应式变量
  14.     const token = ref('')
  15.  
  16.     //2.定义一个函数,修改token的值
  17.     const setToken = (newToken)=>{
  18.         token.value = newToken
  19.     }
  20.  
  21.     //3.函数,移除token的值
  22.     const removeToken = ()=>{
  23.         token.value=''
  24.     }
  25.  
  26.     return {
  27.         token,setToken,removeToken
  28.     }
  29. },{
  30.     persist:true//  六 4.3持久化存储
  31. });

5、未登录统一处理

在后续访问接口时，如果没有登录，则前端不携带token，后台服务器会返回响应状态码401，代表未登录，此时可以在axios的响应拦截器中，统一对未登录的情况做处理request.js

  1. // 定制请求实例
  2.  
  3. //导入axios  npm install axios
  4. import axios from 'axios';
  5. // 四 4.2 element-plus封装的组件
  6. import { ElMessage } from 'element-plus';
  7.  
  8. // 六  3.1 导入token状态
  9. import { useTokenStore } from '@/stores/token.js';
  10.  
  11. // 六 5  导入路由跳转到首页
  12. import router from '@/router'
  13.  
  14. //定义一个变量，记录公共的前缀baseURL
  15. // const baseURL = 'http://localhost:8080'  
  16. const baseURL = '/api'          // 注释上面代码，解决跨域问题
  17. const instance = axios.create({baseURL})
  18. //六  3 添加请求拦截器
  19. instance.interceptors.request.use(
  20.     (config)=>{
  21.         //在发送请求之前做什么
  22.         let tokenStore = useTokenStore()
  23.         //如果token中有值，在携带
  24.         if(tokenStore.token){
  25.             config.headers.Authorization=tokenStore.token
  26.         }
  27.         return config
  28.     },
  29.     (err)=>{
  30.         //如果请求错误做什么
  31.         Promise.reject(err)
  32.     }
  33. )
  34.  
  35. // 添加响应拦截器
  36. instance.interceptors.response.use(
  37.     result=>{
  38.         // 四  4.1 判断业务状态码
  39.         if(result.data.code === 1){
  40.             //成功，正常返回数据
  41.             return result.data;
  42.         }
  43.         // 操作失败
  44.         // alert(result.data.msg?result.data.msg : '服务异常')  
  45.         // 四 4.2 优化alert
  46.         // ElMessage.error(result.data.msg?result.data.msg : '服务异常')
  47.         ElMessage.error(result.data.msg || '服务异常')
  48.         // 异步操作的状态转换为失败
  49.         return Promise.reject(result.data)
  50.  
  51.     },
  52.     err=>{
  53.        // 六 5  如果响应状态码时401，代表未登录，给出对应的提示，并跳转到登录页
  54.        if(err.response.status===401){
  55.         ElMessage.error('请先登录！')
  56.         router.push('/login')
  57.     }else{
  58.         ElMessage.error('服务异常');
  59.     }
  60.     return Promise.reject(err);//异步的状态转化成失败的状态
  61. }
  62. )
  63.  
  64. export default instance;

6、添加文章分类

6.1  ArticleCategory.vue

添加弹窗分类、数据模型和校验规则、添加分类按钮单击事件，确认按钮单击事件、在页面中调用接口

  1. <script setup>
  2.  
  3. // 六 6.2 element-plus封装的组件
  4. import { ElMessage } from 'element-plus';
  5. // 六 1.2 articleCategoryListService声明一个异步函数  6.2articleCategoryAddService
  6. import {articleCategoryListService,articleCategoryAddService} from '@/api/article.js'
  7.  
  8. import {
  9.     Edit,
  10.     Delete
  11. } from '@element-plus/icons-vue'
  12. import { ref } from 'vue'
  13. const categorys = ref([
  14.     {
  15.         "id": 3,
  16.         "categoryName": "美食",
  17.         "categoryAlias": "my",
  18.         "createTime": "2023-09-02 12:06:59",
  19.         "updateTime": "2023-09-02 12:06:59"
  20.     },
  21.     {
  22.         "id": 4,
  23.         "categoryName": "娱乐",
  24.         "categoryAlias": "yl",
  25.         "createTime": "2023-09-02 12:08:16",
  26.         "updateTime": "2023-09-02 12:08:16"
  27.     },
  28.     {
  29.         "id": 5,
  30.         "categoryName": "军事",
  31.         "categoryAlias": "js",
  32.         "createTime": "2023-09-02 12:08:33",
  33.         "updateTime": "2023-09-02 12:08:33"
  34.     }
  35. ])
  36.  
  37. // 六 1.2 声明一个异步函数
  38. const articleCategoryList = async()=>{
  39.     let result = await articleCategoryListService()
  40.     categorys.value = result.data;
  41.  
  42. }
  43. articleCategoryList();
  44.  
  45. //  六  6.1  控制添加分类弹窗
  46. const dialogVisible = ref(false)
  47.  
  48. //六  6.1 添加分类数据模型
  49. const categoryModel = ref({
  50.     categoryName: '',
  51.     categoryAlias: ''
  52. })
  53. //六  6.1   添加分类表单校验
  54. const rules = {
  55.     categoryName: [
  56.         { required: true, message: '请输入分类名称', trigger: 'blur' },
  57.     ],
  58.     categoryAlias: [
  59.         { required: true, message: '请输入分类别名', trigger: 'blur' },
  60.     ]
  61. }
  62. // 六 6.1 调用接口添加表单
  63. const addCategory = async ()=>{
  64.     let result = await articleCategoryAddService(categoryModel.value);
  65.     ElMessage.success(result.message? result.message:'添加成功')
  66.     //隐藏弹窗
  67.     dialogVisible.value = false
  68.     //再次访问后台接口，查询所有分类
  69.     articleCategoryList()
  70. }
  71.  
  72. </script>
  73. <template>
  74.     <el-card class="page-container">
  75.         <template #header>
  76.             <div class="header">
  77.                 <span>文章分类</span>
  78.                 <div class="extra">
  79.                     <el-button type="primary" @click="dialogVisible = true">添加分类</el-button>  <!--  六 6.1  @click="dialogVisible = true"绑定点击事件-->
  80.                 </div>
  81.             </div>
  82.         </template>
  83.         <el-table :data="categorys" style="width: 100%">
  84.             <el-table-column label="序号" width="100" type="index"> </el-table-column>
  85.             <el-table-column label="分类名称" prop="categoryName"></el-table-column>
  86.             <el-table-column label="分类别名" prop="categoryAlias"></el-table-column>
  87.             <el-table-column label="创建时间" prop="createTime"></el-table-column>
  88.             <el-table-column label="更新时间" prop="updateTime"></el-table-column>
  89.             <el-table-column label="操作" width="100">
  90.                 <template #default="{ row }">
  91.                     <el-button :icon="Edit" circle plain type="primary" ></el-button>
  92.                     <el-button :icon="Delete" circle plain type="danger"></el-button>
  93.                 </template>
  94.             </el-table-column>
  95.             <template #empty>
  96.                 <el-empty description="没有数据" />
  97.             </template>
  98.         </el-table>
  99.         <!--  六  6.1 添加分类弹窗 -->
  100.         <el-dialog v-model="dialogVisible" title="添加弹层" width="30%">
  101.             <el-form :model="categoryModel" :rules="rules" label-width="100px" style="padding-right: 30px">
  102.                 <el-form-item label="分类名称" prop="categoryName">
  103.                     <el-input v-model="categoryModel.categoryName" minlength="1" maxlength="10"></el-input>
  104.                 </el-form-item>
  105.                 <el-form-item label="分类别名" prop="categoryAlias">
  106.                     <el-input v-model="categoryModel.categoryAlias" minlength="1" maxlength="15"></el-input>
  107.                 </el-form-item>
  108.             </el-form>
  109.             <template #footer>
  110.                 <span class="dialog-footer">
  111.                     <el-button @click="dialogVisible = false">取消</el-button>
  112.                     <el-button type="primary" @click="addCategory"> 确认 </el-button> <!--  六 6.1 @click="addCategory"绑定点击事件-->
  113.                 </span>
  114.             </template>
  115.         </el-dialog>
  116.     </el-card>
  117. </template>
  118.  
  119. <style lang="scss" scoped>
  120. .page-container {
  121.     min-height: 100%;
  122.     box-sizing: border-box;
  123.  
  124.     .header {
  125.         display: flex;
  126.         align-items: center;
  127.         justify-content: space-between;
  128.     }
  129. }
  130. </style>

6.2 在article.js中提供添加分类的函数

  1. //导入request.js请求工具
  2. import request from '@/utils/request.js'
  3. // 六 2.4 导入@/stores/token.js
  4. import { useTokenStore } from '@/stores/token.js'
  5.  
  6. // 六  文章分类列表查询函数  
  7. export const articleCategoryListService = (registerData) =>{    
  8.     // 六 2.4获取token状态
  9.     // 六 3.2
  10.     // const tokenStore = useTokenStore()
  11.     //通过请求头Authorization携带token
  12.     // return request.get('/category', { headers: { 'Authorization': tokenStore.token } });
  13.     
  14.     return request.get('/category');
  15.     
  16. }
  17.  
  18. // 六 6.2  文章分类 添加文章分类 函数  json 参数
  19. export const articleCategoryAddService = (categoryModel) => {
  20.     return request.post('/category', categoryModel)
  21. }

6.3 测试验证

7、修改文章分类 

分析编辑与新增的弹窗页面可以复用，优化实施

7.1 修改分类弹窗页面

修改分类弹窗和新增文章分类弹窗长的一样，所以可以复用添加分类的弹窗

7.1.1 弹窗标题显示  ArticleCategory.vue

定义标题

  1. //弹窗标题
  2. const title=ref('')
7.1.2 在弹窗上绑定标题 ArticleCategory.vue
 <el-dialog v-model="dialogVisible" :title="title" width="30%">
7.1.3 为添加分类按钮绑定事件 ArticleCategory.vue
<el-button type="primary" @click="title='添加分类';dialogVisible = true">添加分类</el-button>
7.1.4 为修改分类按钮绑定事件 ArticleCategory.vue
<el-button :icon="Edit" circle plain type="primary" @click="title='修改分类';dialogVisible=true"></el-button>

7.2 修改数据回显 ArticleCategory.vue

当点击修改分类按钮时，需要把当前这一条数据的详细信息显示到修改分类的弹窗上，这个叫回显

通过插槽的方式得到被点击按钮所在行的数据

  1. <script setup>
  2.  
  3. // 六 6.2 element-plus封装的组件
  4. import { ElMessage } from 'element-plus';
  5. // 六 1.2 articleCategoryListService声明一个异步函数  6.2articleCategoryAddService
  6. import {articleCategoryListService,articleCategoryAddService} from '@/api/article.js'
  7.  
  8. import {
  9.     Edit,
  10.     Delete
  11. } from '@element-plus/icons-vue'
  12. import { ref } from 'vue'
  13. const categorys = ref([
  14.     {
  15.         "id": 3,
  16.         "categoryName": "美食",
  17.         "categoryAlias": "my",
  18.         "createTime": "2023-09-02 12:06:59",
  19.         "updateTime": "2023-09-02 12:06:59"
  20.     },
  21.     {
  22.         "id": 4,
  23.         "categoryName": "娱乐",
  24.         "categoryAlias": "yl",
  25.         "createTime": "2023-09-02 12:08:16",
  26.         "updateTime": "2023-09-02 12:08:16"
  27.     },
  28.     {
  29.         "id": 5,
  30.         "categoryName": "军事",
  31.         "categoryAlias": "js",
  32.         "createTime": "2023-09-02 12:08:33",
  33.         "updateTime": "2023-09-02 12:08:33"
  34.     }
  35. ])
  36.  
  37. // 六 1.2 声明一个异步函数
  38. const articleCategoryList = async()=>{
  39.     let result = await articleCategoryListService()
  40.     categorys.value = result.data;
  41.  
  42. }
  43. articleCategoryList();
  44.  
  45. //  六  6.1  控制添加分类弹窗
  46. const dialogVisible = ref(false)
  47.  
  48. //六  6.1 添加分类数据模型
  49. const categoryModel = ref({
  50.     categoryName: '',
  51.     categoryAlias: ''
  52. })
  53. //六  6.1   添加分类表单校验
  54. const rules = {
  55.     categoryName: [
  56.         { required: true, message: '请输入分类名称', trigger: 'blur' },
  57.     ],
  58.     categoryAlias: [
  59.         { required: true, message: '请输入分类别名', trigger: 'blur' },
  60.     ]
  61. }
  62. // 六 6.1 调用接口添加表单
  63. const addCategory = async ()=>{
  64.     let result = await articleCategoryAddService(categoryModel.value);
  65.     ElMessage.success(result.message? result.message:'添加成功')
  66.     //隐藏弹窗
  67.     dialogVisible.value = false
  68.     //再次访问后台接口，查询所有分类
  69.     articleCategoryList()
  70. }
  71.  
  72. // 六  7.1.1 弹窗标题
  73. const title=ref('')
  74.  
  75. // 六 7.2展示编辑弹窗
  76. const showDialog = (row)=>{
  77.     title.value = '修改分类';dialogVisible.value = true
  78.     //数据拷贝
  79.     categoryModel.value.categoryName = row.categoryName;
  80.     categoryModel.value.categoryAlias = row.categoryAlias;
  81.     //扩展id属性，将来需要传参给后台完成分类的修改
  82.     categoryModel.value.id = row.id
  83. }
  84.  
  85. </script>
  86. <template>
  87.     <el-card class="page-container">
  88.         <template #header>
  89.             <div class="header">
  90.                 <span>文章分类</span>
  91.                 <div class="extra">
  92.                     <el-button type="primary" @click="title='添加分类';dialogVisible = true">添加分类</el-button>  <!--  六 6.1  @click="dialogVisible = true"绑定点击事件   六7.1.3 title='添加分类';--> 
  93.                 </div>
  94.             </div>
  95.         </template>
  96.         <el-table :data="categorys" style="width: 100%">
  97.             <el-table-column label="序号" width="100" type="index"> </el-table-column>
  98.             <el-table-column label="分类名称" prop="categoryName"></el-table-column>
  99.             <el-table-column label="分类别名" prop="categoryAlias"></el-table-column>
  100.             <el-table-column label="创建时间" prop="createTime"></el-table-column>
  101.             <el-table-column label="更新时间" prop="updateTime"></el-table-column>
  102.             <el-table-column label="操作" width="100">
  103.                 <template #default="{ row }">
  104.                     <el-button :icon="Edit" circle plain type="primary" @click="showDialog(row)"></el-button>  <!--  六 7.1.4 @click="title='修改分类';dialogVisible=true"绑定事件   六 7.2 showDialog(row)-->
  105.                     <el-button :icon="Delete" circle plain type="danger"></el-button>
  106.                 </template>
  107.             </el-table-column>
  108.             <template #empty>
  109.                 <el-empty description="没有数据" />
  110.             </template>
  111.         </el-table>
  112.         <!--  六  6.1 添加分类弹窗 -->
  113.         <el-dialog v-model="dialogVisible" :title="title" width="30%">   <!--  六 7.1.2 :title="title"绑定标题-->
  114.             <el-form :model="categoryModel" :rules="rules" label-width="100px" style="padding-right: 30px">
  115.                 <el-form-item label="分类名称" prop="categoryName">
  116.                     <el-input v-model="categoryModel.categoryName" minlength="1" maxlength="10"></el-input>
  117.                 </el-form-item>
  118.                 <el-form-item label="分类别名" prop="categoryAlias">
  119.                     <el-input v-model="categoryModel.categoryAlias" minlength="1" maxlength="15"></el-input>
  120.                 </el-form-item>
  121.             </el-form>
  122.             <template #footer>
  123.                 <span class="dialog-footer">
  124.                     <el-button @click="dialogVisible = false">取消</el-button>
  125.                     <el-button type="primary" @click="addCategory"> 确认 </el-button> <!--  六 6.1 @click="addCategory"绑定点击事件-->
  126.                 </span>
  127.             </template>
  128.         </el-dialog>
  129.     </el-card>
  130. </template>
  131.  
  132. <style lang="scss" scoped>
  133. .page-container {
  134.     min-height: 100%;
  135.     box-sizing: border-box;
  136.  
  137.     .header {
  138.         display: flex;
  139.         align-items: center;
  140.         justify-content: space-between;
  141.     }
  142. }
  143. </style>

7.3 修改文章分类接口调用

7.3.1 article.js中提供修改分类的函数
  1. //导入request.js请求工具
  2. import request from '@/utils/request.js'
  3. // 六 2.4 导入@/stores/token.js
  4. import { useTokenStore } from '@/stores/token.js'
  5.  
  6. // 六  文章分类列表查询函数  
  7. export const articleCategoryListService = (registerData) =>{    
  8.     // 六 2.4获取token状态
  9.     // 六 3.2
  10.     // const tokenStore = useTokenStore()
  11.     //通过请求头Authorization携带token
  12.     // return request.get('/category', { headers: { 'Authorization': tokenStore.token } });
  13.     
  14.     return request.get('/category');
  15.     
  16. }
  17.  
  18. // 六 6.2  文章分类 添加文章分类 函数  json 参数
  19. export const articleCategoryAddService = (categoryModel) => {
  20.     return request.post('/category', categoryModel)
  21. }
  22.  
  23.  
  24. //六 7.3.1   修改分类
  25. export const articleCategoryUpdateService = (categoryModel)=>{
  26.     return request.put('/category',categoryModel)
  27.    }
7.3.2 修改确定按钮的绑定事件 ArticleCategory.vue
  1.  <span class="dialog-footer">
  2.                 <el-button @click="dialogVisible = false">取消</el-button>
  3.                 <el-button type="primary" @click="title==='添加分类'? addCategory():updateCategory()"> 确认 </el-button>
  4.             </span>
7.3.3 调用接口完成修改的函数  ArticleCategory.vue
  1. <script setup>
  2.  
  3. // 六 6.2 element-plus封装的组件
  4. import { ElMessage } from 'element-plus';
  5. // 六 1.2 articleCategoryListService声明一个异步函数  6.2articleCategoryAddService  7.3.3 articleCategoryUpdateService
  6. import {articleCategoryListService,articleCategoryAddService,articleCategoryUpdateService} from '@/api/article.js'
  7.  
  8. import {
  9.     Edit,
  10.     Delete
  11. } from '@element-plus/icons-vue'
  12. import { ref } from 'vue'
  13. const categorys = ref([
  14.     {
  15.         "id": 3,
  16.         "categoryName": "美食",
  17.         "categoryAlias": "my",
  18.         "createTime": "2023-09-02 12:06:59",
  19.         "updateTime": "2023-09-02 12:06:59"
  20.     },
  21.     {
  22.         "id": 4,
  23.         "categoryName": "娱乐",
  24.         "categoryAlias": "yl",
  25.         "createTime": "2023-09-02 12:08:16",
  26.         "updateTime": "2023-09-02 12:08:16"
  27.     },
  28.     {
  29.         "id": 5,
  30.         "categoryName": "军事",
  31.         "categoryAlias": "js",
  32.         "createTime": "2023-09-02 12:08:33",
  33.         "updateTime": "2023-09-02 12:08:33"
  34.     }
  35. ])
  36.  
  37. // 六 1.2 声明一个异步函数
  38. const articleCategoryList = async()=>{
  39.     let result = await articleCategoryListService()
  40.     categorys.value = result.data;
  41.  
  42. }
  43. articleCategoryList();
  44.  
  45. //  六  6.1  控制添加分类弹窗
  46. const dialogVisible = ref(false)
  47.  
  48. //六  6.1 添加分类数据模型
  49. const categoryModel = ref({
  50.     categoryName: '',
  51.     categoryAlias: ''
  52. })
  53. //六  6.1   添加分类表单校验
  54. const rules = {
  55.     categoryName: [
  56.         { required: true, message: '请输入分类名称', trigger: 'blur' },
  57.     ],
  58.     categoryAlias: [
  59.         { required: true, message: '请输入分类别名', trigger: 'blur' },
  60.     ]
  61. }
  62. // 六 6.1 调用接口添加表单
  63. const addCategory = async ()=>{
  64.     let result = await articleCategoryAddService(categoryModel.value);
  65.     ElMessage.success(result.message? result.message:'添加成功')
  66.     //隐藏弹窗
  67.     dialogVisible.value = false
  68.     //再次访问后台接口，查询所有分类
  69.     articleCategoryList()
  70. }
  71.  
  72. // 六  7.1.1 弹窗标题
  73. const title=ref('')
  74.  
  75. // 六 7.2展示编辑弹窗
  76. const showDialog = (row)=>{
  77.     title.value = '修改分类';dialogVisible.value = true
  78.     //数据拷贝
  79.     categoryModel.value.categoryName = row.categoryName;
  80.     categoryModel.value.categoryAlias = row.categoryAlias;
  81.     //扩展id属性，将来需要传参给后台完成分类的修改
  82.     categoryModel.value.id = row.id
  83. }
  84.  
  85. // 六 7.3.3修改分类
  86. const updateCategory=async ()=>{
  87.     let result = await articleCategoryUpdateService(categoryModel.value)
  88.     ElMessage.success(result.message? result.message:'修改成功')
  89.     //隐藏弹窗
  90.     dialogVisible.value=false
  91.     //再次访问后台接口，查询所有分类
  92.     articleCategoryList()
  93. }
  94.  
  95. </script>
  96. <template>
  97.     <el-card class="page-container">
  98.         <template #header>
  99.             <div class="header">
  100.                 <span>文章分类</span>
  101.                 <div class="extra">
  102.                     <el-button type="primary" @click="title='添加分类';dialogVisible = true">添加分类</el-button>  <!--  六 6.1  @click="dialogVisible = true"绑定点击事件   六7.1.3 title='添加分类';--> 
  103.                 </div>
  104.             </div>
  105.         </template>
  106.         <el-table :data="categorys" style="width: 100%">
  107.             <el-table-column label="序号" width="100" type="index"> </el-table-column>
  108.             <el-table-column label="分类名称" prop="categoryName"></el-table-column>
  109.             <el-table-column label="分类别名" prop="categoryAlias"></el-table-column>
  110.             <el-table-column label="创建时间" prop="createTime"></el-table-column>
  111.             <el-table-column label="更新时间" prop="updateTime"></el-table-column>
  112.             <el-table-column label="操作" width="100">
  113.                 <template #default="{ row }">
  114.                     <el-button :icon="Edit" circle plain type="primary" @click="showDialog(row)"></el-button>  <!--  六 7.1.4 @click="title='修改分类';dialogVisible=true"绑定事件   六 7.2 showDialog(row)-->
  115.                     <el-button :icon="Delete" circle plain type="danger"></el-button>
  116.                 </template>
  117.             </el-table-column>
  118.             <template #empty>
  119.                 <el-empty description="没有数据" />
  120.             </template>
  121.         </el-table>
  122.         <!--  六  6.1 添加分类弹窗 -->
  123.         <el-dialog v-model="dialogVisible" :title="title" width="30%">   <!--  六 7.1.2 :title="title"绑定标题-->
  124.             <el-form :model="categoryModel" :rules="rules" label-width="100px" style="padding-right: 30px">
  125.                 <el-form-item label="分类名称" prop="categoryName">
  126.                     <el-input v-model="categoryModel.categoryName" minlength="1" maxlength="10"></el-input>
  127.                 </el-form-item>
  128.                 <el-form-item label="分类别名" prop="categoryAlias">
  129.                     <el-input v-model="categoryModel.categoryAlias" minlength="1" maxlength="15"></el-input>
  130.                 </el-form-item>
  131.             </el-form>
  132.             <template #footer>
  133.                 <span class="dialog-footer">
  134.                     <el-button @click="dialogVisible = false">取消</el-button>
  135.                     <el-button type="primary" @click="title==='添加分类'? addCategory():updateCategory()"> 确认 </el-button> <!--  六 6.1 @click="addCategory"绑定点击事件  六 7.3.1 @click="title==='添加分类'? addCategory():updateCategory()"-->
  136.                 </span>
  137.             </template>
  138.         </el-dialog>
  139.     </el-card>
  140. </template>
  141.  
  142. <style lang="scss" scoped>
  143. .page-container {
  144.     min-height: 100%;
  145.     box-sizing: border-box;
  146.  
  147.     .header {
  148.         display: flex;
  149.         align-items: center;
  150.         justify-content: space-between;
  151.     }
  152. }
  153. </style>
7.3.4 优化添加时数据回显

由于现在修改和新增共用了一个数据模型，所以在点击添加分类后，有时候会显示数据，此时可以将categoryModel中的数据清空

  1. //清空模型数据
  2. const clearCategoryModel = ()=>{
  3.     categoryModel.value.categoryName='',
  4.     categoryModel.value.categoryAlias=''
  5. }
  1. <script setup>
  2.  
  3. // 六 6.2 element-plus封装的组件
  4. import { ElMessage } from 'element-plus';
  5. // 六 1.2 articleCategoryListService声明一个异步函数  6.2articleCategoryAddService  7.3.3 articleCategoryUpdateService
  6. import {articleCategoryListService,articleCategoryAddService,articleCategoryUpdateService} from '@/api/article.js'
  7.  
  8. import {
  9.     Edit,
  10.     Delete
  11. } from '@element-plus/icons-vue'
  12. import { ref } from 'vue'
  13. const categorys = ref([
  14.     {
  15.         "id": 3,
  16.         "categoryName": "美食",
  17.         "categoryAlias": "my",
  18.         "createTime": "2023-09-02 12:06:59",
  19.         "updateTime": "2023-09-02 12:06:59"
  20.     },
  21.     {
  22.         "id": 4,
  23.         "categoryName": "娱乐",
  24.         "categoryAlias": "yl",
  25.         "createTime": "2023-09-02 12:08:16",
  26.         "updateTime": "2023-09-02 12:08:16"
  27.     },
  28.     {
  29.         "id": 5,
  30.         "categoryName": "军事",
  31.         "categoryAlias": "js",
  32.         "createTime": "2023-09-02 12:08:33",
  33.         "updateTime": "2023-09-02 12:08:33"
  34.     }
  35. ])
  36.  
  37. // 六 1.2 声明一个异步函数
  38. const articleCategoryList = async()=>{
  39.     let result = await articleCategoryListService()
  40.     categorys.value = result.data;
  41.  
  42. }
  43. articleCategoryList();
  44.  
  45. //  六  6.1  控制添加分类弹窗
  46. const dialogVisible = ref(false)
  47.  
  48. //六  6.1 添加分类数据模型
  49. const categoryModel = ref({
  50.     categoryName: '',
  51.     categoryAlias: ''
  52. })
  53. //六  6.1   添加分类表单校验
  54. const rules = {
  55.     categoryName: [
  56.         { required: true, message: '请输入分类名称', trigger: 'blur' },
  57.     ],
  58.     categoryAlias: [
  59.         { required: true, message: '请输入分类别名', trigger: 'blur' },
  60.     ]
  61. }
  62. // 六 6.1 调用接口添加表单
  63. const addCategory = async ()=>{
  64.     let result = await articleCategoryAddService(categoryModel.value);
  65.     ElMessage.success(result.message? result.message:'添加成功')
  66.     //隐藏弹窗
  67.     dialogVisible.value = false
  68.     //再次访问后台接口，查询所有分类
  69.     articleCategoryList()
  70. }
  71.  
  72. // 六  7.1.1 弹窗标题
  73. const title=ref('')
  74.  
  75. // 六 7.2展示编辑弹窗
  76. const showDialog = (row)=>{
  77.     title.value = '修改分类';dialogVisible.value = true
  78.     //数据拷贝
  79.     categoryModel.value.categoryName = row.categoryName;
  80.     categoryModel.value.categoryAlias = row.categoryAlias;
  81.     //扩展id属性，将来需要传参给后台完成分类的修改
  82.     categoryModel.value.id = row.id
  83. }
  84.  
  85. // 六 7.3.3修改分类
  86. const updateCategory=async ()=>{
  87.     let result = await articleCategoryUpdateService(categoryModel.value)
  88.     ElMessage.success(result.message? result.message:'修改成功')
  89.     //隐藏弹窗
  90.     dialogVisible.value=false
  91.     //再次访问后台接口，查询所有分类
  92.     articleCategoryList()
  93. }
  94.  
  95. //六 7.3.4 清空模型数据
  96. const clearCategoryModel = ()=>{
  97.     categoryModel.value.categoryName='',
  98.     categoryModel.value.categoryAlias=''
  99. }
  100.  
  101. </script>
  102. <template>
  103.     <el-card class="page-container">
  104.         <template #header>
  105.             <div class="header">
  106.                 <span>文章分类</span>
  107.                 <div class="extra">
  108.                     <el-button type="primary" @click="title='添加分类';dialogVisible = true;clearCategoryModel()">添加分类</el-button>  <!--  六 6.1  @click="dialogVisible = true"绑定点击事件   六7.1.3 title='添加分类'; 六 7.3.4 清空模型数据 clearCategoryModel()--> 
  109.                 </div>
  110.             </div>
  111.         </template>
  112.         <el-table :data="categorys" style="width: 100%">
  113.             <el-table-column label="序号" width="100" type="index"> </el-table-column>
  114.             <el-table-column label="分类名称" prop="categoryName"></el-table-column>
  115.             <el-table-column label="分类别名" prop="categoryAlias"></el-table-column>
  116.             <el-table-column label="创建时间" prop="createTime"></el-table-column>
  117.             <el-table-column label="更新时间" prop="updateTime"></el-table-column>
  118.             <el-table-column label="操作" width="100">
  119.                 <template #default="{ row }">
  120.                     <el-button :icon="Edit" circle plain type="primary" @click="showDialog(row)"></el-button>  <!--  六 7.1.4 @click="title='修改分类';dialogVisible=true"绑定事件   六 7.2 showDialog(row)-->
  121.                     <el-button :icon="Delete" circle plain type="danger"></el-button>
  122.                 </template>
  123.             </el-table-column>
  124.             <template #empty>
  125.                 <el-empty description="没有数据" />
  126.             </template>
  127.         </el-table>
  128.         <!--  六  6.1 添加分类弹窗 -->
  129.         <el-dialog v-model="dialogVisible" :title="title" width="30%">   <!--  六 7.1.2 :title="title"绑定标题-->
  130.             <el-form :model="categoryModel" :rules="rules" label-width="100px" style="padding-right: 30px">
  131.                 <el-form-item label="分类名称" prop="categoryName">
  132.                     <el-input v-model="categoryModel.categoryName" minlength="1" maxlength="10"></el-input>
  133.                 </el-form-item>
  134.                 <el-form-item label="分类别名" prop="categoryAlias">
  135.                     <el-input v-model="categoryModel.categoryAlias" minlength="1" maxlength="15"></el-input>
  136.                 </el-form-item>
  137.             </el-form>
  138.             <template #footer>
  139.                 <span class="dialog-footer">
  140.                     <el-button @click="dialogVisible = false">取消</el-button>
  141.                     <el-button type="primary" @click="title==='添加分类'? addCategory():updateCategory()"> 确认 </el-button> <!--  六 6.1 @click="addCategory"绑定点击事件  六 7.3.1 @click="title==='添加分类'? addCategory():updateCategory()"-->
  142.                 </span>
  143.             </template>
  144.         </el-dialog>
  145.     </el-card>
  146. </template>
  147.  
  148. <style lang="scss" scoped>
  149. .page-container {
  150.     min-height: 100%;
  151.     box-sizing: border-box;
  152.  
  153.     .header {
  154.         display: flex;
  155.         align-items: center;
  156.         justify-content: space-between;
  157.     }
  158. }
  159. </style>

8、删除文章分类

 8.1 删除接口

  1. //导入request.js请求工具
  2. import request from '@/utils/request.js'
  3. // 六 2.4 导入@/stores/token.js
  4. import { useTokenStore } from '@/stores/token.js'
  5.  
  6. // 六  文章分类列表查询函数  
  7. export const articleCategoryListService = (registerData) =>{    
  8.     // 六 2.4获取token状态
  9.     // 六 3.2
  10.     // const tokenStore = useTokenStore()
  11.     //通过请求头Authorization携带token
  12.     // return request.get('/category', { headers: { 'Authorization': tokenStore.token } });
  13.     
  14.     return request.get('/category');
  15.     
  16. }
  17.  
  18. // 六 6.2  文章分类 添加文章分类 函数  json 参数
  19. export const articleCategoryAddService = (categoryModel) => {
  20.     return request.post('/category', categoryModel)
  21. }
  22.  
  23.  
  24. //六 7.3.1   修改分类
  25. export const articleCategoryUpdateService = (categoryModel)=>{
  26.     return request.put('/category',categoryModel)
  27.    }
  28.  
  29.  
  30. //六 8.1  删除分类
  31. export const articleCategoryDeleteService = (id) => {
  32.     return request.delete('/category?id='+id)
  33. }

8.2 删除确认框

  1. //删除分类  给删除按钮绑定事件
  2. const deleteCategory = (row) => {
  3.     ElMessageBox.confirm(
  4.         '你确认删除该分类信息吗？',
  5.         '温馨提示',
  6.         {
  7.             confirmButtonText: '确认',
  8.             cancelButtonText: '取消',
  9.             type: 'warning',
  10.         }
  11.     )
  12.         .then(() => {
  13.             //用户点击了确认
  14.             ElMessage({
  15.                 type: 'success',
  16.                 message: '删除成功',
  17.             })
  18.         })
  19.         .catch(() => {
  20.             //用户点击了取消
  21.             ElMessage({
  22.                 type: 'info',
  23.                 message: '取消删除',
  24.             })
  25.         })
  26. }

 8.3 为删除按钮绑定事件

  1. <template #default="{ row }">
  2.                     <el-button :icon="Edit" circle plain type="primary" @click="showDialog(row)"></el-button>  <!--  六 7.1.4 @click="title='修改分类';dialogVisible=true"绑定事件   六 7.2 showDialog(row)-->
  3.                     <el-button :icon="Delete" circle plain type="danger" @click="deleteCategory(row)"></el-button> <!--  六 8.3 @click="deleteCategory(row)" 绑定删除事件-->
  4.                 </template>

8.4 调用删除接口

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

8.5 测试验证

七、文章列表 

1、 文章列表查询

 1.1 文章列表页面组件ArticleManage.vue

  1. <script setup>
  2. import {
  3.     Edit,
  4.     Delete
  5. } from '@element-plus/icons-vue'
  6.  
  7. import { ref } 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. }
  83. //当前页码发生变化，调用此函数
  84. const onCurrentChange = (num) => {
  85.     pageNum.value = num
  86. }
  87. </script>
  88. <template>
  89.     <el-card class="page-container">
  90.         <template #header>
  91.             <div class="header">
  92.                 <span>文章管理</span>
  93.                 <div class="extra">
  94.                     <el-button type="primary">添加文章</el-button>
  95.                 </div>
  96.             </div>
  97.         </template>
  98.         <!-- 搜索表单 -->
  99.         <el-form inline>
  100.             <el-form-item label="文章分类：">
  101.                 <el-select placeholder="请选择" v-model="categoryId">
  102.                     <el-option 
  103.                         v-for="c in categorys" 
  104.                         :key="c.id" 
  105.                         :label="c.categoryName"
  106.                         :value="c.id">
  107.                     </el-option>
  108.                 </el-select>
  109.             </el-form-item>
  110.  
  111.             <el-form-item label="发布状态：">
  112.                 <el-select placeholder="请选择" v-model="state">
  113.                     <el-option label="已发布" value="已发布"></el-option>
  114.                     <el-option label="草稿" value="草稿"></el-option>
  115.                 </el-select>
  116.             </el-form-item>
  117.             <el-form-item>
  118.                 <el-button type="primary">搜索</el-button>
  119.                 <el-button>重置</el-button>
  120.             </el-form-item>
  121.         </el-form>
  122.         <!-- 文章列表 -->
  123.         <el-table :data="articles" style="width: 100%">
  124.             <el-table-column label="文章标题" width="400" prop="title"></el-table-column>
  125.             <el-table-column label="分类" prop="categoryId"></el-table-column>
  126.             <el-table-column label="发表时间" prop="createTime"> </el-table-column>
  127.             <el-table-column label="状态" prop="state"></el-table-column>
  128.             <el-table-column label="操作" width="100">
  129.                 <template #default="{ row }">
  130.                     <el-button :icon="Edit" circle plain type="primary"></el-button>
  131.                     <el-button :icon="Delete" circle plain type="danger"></el-button>
  132.                 </template>
  133.             </el-table-column>
  134.             <template #empty>
  135.                 <el-empty description="没有数据" />
  136.             </template>
  137.         </el-table>
  138.         <!-- 分页条 -->
  139.         <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5 ,10, 15]"
  140.             layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
  141.             @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />
  142.     </el-card>
  143. </template>
  144. <style lang="scss" scoped>
  145. .page-container {
  146.     min-height: 100%;
  147.     box-sizing: border-box;
  148.  
  149.     .header {
  150.         display: flex;
  151.         align-items: center;
  152.         justify-content: space-between;
  153.     }
  154. }
  155. </style>

1.2 解决分页控件英文显示问题main.js

  1. import './assets/main.scss'  // 本项目使用sass
  2.  
  3. import { createApp } from 'vue'
  4. import ElementPlus from 'element-plus'
  5. import 'element-plus/dist/index.css'
  6. // 七 1.2 解决分页控件显示英文问题
  7. import locale from  'element-plus/dist/locale/zh-cn.js'
  8. //五 2.3 
  9. import router from '@/router'
  10.  
  11.  
  12. import App from './App.vue'
  13. //六 2.2
  14. import {createPinia} from 'pinia'
  15.  
  16. // 六  4.2 导入持久化插件
  17. import {createPersistedState} from 'pinia-persistedstate-plugin'
  18.  
  19. const app = createApp(App)
  20. //六 2.2
  21. const pinia = createPinia();
  22. // 六  4.2
  23. const persist = createPersistedState()
  24. //六  4.2 pinia使用持久化插件
  25. pinia.use(persist)
  26. app.use(pinia)
  27. //五 2.3 
  28. app.use(router)
  29. // 七 1.2 解决分页控件显示英文问题
  30. app.use(ElementPlus,{locale})
  31. app.mount('#app')

1.3 文章分类数据回显ArticleMange.vue  

  1. //文章列表查询
  2. import { articleCategoryListService } from '@/api/article.js'
  3. const getArticleCategoryList = async () => {
  4.     //获取所有分类
  5.     let resultC = await articleCategoryListService();
  6.     categorys.value = resultC.data
  7. }
  8. getArticleCategoryList(); 

1.4 文章列表接口调用

1.4.1 article.js中提供获取文章列表数据的函数
  1. //导入request.js请求工具
  2. import request from '@/utils/request.js'
  3. // 六 2.4 导入@/stores/token.js
  4. import { useTokenStore } from '@/stores/token.js'
  5.  
  6. // 六  文章分类列表查询函数  
  7. export const articleCategoryListService = (registerData) =>{    
  8.     // 六 2.4获取token状态
  9.     // 六 3.2
  10.     // const tokenStore = useTokenStore()
  11.     //通过请求头Authorization携带token
  12.     // return request.get('/category', { headers: { 'Authorization': tokenStore.token } });
  13.     
  14.     return request.get('/category');
  15.     
  16. }
  17.  
  18. // 六 6.2  文章分类 添加文章分类 函数  json 参数
  19. export const articleCategoryAddService = (categoryModel) => {
  20.     return request.post('/category', categoryModel)
  21. }
  22.  
  23.  
  24. //六 7.3.1   修改分类
  25. export const articleCategoryUpdateService = (categoryModel)=>{
  26.     return request.put('/category',categoryModel)
  27.    }
  28.  
  29.  
  30. //六 8.1  删除分类
  31. export const articleCategoryDeleteService = (id) => {
  32.     return request.delete('/category?id='+id)
  33. }
  34.  
  35. // 八 1.4.1 文章列表查询
  36. export const articleListService = (params) => {
  37.     return request.get('/article', { params: params })
  38.    }
1.4.2 ArticleManage.vue中，调用接口获取数据
  1. <script setup>
  2. import {
  3.     Edit,
  4.     Delete
  5. } from '@element-plus/icons-vue'
  6.  
  7. import { ref } from 'vue'
  8.  
  9.  
  10. // 八 1.3 articleCategoryListService搜索查询条件 文章列表查询 导入   八 1.4.2 articleListService
  11. import { articleCategoryListService ,articleListService} from '@/api/article.js'
  12.  
  13. //文章分类数据模型
  14. const categorys = ref([
  15.     {
  16.         "id": 3,
  17.         "categoryName": "美食",
  18.         "categoryAlias": "my",
  19.         "createTime": "2023-09-02 12:06:59",
  20.         "updateTime": "2023-09-02 12:06:59"
  21.     },
  22.     {
  23.         "id": 4,
  24.         "categoryName": "娱乐",
  25.         "categoryAlias": "yl",
  26.         "createTime": "2023-09-02 12:08:16",
  27.         "updateTime": "2023-09-02 12:08:16"
  28.     },
  29.     {
  30.         "id": 5,
  31.         "categoryName": "军事",
  32.         "categoryAlias": "js",
  33.         "createTime": "2023-09-02 12:08:33",
  34.         "updateTime": "2023-09-02 12:08:33"
  35.     }
  36. ])
  37.  
  38. //用户搜索时选中的分类id
  39. const categoryId=ref('')
  40.  
  41. //用户搜索时选中的发布状态
  42. const state=ref('')
  43.  
  44. //文章列表数据模型
  45. const articles = ref([
  46.     {
  47.         "id": 5,
  48.         "title": "陕西旅游攻略",
  49.         "content": "兵马俑,华清池,法门寺,华山...爱去哪去哪...",
  50.         "coverImg": "https://big-event-gwd.oss-cn-beijing.aliyuncs.com/9bf1cf5b-1420-4c1b-91ad-e0f4631cbed4.png",
  51.         "state": "草稿",
  52.         "categoryId": 2,
  53.         "createTime": "2023-09-03 11:55:30",
  54.         "updateTime": "2023-09-03 11:55:30"
  55.     },
  56.     {
  57.         "id": 5,
  58.         "title": "陕西旅游攻略",
  59.         "content": "兵马俑,华清池,法门寺,华山...爱去哪去哪...",
  60.         "coverImg": "https://big-event-gwd.oss-cn-beijing.aliyuncs.com/9bf1cf5b-1420-4c1b-91ad-e0f4631cbed4.png",
  61.         "state": "草稿",
  62.         "categoryId": 2,
  63.         "createTime": "2023-09-03 11:55:30",
  64.         "updateTime": "2023-09-03 11:55:30"
  65.     },
  66.     {
  67.         "id": 5,
  68.         "title": "陕西旅游攻略",
  69.         "content": "兵马俑,华清池,法门寺,华山...爱去哪去哪...",
  70.         "coverImg": "https://big-event-gwd.oss-cn-beijing.aliyuncs.com/9bf1cf5b-1420-4c1b-91ad-e0f4631cbed4.png",
  71.         "state": "已发布",
  72.         "categoryId": 2,
  73.         "createTime": "2023-09-03 11:55:30",
  74.         "updateTime": "2023-09-03 11:55:30"
  75.     },
  76. ])
  77.  
  78. //分页条数据模型
  79. const pageNum = ref(1)//当前页
  80. const total = ref(20)//总条数
  81. const pageSize = ref(3)//每页条数
  82.  
  83. //当每页条数发生了变化，调用此函数
  84. const onSizeChange = (size) => {
  85.     pageSize.value = size
  86. }
  87. //当前页码发生变化，调用此函数
  88. const onCurrentChange = (num) => {
  89.     pageNum.value = num
  90. }
  91.  
  92.  
  93.  
  94. // 八 1.3 搜索查询条件 文章列表查询
  95. const getArticleCategoryList = async () => {
  96.     //获取所有分类
  97.     let resultC = await articleCategoryListService();
  98.         categorys.value = resultC.data
  99. }
  100.  
  101.  
  102. // 八 1.4.2  获取文章列表数据
  103. const articleList = async () => {
  104.     let params = {
  105.         pageNum: pageNum.value,
  106.         pageSize: pageSize.value,
  107.         categoryId: categoryId.value ? categoryId.value : null,
  108.         state: state.value ? state.value : null
  109.     }
  110.     let result = await articleListService(params);
  111.  
  112.     //渲染视图
  113.     total.value = result.data.total;
  114.     articles.value = result.data.items;
  115.  
  116.     //处理数据,给数据模型扩展一个属性categoryName,分类名称
  117.     for (let i = 0; i < articles.value.length; i++) {
  118.         let article = articles.value[i];
  119.         for (let j = 0; j < categorys.value.length; j++) {
  120.             if (article.categoryId == categorys.value[j].id) {
  121.                 article.categoryName = categorys.value[j].categoryName;
  122.             }
  123.         }
  124.     }
  125. }
  126.  
  127.     
  128.  
  129. // 八  1.3 搜索查询条件 文章列表查询 调用函数getArticleCategoryList
  130. getArticleCategoryList();
  131. // 八 1.4.2  获取文章列表数据
  132. articleList();
  133.  
  134.  
  135. </script>
  136. <template>
  137.     <el-card class="page-container">
  138.         <!-- 1 标题 -->
  139.         <template #header>
  140.             <div class="header">
  141.                 <span>文章管理</span>
  142.                 <div class="extra">
  143.                     <el-button type="primary">添加文章</el-button>
  144.                 </div>
  145.             </div>
  146.         </template>
  147.         <!-- 2 搜索表单 -->
  148.         <el-form inline>
  149.             <el-form-item label="文章分类：">
  150.                 <el-select placeholder="请选择" v-model="categoryId">
  151.                     <el-option 
  152.                         v-for="c in categorys" 
  153.                         :key="c.id" 
  154.                         :label="c.categoryName"
  155.                         :value="c.id">
  156.                     </el-option>
  157.                 </el-select>
  158.             </el-form-item>
  159.  
  160.             <el-form-item label="发布状态：">
  161.                 <el-select placeholder="请选择" v-model="state">
  162.                     <el-option label="已发布" value="已发布"></el-option>
  163.                     <el-option label="草稿" value="草稿"></el-option>
  164.                 </el-select>
  165.             </el-form-item>
  166.             <el-form-item>
  167.                 <el-button type="primary">搜索</el-button>
  168.                 <el-button>重置</el-button>
  169.             </el-form-item>
  170.         </el-form>
  171.         <!-- 3 文章列表 -->
  172.         <el-table :data="articles" style="width: 100%">
  173.             <el-table-column label="文章标题" width="400" prop="title"></el-table-column>
  174.             <el-table-column label="分类" prop="categoryName"></el-table-column>
  175.             <el-table-column label="发表时间" prop="createTime"> </el-table-column>
  176.             <el-table-column label="更新时间" prop="updateTime"> </el-table-column>
  177.             <el-table-column label="状态" prop="state"></el-table-column>
  178.             <el-table-column label="操作" width="100">
  179.                 <template #default="{ row }">
  180.                     <el-button :icon="Edit" circle plain type="primary"></el-button>
  181.                     <el-button :icon="Delete" circle plain type="danger"></el-button>
  182.                 </template>
  183.             </el-table-column>
  184.             <template #empty>
  185.                 <el-empty description="没有数据" />
  186.             </template>
  187.         </el-table>
  188.         <!-- 4 分页条 -->
  189.         <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5 ,10, 15]"
  190.             layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
  191.             @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />
  192.     </el-card>
  193. </template>
  194. <style lang="scss" scoped>
  195. .page-container {
  196.     min-height: 100%;
  197.     box-sizing: border-box;
  198.  
  199.     .header {
  200.         display: flex;
  201.         align-items: center;
  202.         justify-content: space-between;
  203.     }
  204. }
  205. </style>

 

1.4.3 当分页条的当前页和每页条数发生变化，重新发送请求获取数据
  1. //当每页条数发生了变化，调用此函数
  2. const onSizeChange = (size) => {
  3.     pageSize.value = size
  4.     articleList()  //七  1.4.3 **当分页条的当前页和每页条数发生变化，重新发送请求获取数据**
  5. }
  6. //当前页码发生变化，调用此函数
  7. const onCurrentChange = (num) => {
  8.     pageNum.value = num
  9.     articleList()  //七  1.4.3 **当分页条的当前页和每页条数发生变化，重新发送请求获取数据**
  10. }
​

2 、搜索和重置

为搜索按钮绑定单击事件，调用getArticles函数即可

为重置按钮绑定单击事件，清除categoryId和state的之即可

  1. <script setup>
  2. import {
  3.     Edit,
  4.     Delete
  5. } from '@element-plus/icons-vue'
  6.  
  7. import { ref } from 'vue'
  8.  
  9.  
  10. // 七  1.3 articleCategoryListService搜索查询条件 文章列表查询 导入   八 1.4.2 articleListService
  11. import { articleCategoryListService ,articleListService} from '@/api/article.js'
  12.  
  13. //文章分类数据模型
  14. const categorys = ref([
  15.     {
  16.         "id": 3,
  17.         "categoryName": "美食",
  18.         "categoryAlias": "my",
  19.         "createTime": "2023-09-02 12:06:59",
  20.         "updateTime": "2023-09-02 12:06:59"
  21.     },
  22.     {
  23.         "id": 4,
  24.         "categoryName": "娱乐",
  25.         "categoryAlias": "yl",
  26.         "createTime": "2023-09-02 12:08:16",
  27.         "updateTime": "2023-09-02 12:08:16"
  28.     },
  29.     {
  30.         "id": 5,
  31.         "categoryName": "军事",
  32.         "categoryAlias": "js",
  33.         "createTime": "2023-09-02 12:08:33",
  34.         "updateTime": "2023-09-02 12:08:33"
  35.     }
  36. ])
  37.  
  38. //用户搜索时选中的分类id
  39. const categoryId=ref('')
  40.  
  41. //用户搜索时选中的发布状态
  42. const state=ref('')
  43.  
  44. //文章列表数据模型
  45. const articles = ref([
  46.     {
  47.         "id": 5,
  48.         "title": "陕西旅游攻略",
  49.         "content": "兵马俑,华清池,法门寺,华山...爱去哪去哪...",
  50.         "coverImg": "https://big-event-gwd.oss-cn-beijing.aliyuncs.com/9bf1cf5b-1420-4c1b-91ad-e0f4631cbed4.png",
  51.         "state": "草稿",
  52.         "categoryId": 2,
  53.         "createTime": "2023-09-03 11:55:30",
  54.         "updateTime": "2023-09-03 11:55:30"
  55.     },
  56.     {
  57.         "id": 5,
  58.         "title": "陕西旅游攻略",
  59.         "content": "兵马俑,华清池,法门寺,华山...爱去哪去哪...",
  60.         "coverImg": "https://big-event-gwd.oss-cn-beijing.aliyuncs.com/9bf1cf5b-1420-4c1b-91ad-e0f4631cbed4.png",
  61.         "state": "草稿",
  62.         "categoryId": 2,
  63.         "createTime": "2023-09-03 11:55:30",
  64.         "updateTime": "2023-09-03 11:55:30"
  65.     },
  66.     {
  67.         "id": 5,
  68.         "title": "陕西旅游攻略",
  69.         "content": "兵马俑,华清池,法门寺,华山...爱去哪去哪...",
  70.         "coverImg": "https://big-event-gwd.oss-cn-beijing.aliyuncs.com/9bf1cf5b-1420-4c1b-91ad-e0f4631cbed4.png",
  71.         "state": "已发布",
  72.         "categoryId": 2,
  73.         "createTime": "2023-09-03 11:55:30",
  74.         "updateTime": "2023-09-03 11:55:30"
  75.     },
  76. ])
  77.  
  78. //分页条数据模型
  79. const pageNum = ref(1)//当前页
  80. const total = ref(20)//总条数
  81. const pageSize = ref(3)//每页条数
  82.  
  83. //当每页条数发生了变化，调用此函数
  84. const onSizeChange = (size) => {
  85.     pageSize.value = size
  86.     articleList()  //七  1.4.3 **当分页条的当前页和每页条数发生变化，重新发送请求获取数据**
  87. }
  88. //当前页码发生变化，调用此函数
  89. const onCurrentChange = (num) => {
  90.     pageNum.value = num
  91.     articleList()  //七  1.4.3 **当分页条的当前页和每页条数发生变化，重新发送请求获取数据**
  92. }
  93.  
  94.  
  95.  
  96. // 七  1.3 搜索查询条件 文章列表查询
  97. const getArticleCategoryList = async () => {
  98.     //获取所有分类
  99.     let resultC = await articleCategoryListService();
  100.         categorys.value = resultC.data
  101. }
  102.  
  103.  
  104. // 七  1.4.2  获取文章列表数据
  105. const articleList = async () => {
  106.     let params = {
  107.         pageNum: pageNum.value,
  108.         pageSize: pageSize.value,
  109.         categoryId: categoryId.value ? categoryId.value : null,
  110.         state: state.value ? state.value : null
  111.     }
  112.     let result = await articleListService(params);
  113.  
  114.     //渲染视图
  115.     total.value = result.data.total;
  116.     articles.value = result.data.items;
  117.  
  118.     //处理数据,给数据模型扩展一个属性categoryName,分类名称
  119.     for (let i = 0; i < articles.value.length; i++) {
  120.         let article = articles.value[i];
  121.         for (let j = 0; j < categorys.value.length; j++) {
  122.             if (article.categoryId == categorys.value[j].id) {
  123.                 article.categoryName = categorys.value[j].categoryName;
  124.             }
  125.         }
  126.     }
  127. }
  128.     
  129.  
  130. //七  1.3 搜索查询条件 文章列表查询 调用函数getArticleCategoryList
  131. getArticleCategoryList();
  132. // 七  1.4.2  获取文章列表数据
  133. articleList();
  134.  
  135.  
  136. </script>
  137. <template>
  138.     <el-card class="page-container">
  139.         <!-- 1 标题 -->
  140.         <template #header>
  141.             <div class="header">
  142.                 <span>文章管理</span>
  143.                 <div class="extra">
  144.                     <el-button type="primary">添加文章</el-button>
  145.                 </div>
  146.             </div>
  147.         </template>
  148.         <!-- 2 搜索表单 -->
  149.         <el-form inline>
  150.             <el-form-item label="文章分类：">
  151.                 <el-select placeholder="请选择" v-model="categoryId">
  152.                     <el-option 
  153.                         v-for="c in categorys" 
  154.                         :key="c.id" 
  155.                         :label="c.categoryName"
  156.                         :value="c.id">
  157.                     </el-option>
  158.                 </el-select>
  159.             </el-form-item>
  160.  
  161.             <el-form-item label="发布状态：">
  162.                 <el-select placeholder="请选择" v-model="state">
  163.                     <el-option label="已发布" value="已发布"></el-option>
  164.                     <el-option label="草稿" value="草稿"></el-option>
  165.                 </el-select>
  166.             </el-form-item>
  167.             <el-form-item>
  168.                 <el-button type="primary" @click="articleList">搜索</el-button>  <!-- 七 2  绑定查询事件-->
  169.                 <el-button @click="categoryId='';state='';articleList()">重置</el-button>  <!-- 七 2  绑定重置事件-->
  170.             </el-form-item>
  171.         </el-form>
  172.         <!-- 3 文章列表 -->
  173.         <el-table :data="articles" style="width: 100%">
  174.             <el-table-column label="文章标题" width="400" prop="title"></el-table-column>
  175.             <el-table-column label="分类" prop="categoryName"></el-table-column>
  176.             <el-table-column label="发表时间" prop="createTime"> </el-table-column>
  177.             <el-table-column label="更新时间" prop="updateTime"> </el-table-column>
  178.             <el-table-column label="状态" prop="state"></el-table-column>
  179.             <el-table-column label="操作" width="100">
  180.                 <template #default="{ row }">
  181.                     <el-button :icon="Edit" circle plain type="primary"></el-button>
  182.                     <el-button :icon="Delete" circle plain type="danger"></el-button>
  183.                 </template>
  184.             </el-table-column>
  185.             <template #empty>
  186.                 <el-empty description="没有数据" />
  187.             </template>
  188.         </el-table>
  189.         <!-- 4 分页条 -->
  190.         <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5 ,10, 15]"
  191.             layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
  192.             @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />
  193.     </el-card>
  194. </template>
  195. <style lang="scss" scoped>
  196. .page-container {
  197.     min-height: 100%;
  198.     box-sizing: border-box;
  199.  
  200.     .header {
  201.         display: flex;
  202.         align-items: center;
  203.         justify-content: space-between;
  204.     }
  205. }
  206. </style>

3、添加文章

3.1 添加文章抽屉组件

  1. import {Plus} from '@element-plus/icons-vue'
  2. //控制抽屉是否显示
  3. const visibleDrawer = ref(false)
  4. //添加表单数据模型
  5. const articleModel = ref({
  6.     title: '',
  7.     categoryId: '',
  8.     coverImg: '',
  9.     content:'',
  10.     sta
  1. <!-- 抽屉 -->
  2.         <el-drawer v-model="visibleDrawer" title="添加文章" direction="rtl" size="50%">
  3.             <!-- 添加文章表单 -->
  4.             <el-form :model="articleModel" label-width="100px" >
  5.                 <el-form-item label="文章标题" >
  6.                     <el-input v-model="articleModel.title" placeholder="请输入标题"></el-input>
  7.                 </el-form-item>
  8.                 <el-form-item label="文章分类">
  9.                     <el-select placeholder="请选择" v-model="articleModel.categoryId">
  10.                         <el-option v-for="c in categorys" :key="c.id" :label="c.categoryName" :value="c.id">
  11.                         </el-option>
  12.                     </el-select>
  13.                 </el-form-item>
  14.                 <el-form-item label="文章封面">
  15.  
  16.                     <el-upload class="avatar-uploader" :auto-upload="false" :show-file-list="false">
  17.                         <img v-if="articleModel.coverImg" :src="articleModel.coverImg" class="avatar" />
  18.                         <el-icon v-else class="avatar-uploader-icon">
  19.                             <Plus />
  20.                         </el-icon>
  21.                     </el-upload>
  22.                 </el-form-item>
  23.                 <el-form-item label="文章内容">
  24.                     <div class="editor">富文本编辑器</div>
  25.                 </el-form-item>
  26.                 <el-form-item>
  27.                     <el-button type="primary">发布</el-button>
  28.                     <el-button type="info">草稿</el-button>
  29.                 </el-form-item>
  30.             </el-form>
  31.         </el-drawer>

  1. /* 抽屉样式 */
  2. .avatar-uploader {
  3.     :deep() {
  4.         .avatar {
  5.             width: 178px;
  6.             height: 178px;
  7.             display: block;
  8.         }
  9.  
  10.         .el-upload {
  11.             border: 1px dashed var(--el-border-color);
  12.             border-radius: 6px;
  13.             cursor: pointer;
  14.             position: relative;
  15.             overflow: hidden;
  16.             transition: var(--el-transition-duration-fast);
  17.         }
  18.  
  19.         .el-upload:hover {
  20.             border-color: var(--el-color-primary);
  21.         }
  22.  
  23.         .el-icon.avatar-uploader-icon {
  24.             font-size: 28px;
  25.             color: #8c939d;
  26.             width: 178px;
  27.             height: 178px;
  28.             text-align: center;
  29.         }
  30.     }
  31. }
  32. .editor {
  33.   width: 100%;
  34.   :deep(.ql-editor) {
  35.     min-height: 200px;
  36.   }
  37. }

3.2 为添加文章按钮添加单击事件，展示抽屉

  1. <script setup>
  2. import {
  3.     Edit,
  4.     Delete
  5. } from '@element-plus/icons-vue'
  6.  
  7. import { ref } from 'vue'
  8.  
  9.  
  10. // 七  1.3 articleCategoryListService搜索查询条件 文章列表查询 导入   八 1.4.2 articleListService
  11. import { articleCategoryListService ,articleListService} from '@/api/article.js'
  12.  
  13. // 七 3.1 导入添加抽屉组件
  14. import {Plus} from '@element-plus/icons-vue'
  15. // 七 3.1 控制抽屉是否显示
  16. const visibleDrawer = ref(false)
  17. // 七 3.1 添加表单数据模型
  18. const articleModel = ref({
  19.     title: '',
  20.     categoryId: '',
  21.     coverImg: '',
  22.     content:'',
  23.     state:''
  24. })
  25.  
  26. //文章分类数据模型
  27. const categorys = ref([
  28.     {
  29.         "id": 3,
  30.         "categoryName": "美食",
  31.         "categoryAlias": "my",
  32.         "createTime": "2023-09-02 12:06:59",
  33.         "updateTime": "2023-09-02 12:06:59"
  34.     },
  35.     {
  36.         "id": 4,
  37.         "categoryName": "娱乐",
  38.         "categoryAlias": "yl",
  39.         "createTime": "2023-09-02 12:08:16",
  40.         "updateTime": "2023-09-02 12:08:16"
  41.     },
  42.     {
  43.         "id": 5,
  44.         "categoryName": "军事",
  45.         "categoryAlias": "js",
  46.         "createTime": "2023-09-02 12:08:33",
  47.         "updateTime": "2023-09-02 12:08:33"
  48.     }
  49. ])
  50.  
  51. //用户搜索时选中的分类id
  52. const categoryId=ref('')
  53.  
  54. //用户搜索时选中的发布状态
  55. const state=ref('')
  56.  
  57. //文章列表数据模型
  58. const articles = ref([
  59.     {
  60.         "id": 5,
  61.         "title": "陕西旅游攻略",
  62.         "content": "兵马俑,华清池,法门寺,华山...爱去哪去哪...",
  63.         "coverImg": "https://big-event-gwd.oss-cn-beijing.aliyuncs.com/9bf1cf5b-1420-4c1b-91ad-e0f4631cbed4.png",
  64.         "state": "草稿",
  65.         "categoryId": 2,
  66.         "createTime": "2023-09-03 11:55:30",
  67.         "updateTime": "2023-09-03 11:55:30"
  68.     },
  69.     {
  70.         "id": 5,
  71.         "title": "陕西旅游攻略",
  72.         "content": "兵马俑,华清池,法门寺,华山...爱去哪去哪...",
  73.         "coverImg": "https://big-event-gwd.oss-cn-beijing.aliyuncs.com/9bf1cf5b-1420-4c1b-91ad-e0f4631cbed4.png",
  74.         "state": "草稿",
  75.         "categoryId": 2,
  76.         "createTime": "2023-09-03 11:55:30",
  77.         "updateTime": "2023-09-03 11:55:30"
  78.     },
  79.     {
  80.         "id": 5,
  81.         "title": "陕西旅游攻略",
  82.         "content": "兵马俑,华清池,法门寺,华山...爱去哪去哪...",
  83.         "coverImg": "https://big-event-gwd.oss-cn-beijing.aliyuncs.com/9bf1cf5b-1420-4c1b-91ad-e0f4631cbed4.png",
  84.         "state": "已发布",
  85.         "categoryId": 2,
  86.         "createTime": "2023-09-03 11:55:30",
  87.         "updateTime": "2023-09-03 11:55:30"
  88.     },
  89. ])
  90.  
  91. //分页条数据模型
  92. const pageNum = ref(1)//当前页
  93. const total = ref(20)//总条数
  94. const pageSize = ref(3)//每页条数
  95.  
  96. //当每页条数发生了变化，调用此函数
  97. const onSizeChange = (size) => {
  98.     pageSize.value = size
  99.     articleList()  //七  1.4.3 **当分页条的当前页和每页条数发生变化，重新发送请求获取数据**
  100. }
  101. //当前页码发生变化，调用此函数
  102. const onCurrentChange = (num) => {
  103.     pageNum.value = num
  104.     articleList()  //七  1.4.3 **当分页条的当前页和每页条数发生变化，重新发送请求获取数据**
  105. }
  106.  
  107.  
  108.  
  109. // 七  1.3 搜索查询条件 文章列表查询
  110. const getArticleCategoryList = async () => {
  111.     //获取所有分类
  112.     let resultC = await articleCategoryListService();
  113.         categorys.value = resultC.data
  114. }
  115.  
  116.  
  117. // 七  1.4.2  获取文章列表数据
  118. const articleList = async () => {
  119.     let params = {
  120.         pageNum: pageNum.value,
  121.         pageSize: pageSize.value,
  122.         categoryId: categoryId.value ? categoryId.value : null,
  123.         state: state.value ? state.value : null
  124.     }
  125.     let result = await articleListService(params);
  126.  
  127.     //渲染视图
  128.     total.value = result.data.total;
  129.     articles.value = result.data.items;
  130.  
  131.     //处理数据,给数据模型扩展一个属性categoryName,分类名称
  132.     for (let i = 0; i < articles.value.length; i++) {
  133.         let article = articles.value[i];
  134.         for (let j = 0; j < categorys.value.length; j++) {
  135.             if (article.categoryId == categorys.value[j].id) {
  136.                 article.categoryName = categorys.value[j].categoryName;
  137.             }
  138.         }
  139.     }
  140. }
  141.     
  142.  
  143. //七  1.3 搜索查询条件 文章列表查询 调用函数getArticleCategoryList
  144. getArticleCategoryList();
  145. // 七  1.4.2  获取文章列表数据
  146. articleList();
  147.  
  148.  
  149. </script>
  150. <template>
  151.     <el-card class="page-container">
  152.         <!-- 1 标题 -->
  153.         <template #header>
  154.             <div class="header">
  155.                 <span>文章管理</span>
  156.                 <div class="extra">
  157.                     <el-button type="primary" @click="visibleDrawer = true">添加文章</el-button>  <!-- 七 3.2 @click="visibleDrawer = true" 绑定查询事件-->
  158.                 </div>
  159.             </div>
  160.         </template>
  161.         <!-- 2 搜索表单 -->
  162.         <el-form inline>
  163.             <el-form-item label="文章分类：">
  164.                 <el-select placeholder="请选择" v-model="categoryId">
  165.                     <el-option 
  166.                         v-for="c in categorys" 
  167.                         :key="c.id" 
  168.                         :label="c.categoryName"
  169.                         :value="c.id">
  170.                     </el-option>
  171.                 </el-select>
  172.             </el-form-item>
  173.  
  174.             <el-form-item label="发布状态：">
  175.                 <el-select placeholder="请选择" v-model="state">
  176.                     <el-option label="已发布" value="已发布"></el-option>
  177.                     <el-option label="草稿" value="草稿"></el-option>
  178.                 </el-select>
  179.             </el-form-item>
  180.             <el-form-item>
  181.                 <el-button type="primary" @click="articleList">搜索</el-button>  <!-- 七 2  绑定查询事件-->
  182.                 <el-button @click="categoryId='';state='';articleList()">重置</el-button>  <!-- 七 2  绑定重置事件-->
  183.             </el-form-item>
  184.         </el-form>
  185.         <!-- 3 文章列表 -->
  186.         <el-table :data="articles" style="width: 100%">
  187.             <el-table-column label="文章标题" width="400" prop="title"></el-table-column>
  188.             <el-table-column label="分类" prop="categoryName"></el-table-column>
  189.             <el-table-column label="发表时间" prop="createTime"> </el-table-column>
  190.             <el-table-column label="更新时间" prop="updateTime"> </el-table-column>
  191.             <el-table-column label="状态" prop="state"></el-table-column>
  192.             <el-table-column label="操作" width="100">
  193.                 <template #default="{ row }">
  194.                     <el-button :icon="Edit" circle plain type="primary"></el-button>
  195.                     <el-button :icon="Delete" circle plain type="danger"></el-button>
  196.                 </template>
  197.             </el-table-column>
  198.             <template #empty>
  199.                 <el-empty description="没有数据" />
  200.             </template>
  201.         </el-table>
  202.         <!-- 4 分页条 -->
  203.         <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5 ,10, 15]"
  204.             layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
  205.             @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />
  206.  
  207.  
  208.         <!-- 七 3.1 抽屉 -->
  209.         <el-drawer v-model="visibleDrawer" title="添加文章" direction="rtl" size="50%">
  210.             <!-- 添加文章表单 -->
  211.             <el-form :model="articleModel" label-width="100px" >
  212.                 <el-form-item label="文章标题" >
  213.                     <el-input v-model="articleModel.title" placeholder="请输入标题"></el-input>
  214.                 </el-form-item>
  215.                 <el-form-item label="文章分类">
  216.                     <el-select placeholder="请选择" v-model="articleModel.categoryId">
  217.                         <el-option v-for="c in categorys" :key="c.id" :label="c.categoryName" :value="c.id">
  218.                         </el-option>
  219.                     </el-select>
  220.                 </el-form-item>
  221.                 <el-form-item label="文章封面">
  222.  
  223.                     <el-upload class="avatar-uploader" :auto-upload="false" :show-file-list="false">
  224.                         <img v-if="articleModel.coverImg" :src="articleModel.coverImg" class="avatar" />
  225.                         <el-icon v-else class="avatar-uploader-icon">
  226.                             <Plus />
  227.                         </el-icon>
  228.                     </el-upload>
  229.                 </el-form-item>
  230.                 <el-form-item label="文章内容">
  231.                     <div class="editor">富文本编辑器</div>
  232.                 </el-form-item>
  233.                 <el-form-item>
  234.                     <el-button type="primary">发布</el-button>
  235.                     <el-button type="info">草稿</el-button>
  236.                 </el-form-item>
  237.             </el-form>
  238.         </el-drawer>
  239.     </el-card>
  240. </template>
  241. <style lang="scss" scoped>
  242. .page-container {
  243.     min-height: 100%;
  244.     box-sizing: border-box;
  245.  
  246.     .header {
  247.         display: flex;
  248.         align-items: center;
  249.         justify-content: space-between;
  250.     }
  251. }
  252.  
  253. /* 七 3.1 抽屉样式 */
  254. .avatar-uploader {
  255.     :deep() {
  256.         .avatar {
  257.             width: 178px;
  258.             height: 178px;
  259.             display: block;
  260.         }
  261.  
  262.         .el-upload {
  263.             border: 1px dashed var(--el-border-color);
  264.             border-radius: 6px;
  265.             cursor: pointer;
  266.             position: relative;
  267.             overflow: hidden;
  268.             transition: var(--el-transition-duration-fast);
  269.         }
  270.  
  271.         .el-upload:hover {
  272.             border-color: var(--el-color-primary);
  273.         }
  274.  
  275.         .el-icon.avatar-uploader-icon {
  276.             font-size: 28px;
  277.             color: #8c939d;
  278.             width: 178px;
  279.             height: 178px;
  280.             text-align: center;
  281.         }
  282.     }
  283. }
  284. .editor {
  285.   width: 100%;
  286.   :deep(.ql-editor) {
  287.     min-height: 200px;
  288.   }
  289. }
  290. </style>

3.3 富文本编辑器

文章内容需要使用到富文本编辑器，这里咱们使用一个开源的富文本编辑器 Quill

官网地址： VueQuill | Rich Text Editor Component for Vue 3

3.3.1 安装：
npm install @vueup/vue-quill@latest --save

3.3.2 导入组件和样式：
  1. import { QuillEditor } from '@vueup/vue-quill'
  2. import '@vueup/vue-quill/dist/vue-quill.snow.css'
3.3.3 页面使用quill组件：​
  1. <quill-editor
  2.               theme="snow"
  3.               v-model:content="articleModel.content"
  4.               contentType="html"
  5.               >
  6. </quill-editor>
  7. ​
3.3.4 样式美化：
  1. .editor {
  2.   width: 100%;
  3.   :deep(.ql-editor) {
  4.     min-height: 200px;
  5.   }
  6. }
  1. <script setup>
  2. import {
  3.     Edit,
  4.     Delete
  5. } from '@element-plus/icons-vue'
  6.  
  7. import { ref } from 'vue'
  8.  
  9.  
  10. // 七  1.3 articleCategoryListService搜索查询条件 文章列表查询 导入   八 1.4.2 articleListService
  11. import { articleCategoryListService ,articleListService} from '@/api/article.js'
  12.  
  13. // 七 3.1 导入添加抽屉组件
  14. import {Plus} from '@element-plus/icons-vue'
  15.  
  16. // 七 3.3.2 导入组件和样式
  17. import { QuillEditor } from '@vueup/vue-quill'
  18. import '@vueup/vue-quill/dist/vue-quill.snow.css'
  19.  
  20.  
  21. // 七 3.1 控制抽屉是否显示
  22. const visibleDrawer = ref(false)
  23. // 七 3.1 添加表单数据模型
  24. const articleModel = ref({
  25.     title: '',
  26.     categoryId: '',
  27.     coverImg: '',
  28.     content:'',
  29.     state:''
  30. })
  31.  
  32. //文章分类数据模型
  33. const categorys = ref([
  34.     {
  35.         "id": 3,
  36.         "categoryName": "美食",
  37.         "categoryAlias": "my",
  38.         "createTime": "2023-09-02 12:06:59",
  39.         "updateTime": "2023-09-02 12:06:59"
  40.     },
  41.     {
  42.         "id": 4,
  43.         "categoryName": "娱乐",
  44.         "categoryAlias": "yl",
  45.         "createTime": "2023-09-02 12:08:16",
  46.         "updateTime": "2023-09-02 12:08:16"
  47.     },
  48.     {
  49.         "id": 5,
  50.         "categoryName": "军事",
  51.         "categoryAlias": "js",
  52.         "createTime": "2023-09-02 12:08:33",
  53.         "updateTime": "2023-09-02 12:08:33"
  54.     }
  55. ])
  56.  
  57. //用户搜索时选中的分类id
  58. const categoryId=ref('')
  59.  
  60. //用户搜索时选中的发布状态
  61. const state=ref('')
  62.  
  63. //文章列表数据模型
  64. const articles = ref([
  65.     {
  66.         "id": 5,
  67.         "title": "陕西旅游攻略",
  68.         "content": "兵马俑,华清池,法门寺,华山...爱去哪去哪...",
  69.         "coverImg": "https://big-event-gwd.oss-cn-beijing.aliyuncs.com/9bf1cf5b-1420-4c1b-91ad-e0f4631cbed4.png",
  70.         "state": "草稿",
  71.         "categoryId": 2,
  72.         "createTime": "2023-09-03 11:55:30",
  73.         "updateTime": "2023-09-03 11:55:30"
  74.     },
  75.     {
  76.         "id": 5,
  77.         "title": "陕西旅游攻略",
  78.         "content": "兵马俑,华清池,法门寺,华山...爱去哪去哪...",
  79.         "coverImg": "https://big-event-gwd.oss-cn-beijing.aliyuncs.com/9bf1cf5b-1420-4c1b-91ad-e0f4631cbed4.png",
  80.         "state": "草稿",
  81.         "categoryId": 2,
  82.         "createTime": "2023-09-03 11:55:30",
  83.         "updateTime": "2023-09-03 11:55:30"
  84.     },
  85.     {
  86.         "id": 5,
  87.         "title": "陕西旅游攻略",
  88.         "content": "兵马俑,华清池,法门寺,华山...爱去哪去哪...",
  89.         "coverImg": "https://big-event-gwd.oss-cn-beijing.aliyuncs.com/9bf1cf5b-1420-4c1b-91ad-e0f4631cbed4.png",
  90.         "state": "已发布",
  91.         "categoryId": 2,
  92.         "createTime": "2023-09-03 11:55:30",
  93.         "updateTime": "2023-09-03 11:55:30"
  94.     },
  95. ])
  96.  
  97. //分页条数据模型
  98. const pageNum = ref(1)//当前页
  99. const total = ref(20)//总条数
  100. const pageSize = ref(3)//每页条数
  101.  
  102. //当每页条数发生了变化，调用此函数
  103. const onSizeChange = (size) => {
  104.     pageSize.value = size
  105.     articleList()  //七  1.4.3 **当分页条的当前页和每页条数发生变化，重新发送请求获取数据**
  106. }
  107. //当前页码发生变化，调用此函数
  108. const onCurrentChange = (num) => {
  109.     pageNum.value = num
  110.     articleList()  //七  1.4.3 **当分页条的当前页和每页条数发生变化，重新发送请求获取数据**
  111. }
  112.  
  113.  
  114.  
  115. // 七  1.3 搜索查询条件 文章列表查询
  116. const getArticleCategoryList = async () => {
  117.     //获取所有分类
  118.     let resultC = await articleCategoryListService();
  119.         categorys.value = resultC.data
  120. }
  121.  
  122.  
  123. // 七  1.4.2  获取文章列表数据
  124. const articleList = async () => {
  125.     let params = {
  126.         pageNum: pageNum.value,
  127.         pageSize: pageSize.value,
  128.         categoryId: categoryId.value ? categoryId.value : null,
  129.         state: state.value ? state.value : null
  130.     }
  131.     let result = await articleListService(params);
  132.  
  133.     //渲染视图
  134.     total.value = result.data.total;
  135.     articles.value = result.data.items;
  136.  
  137.     //处理数据,给数据模型扩展一个属性categoryName,分类名称
  138.     for (let i = 0; i < articles.value.length; i++) {
  139.         let article = articles.value[i];
  140.         for (let j = 0; j < categorys.value.length; j++) {
  141.             if (article.categoryId == categorys.value[j].id) {
  142.                 article.categoryName = categorys.value[j].categoryName;
  143.             }
  144.         }
  145.     }
  146. }
  147.     
  148.  
  149. //七  1.3 搜索查询条件 文章列表查询 调用函数getArticleCategoryList
  150. getArticleCategoryList();
  151. // 七  1.4.2  获取文章列表数据
  152. articleList();
  153.  
  154.  
  155. </script>
  156. <template>
  157.     <el-card class="page-container">
  158.         <!-- 1 标题 -->
  159.         <template #header>
  160.             <div class="header">
  161.                 <span>文章管理</span>
  162.                 <div class="extra">
  163.                     <el-button type="primary" @click="visibleDrawer = true">添加文章</el-button>  <!-- 七 3.2 @click="visibleDrawer = true" 绑定查询事件-->
  164.                 </div>
  165.             </div>
  166.         </template>
  167.         <!-- 2 搜索表单 -->
  168.         <el-form inline>
  169.             <el-form-item label="文章分类：">
  170.                 <el-select placeholder="请选择" v-model="categoryId">
  171.                     <el-option 
  172.                         v-for="c in categorys" 
  173.                         :key="c.id" 
  174.                         :label="c.categoryName"
  175.                         :value="c.id">
  176.                     </el-option>
  177.                 </el-select>
  178.             </el-form-item>
  179.  
  180.             <el-form-item label="发布状态：">
  181.                 <el-select placeholder="请选择" v-model="state">
  182.                     <el-option label="已发布" value="已发布"></el-option>
  183.                     <el-option label="草稿" value="草稿"></el-option>
  184.                 </el-select>
  185.             </el-form-item>
  186.             <el-form-item>
  187.                 <el-button type="primary" @click="articleList">搜索</el-button>  <!-- 七 2  绑定查询事件-->
  188.                 <el-button @click="categoryId='';state='';articleList()">重置</el-button>  <!-- 七 2  绑定重置事件-->
  189.             </el-form-item>
  190.         </el-form>
  191.         <!-- 3 文章列表 -->
  192.         <el-table :data="articles" style="width: 100%">
  193.             <el-table-column label="文章标题" width="400" prop="title"></el-table-column>
  194.             <el-table-column label="分类" prop="categoryName"></el-table-column>
  195.             <el-table-column label="发表时间" prop="createTime"> </el-table-column>
  196.             <el-table-column label="更新时间" prop="updateTime"> </el-table-column>
  197.             <el-table-column label="状态" prop="state"></el-table-column>
  198.             <el-table-column label="操作" width="100">
  199.                 <template #default="{ row }">
  200.                     <el-button :icon="Edit" circle plain type="primary"></el-button>
  201.                     <el-button :icon="Delete" circle plain type="danger"></el-button>
  202.                 </template>
  203.             </el-table-column>
  204.             <template #empty>
  205.                 <el-empty description="没有数据" />
  206.             </template>
  207.         </el-table>
  208.         <!-- 4 分页条 -->
  209.         <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5 ,10, 15]"
  210.             layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
  211.             @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />
  212.  
  213.  
  214.         <!-- 七 3.1 抽屉 -->
  215.         <el-drawer v-model="visibleDrawer" title="添加文章" direction="rtl" size="50%">
  216.             <!-- 添加文章表单 -->
  217.             <el-form :model="articleModel" label-width="100px" >
  218.                 <el-form-item label="文章标题" >
  219.                     <el-input v-model="articleModel.title" placeholder="请输入标题"></el-input>
  220.                 </el-form-item>
  221.                 <el-form-item label="文章分类">
  222.                     <el-select placeholder="请选择" v-model="articleModel.categoryId">
  223.                         <el-option v-for="c in categorys" :key="c.id" :label="c.categoryName" :value="c.id">
  224.                         </el-option>
  225.                     </el-select>
  226.                 </el-form-item>
  227.                 <el-form-item label="文章封面">
  228.  
  229.                     <el-upload class="avatar-uploader" :auto-upload="false" :show-file-list="false">
  230.                         <img v-if="articleModel.coverImg" :src="articleModel.coverImg" class="avatar" />
  231.                         <el-icon v-else class="avatar-uploader-icon">
  232.                             <Plus />
  233.                         </el-icon>
  234.                     </el-upload>
  235.                 </el-form-item>
  236.                 <el-form-item label="文章内容">
  237.                     <div class="editor">
  238.                         <quill-editor theme="snow" v-model:content="articleModel.content" contentType="html"> <!-- 七 3.3.3页面使用quill组件 -->
  239.                         </quill-editor>
  240.                     </div>
  241.                 </el-form-item>
  242.                 <el-form-item>
  243.                     <el-button type="primary">发布</el-button>
  244.                     <el-button type="info">草稿</el-button>
  245.                 </el-form-item>
  246.             </el-form>
  247.         </el-drawer>
  248.     </el-card>
  249. </template>
  250. <style lang="scss" scoped>
  251. .page-container {
  252.     min-height: 100%;
  253.     box-sizing: border-box;
  254.  
  255.     .header {
  256.         display: flex;
  257.         align-items: center;
  258.         justify-content: space-between;
  259.     }
  260. }
  261.  
  262. /* 七 3.1 抽屉样式 */
  263. .avatar-uploader {
  264.     :deep() {
  265.         .avatar {
  266.             width: 178px;
  267.             height: 178px;
  268.             display: block;
  269.         }
  270.  
  271.         .el-upload {
  272.             border: 1px dashed var(--el-border-color);
  273.             border-radius: 6px;
  274.             cursor: pointer;
  275.             position: relative;
  276.             overflow: hidden;
  277.             transition: var(--el-transition-duration-fast);
  278.         }
  279.  
  280.         .el-upload:hover {
  281.             border-color: var(--el-color-primary);
  282.         }
  283.  
  284.         .el-icon.avatar-uploader-icon {
  285.             font-size: 28px;
  286.             color: #8c939d;
  287.             width: 178px;
  288.             height: 178px;
  289.             text-align: center;
  290.         }
  291.     }
  292. }
  293. .editor {
  294.   width: 100%;
  295.   :deep(.ql-editor) {
  296.     min-height: 200px;
  297.   }
  298. }
  299. // 七 3.3.4 样式
  300. .editor {
  301.     width: 100%;  
  302.     :deep(.ql-editor) {
  303.         min-height: 200px;
  304.   }
  305. }
  306. </style>

3.4 文章封面图片上传

将来当点击+图标，选择本地图片后，el-upload这个组件会自动发送请求，把图片上传到指定的服务器上，而不需要我们自己使用axios发送异步请求，所以需要给el-upload标签添加一些属性，控制请求的发送

auto-upload:是否自动上传

action: 服务器接口路径

name: 上传的文件字段名

headers: 设置上传的请求头

on-success: 上传成功的回调函数

  1. </el-form-item>
  2.                 <el-form-item label="文章封面">
  3.                     <!-- 
  4.                         auto-upload:是否自动上传
  5.                         action: 服务器接口路径
  6.                         name: 上传的文件字段名
  7.                         headers: 设置上传的请求头
  8.                         on-success: 上传成功的回调函数 -->
  9.  
  10.                     <el-upload class="avatar-uploader" :auto-upload="true" :show-file-list="false"
  11.                     action="/api/upload"
  12.                     name="file"
  13.                     :headers="{Authorization:tokenStore.token}"
  14.                     :on-success="uploadSuccess"
  15.                     >
  16.                         <img v-if="articleModel.coverImg" :src="articleModel.coverImg" class="avatar" />
  17.                         <el-icon v-else class="avatar-uploader-icon">
  18.                             <Plus />
  19.                         </el-icon>
  20.                     </el-upload>
  21.                 </el-form-item>

注意：

  1. 由于这个请求时el-upload自动发送的异步请求，并没有使用咱们的request.js请求工具，所以在请求的路ing上，需要加上/api, 这个时候请求代理才能拦截到这个请求，转发到后台服务器上

  2. 要携带请求头，还需要导入pinia状态才可以使用

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

3.5 添加文章接口调用

3.5.1 article.js中提供添加文章函数

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

4、编辑文章

4.1 修改文章抽屉页面

修改文章抽屉和新增文章抽屉长的一样，所以可以复用添加分类的弹窗

4.1.1 抽屉标题显示 定义标题
  1. //抽屉标题
  2. const title=ref('')
4.1.2 在抽屉上绑定标题
 <el-drawer v-model="visibleDrawer" :title="title" direction="rtl" size="50%">
4.1.3 为添加文章按钮绑定事件
 <el-button type="primary" @click="title='添加文章';visibleDrawer = true">添加文章</el-button>
4.1.4 为修改文章按钮绑定事件
 <el-button :icon="Edit" circle plain type="primary" @click="title='修改文章';visibleDrawer='true'"></el-button>

4.2 数据回显

当点击修改文章按钮时，需要把当前这一条数据的详细信息显示到修改文章的抽屉上，这个叫回显

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

4.3 修改文章接口调用

4.3.1 article.js中提供修改文章的函数
  1. //导入request.js请求工具
  2. import request from '@/utils/request.js'
  3. // 六 2.4 导入@/stores/token.js
  4. import { useTokenStore } from '@/stores/token.js'
  5.  
  6. // 六  文章分类列表查询函数  
  7. export const articleCategoryListService = (registerData) =>{    
  8.     // 六 2.4获取token状态
  9.     // 六 3.2
  10.     // const tokenStore = useTokenStore()
  11.     //通过请求头Authorization携带token
  12.     // return request.get('/category', { headers: { 'Authorization': tokenStore.token } });
  13.     
  14.     return request.get('/category');
  15.     
  16. }
  17.  
  18. // 六 6.2  文章分类 添加文章分类 函数  json 参数
  19. export const articleCategoryAddService = (categoryModel) => {
  20.     return request.post('/category', categoryModel)
  21. }
  22.  
  23.  
  24. //六 7.3.1   修改分类
  25. export const articleCategoryUpdateService = (categoryModel)=>{
  26.     return request.put('/category',categoryModel)
  27.    }
  28.  
  29.  
  30. //六 8.1  删除分类
  31. export const articleCategoryDeleteService = (id) => {
  32.     return request.delete('/category?id='+id)
  33. }
  34.  
  35. // 七 1.4.1 文章列表查询
  36. export const articleListService = (params) => {
  37.     return request.get('/article', { params: params })
  38.    }
  39.  
  40.  
  41. //七 3.5.1添加文章
  42. export const articleAddService = (articleModel)=>{
  43.     return request.post('/article',articleModel)
  44. }
  45.  
  46. //七 4.3.1修改文章
  47. export const articleUpdateService = (articleModel)=>{
  48.     return request.put('/article',articleModel)
  49.    }
4.3.2 修改发布与草稿按钮的绑定事件
  1. <el-form-item>
  2.                         <el-button type="primary" @click="title==='添加文章'? addArticle('已发布'): updateArticle('已发布')">发布</el-button> <!-- 七 3.5.2 @click="addArticle('已发布')  七 4.3.2 ;title==='添加文章'? addArticle('已发布'):updateArticle('已发布')"-->
  3.                         <el-button type="info" @click="title==='添加文章'? addArticle('草稿'): updateArticle('草稿')">草稿</el-button> <!-- 七 3.5.2@click="addArticle('草稿')"  七 4.3.2 ;title==='添加文章'? addArticle('草稿'):updateArticle('草稿')-->
  4.                     </el-form-item>
4.3.3 调用接口完成修改的函数
  1. //七 4.4.4 修改文章
  2. const updateArticle=async ()=>{
  3.     let result = await articleUpdateService(articleModel.value)
  4.     ElMessage.success(result.message? result.message:'修改成功')
  5.     //隐藏抽屉
  6.     visibleDrawer.value=false
  7.     //再次访问后台接口，查询所有文章
  8.     articleList()
  9. }

由于现在修改和新增共用了一个数据模型，所以在点击添加文章后，有时候会显示数据，此时可以将articleModel中的数据清空

  1. //七 4.4.3 清空模型数据
  2. const clearArticleModel = ()=>{
  3.     articleModel.value.title='',
  4.     articleModel.value.categoryId='',
  5.     articleModel.value.coverImg='',
  6.     articleModel.value.content='<br>',
  7.     articleModel.value.state=''
  8. }

修改 添加文章按钮的点击事件（）

<el-button type="primary" @click="title='添加文章';visibleDrawer = true;clearArticleModel()">添加文章</el-button>  <!-- 七 3.2 @click="visibleDrawer = true" 绑定查询事件 七 4.1.3 title='添加文章';  七 4.3.3 ;clearArticleModel() -->

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

5、删除文章

5.1 接口调用

article.js中提供删除分类的函数

​

  1. //导入request.js请求工具
  2. import request from '@/utils/request.js'
  3. // 六 2.4 导入@/stores/token.js
  4. import { useTokenStore } from '@/stores/token.js'
  5.  
  6. // 六  文章分类列表查询函数  
  7. export const articleCategoryListService = (registerData) =>{    
  8.     // 六 2.4获取token状态
  9.     // 六 3.2
  10.     // const tokenStore = useTokenStore()
  11.     //通过请求头Authorization携带token
  12.     // return request.get('/category', { headers: { 'Authorization': tokenStore.token } });
  13.     
  14.     return request.get('/category');
  15.     
  16. }
  17.  
  18. // 六 6.2  文章分类 添加文章分类 函数  json 参数
  19. export const articleCategoryAddService = (categoryModel) => {
  20.     return request.post('/category', categoryModel)
  21. }
  22.  
  23.  
  24. //六 7.3.1   修改分类
  25. export const articleCategoryUpdateService = (categoryModel)=>{
  26.     return request.put('/category',categoryModel)
  27.    }
  28.  
  29.  
  30. //六 8.1  删除分类
  31. export const articleCategoryDeleteService = (id) => {
  32.     return request.delete('/category?id='+id)
  33. }
  34.  
  35. // 七 1.4.1 文章列表查询
  36. export const articleListService = (params) => {
  37.     return request.get('/article', { params: params })
  38.    }
  39.  
  40.  
  41. //七 3.5.1添加文章
  42. export const articleAddService = (articleModel)=>{
  43.     return request.post('/article',articleModel)
  44. }
  45.  
  46. //七 4.3.1修改文章
  47. export const articleUpdateService = (articleModel)=>{
  48.     return request.put('/article',articleModel)
  49.    }
  50.  
  51. //七 5.1删除文章
  52. export const articleDeleteService = (id) => {
  53.     return request.delete('/article?id='+id)
  54.    }

5.2 为删除按钮绑定事件

  1. <template #default="{ row }">
  2.                     <el-button :icon="Edit" circle plain type="primary" @click="showDrawer(row)"></el-button> <!--七4.1.4 @click="title='修改文章';visibleDrawer='true'"  七 4.2.1 showDrawer(row) -->
  3.                     <el-button :icon="Delete" circle plain type="danger" @click="deleteArticle(row)"></el-button> <!-- 七 5.2 为删除按钮绑定事件-->
  4.                 </template>

5.3 添加删除弹窗，当用户点击确认后，调用接口删除分类

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

八、顶部导航栏信息展示

在Layout.vue中，页面加载完就发送请求，获取个人信息展示，并存储到pinia中，因为将来在个人中心中修改信息的时候还需要使用

1、 user.js中提供获取个人信息的函数

  1. //导入request.js请求工具
  2. import request from '@/utils/request.js'
  3.  
  4. // 二  注册函数  提供调用注册接口的函数
  5. export const userRegisterService = (registerData) =>{
  6.     //借助于URLSearchParam完成参数传递
  7.     const params = new URLSearchParams();
  8.     for(let key in registerData){
  9.         params.append(key,registerData[key]);
  10.     }
  11.     return request.post('/user/register',params);
  12.     
  13. }
  14.  
  15. // 三  登录函数 提供调用登录接口的函数
  16. export const userLoginService = (loginData)=>{
  17.     //借助于URLSearchParam完成参数传递
  18.     const params = new URLSearchParams();
  19.     for(let key in loginData){
  20.         params.append(key,loginData[key]);
  21.     }
  22.     return request.post('/user/login',params);
  23.  
  24. }
  25.  
  26. // 八  1获取个人信息
  27. export const userInfoGetService = ()=>{
  28.     return request.get('/user/userInfo');
  29.    }

2、 src/stores/userInfo.js中，定义个人中心状态

  1. import {defineStore} from 'pinia'
  2. import {ref} from 'vue'
  3. const useUserInfoStore = defineStore('userInfo',()=>{
  4.     //定义状态相关的内容
  5.  
  6.     const info = ref({})
  7.  
  8.     const setInfo = (newInfo)=>{
  9.         info.value = newInfo
  10.     }
  11.  
  12.  
  13.     const removeInfo = ()=>{
  14.         info.value = {}
  15.     }
  16.  
  17.     return {info,setInfo,removeInfo}
  18.  
  19. },{persist:true})
  20.  
  21. export default useUserInfoStore;

3、 Layout.vue中获取个人信息，并存储到pinia中

  1. import {ref} from 'vue'
  2. //导入接口函数
  3. import { userInfoGetService } from '@/api/user.js'
  4. //导入pinia
  5. import useUserInfoStore  from '@/stores/userInfo.js'
  6.  
  7. const userInfoStore = useUserInfoStore();
  8. //获取个人信息
  9. const getUserInfo = async ()=>{
  10.     let result = await userInfoGetService();
  11.     //存储pinia
  12.     userInfoStore.info =result.data;
  13. }
  14. getUserInfo()

4、Layout.vue的顶部导航栏中，展示昵称和头像

 <div>编码集中营：<strong>{{ userInfoStore.info.nickname ? userInfoStore.info.nickname : userInfoStore.info.usrename }}</strong></div>
 <el-avatar :src="userInfoStore.info.userPic ? userInfoStore.info.userPic : avatar" />
​全部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. // ======= 八  3  个人用户信息
  14. import {ref} from 'vue'
  15. //导入接口函数
  16. import { userInfoGetService } from '@/api/user.js'
  17. //导入pinia
  18. import useUserInfoStore  from '@/stores/userInfo.js'
  19.  
  20. const userInfoStore = useUserInfoStore();
  21. //获取个人信息
  22. const getUserInfo = async ()=>{
  23.     let result = await userInfoGetService();
  24.     //存储pinia
  25.     userInfoStore.info =result.data;
  26. }
  27. getUserInfo()
  28.  
  29.  
  30.  
  31.  
  32. </script>
  33.  
  34. <template>
  35.     <!-- element-plus 中的容器 -->
  36.     <el-container class="layout-container">
  37.         <!-- 左侧菜单 -->
  38.         <el-aside width="200px">
  39.             <div class="el-aside__logo"></div>
  40.             <!-- element-plus 菜单标签 -->
  41.             <el-menu active-text-color="#ffd04b" background-color="#232323"  text-color="#fff"
  42.                 router>
  43.                 <el-menu-item index="/article/category">  <!-- 五 3.3  -->
  44.                     <el-icon>
  45.                         <Management />
  46.                     </el-icon>
  47.                     <span>文章分类</span>
  48.                 </el-menu-item>
  49.                 <el-menu-item index="/article/manage">  <!-- 五 3.3  -->
  50.                     <el-icon>
  51.                         <Promotion />
  52.                     </el-icon>
  53.                     <span>文章管理</span>
  54.                 </el-menu-item>
  55.                 <el-sub-menu >
  56.                     <template #title>
  57.                         <el-icon>
  58.                             <UserFilled />
  59.                         </el-icon>
  60.                         <span>个人中心</span>
  61.                     </template>
  62.                     <el-menu-item index="/user/info">  <!-- 五 3.3  -->
  63.                         <el-icon>
  64.                             <User />
  65.                         </el-icon>
  66.                         <span>基本资料</span>
  67.                     </el-menu-item>
  68.                     <el-menu-item index="/user/avatar">  <!-- 五 3.3  -->
  69.                         <el-icon>
  70.                             <Crop />
  71.                         </el-icon>
  72.                         <span>更换头像</span>
  73.                     </el-menu-item>
  74.                     <el-menu-item index="/user/resetPassword">  <!-- 五 3.3  -->
  75.                         <el-icon>
  76.                             <EditPen />
  77.                         </el-icon>
  78.                         <span>重置密码</span>
  79.                     </el-menu-item>
  80.                 </el-sub-menu>
  81.             </el-menu>
  82.         </el-aside>
  83.         <!-- 右侧主区域 -->
  84.         <el-container>
  85.             <!-- 头部区域 -->
  86.             <el-header>
  87.                 <div>编码集中营：<strong>{{ userInfoStore.info.nickname ? userInfoStore.info.nickname : userInfoStore.info.usrename }}</strong></div> <!-- 八 4 {{ userInfoStore.info.nickname ? userInfoStore.info.nickname : userInfoStore.info.usrename }}-->
  88.                 <el-dropdown placement="bottom-end">
  89.                     <span class="el-dropdown__box">
  90.                         <el-avatar :src="userInfoStore.info.userPic ? userInfoStore.info.userPic : avatar" /> <!-- 八 4 userInfoStore.info.userPic ? userInfoStore.info.userPic : avatar-->
  91.                         <el-icon>
  92.                             <CaretBottom />
  93.                         </el-icon>
  94.                     </span>
  95.                     <template #dropdown>
  96.                         <el-dropdown-menu>
  97.                             <el-dropdown-item command="profile" :icon="User">基本资料</el-dropdown-item>
  98.                             <el-dropdown-item command="avatar" :icon="Crop">更换头像</el-dropdown-item>
  99.                             <el-dropdown-item command="password" :icon="EditPen">重置密码</el-dropdown-item>
  100.                             <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
  101.                         </el-dropdown-menu>
  102.                     </template>
  103.                 </el-dropdown>
  104.             </el-header>
  105.             <!-- 中间区域 -->
  106.             <el-main>
  107.                 <!-- 五 3.3  -->
  108.                 <!-- <div style="width: 1290px; height: 570px;border: 1px solid red;">
  109.                     内容展示区
  110.                 </div> -->
  111.                 <router-view></router-view>
  112.             </el-main>
  113.             <!-- 底部区域 -->
  114.             <el-footer>国际大事件 ©2023 Created by 春天的菠菜</el-footer>
  115.         </el-container>
  116.     </el-container>
  117. </template>
  118.  
  119. <style lang="scss" scoped>
  120. .layout-container {
  121.     height: 100vh;
  122.  
  123.     .el-aside {
  124.         background-color: #232323;
  125.  
  126.         &__logo {
  127.             height: 120px;
  128.             background: url('@/assets/logo.png') no-repeat center / 120px auto;
  129.         }
  130.  
  131.         .el-menu {
  132.             border-right: none;
  133.         }
  134.     }
  135.  
  136.     .el-header {
  137.         background-color: #fff;
  138.         display: flex;
  139.         align-items: center;
  140.         justify-content: space-between;
  141.  
  142.         .el-dropdown__box {
  143.             display: flex;
  144.             align-items: center;
  145.  
  146.             .el-icon {
  147.                 color: #999;
  148.                 margin-left: 10px;
  149.             }
  150.  
  151.             &:active,
  152.             &:focus {
  153.                 outline: none;
  154.             }
  155.         }
  156.     }
  157.  
  158.     .el-footer {
  159.         display: flex;
  160.         align-items: center;
  161.         justify-content: center;
  162.         font-size: 14px;
  163.         color: #666;
  164.     }
  165. }
  166. </style>
​

九 、页面右上角下拉菜单el-dropdown中功能实现

在el-dropdown中有四个子条目，分别是：

  • 基本资料

  • 更换头像

  • 重置密码

  • 退出登录

其中其三个起到路由功能，跟左侧菜单中【个人中心】下面的二级菜单是同样的功能，退出登录需要删除本地pinia中存储的token以及userInfo

1、路由实现：

在el-dropdown-item标签上添加command属性，属性值和路由表中/user/xxx保持一致

  1. <!--  下拉菜单-->
  2.                 <!--  command： 条目被点击后会触发，在事件函数上可以声明一个参数，接收条目对应的指令 -->
  3.                 <el-dropdown placement="bottom-end" @command="handleCommand">
  4.                     <span class="el-dropdown__box">
  5.                         <el-avatar :src="userInfoStore.info.userPic ? userInfoStore.info.userPic : avatar" /> <!-- 八 4 userInfoStore.info.userPic ? userInfoStore.info.userPic : avatar-->
  6.                         <el-icon>
  7.                             <CaretBottom />
  8.                         </el-icon>
  9.                     </span>
  10.                     <template #dropdown>
  11.                         <el-dropdown-menu>
  12.                             <el-dropdown-item command="info" :icon="User">基本资料</el-dropdown-item>
  13.                             <el-dropdown-item command="avatar" :icon="Crop">更换头像</el-dropdown-item>
  14.                             <el-dropdown-item command="resetPassword" :icon="EditPen">重置密码</el-dropdown-item>
  15.                             <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
  16.                         </el-dropdown-menu>
  17.                     </template>
  18.                 </el-dropdown>

在el-dropdown标签上绑定command事件,当有条目被点击后，会触发这个事件

<el-dropdown placement="bottom-end" @command="handleCommand">

提供handleCommand函数，参数为点击条目的command属性值

  1. //dropDown条目被点击后，回调的函数
  2. import {useRouter} from 'vue-router'
  3. const router = useRouter()
  4. const handleCommand = (command)=>{
  5.     if(command==='logout'){
  6.         //退出登录
  7.         alert('退出登录')
  8.     }else{
  9.         //路由
  10.         router.push('/user/'+command)
  11.     }
  12. }

2、 退出登录实现：

  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. //  九 1
  14. //dropDown条目被点击后，回调的函数
  15. import {useRouter} from 'vue-router'
  16.  
  17. //九 2
  18. import {ElMessage,ElMessageBox} from 'element-plus'
  19. import { useTokenStore } from '@/stores/token.js'
  20.  
  21. // ======= 八  3  个人用户信息
  22. import {ref} from 'vue'
  23. //导入接口函数
  24. import { userInfoGetService } from '@/api/user.js'
  25. //导入pinia
  26. import useUserInfoStore  from '@/stores/userInfo.js'
  27.  
  28. const userInfoStore = useUserInfoStore();
  29. //获取个人信息
  30. const getUserInfo = async ()=>{
  31.     let result = await userInfoGetService();
  32.     //存储pinia
  33.     userInfoStore.info =result.data;
  34. }
  35. getUserInfo()
  36. //九 2
  37.  
  38. const tokenStore = useTokenStore()
  39. //九 1
  40. const router = useRouter()
  41. const handleCommand = (command)=>{
  42.     //判断指令
  43.     if(command === 'logout'){
  44.         //退出登录
  45.         ElMessageBox.confirm(
  46.         '您确认要退出吗?',
  47.         '温馨提示',
  48.         {
  49.             confirmButtonText: '确认',
  50.             cancelButtonText: '取消',
  51.             type: 'warning',
  52.         }
  53.     )
  54.         .then(async () => {
  55.             //退出登录
  56.             //1.清空pinia中存储的token以及个人信息
  57.             tokenStore.removeToken()
  58.             userInfoStore.removeInfo()
  59.  
  60.             //2.跳转到登录页面
  61.             router.push('/login')
  62.             ElMessage({
  63.                 type: 'success',
  64.                 message: '退出登录成功',
  65.             })
  66.             
  67.         })
  68.         .catch(() => {
  69.             ElMessage({
  70.                 type: 'info',
  71.                 message: '用户取消了退出登录',
  72.             })
  73.         })
  74.     }else{
  75.         //路由
  76.         router.push('/user/'+command)
  77.     }
  78. }
  79.  
  80.  
  81. </script>
  82.  
  83. <template>
  84.     <!-- element-plus 中的容器 -->
  85.     <el-container class="layout-container">
  86.         <!-- 左侧菜单 -->
  87.         <el-aside width="200px">
  88.             <div class="el-aside__logo"></div>
  89.             <!-- element-plus 菜单标签 -->
  90.             <el-menu active-text-color="#ffd04b" background-color="#232323"  text-color="#fff"
  91.                 router>
  92.                 <el-menu-item index="/article/category">  <!-- 五 3.3  -->
  93.                     <el-icon>
  94.                         <Management />
  95.                     </el-icon>
  96.                     <span>文章分类</span>
  97.                 </el-menu-item>
  98.                 <el-menu-item index="/article/manage">  <!-- 五 3.3  -->
  99.                     <el-icon>
  100.                         <Promotion />
  101.                     </el-icon>
  102.                     <span>文章管理</span>
  103.                 </el-menu-item>
  104.                 <el-sub-menu >
  105.                     <template #title>
  106.                         <el-icon>
  107.                             <UserFilled />
  108.                         </el-icon>
  109.                         <span>个人中心</span>
  110.                     </template>
  111.                     <el-menu-item index="/user/info">  <!-- 五 3.3  -->
  112.                         <el-icon>
  113.                             <User />
  114.                         </el-icon>
  115.                         <span>基本资料</span>
  116.                     </el-menu-item>
  117.                     <el-menu-item index="/user/avatar">  <!-- 五 3.3  -->
  118.                         <el-icon>
  119.                             <Crop />
  120.                         </el-icon>
  121.                         <span>更换头像</span>
  122.                     </el-menu-item>
  123.                     <el-menu-item index="/user/resetPassword">  <!-- 五 3.3  -->
  124.                         <el-icon>
  125.                             <EditPen />
  126.                         </el-icon>
  127.                         <span>重置密码</span>
  128.                     </el-menu-item>
  129.                 </el-sub-menu>
  130.             </el-menu>
  131.         </el-aside>
  132.         <!-- 右侧主区域 -->
  133.         <el-container>
  134.             <!-- 头部区域 -->
  135.             <el-header>
  136.                 <div>编码集中营：<strong>{{ userInfoStore.info.nickname ? userInfoStore.info.nickname : userInfoStore.info.usrename }}</strong></div> <!-- 八 4 {{ userInfoStore.info.nickname ? userInfoStore.info.nickname : userInfoStore.info.usrename }}-->
  137.                 <!--  下拉菜单-->
  138.                 <!--  command： 条目被点击后会触发，在事件函数上可以声明一个参数，接收条目对应的指令 -->
  139.                 <el-dropdown placement="bottom-end" @command="handleCommand">
  140.                     <span class="el-dropdown__box">
  141.                         <el-avatar :src="userInfoStore.info.userPic ? userInfoStore.info.userPic : avatar" /> <!-- 八 4 userInfoStore.info.userPic ? userInfoStore.info.userPic : avatar-->
  142.                         <el-icon>
  143.                             <CaretBottom />
  144.                         </el-icon>
  145.                     </span>
  146.                     <template #dropdown>
  147.                         <el-dropdown-menu>
  148.                             <el-dropdown-item command="info" :icon="User">基本资料</el-dropdown-item>
  149.                             <el-dropdown-item command="avatar" :icon="Crop">更换头像</el-dropdown-item>
  150.                             <el-dropdown-item command="resetPassword" :icon="EditPen">重置密码</el-dropdown-item>
  151.                             <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
  152.                         </el-dropdown-menu>
  153.                     </template>
  154.                 </el-dropdown>
  155.             </el-header>
  156.             <!-- 中间区域 -->
  157.             <el-main>
  158.                 <!-- 五 3.3  -->
  159.                 <!-- <div style="width: 1290px; height: 570px;border: 1px solid red;">
  160.                     内容展示区
  161.                 </div> -->
  162.                 <router-view></router-view>
  163.             </el-main>
  164.             <!-- 底部区域 -->
  165.             <el-footer>国际大事件 ©2023 Created by 春天的菠菜</el-footer>
  166.         </el-container>
  167.     </el-container>
  168. </template>
  169.  
  170. <style lang="scss" scoped>
  171. .layout-container {
  172.     height: 100vh;
  173.  
  174.     .el-aside {
  175.         background-color: #232323;
  176.  
  177.         &__logo {
  178.             height: 120px;
  179.             background: url('@/assets/logo.png') no-repeat center / 120px auto;
  180.         }
  181.  
  182.         .el-menu {
  183.             border-right: none;
  184.         }
  185.     }
  186.  
  187.     .el-header {
  188.         background-color: #fff;
  189.         display: flex;
  190.         align-items: center;
  191.         justify-content: space-between;
  192.  
  193.         .el-dropdown__box {
  194.             display: flex;
  195.             align-items: center;
  196.  
  197.             .el-icon {
  198.                 color: #999;
  199.                 margin-left: 10px;
  200.             }
  201.  
  202.             &:active,
  203.             &:focus {
  204.                 outline: none;
  205.             }
  206.         }
  207.     }
  208.  
  209.     .el-footer {
  210.         display: flex;
  211.         align-items: center;
  212.         justify-content: center;
  213.         font-size: 14px;
  214.         color: #666;
  215.     }
  216. }
  217. </style>

十、基本资料修改

1、 基本资料页面组件UserInfo.vue

views\user\UserInfo.vue
  1. <script setup>
  2. import { ref } from 'vue'
  3. const userInfo = ref({
  4.     id: 0,
  5.     username: 'zhangsan',
  6.     nickname: 'zs',
  7.     email: 'zs@163.com',
  8. })
  9. const rules = {
  10.     nickname: [
  11.         { required: true, message: '请输入用户昵称', trigger: 'blur' },
  12.         {
  13.             pattern: /^\S{2,10}$/,
  14.             message: '昵称必须是2-10位的非空字符串',
  15.             trigger: 'blur'
  16.         }
  17.     ],
  18.     email: [
  19.         { required: true, message: '请输入用户邮箱', trigger: 'blur' },
  20.         { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
  21.     ]
  22. }
  23. </script>
  24. <template>
  25.     <el-card class="page-container">
  26.         <template #header>
  27.             <div class="header">
  28.                 <span>基本资料</span>
  29.             </div>
  30.         </template>
  31.         <el-row>
  32.             <el-col :span="12">
  33.                 <el-form :model="userInfo" :rules="rules" label-width="100px" size="large">
  34.                     <el-form-item label="登录名称">
  35.                         <el-input v-model="userInfo.username" disabled></el-input>
  36.                     </el-form-item>
  37.                     <el-form-item label="用户昵称" prop="nickname">
  38.                         <el-input v-model="userInfo.nickname"></el-input>
  39.                     </el-form-item>
  40.                     <el-form-item label="用户邮箱" prop="email">
  41.                         <el-input v-model="userInfo.email"></el-input>
  42.                     </el-form-item>
  43.                     <el-form-item>
  44.                         <el-button type="primary">提交修改</el-button>
  45.                     </el-form-item>
  46.                 </el-form>
  47.             </el-col>
  48.         </el-row>
  49.     </el-card>
  50. </template>

2、 表单数据回显

个人信息之前已经存储到了pinia中，只需要从pinia中获取个人信息，替换模板数据即可

  1. // 十  2
  2. import  useUserInfoStore  from '@/stores/userInfo.js';
  3. const userInfoStore = useUserInfoStore()
  4. const userInfo = ref({...userInfoStore.info})

3、 接口调用

在src/api/user.js中提供修改基本资料的函数

  1. //导入request.js请求工具
  2. import request from '@/utils/request.js'
  3.  
  4. // 二  注册函数  提供调用注册接口的函数
  5. export const userRegisterService = (registerData) =>{
  6.     //借助于URLSearchParam完成参数传递
  7.     const params = new URLSearchParams();
  8.     for(let key in registerData){
  9.         params.append(key,registerData[key]);
  10.     }
  11.     return request.post('/user/register',params);
  12.     
  13. }
  14.  
  15. // 三  登录函数 提供调用登录接口的函数
  16. export const userLoginService = (loginData)=>{
  17.     //借助于URLSearchParam完成参数传递
  18.     const params = new URLSearchParams();
  19.     for(let key in loginData){
  20.         params.append(key,loginData[key]);
  21.     }
  22.     return request.post('/user/login',params);
  23.  
  24. }
  25.  
  26. // 八  1获取个人信息
  27. export const userInfoGetService = ()=>{
  28.     return request.get('/user/userInfo');
  29.    }
  30.  
  31.  
  32.    // 十 3 修改个人信息
  33. export const userInfoUpdateService = (userInfo)=>{
  34.     return request.put('/user/update',userInfo)
  35.    }

为修改按钮绑定单击事件

<el-button type="primary" @click="updateUserInfo">提交修改</el-button> <!-- 十  3  @click="updateUserInfo"-->

提供updateUserInfo函数

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

十一、修改头像

1、 修改头像页面组件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. //用户头像地址
  8. const imgUrl= avatar
  9.  
  10. </script>
  11.  
  12. <template>
  13.     <el-card class="page-container">
  14.         <template #header>
  15.             <div class="header">
  16.                 <span>更换头像</span>
  17.             </div>
  18.         </template>
  19.         <el-row>
  20.             <el-col :span="12">
  21.                 <el-upload 
  22.                     ref="uploadRef"
  23.                     class="avatar-uploader" 
  24.                     :show-file-list="false"
  25.                     >
  26.                     <img v-if="imgUrl" :src="imgUrl" class="avatar" />
  27.                     <img v-else src="avatar" width="278" />
  28.                 </el-upload>
  29.                 <br />
  30.                 <el-button type="primary" :icon="Plus" size="large"  @click="uploadRef.$el.querySelector('input').click()">
  31.                     选择图片
  32.                 </el-button>
  33.                 <el-button type="success" :icon="Upload" size="large">
  34.                     上传头像
  35.                 </el-button>
  36.             </el-col>
  37.         </el-row>
  38.     </el-card>
  39. </template>
  40.  
  41. <style lang="scss" scoped>
  42. .avatar-uploader {
  43.     :deep() {
  44.         .avatar {
  45.             width: 278px;
  46.             height: 278px;
  47.             display: block;
  48.         }
  49.  
  50.         .el-upload {
  51.             border: 1px dashed var(--el-border-color);
  52.             border-radius: 6px;
  53.             cursor: pointer;
  54.             position: relative;
  55.             overflow: hidden;
  56.             transition: var(--el-transition-duration-fast);
  57.         }
  58.  
  59.         .el-upload:hover {
  60.             border-color: var(--el-color-primary);
  61.         }
  62.  
  63.         .el-icon.avatar-uploader-icon {
  64.             font-size: 28px;
  65.             color: #8c939d;
  66.             width: 278px;
  67.             height: 278px;
  68.             text-align: center;
  69.         }
  70.     }
  71. }
  72. </style>

2、 头像回显

从pinia中读取用户的头像数据

  1. //读取用户信息
  2. import {ref} from 'vue'
  3. import useUserInfoStore from '@/stores/userInfo.js'
  4.  
  5. const userInfoStore = useUserInfoStore()
  6. //用户头像地址
  7. const imgUrl=ref(userInfoStore.info.userPic)

img标签上绑定图片地址

  1. <img v-if="imgUrl" :src="imgUrl" class="avatar" />
  2. <img v-else :src="avatar" width="278" />

3、 头像上传

为el-upload指定属性值，分别有：

  • action: 服务器接口路径

  • headers: 设置请求头，需要携带token

  • on-success: 上传成功的回调函数

  • name: 上传图片的字段名称

  1. <el-upload 
  2.                     ref="uploadRef"
  3.                     class="avatar-uploader" 
  4.                     :show-file-list="false"
  5.                     :auto-upload="true"
  6.                     action="/api/upload"
  7.                     name="file"
  8.                     :headers="{Authorization:tokenStore.token}"
  9.                     :on-success="uploadSuccess"
  10.                     >
  11.                     <img v-if="imgUrl" :src="imgUrl" class="avatar" />
  12.                     <img v-else src="avatar" width="278" />
  13.                 </el-upload>

提供上传成功的回调函数

  1. //读取token信息
  2. import {useTokenStore} from '@/stores/token.js'
  3. const tokenStore = useTokenStore()
  4. ​
  5. //图片上传成功的回调
  6. const uploadSuccess = (result)=>{
  7.     //回显图片
  8.     imgUrl.value = result.data
  9. }

外部触发图片选择

需要获取到el-upload组件，然后再通过$el.querySelector('input')获取到el-upload对应的元素，触发click事件

  1. // 十 、3//获取el-upload元素
  2. const uploadRef = ref()
​

  1. ​
  2. <el-button type="primary" :icon="Plus" size="large"  @click="uploadRef.$el.querySelector('input').click()">
  3.     选择图片
  4. </el-button>

4、 上传头像接口调用

在user.js中提供修改头像的函数

  1. //导入request.js请求工具
  2. import request from '@/utils/request.js'
  3.  
  4. // 二  注册函数  提供调用注册接口的函数
  5. export const userRegisterService = (registerData) =>{
  6.     //借助于URLSearchParam完成参数传递
  7.     const params = new URLSearchParams();
  8.     for(let key in registerData){
  9.         params.append(key,registerData[key]);
  10.     }
  11.     return request.post('/user/register',params);
  12.     
  13. }
  14.  
  15. // 三  登录函数 提供调用登录接口的函数
  16. export const userLoginService = (loginData)=>{
  17.     //借助于URLSearchParam完成参数传递
  18.     const params = new URLSearchParams();
  19.     for(let key in loginData){
  20.         params.append(key,loginData[key]);
  21.     }
  22.     return request.post('/user/login',params);
  23.  
  24. }
  25.  
  26. // 八  1获取个人信息
  27. export const userInfoGetService = ()=>{
  28.     return request.get('/user/userInfo');
  29.    }
  30.  
  31.  
  32.    // 十 3 修改个人信息
  33. export const userInfoUpdateService = (userInfo)=>{
  34.     return request.put('/user/update',userInfo)
  35.    }
  36.  
  37.  
  38.    // 十  4 修改头像
  39. export const userAvatarUpdateService=(avatarUrl)=>{
  40.     let params = new URLSearchParams();
  41.     params.append('avatarUrl',avatarUrl)
  42.     return request.patch('/user/updateAvatar',params)
  43. }

为【上传头像】按钮绑定单击事件

  1.  <el-button type="success" :icon="Upload" size="large" @click="updateAvatar"> <!-- 十  4  @click="updateAvatar"-->
  2.                     上传头像
  3.                 </el-button>

提供updateAvatar函数，完成头像更新

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

十二、 重置密码

1、user.js 重置密码

  1. //导入request.js请求工具
  2. import request from '@/utils/request.js'
  3.  
  4. // 二  注册函数  提供调用注册接口的函数
  5. export const userRegisterService = (registerData) =>{
  6.     //借助于URLSearchParam完成参数传递
  7.     const params = new URLSearchParams();
  8.     for(let key in registerData){
  9.         params.append(key,registerData[key]);
  10.     }
  11.     return request.post('/user/register',params);
  12.     
  13. }
  14.  
  15. // 三  登录函数 提供调用登录接口的函数
  16. export const userLoginService = (loginData)=>{
  17.     //借助于URLSearchParam完成参数传递
  18.     const params = new URLSearchParams();
  19.     for(let key in loginData){
  20.         params.append(key,loginData[key]);
  21.     }
  22.     return request.post('/user/login',params);
  23.  
  24. }
  25.  
  26. // 八  1获取个人信息
  27. export const userInfoGetService = ()=>{
  28.     return request.get('/user/userInfo');
  29.    }
  30.  
  31.  
  32.    // 十 3 修改个人信息
  33. export const userInfoUpdateService = (userInfo)=>{
  34.     return request.put('/user/update',userInfo)
  35.    }
  36.  
  37.  
  38.    // 十一  4 修改头像
  39. export const userAvatarUpdateService=(avatarUrl)=>{
  40.     let params = new URLSearchParams();
  41.     params.append('avatarUrl',avatarUrl)
  42.     return request.patch('/user/updateAvatar',params)
  43. }
  44.  
  45.  
  46.    // 十二  重置密码
  47. export const userUpdatePwdService=(userPwd)=>{    
  48.     return request.patch('/user/updatePwd',userPwd)
  49. }

 2、UserResetPassword.vue

 views/UserResetPassword.vue

  1. <script setup>
  2. import { ElMessage } from 'element-plus';
  3. import { useTokenStore } from '@/stores/token.js'
  4. import { ref } from 'vue'
  5. import { userUpdatePwdService } from '@/api/user.js';
  6. import {useRouter} from 'vue-router'
  7. const router = useRouter()
  8. const userPwd = ref({    
  9.     old_pwd: '',
  10.     new_pwd: '',
  11.     re_pwd: '',
  12. })
  13.  
  14. const tokenStore = useTokenStore()
  15. const updateUserPwd = async ()=>{
  16.     let result = await userUpdatePwdService(userPwd.value)
  17.     // ElMessage.success(result.message? result.message:'修改成功')
  18.      //退出登录
  19.     //1.清空pinia中存储的token（pinia中个人信息没有存储密码信息，所以不处理）
  20.     tokenStore.removeToken()
  21.   
  22.  
  23.     //2.跳转到登录页面
  24.     router.push('/login')
  25.     ElMessage({
  26.         type: 'success',
  27.         message: '修改密码成功，请重新成功',
  28.     })
  29. }
  30.  
  31. const rules = {
  32.     old_pwd: [
  33.         { required: true, message: '请输入原始密码', trigger: 'blur' },
  34.         {
  35.             pattern: /^\S{5,16}$/,
  36.             message: '原始密码必须是5-16位的非空字符串',
  37.             trigger: 'blur'
  38.         }
  39.     ],
  40.     new_pwd: [
  41.         { required: true, message: '请输入新密码', trigger: 'blur' },
  42.         
  43.         {
  44.             pattern: /^\S{5,16}$/,
  45.             message: '新密码必须是5-16位的非空字符串',
  46.             trigger: 'blur'
  47.         }
  48.     ],
  49.     re_pwd: [
  50.         { required: true, message: '请输入确认密码', trigger: 'blur' },
  51.         {
  52.             pattern: /^\S{5,16}$/,
  53.             message: '确认密码必须是5-16位的非空字符串',
  54.             trigger: 'blur'
  55.         }
  56.     ]
  57. }
  58. </script>
  59. <template>
  60.     <el-card class="page-container">
  61.         <template #header>
  62.             <div class="header">
  63.                 <span>重置密码</span>
  64.             </div>
  65.         </template>
  66.         <el-row>
  67.             <el-col :span="12">                
  68.                     <el-form :model="userPwd" :rules="rules" label-width="100px" size="large">
  69.                     <el-form-item label="原密码" prop="old_pwd">
  70.                         <el-input type="password" v-model="userPwd.old_pwd"></el-input>
  71.                     </el-form-item>
  72.                     <el-form-item label="新密码" prop="new_pwd">
  73.                         <el-input type="password" v-model="userPwd.new_pwd"></el-input>
  74.                     </el-form-item>
  75.                     <el-form-item label="确认密码" prop="re_pwd">
  76.                         <el-input type="password" v-model="userPwd.re_pwd"></el-input>
  77.                     </el-form-item>
  78.                     <el-form-item>
  79.                         <el-button type="primary" @click="updateUserPwd">提交修改</el-button>
  80.                     </el-form-item>
  81.                
  82.                 </el-form>
  83.             </el-col>
  84.         </el-row>
  85.     </el-card>
  86. </template>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/567677
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号