days03~18Vue/days08请求和UI/note/days08随堂笔记.md · 大牧莫邪/bz2107web

# `Days 08. `请求和UI

## 一、课程大纲

1、异步请求

2、前端`UI`库

## 二、课程内容

### 1、接口项目部署

#### （1）确定项目文件

```
bz2107_0601.sql    数据库文件
bz210701api.rar    项目压缩包
```

#### （2） 初始化数据库

创建指定的数据库

```sql
create database bz2107_0601 default charset 'UTF8';
```

数据库中导入数据库文件，初始化项目数据

#### （3）初始化项目

解压项目到指定目录

```
bz2107api/
```

命令行进入项目文件夹，执行命令安装依赖并启动项目

![image-20220615101907937](assets/image-20220615101907937.png)

#### （4） 测试数据接口

浏览器访问`http://localhost:3000/menus/list?q=1`

![image-20220615101956039](assets/image-20220615101956039.png)

### 2、复习`ajax`

#### （1） 什么是`ajax`

`ajax`是一个集成了`javascript`技术、`xml`技术、`json`技术的一种用于前后端数据交互的异步请求技术，核心元素包含：

- `XMLHttpRequest`异步对象，用于发送异步请求
- `JSON`数据格式，用于数据传输

> 备注：关于`ajax`的由来
>
> `ajax（Asynchronous JavaScript And Xml）`本身是一个异步JavaScript和XML技术，主要通过`JavaScript`中的异步对象`xhr`，实现通过`xml`完成数据交换的请求技术
>
> 问题：`xml`格式的文件包含了大量用于表示格式的标签内容，和实际传输的数据主体没有太大关系，导致网络流量出现了一定的浪费，如
>
> ```xml
> <users>
> 	<user>
>         <id>1</id>
>     	<name>tom</name>
>     </user>
>     <user>
>         <id>2</id>
>     	<name>jerry</name>
>     </user>
> </users>
> ```
>
> 解决方案：通过JSON格式的数据，替代了原始的XML格式的数据，最大程度的利用了网络流量传输最大的数据量
>
> ```json
> {users: [{id: 1, name: 'tom'}, {id: 2,name: 'jerry'}}
> ```
>
>

#### （2） 原生`js ajax`

原生`JS`中的`ajax`技术，是很多高级框架异步请求的底层执行原理，执行过程如下：

```js
// 1、创建异步交互对象
const http = new XMLHttpRequest()
/*const http;
try{
    http = new XMLHttpRequest()
}catch(e){
    try{
        http = new ActiveXObject('MSXML.HTTP')
    } catch(e) {
        try{
            http = new ActiveXObject('Micro.XMLHTTP')
        } catch(e) {
            alert("请升级浏览器")
        }
    }
}*/
// 2、连接服务器
http.open('GET', 'http://www.example.com', true)

// 3、发送请求
http.send()

// 4、处理响应数据
http.onreadystatechange = function() {
    // 处理成功响应的数据
    // http.readyState 0,1,2,3,4
    // 0 请求就绪
    // 1 请求发送中
    // 2 服务器接受请求并处理
    // 3 服务器响应数据中
    // 4 客户端浏览器成功接受数据
    // http.status HTTP规范中的响应码
    // 2xx：成功响应
    // 3xx：请求重定向
    // 4xx：请求侧错误
    // 5xx：服务器侧错误
    if(http.readyState === 4 && http.status === 200){
        // 获取响应数据，执行DOM操作，渲染页面数据
    }
}
```

#### （3） `jQuery Ajax`

`jQuery ajax`底层封装了原生`js ajax`，提供了功能函数，直接完成数据交互

```js
$.ajax({
    url: 'http://www.example.com',
    type: 'POST',
    data: {username:"admin", password: "123"},
    success: function(res) {},
    error: function() {}
})

$.get(url, {}, function() {})

$.post(url, {}, function() {})

...
```

