1 Ajax
1.1 Ajax介绍
1.1.1 Ajax概述
我们前端页面中的数据，如下图所示的表格中的学生信息，应该来自于后台，那么我们的后台和前端是互不影响的2个程序，那么我们前端应该如何从后台获取数据呢？因为是2个程序，所以必须涉及到2个程序的交互，所以这就需要用到我们接下来学习的Ajax技术。
Ajax: 全称Asynchronous JavaScript And XML，异步的JavaScript和XML。
作用有如下2点：
- 与服务器进行数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
- 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。
1.3 Axios
上述原生的Ajax请求的代码编写起来还是比较繁琐的，所以接下来我们学习一门更加简单的发送Ajax请求的技术Axios 。Axios是对原生的AJAX进行封装，简化书写。Axios官网是：https://www.axios-http.cn
1.3.1 Axios的基本使用
Axios的使用比较简单，主要分为2步：
-
引入Axios文件
<script src="js/axios-0.18.0.js"></script> -
使用Axios发送请求，并获取响应结果，官方提供的api很多，此处给出2种，如下
-
发送 get 请求
axios({ method:"get", url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan" }).then(function (resp){ alert(resp.data); }) -
发送 post 请求
axios({ method:"post", url:"http://localhost:8080/ajax-demo1/aJAXDemo1", data:"username=zhangsan" }).then(function (resp){ alert(resp.data); });
axios()是用来发送异步请求的，小括号中使用 js的JSON对象传递请求相关的参数：
- method属性：用来设置请求方式的。取值为 get 或者 post。
- url属性：用来书写请求的资源路径。如果是 get 请求，需要将请求参数拼接到路径的后面，格式为： url?参数名=参数值&参数名2=参数值2。
- data属性：作为请求体被发送的数据。也就是说如果是 post 请求的话，数据需要作为 data 属性的值。
then() 需要传递一个匿名函数。我们将 then()中传递的匿名函数称为 回调函数，意思是该匿名函数在发送请求时不会被调用，而是在成功响应后调用的函数。而该回调函数中的 resp 参数是对响应的数据进行封装的对象，通过 resp.data 可以获取到响应的数据。
-
1.3.2 Axios快速入门
1.引入js文件
2.使用Axios发送请求并获取响应结果
get请求
//通过axios发送异步请求-get
axios({
method: "get",
url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"
}).then(result => {
console.log(result.data);
})
post请求代码如下：
//通过axios发送异步请求-post
axios({
method: "post",
url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
data: "id=1"
}).then(result => {
console.log(result.data);
})
1.3.3 请求方法的别名
Axios还针对不同的请求，提供了别名方式的api,具体如下：
| 方法 | 描述 |
|---|---|
| axios.get(url [, config]) | 发送get请求 |
| axios.delete(url [, config]) | 发送delete请求 |
| axios.post(url [, data[, config]]) | 发送post请求 |
| axios.put(url [, data[, config]]) | 发送put请求 |
我们目前只关注get和post请求，所以在上述的入门案例中，我们可以将get请求代码改写成如下：
axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
console.log(result.data);
})
post请求改写成如下：
axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result => {
console.log(result.data);
})
案例
-
步骤：
- 首先创建文件，提前准备基础代码，包括表格以及vue.js和axios.js文件的引入
- 我们需要在vue的mounted钩子函数中发送ajax请求，获取数据
- 拿到数据，数据需要绑定给vue的data属性
- 在<tr>标签上通过v-for指令遍历数据，展示数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax-Axios-案例</title>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<table border="1" cellspacing="0" width="60%">
<tr>
<th>编号</th>
<th>姓名</th>
<th>图像</th>
<th>性别</th>
<th>职位</th>
<th>入职日期</th>
<th>最后操作时间</th>
</tr>
**emp是自己随便命名的变量名，emps也是**
<tr align="center" v-for="(emp,index) in emps">
<td>{{index + 1}}</td>
<td>{{emp.name}}</td>
<td>
<img :src="emp.image" width="70px" height="50px">
</td>
<td>
<span v-if="emp.gender == 1">男</span>
<span v-if="emp.gender == 2">女</span>
</td>
<td>{{emp.job}}</td>
<td>{{emp.entrydate}}</td>
<td>{{emp.updatetime}}</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
emps:[]
},
mounted () {
//发送异步请求,加载数据
axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
console.log(result.data);
this.emps = result.data.data;
})
}
});
</script>
</html>
2 前后台分离开发
基于前后台分离开发的模式下，我们后台开发者开发一个功能的具体流程
- 需求分析：首先我们需要阅读需求文档，分析需求，理解需求。
- 接口定义：查询接口文档中关于需求的接口的定义，包括地址，参数，响应数据类型等等
- 前后台并行开发：各自按照接口文档进行开发，实现需求
- 测试：前后台开发完了，各自按照接口文档进行测试
- 前后段联调测试：前段工程请求后端工程，测试功能
3 前端工程化
3.1 前端工程化介绍
我们目前的前端开发中，当我们需要使用一些资源时，例如：vue.js，和axios.js文件，都是直接再工程中导入的
但是上述开发模式存在如下问题：
- 每次开发都是从零开始，比较麻烦
- 多个页面中的组件共用性不好
- js、图片等资源没有规范化的存储目录，没有统一的标准，不方便维护
所以现在企业开发中更加讲究前端工程化方式的开发，主要包括如下4个特点
- 模块化：将js和css等，做成一个个可复用模块
- 组件化：我们将UI组件，css样式，js行为封装成一个个的组件，便于管理
- 规范化：我们提供一套标准的规范的目录接口和编码规范，所有开发人员遵循这套规范
- 自动化：项目的构建，测试，部署全部都是自动完成
3.2 前端工程化入门
3.2.1 环境准备
我们的前端工程化是通过vue官方提供的脚手架Vue-cli来完成的，用于快速的生成一个Vue的项目模板。Vue-cli主要提供了如下功能：
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
我们需要运行Vue-cli，需要依赖NodeJS，NodeJS是前端工程化依赖的环境。所以我们需要先安装NodeJS，然后才能安装Vue-cli
创建Vue项目
图形化界面：通过命令先进入到图形化界面，然后再进行vue工程的创建
vue ui
首先，我们再桌面创建vue文件夹，然后双击进入文件夹，来到地址目录，输入cmd，然后进入到vue文件夹的cmd窗口界面
然后再当前目录下，直接输入命令vue ui进入到vue的图形化界面
然后我门选择创建按钮，在vue文件夹下创建项目
包管理器换成npm Git仓库关掉先不用
预设模板选择手动
然后再功能页面开启路由功能，叫Router
然后再配置页面选择语言版本（3.x换成2.x）和语法检查规范选（第一个）
然后创建项目（目前好像不保存预设模板）
最后我们只需要等待片刻，即可进入到创建创建成功的界面
目录结构介绍
node_modules：依赖包存放
public：静态文件存放
src：源代码
asseys静态资源
components可重用的组件
router路由配置
views视图组件（页面）
App.vue入口页面（根组件）
main.js入口js文件
...
package.json：模块基本信息
...
vue.config.js：保存vue配置的文件，如代理，端口的配置等
运行Vue项目
方式一：图形化界面vs-code下的NPM脚本（默认不显示，得调出来）下的第一个运行方式
方式二：当前目录下的命令行执行 npm run serve
补充：NPM脚本窗口调试出来
第一步：通过设置/用户设置/扩展/NPM更改NPM默认配置
然后重启VS Code，并且双击打开package.json文件，然后点击资源管理器处的3个小点，勾选npm脚本选项
对于8080端口，经常被占用，所以我们可以去修改默认的8080端口。我们修改vue.config.js文件的内容，添加如下代码：
devServer:{
port:7000
}
然后我们关闭服务器，并且重新启动，
3.2.3 Vue项目开发流程
那么我们访问的首页是index.html，但是我们找到public/index.html文件，打开之后发现，里面没有什么代码，但是能够呈现内容丰富的首页
我们仔细观察发现，index.html的代码很简洁，但是浏览器所呈现的index.html内容却很丰富，代码和内容不匹配，所以vue是如何做到的呢？接下来我们学习一下vue项目的开发流程。
对于vue项目，index.html文件默认是引入了入口函数main.js文件，我们找到src/main.js文件，其代码如下：
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
上述代码中，包括如下几个关键点：
- import: 导入指定文件，并且重新起名。例如上述代码
import App from './App.vue'导入当前目录下得App.vue并且起名为App - new Vue(): 创建vue对象
- $mount('#app');将vue对象创建的dom对象挂在到id=app的这个标签区域中，作用和之前学习的vue对象的le属性一致。
- router: 路由，详细在后面的小节讲解
- render: 主要使用视图的渲染的。
来到public/index.html中，我们删除div的id=app属性，打开浏览器，发现之前访问的首页一片空白，如下图所示，这样就证明了，我们main.js中通过代码挂在到index.html的id=app的标签区域的。
此时我们知道了vue创建的dom对象挂在到id=app的标签区域
我们打开App.vue,注意的是.vue结尾的都是vue组件。而vue的组件文件包含3个部分：
- template: 模板部分，主要是HTML代码，用来展示页面主体结构的
- script: js代码区域，主要是通过js代码来控制模板的数据来源和行为的
- style: css样式部分，主要通过css样式控制模板的页面效果得
<template>
<div id="app">
{{message}}
</div>
</template>
<script>
export default {
data(){
return {
"message":"hello world"
}
}
}
</script>
<style>
</style>