每天给自己一个希望，试着不为明天而烦恼，不为昨天而叹息，只为今天更美好！人生没有对错，只有选择后的坚持，不后悔，走下去，就是对的。走着走着，花就开了。
本期主要内容
本期内容步骤示例清晰明了，内容如有争议请联系作者：TEL/V：15200025778
1.学子问答项目实践基础
2.首页顶部选项卡的实现
3.首页面板数据的实现 -- 全部数据的获取
1.学子问答项目实践基础
1.1 数据表结构
• xzqa_category (文章类型表)
• xzqa_author (文章作者表)
• xzqa_article (文章表)
数据表 ER 图如下：
1.2 数据导入
• 方法1
A.启动操作系统命令行
B.输入以下命令
mysql -u用户名 -p密码 < SQL脚本文件的位置及名称
• 方法2
A.启动操作系统命令
B.登录 MySQL 客户端
C.输入以下命令
source SQL脚本文件的位置及名称
1.3 MySQL常用命令
• 查看当前服务器的数据库列表
SHOW DATABASES;
• 打开数据库
USE 数据库名称;
• 查看当前数据库包含的数据表列表
SHOW TABLES;
• 查看特定数据表结构
DESC 数据表名称;
或者
SHOW COLUMNS FROM 数据表名称;
• 退出MySQL 客户端
exit;
或者
quit;
1.4 WEB工作流程
2.首页顶部选项卡的实现
原始情况下，顶部选项卡的数据是固定的，示例代码如下：
<mt-navbar v-model="active">
<mt-tab-item id="1">HTML5</mt-tab-item>
<mt-tab-item id="2">CSS3</mt-tab-item>
<mt-tab-item id="3">JavaScript</mt-tab-item>
<mt-tab-item id="4">MySQL</mt-tab-item>
<mt-tab-item id="5">jQuery</mt-tab-item>
</mt-navbar>
但是，现在已经提供了xzqa_category的数据表，在该表中存储了文章的分类信息，所以应该由该表的记录来决定顶部选项卡的数量及显示文本等信息。
其实现过程将涉及以下几个问题？
•在什么情况下发送请求到WEB服务器?
•如何在WEB服务器中获取MySQL数据库中的数据?
• 在什么情况下发送请求到WEB服务器?
在页面加载成功后应该获取文章分类信息显示的顶部选项卡中 ！ -- 引申出 Vue生命周期及其钩子函数
•beforeCreate
•created
•beforeMount
•mounted
•beforeUpdate
•updated
•beforeDestroy
•destroyed
现在采用mounted钩子函数在触发时来发送请求到WEB服务器，此时的示例代码如下：
<script>
export default {
data(){
return {
...
}
},
mounted(){
}
}
</script>
在上述代码中，mounted钩子函数书写完成了，现在的问题是：通过什么发送请求呢？-- Axios
既然需要Axios，也就必须进行Axios的安装与配置！ Axios安装提示：
npm install --save axios
Vue中配置Axios -- 在main.js中实现：
import axios from 'axios';
//WEB服务器的URL地址
axios.defaults.baseURL = 'http://127.0.0.1:3000/'
//在Vue原型扩展属性
Vue.prototype.axios = axios;
提示：Node服务器的端口为3000
此时即可在mounted钩子函数内通过axios来发送HTTP请求了，示例代码如下：
mounted(){
this.axios.get('WEB服务器API地址');
}
因为现在并不存在WEB服务器，所以既使配置了AXIOS也无法发送真正的AJAX请求，所以必须先行配置WEB服务器才可以！所以：
第一步：配置WEB服务器
A、安装express框架
npm install --save express
B、在服务器目录创建app.js -- Node.js的入口文件
C、在app.js中输入以下代码：
/加载Express模块
const express = require("express");
//创建Express应用
const server = express();
//指定WEB服务器的监听端口
server.listen(3000,()=>{
console.log('服务器启动...');
});
D、在VSCode编辑器的终端输入以下命令启动WEB服务器
node app.js
E、在app.js中创建GET路由接口 -- /categories
此时完整的示例代码如下：
//加载Express模块
const express = require("express");
//创建Express应用
const server = express();
//获取所有文章分类的接口
server.get('/categories',(req,res)=>{
res.send('OK');
});
//指定WEB服务器的监听端口
server.listen(3000,()=>{
console.log('服务器启动...');
});
F、重新WEB服务器
第二步：修改mounted钩子函数的AJAX请求
此时的示例代码如下：
mounted(){
this.axios.get('/categories');
}
此时脚手架运行结果如下图所示：
此时的错误信息由于跨域操作引起的！ -- 引申出CORS模块，所以： A、在Node服务器上安装CORS 模块
npm install --save cors
B、在app.js文件中以输入代码：
//加载cors模块
const cors = require("cors");
server.use(cors({
origin:['http://localhost:8080','http://127.0.0.1:8080']
}));
此时完整的示例代码如下：
//加载Express模块
const express = require("express");
//加载cors模块
const cors = require("cors");
//创建Express应用
const server = express();
//使用CROS模块
server.use(cors({
origin:['http://localhost:8080','http://127.0.0.1:8080']
}));
//获取所有文章分类的接口
server.get('/categories',(req,res)=>{
res.send('OK');
});
//指定WEB服务器的监听端口
server.listen(3000,()=>{
console.log('服务器启动...');
});
C、重新启动WEB服务器
此时脚手架的运行结果如下图所示：
• 如何在WEB服务器中获取MySQL数据库中的数据?
在Node.js环境下，要操作MySQL数据库的话，需要通过mysql模块实现，所以现在需要WEB服务器上安装并且配置MySQL模块，故：
A、安装MySQL模块
npm install --save mysql
B、在app.js中完成mysql的配置，示例代码如下：
//加载MySQL模式
const mysql = require("mysql");
//创建MySQL连接池
const pool = mysql.createPool({
host:'127.0.0.1',
port:3306,
user:'root',
password:'',
database:'xzqa',
connectionLimit:15
});
C、在/categories 接口中完成获取xzqa_category数据表记录的功能： /categories 接口的代码如下：
server.get('/categories',(req,res)=>{
//获取xzqa_category数据表的全部记录
let sql = 'SELECT id,category_name FROM xzqa_category';
//通过MySQL连接池执行SQL语句
pool.query(sql,(err,results)=>{
if(err) throw err;
res.send({message:'查询成功',code:1,results:results});
});
});
D、重新启动WEB服务器
此时WEB服务器的运行结果如下图所示：
此时证明已经从WEB服务器获取到了文章分类的信息！
既然服务器已经成功返回数据，现在必须在客户端接收并且显示数据
• 在客户端接收并且显示数据
当客户端接收到服务器返回的文章分类数据后，应该将其存储到Vue的变量中，然后再通过v-for指令来循环输出，以控制顶部选项卡的数量及内容。所以：
A、为了能够在Vue中保存服务器返回的文章分类数据，所以需要声明变量，而且数据类型为array类型（因为文章分类有多个），示例代码如下：
<script>
export default{
data(){
return {
//存储服务器返回的文章分类数据
categories:[]
}
}
}
</script>
现在已经声明了变量，但是还没有接收服务器返回的文章类型数据。
B.在mounted钩子函数中，当HTTP响应成功从WEB服务器返回后，就接收返回数据并且存储到categories 变量中，示例代码如下：
mounted(){
this.axios.get('/categories').then(res=>{
this.categories = res.data.results;
});
}
现在已经将服务器返回的文章分类数据存储到了categories变量中，现在只缺少通过v-for指令来动态决定顶部选项卡的数量及内容了。
C、在顶部选项卡组件中通过v-for指令动态控制其数量及内容，示例代码如下：
<!-- 顶部选项卡开始 -->
<mt-navbar v-model="active">
<mt-tab-item
v-for="(category,index) of categories"
:id="category.id"
:key="index">
{{category.category_name}}
</mt-tab-item>
</mt-navbar>
<!-- 顶部选项卡结束 -->
D、在正常情况下，面板中包含的<mt-tab-container-item>的数量应该与<mt-tab-item>的数量是完全一致！而现在<mt-tab-item>的数量是动态的，那么也就意味着<mt-tab-container-item>的数量也必须是动态的！所以：
再通过categories变量来决定<mt-tab-container-item>的数量，示例代码如下：
<mt-tab-container v-model="active">
<mt-tab-container-item
v-for="(category,index) of categories"
:key="index"
:id="category.id">
<!--内容部分省略-->
</mt-tab-container-item>
</mt-tab-container>
提示：
原来和中v-model绑定的变量数据类型为string，原因为是因为每个项目的ID是手动赋予的字符串，而现在每个项目的id是动态的数值类型的属性(因为MySQL中ID字段的数据类型为数值型)，所以active变量需由原来的'1'改成1，示例代码如下：
<script>
export default{
data(){
return {
active:1
}
}
}
</script>
3.首页面板数据的实现 -- 全部数据的获取
在页面初始化的情况下，就”应该“获取出所有的文章列表，以显示在面板中。所以将涉及到：
•在什么情况下要获取全部的文章列表？ -- 涉及到Vue生命周期及钩子函数 所以现在仍然需要在Vue的mounted钩子函数中发送请求到WEB服务器，以获取全部文章列表，示例代码如下：
mounted(){
this.axios.get("获取全部文章的服务器API地址");
}
现在也就意味着必须在WEB上存在相应的API接口地址，才能在客户端发送AJAX请求，所以：
第一步：修改WEB服务器的相关配置
因为在前面的API中已经完成了WEB服务器的创建、解决了跨域、实现了MySQL的连接池，所以现在只需要在WEB上添加相关的API接口即口，代码如下：
//获取所有文章的接口(后续要调整)
server.get('/articles',(req,res)=>{
//获取xzqa_article数据表全部记录
let sql = 'SELECT id,subject,description,image FROM xzqa_article';
//通过MySQL连接池执行SQL语句
pool.query(sql,(err,results)=>{
if(err) throw err;
res.send({message:'查询成功',code:1,results:results})
})
});
完成上述代码后，切记要重新启动WEB服务器！
第二步：修改mounted中的AJAX请求地址，示例代码如下：
mounted(){
//获取全部文章数据
this.axios.get('/articles');
}
此时WEB服务器的运行结果如下图所示：
如上图所示，WEB服务器已经成功返回数据到客户端，所以在客户端中必须接收并且显示数据！
为了能够在客户端接收WEB服务器返回的数据，所以必须在客户端声明变量以存储数据，而且该变量的数据类型为 array(因为服务器存在多篇文章数据)，示例代码如下：
<script>
export default{
data(){
return {
//存储WEB服务器返回的文章信息
articles:[]
}
}
}
</script>
既然现在已经声明变量，那么就应该将WEB服务器返回的数据存储到该变量中，示例代码如下：
mounted(){
//获取全部文章数据
this.axios.get('/articles').then(res=>{
this.articles = res.data.results;
});
}
现在已经将WEB服务器返回的数据存储到了articles变量中了，现在就应该通过v-for指令来进行循环输出，以显示不同的文章标题、简介等信息，示例代码如下：
<!-- 单一文章信息开始 -->
<div
class="info-item"
v-for="(article,index) of articles"
:key="index">
<!-- 标题区域开始 -->
<div class="info-item-head">
<router-link to="/">{{article.subject}}</router-link>
</div>
<!-- 标题区域结束 -->
<!-- 内容区域开始 -->
<div class="info-item-content">
<!-- 图像区域开始 -->
<div class="info-item-img">
<img src="../assets/images/articles/v2-c9acade792e89a7af148803dfbad0821_224x148.jpg" alt="">
</div>
<!-- 图像区域结束 -->
<!-- 内容简介区域开始 -->
<div class="info-item-des">
{{article.description}}
</div>
<!-- 内容简介区域结束 -->
</div>
<!-- 内容区域结束 -->
</div>
<!-- 单一文章信息结束 -->
