Mint UI - Unit02

Mint UI - Unit02

现在要获取数据库的数据，那么也就代表脚手架需要向WEB服务器发送请求后才能获取数据；既然要发送请求，那么必须要通过发送请求的工具来实现，请问工具是谁呢？ – axios

既然需要axios，那么肯定需要进行安装并且配置，所以：

第一步：脚手架上安装axios

npm install --save axios

第二步：配置axios

在src/main.js中完成

//导入axios模块
import axios from 'axios';

//设置axios基础的URL地址(在此已经决定了WEB服务器的端口号)
axios.defaults.baseURL = 'http://127.0.0.1:3000'

//将axios扩展成为Vue的属性
Vue.prototype.axios = axios;

Apache服务器的默认端口为80

MySQL数据库服务器的默认端口号为3306

FTP 服务器的端口号默认为21

HTTPS协议默认的端口号是：443

现在已经成功安装并且配置好Axios，此时就可以通过该工具向WEB服务器发送异步的AJAX请求了，但是现在在问题是：脚手架在什么情况下发送请求呢或者说请求的代码要写在Home.vue中什么位置呢？-- 此时需要回顾Vue的生命周期的回调函数

beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed

现在需要在Home.vue中调用mounted生命周期的回调函数并且发送异步的axios请求，示例代码如下：

mounted(){
	//通过axios工具向Web服务器发送请求以获取数据 
    //****************坑*****坑******坑**********
    //以如下的结构中，发现不存在WEB服务器URL地址的话，整个请求过程根本无法进行
    //所以跳转到1.1.6先完成WEB服务器的搭建并创建接口，然后再发送请求
    //this.axios.get(URL地址,参数).then(res=>{
		
    //});
}

针对RESTFul的API，其请求方式有以下几种：

GET，主要用于从服务器获取数据

POST，主要用于向服务器添加数据

PUT/PATCH，主要用于修改服务器数据

DELETE，主要用于删除服务器数据

1.1.6 WEB服务器的搭建

现在需要搭建WEB服务器，所以需要创建Node.js的服务器环境，故安装并配置 Express框架

第一步：安装Express

npm install --save express

第二步：配置Express

A.在server的根目录下创建入口文件 – index.js

B.在index.js中完成WEB服务器的创建，示例代码如下：

// 加载Express模块
const express = require('express');
// 创建WEB服务器实例
const server = express();
// 指定WEB服务器监听的端口
server.listen(3000);

C.在Node.js环境下的Web服务器中创建接口（因为任何HTTP请求都必须请求相对应的接口地址才行，所以必须创建接口）, 接口的规定如下：

请求方式：GET

参数：无

请求地址：http://127.0.0.1:3000/category

此时必须在WEB服务器中创建名称为category的GET类型的接口才行，代码如下：

server.get('/category',(req,res)=>{
  res.send('ok');
});

D.ctrl+反引号打开终端，输入以下命令启动WEB服务器

node index.js

如果服务器正常启动的话，那么代表的原来的"坑"已经填完了，现在可以在Home.vue中mounted生命周期回调函数中发送正常的HTTP请求了(因为现在服务器有了，接口也有了)！此时的代码如下：

mounted(){
    //通过axios工具向Web服务器发送请求以获取数据 
    this.axios.get('/category').then(res=>{

    });
}

此时客户端的运行结果如下图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XT5Xmrqh-1620636706466)(assets/image-20201103142033859.png)]

现在的错误原因是：跨域错误（因为脚手架的地址是 http://127.0.0.1:8080，而WEB服务器的地址是http://127.0.0.1:3000，端口号不同，会造成跨域）

1.1.7 跨域问题的解决 – CORS

跨域问题的解决有多种，如CORS、JSONP、HTTP-Proxy等

在Node.js环境中安装并配置CORS模块：

第一步：安装

npm install --save cors

第二步：配置

//加载CORS模式
const cors = require('cors');
//将CORS作为服务器的中间件
server.use(cors({
    origin:['http://127.0.0.1:8080','http://localhost:8080']
}));

第三步：重新启动Node.js服务器