> 注意事项：`jQuery ajax`封装的非常完善，但是`vue`项目中不推荐使用`jQuery`
>
> - `jQuery`核心操作，主要简化的是`DOM`操作，提高编码效率
> - `Vue`不推荐`DOM`操作，`Vue`推荐使用更加单纯的`axios`完成异步请求处理

### 3、`axios ajax`

官方网站：

```
https://axios-http.com/
```

翻译的中文网站：

```
http://www.axios-js.com/
```

#### （1） 什么是`axios`

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js项目 中

> - `Promise`封装，将异步操作封装成了可以执行同步操作的功能函数
> - `XHR`封装，底层封装了原生`JS`异步对象

#### （2） 如何发送请求

`axios`封装了请求函数，提供给开发人员可以直接调用执行

```js
// 底层
axios.request({配置选项})

// get请求
axios.get('http://example.com'
         {params: {keyword: '搜索字符串'}})
    .then(res=> console.log(res))
	.catch(res => console.log("请求错误"))

// post请求
axios.post('http://example.com',
          {username: 'admin', password: '123'})
    .then(res=> console.log(res))
	.catch(res => console.log("请求错误"))

// put请求
// delete请求
// 其他请求...
```

#### （3） 请求配置选项

`axios`本身包含大量的配置，用于增强请求功能

```json
{
   // `url` 是用于请求的服务器 URL【关注】
  url: '/user',

// `method` 是创建请求时使用的方法【关注】
  method: 'get', // default

// `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。【关注】
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL: 'https://some-domain.com/api/',

// `transformRequest` 允许在向服务器发送前，修改请求数据
  // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
  // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
  transformRequest: [function (data, headers) {
    // 对 data 进行任意转换处理
    return data;
  }],

// `transformResponse` 在传递给 then/catch 前，允许修改响应数据
  transformResponse: [function (data) {
    // 对 data 进行任意转换处理
    return data;
  }],

// `headers` 是即将被发送的自定义请求头【关注】
  headers: {'X-Requested-With': 'XMLHttpRequest'},

// `params` 是即将与请求一起发送的 URL 参数【关注】
  // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
  params: {
    ID: 12345
  },

// `paramsSerializer` 是一个负责 `params` 序列化的函数
  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: function(params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },

// `data` 是作为请求主体被发送的数据【关注】
  // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
  // 在没有设置 `transformRequest` 时，必须是以下类型之一：
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - 浏览器专属：FormData, File, Blob
  // - Node 专属： Stream
  data: {
    firstName: 'Fred'
  },

// `timeout` 指定请求超时的毫秒数(0 表示无超时时间)【关注】
  // 如果请求话费了超过 `timeout` 的时间，请求将被中断
  timeout: 1000,

// `withCredentials` 表示跨域请求时是否需要使用凭证
  withCredentials: false, // default

// `adapter` 允许自定义处理请求，以使测试更轻松
  // 返回一个 promise 并应用一个有效的响应 (查阅 [response docs](#response-api)).
  adapter: function (config) {
    /* ... */
  },

// `auth` 表示应该使用 HTTP 基础验证，并提供凭据
  // 这将设置一个 `Authorization` 头，覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },

// `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
  responseType: 'json', // default

// `responseEncoding` indicates encoding to use for decoding responses
  // Note: Ignored for `responseType` of 'stream' or client-side requests
  responseEncoding: 'utf8', // default

// `xsrfCookieName` 是用作 xsrf token 的值的cookie的名称
  xsrfCookieName: 'XSRF-TOKEN', // default

// `xsrfHeaderName` is the name of the http header that carries the xsrf token value
  xsrfHeaderName: 'X-XSRF-TOKEN', // default

// `onUploadProgress` 允许为上传处理进度事件
  onUploadProgress: function (progressEvent) {
    // Do whatever you want with the native progress event
  },

// `onDownloadProgress` 允许为下载处理进度事件
  onDownloadProgress: function (progressEvent) {
    // 对原生进度事件的处理
  },

