P34 Ajax介绍
Ajax:Asynchroous JavaScript And XML，异步的JS和XML
JS网页动作，XML一种标记语言，存储数据，
作用：
-
数据交换：通过Ajax给服务器发送请求， 并获取服务器响应的数据
-
异步交互：在不重新加载整个页面的情况下，与服务器交换数据并实现更新部分网页的技术，例如：搜索
联想、用户名是否可用的校验等等。
同步与异步：
-
同步：服务器在处理中客户端要处于等待状态，输入域名，点击某个超链接等是同步操作
-
异步：服务器在处理中客户端无需等待，也可以执行其他操作。
原生Ajax:（繁琐，现在常使用的是基于原生Ajax封装的技术，例如Axios）
-
准备数据地址，前后端交互主流数据格式就是json
-
创建XMLHttpRequest对象，用于和服务器交换数据
-
向服务器发送请求
-
获取服务器响应数据
例如：
function getData() {
// 创建XMLHttpRequest
var xmlHttpRequest = new XMLHttpRequest();
// 发送异步请求
xmlHttpRequest.open('GET', '');
// 获取服务器响应数据
xmlHttpRequest.onreadystatechange = function(){
if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
}
}
}
可以查看官方文档，readyState为4表示请求已2完成并且响应已就绪。
status为返回请求的状态号，
-
200为OK
-
403为Forbidden
-
404为Not Found
XHR就是XMLHttpRequest的简写，代表的就是异步请求。
P35 Ajax-Axios2
对原生的Ajax进行封装，简化书写，快速开发。
使用方式：
-
引入Axios的js文件
-
使用其发送请求，并获取响应结果
例如：
function get(){
// 通过axios发送异步请求get
axios({
method: "get",
url: "https://dev.usemock.com/65dabfacc87ce4342e151249/ajax/01",
}).then(result => {
// 成功的回调函数
console.log(result.data);
})
}
Axios请求方式别名：
-
axios.get()
-
axios.delete()
-
axios.post()
-
axios.put()
因此上述示例代码可以写为：
axios.get("").then((result)=>{
console.log(result.data);
});
案例：基于Vue和Axios完成数据的动态加载展示
P36 前后端分离
在前端工程发起异步请求请求后端工程，处理完毕后返回给前端工程。
前后端开发遵守的开发规范定义在接口文档当中，将接口理解为一个业务功能，
下面是一个接口文档的示例：
接口文档-示例
1 根据ID查询员工
1.1 基本信息
请求路径：/emp
请求方式：GET
接口描述：该接口用于根据ID查询员工信息
1.2 请求参数
参数说明：
| 参数名 | 类型 | 是否必须 | 备注 |
|---|---|---|---|
| id | number | 必须 | 员工ID |
请求样例：
GET http://localhost:8080/emp?id=15
1.3 响应数据
参数格式：application/json
参数说明：
| 名称 | 类型 | 是否必须 | 备注 | 其他信息 |
|---|---|---|---|---|
| code | number | 必须 | 响应码, 1 成功 , 0 失败 | |
| msg | string | 非必须 | 提示信息 | |
| data | object | 必须 | 返回的数据 | |
| - id | number | 非必须 | id | |
| - name | string | 非必须 | 姓名 | |
| - gender | number | 非必须 | 性别 , 1 男 ; 2 女 | |
| - image | string | 非必须 | 图像 | |
| - job | number | 非必须 | 职位 | |
| - entrydate | string | 非必须 | 入职日期 | |
| - updateTime | string | 非必须 | 更新时间 |
响应数据样例：
{
"code": 1,
"message": "success",
"data": {
"id": 15,
"name": "谢逊",
"image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/1.jpg",
"gender": 1,
"job": "班主任",
"entrydate": "2008-05-09",
"updatetime": "2022-10-01 12:00:00"
}
}
如何维护接口文档
-
在线：利用接口管理平台进行维护
-
离线
接口文档通过产品经理经过原型和需求分析得来，
开发流程
-
需求分析
-
API接口文档
-
前后端并行开发
-
测试
-
前后端联调测试
接口文档管理平台-YAPI
https://yapi.pro/
功能：
-
API接口管理
-
Mock服务：测试接口，生成模拟测试数据
平台使用步骤：
-
添加项目
-
添加分类
-
添加接口
创建好接口后会有一个Mock地址，可以访问它得到测试数据集。
在高级Mock里面可以设置期望返回的数据。
P37 前端工程化-环境准备
实际的前端开发：
-
模块化：将JS、CSS等封装为模块可复用
-
组件化：UI结构、样式、行为
-
规范化：目录结构、编码、接口
-
自动化：构建、部署、测试
前端工程化：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。
环境准备
上述可以使用Vue脚手架，
Vue-cli是Vue官方提供的一个脚手架，用于快速生成一个Vue的项目模板
Vue-cli提供了如下功能：
-
统一的目录结构
-
本地测试
-
热部署：应用程序代码变动，不需要再次运行即可加载最新的程序
-
单元测试
-
集成打包上线
依赖环境:Node.js，前端工程化的运行环境
下载Node.js后安装，使用node -v查看是否配置好，
node.js中的包资源管理器
安装脚手架，npm install -g @vue/cli。
查询是否安装成功vue --version。
P38 前端工程化-Vue项目简介
创建有两种方式：
-
命令行：
vue create vue-project01 -
图形化界面：在cmd中输入
vue ui，打开Vue项目管理器
流程：
执行完成后就创建完成了，创建界面可以直接关掉了。
使用vs-code打开项目文件夹。
基于Vue脚手架创建出来的工程，有标准的目录结构：
-
node_modules：项目依赖包
-
public:项目静态文件
-
src:存放项目源代码
-
assets静态资源
-
components可重用的组件
-
router路由配置
-
views视图组件，页面
-
App.vue入口页面（根组件）
-
main.js入口js文件
-
-
package.json：模块基本信息，项目开发所需模块及版本信息
-
vue.config.js：保存vue配置的文件，例如代理、端口的配置等。
运行Vue项目：
-
使用图形化界面
-
命令行
npm run serve，
运行成功后默认是8080端口，而后面的Tomcat部署也用到8080，所以更改前端项目端口的方法：
P39 前端工程化-Vue项目开发流程
import 引入模块
export 将函数或对象导出为模块
render方法将导入的app视图创建出来的虚拟Dom元素挂载到app页面当中
new Vue({
router,
render: h => h(App)
}).$mount('#app')
// 和下面的类似
// 如果属性名和属性一致，:后面可以省略
new Vue({
el: "#app",
router: router,
render: h => h(App)
})
vue结尾的文件可称为组件文件，每个组件由三个部分组成:
- < template>
- < script>
- < style>
创建script后，输入data，快捷生成data结构，可在return 中定义数据模型
P40 Element-快速入门
Element是基于Vue2.0的桌面端组件库。
使用Element：
-
安装组件库，
npm install element-ui@2.15.33 -
引入组件库
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI); // 表示使用该组件
- 访问官网，复制组件代码，调整
假如创建了一个.vue组件，需要在App.vue中引入新建的组件。
P48 vue路由
前端路由：URL中的hash(#号)与组件之间的对应关系。
Vue Router:Vue官方路由
组成：
-
VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件
-
：请求链接组件，浏览器会解析成
-
：动态视图组件，用来渲染展示与路由路径对应的组件
安装Vue路由：npm install vue-router@3.5.1
redirect重定向。
P49 打包部署
将前端工程和后端工程分开部署在服务器上
前端服务器较流行的是nginx，
两步操作：
-
打包：执行build命令，生成dist文件夹，
npm run build -
部署：将打包好的dist目录文件复制到nginx安装目录的html目录下
Nginx：
Nginx是一款轻量级的web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器，
其特点是占有内存少，并发能力强，在各大互联网公司都有广泛应用。
启动nginx，双击nginx.exe，服务器默认占用80号端口，配置nginx端口号在conf文件夹中找到nginx.conf。
