springboot3+vue3全栈项目 big-event（前端部分）

注册功能及页面实现

• 技术点总结

  • 数据绑定
  
  • 表单校验

    • 参考官方文档

    • 在el-form标签上通过rules属性，绑定校验规则

    • el-form-item标签上通过prop属性，指定校验项

    • 

    • 

  • 调用后端注册接口
    1. 启动后端服务
    2. api文件夹中新建 user.js 并导入request.js请求工具
    3. 提供调用注册接口的函数
       • 需要调用 URLSearchParams 来完成参数传递
       • 
    4. 在Login.vue中给注册按钮绑定register函数
       • 
    5. 在register函数中，调用user.js中提供的函数，并依据返回结果渲染信息
  • 解决跨域问题
  • 
  • 
  • 代理配置
    • request.js 中配置 baseURL 的值为 /api
    • 在vite.config.js中配置：
    • 

登录功能

• 登录流程
  1. 建立数据模型，绑定数据
  2. 校验表单数据
  3. 引入登录函数
  4. 自定义函数，清空数据模型的数据
  5. 将消息提示框改为使用elementplus

Vue路由

• 
• 

子路由

文章分类列表查询

• 搭建步骤
  1. 页面搭建
  2. 在 article.js 中提供文章分类列表查询函数
  3. 在 ArticleCategory.vue 中声明一个异步函数，并在其中调用 aritcle.js 中的函数
  4. 由于请求没有携带token, 导致 401（未授权状态码）
• 解决方案（Pinia状态管理库）
  • 
• Pinia使用步骤
  • 
  • 成功获取到token并加入到请求头中
  • 问题：刷新页面后请求失败
• Pinia 持久化插件 -- persist
  • 
  • persist 的使用
  • 

删除文章分类

• 流程
  1. 给删除按钮绑定单击事件，调用 deleteCategory(row) 函数
  2. 在 deleteCategory 函数内部加入确认框，由elementplus提供
     • 
  3. 在 article.js 中调用加入 articleCategoryDeleteService 接口
  4. 在 deleteCategory 中调用该接口
  5. 刷新文章分类列表
• 最终效果
  • 

文章列表（条件分页）

• 流程

1. 在 article.js 中提供一个文章列表查询函数
2. 在 ArticleManage.vue 文件中声明一个函数 articleList
   1. 准备传递参数，其中的 categoryId 和 state 需要做判断
   2. 得到结果后处理数据
      • 根据 categoryId 查询到 categoryName 再给 article 扩展一个 categoryName 属性
      • 把 categoryName 绑定到分类标签上

新增文章

• 流程

1. 导入样式代码

2. 文章封面图片上传到 aliyunoss

   1. 不需要调用 ajax 请求，直接用 el-upload 标签
   2. 

3. 新增文章接口实现和调用

   1. 在 article.js 中提供接口调用函数
   2. 在 ArticleManage.vue 中给发布和草稿按钮绑定单击事件
   3. 把发布状态赋值给数据模型
   4. 调用 article.js 中的接口
   5. 隐藏新增文章窗口
   6. 刷新当前列表

修改文章

• 流程
  • 与新增文章共用一个‘抽屉’
• 步骤
  1. 在 ArticleManage.vue 中编写回显文章数据函数
     • 
  2. 在 article.js 中编写更新文章接口函数
     • 
  3. 设置 title 属性来区别展示弹出抽屉的标题是 ‘修改文章’ 还是 ‘添加文章’
     • 
  4. 在 ArticleManage.vue 中调用更新文章接口
     • 

删除文章

• 实现步骤
  1. 在 article.js 中编写删除文章接口
     • 
  2. 给 delete 图标添加点击事件：@click="deleteArticle(row)"
  3. 编写 deleteArticle 函数，调用 article.js 中的接口
  4. 在 deleteArticle 函数中使用 element-plus 组件 ElMessageBox 弹出警告框
  5. 

顶部导航栏 -- 下拉菜单

• 实现步骤
  1. 给下拉菜单中的 el-dropdown 绑定事件 command , 当我们点击条目时，事件会被触发
  2. 将 el-dropdown-item 标签中的属性 command 与路由表中的访问属性一一对应起来
     • 
  3. 编写 handleCommand 函数并传入参数 command
  4. 对 command 进行判断
     • 
  5. 退出登录的逻辑
     • 清空 pinia 中储存的 token 以及个人信息
     • 跳转到登录页面
     • 

基本资料修改

• 实现步骤
  1. 导入基本资料页面组件
  2. 实现表单数据回显
     • 个人信息之前已经存储到了pinia中，只需要从pinia中获取个人信息，替换模板数据即可
     • 
  3. 在 user.js 中编写函数，调用后端接口
  4. 给‘提交修改’按钮绑定单击事件
     • 
  5. 编写 updateUserInfo 函数
     • 调用接口
     • 更新 pinia 中的数据
     • 

用户头像修改

• 流程
  1. 搭建页面，el-upload(核心)，定义imgUrl, 代表用户头像地址，并且绑定给 img 标签 -
  2. 回显头像：导入 pinia 中的 userInfo, 再把userInfo中的userPic赋值给imgUrl -
  3. 给 el-upload 设置属性（auto-upload: 设置自动上传，action: 指定服务器地址，name: 指定上传字段，headers: 携带token，on-success: 指定上传成功后的回调） -
  4. 在uploadSuccess回调函数中把得到的 url 地址赋值给 imgUrl
  5. 在 user.js 中定义接口 userAvatarUpdateService -
  6. 在UserAvatar中调用接口
  7. 最后更新 pinia 中的数据 -