实现登录页面
与注册页面基本一致,需要新建 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 完成页面渲染。