// `maxContentLength` 定义允许的响应内容的最大尺寸
  maxContentLength: 2000,

// `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject  promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，promise 将被 resolve; 否则，promise 将被 rejecte
  validateStatus: function (status) {
    return status >= 200 && status < 300; // default
  },

// `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目
  // 如果设置为0，将不会 follow 任何重定向
  maxRedirects: 5, // default

// `socketPath` defines a UNIX Socket to be used in node.js.
  // e.g. '/var/run/docker.sock' to send requests to the docker daemon.
  // Only either `socketPath` or `proxy` can be specified.
  // If both are specified, `socketPath` is used.
  socketPath: null, // default

// `httpAgent` 和 `httpsAgent` 分别在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理。允许像这样配置选项：
  // `keepAlive` 默认没有启用
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),

// 'proxy' 定义代理服务器的主机名称和端口
  // `auth` 表示 HTTP 基础验证应当用于连接代理，并提供凭据
  // 这将会设置一个 `Proxy-Authorization` 头，覆写掉已有的通过使用 `header` 设置的自定义 `Proxy-Authorization` 头。
  proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  },

// `cancelToken` 指定用于取消请求的 cancel token
  // （查看后面的 Cancellation 这节了解更多）
  cancelToken: new CancelToken(function (cancel) {
  })
}
```

#### （4） 请求和响应拦截

拦截器：`axios`比较强大的功能之一，前端项目中给后端数据接口发送请求时，可以被`axios`拦截器拦截，可以拦截请求也可以拦截响应

- 拦截请求：验证用户请求权限，验证用户身份信息
- 拦截响应：针对响应数据进行格式化处理、条件过滤

```js
// 请求拦截器
axios.interceptors.request.use( request => {
    // 拦截到请求，针对请求进行处理
    return request
})

// 响应拦截器
axios.interceptors.response.use( response => {
    // 拦截到响应数据，针对响应数据进行处理
    return rseponse
})
```

> `axios`拦截器和导航守卫的区别
>
> - 拦截器，拦截的是前端项目发送给数据接口的请求
> - 导航守卫，拦截的是页面切换路由请求

#### （5） 响应选项

`axios`针对服务器返回的数据，进行了自己的封装

```json
{
  // `data` 由服务器提供的响应：包含的是服务器返回的真实数据【关注】
  data: {},

// `status` 来自服务器响应的 HTTP 状态码
  status: 200,

// `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',

// `headers` 服务器响应的头
  headers: {},

// `config` 是为请求提供的配置信息
  config: {},
 // 'request'
  // `request` is the request that generated this response
  // It is the last ClientRequest instance in node.js (in redirects)
  // and an XMLHttpRequest instance the browser
  request: {}
}
```

#### （6） 请求取消【了解】

项目中，主页组件切换到列表组件过程中，主页组件打开时发送了给后端的数据请求，还没有获取到服务器响应的数据时，用户切换了组件显示列表页面；主页发送的异步请求已经没有返回数据的必要，我们需要主动的通过`axios`取消前面的请求节省系统资源

```js
const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
     // 处理错误
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// 取消请求（message 参数是可选的）
source.cancel('Operation canceled by the user.');
```

### 4、`axios`实战

#### （1） 创建项目

执行命令创建项目

```shell
vue create app01
```

创建项目

![image-20220615111414270](assets/image-20220615111414270.png)

选择自定义创建方式

![image-20220615111440808](assets/image-20220615111440808.png)

选择项目依赖：按上下方向键移动光标，按空格键选择/取消选择

![image-20220615111507235](assets/image-20220615111507235.png)

选择`Vue`版本，推荐`2.x`

![image-20220615111628584](assets/image-20220615111628584.png)

选择路由匹配模式：是否使用`history`，输入n

![image-20220615111651739](assets/image-20220615111651739.png)

选择代码检查模块，使用默认的第一个即可

![image-20220615111711655](assets/image-20220615111711655.png)

配置生效方式：两个都勾选上，保存文件或者进行提交修改时自动生效

![image-20220615111742480](assets/image-20220615111742480.png)

配置文件生成和管理方式：选择第一个，让每个模块的配置文件分离管理

![image-20220615111810307](assets/image-20220615111810307.png)

是否保留上述配置：不保留

![image-20220615111834817](assets/image-20220615111834817.png)

启动项目，测试项目是否正常：

```shell
npm run serve
```

#### （2） 管理菜单数据

创建菜单路由组件，完成组件路由规则处理

#### （3） 安装依赖模块

打开项目，执行命令安装模块

```shell
npm i axios -S
```

#### （4） 菜单组件中请求数据

```vue