此时脚手架的运行结果如下图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FrBvw7ct-1620636706467)(assets/image-20201103144737267.png)]

到目前为目，整个应用的网络环境已经成功了，但是依然没有获取出数据库的数据！所以：

1.1.8 WEB服务器操作数据库的数据

既然要在WEB服务器上操作数据库的数据，所以必须在Node.js环境中安装MySQL模块才能够操作数据库中的数据：

第一步：安装

npm install --save mysql

第二步：配置

// 加载MySQL模块
const mysql = require('mysql');

// 创建MySQL连接池
const pool = mysql.createPool({
  // 数据库服务器的地址
  host:'127.0.0.1',
  // 数据库服务器的端口号
  port:3306,
  // 数据库用户的用户名
  user:'root',
  // 数据库用户的密码
  password:'',
  // 数据库名称
  database:'xzqa',
  // 编码方式
  charset:'utf8',
  // 最大连接数
  connectionLimit:20
});

第三步：修改接口 – /category

server.get('/category',(req,res)=>{
    //获取文章分类表中的全部数据
    let sql = 'SELECT id,category_name FROM xzqa_category';
    //通过连接池的query()方法来执行SQL语句
    pool.query(sql,(error,results)=>{
        if(error) throw error;
        res.send({message:'查询成功',code:1,results:results});
    });  
});

第四步：重新启动Node.js服务器

此时客户端的运行结果如下图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IFZOTS9E-1620636706467)(assets/image-20201103163619612.png)]

此时已经证明客户端成功的向WEB服务器发送了请求，而且WEB服务器也已经将数据成功的返回到了客户端，但是目前在客户端中没有接收数据，当然也没有显示在页面中，所以：

1.1.9 客户端接收数据并且呈现在页面中

因为整个的请求过程是由Home.vue中的mounted发起的，所以需要修改mounted的生命周期代码，以完成接收数据的操作，具体操作过程如下：

A.需要首先在Home.vue 的data属性中声明变量，如category，因为只有将服务器返回的结果存储到变量中，才可以在页面中通过v-for指令进行循环输出，示例代码如下：

data(){
	return  {
		//用于存储服务器返回的文章分类数据
		category:[]
	}
}

B.现在已经声明了变量，于是就可以在mounted的时候把服务器返回的结果存储到该变量中了，代码如下：

mounted(){
    //通过axios工具向Web服务器发送请求以获取数据 
    this.axios.get('/category').then(res=>{
        this.category = res.data.results;
    });
}

C.现在已经将服务器返回的数据存储到category变量中了，于是就可以在页面中通过v-for指令来循环输出，以决定顶部选项卡的数量及内容了，代码如下：

<!-- 顶部选项卡开始 -->
<mt-navbar v-model="active">
    <mt-tab-item         
		v-for="(item,index) of category" 
        :key="index"
        :id="item.id.toString()">
        {{item.category_name}}        
    </mt-tab-item>
</mt-navbar>
<!-- 顶部选项卡结束 -->

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YrN6PYks-1620636706468)(assets/image-20201103171710618.png)]

1.2 首页内容的实现

1.2.1 首页初始化的文章列表的实现

在初始的情况下，应访获取默认分类下包含的文章数据。及时涉及的问题有：

A.在什么情况下要获取默认分类下包含的文章数据? – mounted

B.请问要向哪个WEB服务器接口发送请求？发送什么样的请求？是否带有参数？

1.2.2 在初始情况下发送请求以获取文章数据

在初始情况下在Vue.js中只能通过生命周期的回调函数实现，此时可通过mounted这一生命周期的回调函数来继续发送请求，以获取文章数据，伪代码如下：

mounted(){
    //通过axios工具向Web服务器发送请求以获取文章数据
    //目前不存在相关的WEB服务器的URL地址，所以代码称为伪代码
   	//如果想要真正去运行，必须保证存在web服务器且存在相关的API才行
    //在经过获取顶部选项卡操作时(1)已经成功创建了WEB服务器(2)解决了跨域问题
    //于是只剩下一个问题：在WEB服器下创建API接口才行
    //this.axios.get('URL地址','参数').then(res=>{

    //});
}