Vue驾校-从项目学Vue-7

前言：

往期Vue框架内容：Vue驾校-从项目学Vue-1
算法系列博客友链：神机百炼
强烈推荐Y总所有课程：小白友好的程序教学社区

项目实战6：

1. 用户列表组件：

标签绑定跳转函数：

• 为用户的card标签添加@click属性，绑定跳转函数，跳转到好友的博客详情页面：
  
• 到网页观察点击用户列表后的效果：
  发现无论是点击哪个用户，都是那个原本写好的userProfile页面：
  
• 但是由于携带了userId参数进行的router.push()，所以路由后缀不同：
  

动态响应用户信息：

• 删除我们前期为了调试userProfilePosts,userProfileWrite,userProfileInfo时，设置的虚拟用户数据和虚拟博文数据：
  
• 从云端动态拉取用户信息和用户博客，需要借助ajax调用API：
  获取用户信息的url：https://app165.acapp.acwing.com.cn/myspace/getinfo/
• 先用API获取用户信息，存储到父组件userProfileView.vue中
  
• 动态响应userProfileInfo：
  由于userProfileInfo中的所有user属性都是userProfileView传递到props的
  所以其实不需要大改动userProfileInfo，只需修改显示内容：
  
• 查看此时网页：
  

动态响应用户博客：

• 获取用户博客API的url：https://app165.acapp.acwing.com.cn/myspace/post/

  将resp装载到父组件的posts变量，通过props传递给子组件：
  

• 查看网页点击一个用户后的效果：
  

动态响应可否编辑：

• 我们只能浏览其他人的博客，不能在其他人的网页写博客
  需要判断当前页面的userId和登录者的userId是否一致，不一致则隐藏userProfileWrite组件
  

• 查看网页效果是否隐藏：
  

点击跳转到个人博客：

• 现在点击右上角的username，发现没有跳转到自己的profile页面
• 这是由于App.vue默认以router的name判断链接是否一致，不一致才进行跳转
  
• 现在我们将App.vue的默认路由比较设置更改：
  
• 现在在他人博客页点击右上角用户名：
  

2. 发布博客组件

调用API将博客写入数据库：

• 发帖API：https://app165.acapp.acwing.com.cn/myspace/post/
• 在UseProfileWriter.vue中调用API：
  
• 在userProfileView.vue的查询所有博客的API中修改博客数目：
  
• 去网页发帖并退出查看是否存储到数据库：
  前端是发上去了：
  
  不要直接F5刷新，从好友列表重进该页：
  

为什么刷新后需要重新登录：

• 登录时提交的信息组成的JWT令牌的access和refresh都存储在代码的局部变量中，不像数据库存储在硬盘上
• 每次刷新后，access & refresh变量都变为空
• 我们在查看好友或者自己的UserProfileView页面时，第一点就是通过比较vuex中的userId和网址url后缀中的userId来确定是否显示UserProfileWrite组件
• 在查看vuex中对象的属性时，调用API：https://app165.acapp.acwing.com.cn/myspace/getinfo/，需要经过Authorization的access验证
• 对策：
  将access信息通过调用localStorage存储到本地
  这个用法先放一放，主要来学vue

3. 删除帖子函数：

• 删除API：https://app165.acapp.acwing.com.cn/myspace/post/，从数据库中删除该帖子

设置删除按钮样式：

• v-if，只能删除自己的博客：
  

绑定前端删除函数：

• 真的数据存储在数据库中，父子组件都可以调用该API
  前端数据存储在父组件中，删除函数最好写在父组件中
  

调用数据库删除API：

• 此处将数据库删除函数直接写在子组件中，不必传递了
  

• 到网页删除一个看看：
  访问别人的博客没有删除键：
  
  访问自己的博客可以永久删除：
  

4. 注册组件：

• 注册功能和登录功能类似，可先复制过来再小改，注意export default的name不同
  

• 重写register函数，注册API：https://app165.acapp.acwing.com.cn/myspace/user/
  

• 用一个不常见的用户名注册，由于API开放，所以常见的已经被注册过了
  注册成功后直接：
  

5. 持久化关注功能：

• 关注API已经将关注和未关注之间的转化考虑进了：https://app165.acapp.acwing.com.cn/myspace/follow/
• 去改userProfileInfo.vue的关注函数和取消关注函数：
  
• 到前端关注一个用户后，重新登录发现关注状态不变：
  

6. 删除所有调试打印信息：

• 所有的console.log()都暴露了一些信息，需要上线前删除，防止给黑客看到内部信息

总结：

• 整个Vue博客系统到此做完，项目本身初衷是熟练入门vue的实操
• 项目功能的不足之处：

1. 未为JWT令牌添加localStore本地存储，导致不能刷新
2. 好友列表是固定的API中的十个人，新注册的用户API没有添加进来
3. 首页留白，可以自由发挥
4. 编辑的博客内容只能是字符串，这个其实可以加一个js插件变成markdown编辑框
5. 没有为个人上传头像功能，主要我也还不会用图床云盘

• 下一篇博客就是这个项目的技术总结，以及完整的gitee项目源码