【Day 3】Ajax + Vue 项目、路由 + Nginx

1 Ajax

Asynchronous JavaScript And XML

异步的 JavaScript 和 XML

作用：

数据交换

通过 Ajax 可以给服务器发送请求，并获取服务器响应的数据

异步交互

可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等

1.1 原生的异步请求

使用 XMLHttpRequest 进行异步请求：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><input type="button" value="get data" onclick="getData()"><div id="div1"></div>
</body>
<script>function getData() {// 第一步 创建 XMLHttpRequestvar xmlHttpRequest = new XMLHttpRequest();// 第二步 发送异步请求xmlHttpRequest.open("GET", "https://mock.apifox.cn/m1/3128855-0-default/emp/list");xmlHttpRequest.send();xmlHttpRequest.onreadystatechange = function () {if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {document.getElementById("div1").innerHTML = xmlHttpRequest.responseText;}}}
</script></html>

这是 HTML 自带的异步请求，比较繁琐

1.2 Axios

Axios 对原生的 Ajax 进行了封装，简化书写，快速开发

Axios 用法：

1. 引入 Axios

<script src="js/axios-0.18.0.js"></script>

2. 使用 Axios 发送请求，并获取响应结果

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="JS/axios-0.18.0.js"></script>
</head><body><input type="button" value="get data" onclick="getData()"><br><br><input type="button" value="delete data" onclick="deleteData()">
</body>
<script>function getData() {axios({method: "get",url: "https://mock.apifox.cn/m1/3128855-0-default/emp/list",}).then(result => {console.log(result.data);})}function deleteData() {axios({method: "post",url: "https://mock.apifox.cn/m1/3128855-0-default/emp/deleteById",data: "id=1"}).then(result => {console.log(result.data);})}</script></html>

这和原生方法是一致的

1.3 Axios 请求方式别名

axios.get(url[,config])
axios.delete(url[,config])
axios.post(url[,data[,config]])
axios.put(url[,data[,config]])

注：方括号为可选参数

这样可以对上面进行简化：

发送 get 请求

axios.get("https://mock.apifox.cn/m1/3128855-0-default/emp/list").then((result)=>{console.log(result.data);})

发送 post 请求

axios.post("https://mock.apifox.cn/m1/3128855-0-default/emp/deleteById","id=1").then((result)=>{console.log(result.data);})

2 案例一

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="JS/axios-0.18.0.js"></script><script src="JS/vue.js"></script><style>table{border-collapse: collapse;}th,td{border: 1px solid black;text-align: center;}</style>
</head><body><table id="app"><tr><th>id</th><th>name</th><th>img</th><th>gender</th><th>job</th><th>entrydate</th><th>updatetime</th></tr><tr v-for="(emp, index) in emps"><td>{{index+1}}</td><td>{{emp.name}}</td><td><img v-bind:src="emp.image" width="30px" height="30px"></td><td><span v-if="gender == 1">male</span><span v-else>female</span></td><td>{{emp.job}}</td><td>{{emp.entrydate}}</td><td>{{emp.updatetime}}</td></tr></table>
</body>
<script>new Vue({el: "#app",data: {emps: []},mounted() {// 发送异步请求，加载数据axios.get("https://mock.apifox.cn/m1/3128855-0-default/emp/list").then((result) => {this.emps = result.data.data;})},})
</script></html>

3 YAPI

接口管理平台

4 前端工程化

Vue-cli：Vue 官方提供的一个脚手架，用于快速生成一个 Vue 的项目模板

功能：

统一的目录结构
本地调试
热部署
单元测试
继承打包上线

依赖环境：NodeJS

4.1 Vue 项目

在 cmd 中 vue ui，就在当前文件夹下创建了 vue project

vue项目的目录结构：

Vue项目的启动：

运行：

Local 的 URL 打开是：

而且在 APP.vue 中进行修改，保存之后，页面也会更改----->热部署

但是默认端口号是8080，与后面的 Tomcat 冲突，所以现在改变一下 Vue 的端口号：

在 config 下增加：

4.2 Vue 开发流程

注：

.$mount '#app' 和之前的 el 是等价的，都是挂载到 DOM 元素
router:router，如果对象和对象值相同，则可以省略冒号和值
h 是一个虚拟 DOM 元素

.vue 文件：

4.3 Vue 的 Element 组件库

Element 是基于 Vue 2.0 的桌面端组件库

组件：组成网页的部件，例如超链接、按钮、图片、表格、表单、分页条等

Element - The world's most popular Vue UI framework

注：安装时在当前目录下安装，右键-在集成终端打开，然后输入npm install ...

还有很多组件都在官方文档

5 案例一

EmpView.vue 文件

<template><div><el-container style="height: 500px; border: 1px solid #eee"><el-header style="font-size: 40px; background-color: rgb(238, 241, 246)">tlias 智能学习辅助系统</el-header><el-container><el-aside width="230px" style="border: 1px solid #eee"><el-menu :default-openeds="['1', '3']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>系统信息管理</template><el-menu-item index="1-1">部门管理</el-menu-item><el-menu-item index="1-2">员工管理</el-menu-item></el-submenu></el-menu></el-aside><el-main><!-- 表单 --><el-form :inline="true" :model="searchForm"><el-form-item label="姓名"><el-input v-model="searchForm.name" placeholder="姓名"></el-input></el-form-item><el-form-item label="性别"><el-select v-model="searchForm.gender" placeholder="性别"><el-option label="男" value="1"></el-option><el-option label="女" value="2"></el-option></el-select></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item><el-form-item label="入职日期"><div class="block"><span class="demonstration">从</span><el-date-picker v-model="searchForm.entrydate" type="daterange" range-separator="至"start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker></div></el-form-item></el-form><!-- 表格 --><el-table :data="tableData" border><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="image" label="图像"><template slot-scope="scope"><img :src="scope.row.image" width="80px"></template></el-table-column><el-table-column label="性别"><template slot-scope="scope">{{ scope.row.gender==1?"男":"女" }}</template></el-table-column><el-table-column prop="position" label="职位"></el-table-column><el-table-column prop="entrydate" label="入职日期"></el-table-column><el-table-column prop="updatetime" label="最后操作时间"></el-table-column><el-table-column label="操作"><el-button type="primary" size="mini">编辑</el-button><el-button type="danger" size="mini">编辑</el-button></el-table-column></el-table><br><!-- 分页条 --><el-pagination background layout="prev, pager, next" :total="1000"></el-pagination></el-main></el-container></el-container></div>
</template><script>
import axios from 'axios';export default {data() {return {tableData: [],searchForm: {name: "",gender: "",entrydate: []}}},methods: {onSubmit: function () {alert("submit");}},mounted() {axios.get("https://mock.apifox.cn/m1/3128855-0-default/emp/list").then((result) => {this.tableData = result.data.data;})}
}
</script><style></style>