实现登录页面
与注册页面基本一致，需要新建 Login.vue ，去掉确认密码。
一、基于嵌套路由实现点击底部导航后页面内容的切换业务
设计嵌套路由：
| http://localhost:8080/home/index 看到home中嵌套"首页"内容 http://localhost:8080/home/me 看到home中嵌套"我的"内容 |
由上述设计可得：
1. HomeView.vue 文件中只保留底部选项卡。上半部分需要提供： <router-view>
2. 新增两个组件： Index.vue （编写首页内容）， Me.vue （编写我的内容）。
3. 配置嵌套路由。
1. /home 对应 HomveView.vue
2. /home 下配置子路由： /index （对应 Index.vue ） 与 /me （对应 Me.vue ）
实现步骤：
1. 新增两个组件：Index.vue、Me.vue
2. 将Home.vue的上半部分删除，替换成 <router-view> 占位符。
3. 配置路由。 /home /home/index /home/me
二、Swipe 轮播图组件
mt-swipe 组件为轮播图组件，基本结构如下：
三、学子问答项目实践
（一）项目架构解析
前后端分离，前端：Vue全家桶+mintUI组件库，后端：nodejs+mysql。前后端通信使用 http 协议。
（二）搭建项目服务端运行环境
1. 下载 server.zip 与 xzqa.sql 数据库脚本。
2. 解压缩 server.zip ，得到server文件夹，内部的 app.js 即是后端源码。
3. 将 xzqa.sql 脚本导入 mysql 数据库。
1. 打开 xampp 。 点击右侧 shell 按钮，打开命令行。
2. 执行命令，导入 xzqa.sql :
- 启动 server/app.js 服务器后，即可访问服务端接口，通过接口操作数据库。
浏览器中测试链接：
| http://localhost:3000/category 将会返回数据库中所有的文章类别 http://localhost:3000/articles?cid=1 UI类别下的文章列表 |
备注：
查看三张表的字段描述与关联关系： ftp /resource/er.svg
查看服务端提供的接口文档： ftp /resource/jiekou.svg
（三）当加载首页内容时，动态加载类别列表
实现思路：
重写 mounted 生命周期方法，在该方法中发送 http 请求，加载类别列表，获取响应结果后，将数据通过 v-for
显示在首页中。
- 安装配置 axios 。
| # 安装 npm install --save axios vue-axios |
| // main.js中引入 import axios from 'axios' axios.defaults.baseURL = 'http://localhost:3000'import VueAxios from 'vue-axios' Vue.use(VueAxios, axios) |
2. 重写 mounted 方法。发送 http 请求。
3. 获取响应后，渲染 UI 界面。呈现列表。
（四）加载首页 UI 类别文章列表
测试接口：
| UI类别下的第一页数据 http://localhost:3000/articles?cid=1&page=1 电商类别下第二页第一篇 http://localhost:3000/articles?cid=2&page=2 交互类别下第三页第二篇 http://localhost:3000/articles?cid=4&page=3 |
实现思路：
1. 在 Index.vue 的 mounted 方法中发送 http 请求加载 UI 类别下的文章列表。
2. 获取结果后，存入 data ，在页面中通过 v-for 完成页面渲染。