<template>
  <div class="menu-container">
    <h2>菜单管理</h2>
    <ul>
      <li v-for="menu in menuList" :key="menu.id">
        菜单名称：{{  menu.title }},
        菜单图标：{{  menu.icon }},
        菜单链接：{{ menu.href }}
        <a href="">查看详情</a>
      </li>
    </ul>
  </div>
</template>

<style>

</style>
```

### 5、`UI`库

`Vue`开发的项目中，经常配合使用的UI库如：`ElementUI`、`Vant`....

#### （1） `EUI`概述和安装

官方文档：

```
https://element.eleme.cn/#/zh-CN
```

前端项目中安装ui库模块：

```shell
npm i element-ui -S
```

#### （2） 项目中配置

编辑入口模块：`src/main.js`

```js
import Vue from 'vue'
import App from './App.vue'
import router from './router'

import ElementUI from 'element-ui'  // 引入ui模块
import 'element-ui/lib/theme-chalk/index.css' // 引入主题文件

Vue.use(ElementUI) // 挂载

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

```

编辑入口模块`App.vue`，添加基础样式，如按钮，测试`ElementUI`是否生效

```vue
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/menus">Menus</router-link> |
      <router-link to="/about">About</router-link>
    </div>
      
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>

<router-view/>
  </div>
</template>
```

#### （3） 页面布局UI

找到`ElementUI`的布局容器组件：`el-Container`组件，复制对应的代码

```vue
<el-container>
  <el-aside width="200px">Aside</el-aside>
  <el-container>
    <el-header>Header</el-header>
    <el-main>Main</el-main>
    <el-footer>Footer</el-footer>
  </el-container>
</el-container>
```

将布局的代码复制到`App.vue`中

```vue
<template>

</template>
<style>
*{margin: 0; padding: 0; box-sizing: border-box;}
html, body, #app{height: 100%; width: 100%;}

/* 复制粘贴了 容器布局样式代码 */
    
</style>
```

#### （4） 侧边栏导航

找到`ElementUI`的导航菜单：`navigation`，复制添加导航代码

编辑`App.vue`

```vue

<template>
  <div id="app">
    <el-container>
      <el-aside width="200px">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          router
        >
          <el-menu-item index="/">
            <i class="el-icon-s-home"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-menu-item index="/menus">
            <i class="el-icon-s-grid"></i>
            <span slot="title">菜单管理</span>
          </el-menu-item>
          <el-menu-item index="/about">
            <i class="el-icon-s-opportunity"></i>
            <span slot="title">关于我们</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>
          <router-view/>
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </div>
</template>

```

#### （5） 完善侧边栏

添加logo，设置宽度

#### （6） 菜单数据展示

找到`ElementUI`里面的表格组件，将菜单数据通过表格组件展示

#### （7） 分页展示数据

找到`ElementUI`里面的分页组件，将菜单数据通过表格组件展示

完善一个完整分页效果：具体开发过程参考视频教程

#### （8） 新增菜单数据

通过弹窗实现新增：找到`ElementUI`和弹窗有关的组件

大牧莫邪/bz2107web

簡介

發行版

貢獻者

語言

近期動態

大牧莫邪/bz2107web .gitee-modal { width: 500px !important; }

簡介

發行版

貢獻者

語言

近期動態

搜索幫助

大牧莫邪/bz2107web