一、点击顶部选项卡，替换文章列表

当用户点击某一个顶部选项卡时，获取当前选中项类别的 ID ，发送 http 请求，获取当前选中项类别 ID 的首页文章列表。替换当前列表即可。

实现思路：

1. 通过 watch 监听 selected 变量的变化。当修改顶部导航选中项时将会改变 selected 的值。

2. 捕获到变化后，获取当前选中项的 ID ，发送 http 请求。

3. 获取响应后，替换当前 this.articles 列表即可。

4. 点击顶部选项卡，跳转到其他页，要实现跳转时出现页面顶部，在监听selected 的函数中加上window.scrollTo(0,0)方法，这是windows自带的方法，

实现触底加载下一页

基于 MintUI 提供的指令： Infinite Scroll 无限滚动指令 。基本用法如下：

实现：

触底之后做什么？

当在UI类别下滚动到底部，需要加载下一页：

当第二页数据（20条）加载完毕后，需要将最新的20条文章数据追加到当前文章列表。

主体流程：

当触发触底事件后，执行 loadMore 方法，发送请求，加载当前类别下的下一页数据。数据加载完毕后，追加到当

前文章列表的末尾。

实现思路：

1. 在 data 中声明一个变量 page ，用于表示当前页码。默认值为1。

2. 每当触发 loadMore （滚到底了），让 page++ ，这样 page 变量就可以用来表示下一页的页码。

3. 当执行 loadMore 方法时（滚到底了），发送http请求，加载当前类别下的下一页数据。

4. 获取数据后，将得到的新文章数组追加到旧数组（ this.articles ）末尾。

封装方法： loadArticles() 用于发请求加载文章列表，并且返回查询列表

现阶段，有3个地方都需要发这个请求，加载文章列表：

二、显示文章详情页

业务需求：

在首页中选择一篇文章，点击它，跳转到详情页。在详情页中显示选中的这一篇文章的详细信息。

实现思路：

1. 准备一个页面： Article.vue ，配置路由。

2. 从 /home/index 地址跳转到 /article 地址。并且需要携带参数：文章 ID 。

传参方式1：query

Index.vue:

Article.vue

传参方式2：params

Index.vue

router/index.js

Article.vue

3. 在 /article 组件中获取上一个页面跳过来时携带的参数： ID ，发送 http 请求，加载这一篇文章的详情信息。

4. 渲染页面。

三、momentjs

JavaScript 日期处理类库

创建 moment 对象

将 moment 对象转成字符串

将秒级时间戳，转成年月日时分

安装 momentjs

引入 momentjs

四、基于 keepalive 实现首页的保活

有个问题：在首页点击列表项跳转到详情页后，点击返回，回到首页，发现首页会重新挂载（执行 mounted ），意味着首页以前的状态将不复存在。而业务需求希望回到首页时，首页依然是跳转之前的状态（上个页面不销毁），这就需要使用 vue 提供的“保活机制”来对首页进行保活处理。

为router-view添加keep-alive实现动态组件保活

一旦页面被保活处理，重新显示该页面时将不会执行 mounted 生命周期方法。

更多的时候，有些页面需要保活，有些页面不需要保活，所以就需要动态设置：

1. 在路由配置index.js文件中，为需要保活的路由页面添加自定义的 meta 属性：

1. 为router-view绑定v-if指令来动态控制组件的渲染。

Vue 为 keepAlive 机制设计了两个额外的生命周期方法：

VueRouter 滚动行为参考文档

https://v3.router.vuejs.org/zh/guide/advanced/scrollbehavior.html#%E5%BC%82%E6%AD%A5%E6%BB%9A%E5%8A%A8

五、完成注册业务

1. 完成注册页面。包括表单验证。

2. 验证通过后，收用户信息，发送 http 请求，执行注册业务。

3. 接收返回的结果。给与提示或跳转。

密码加密：

注册时，先做md5然后再插入数据库

INSERT xzqa_author(username,password) VALUES(?,MD5(?))

登录时，先做md5让然后在于数据库进行比对

SELECT id,username,nickname,avatar FROM xzqa_author WHERE username=? AND password=MD5(?)

完成登录业务

与注册业务类似。

六、实现首页右上角登录用户的显示

当登录成功，需要在首页右上角显示： 欢迎：xxxx。 Vuex

实现思路：

1. 在 vuex 中设计 state 与 mutations ，用于管理当前用户信息的全局共享。

1. 当登录成功后，调用 vuex 的 mutations  ，将用户信息存入 vuex 的 state 中。

1. 在项目的任何一个组件中，若希望获取当前登录用户的数据，则直接访问 vuex 即可。

七、WebStorage

至此，登录成功后跳转到首页，已经可以实现在首页中显示欢迎用户信息。但是不能刷新。一旦刷新页面，将会重置 vue 容器， vuex 中保存的数据都将会被初始化。需要相一个办法，持久化保存 vuex 中的数据。 推荐使用HTML5 新特性中的 WebStorage

HTML5 提供了 WebStorage 用于在客户端持久化保存一些数据。主要包含两大块存储区：

1. LocalStorage 将数据存储在该存储区后，只要用户不清除浏览器缓存，这部分数据将永久存储。

2. SessionStorage 将数据存储在该存储区中，单会话生效（只要浏览器不关闭，数据将一致保存）。

通常情况下， vuex 需要与 WebStorage 一起来完成数据状态保持的工作，这样在刷新页面时，由于数据持久化保存在 storage 中，所以在刷新页面后，可以让 vuex 从 storage 中加载以前的数据，从而完成数据持久化保存。

sessionStorage 与 LocalStorage 的 API

向 Storage 中存储数据：

从 Storage 中取出数据：通过 key 获取 value ：

删除Storage中的某一组数据：

清空Storage中的某一组数据：