JavaWeb——003Axios & Vue组件库（Element）

目录

一、Ajax

1、同步与异步​编辑

2、原生Ajax（繁琐）​编辑

2.1、写一个简易的Ajax

3、Axios（推荐使用）​编辑

3.1、Axios入门

3.2、Axios请求方式别名

3.3、案例：基于Vue及Axios完成数据的动态加载展示​编辑

二、前后端分离开发

1、前后端开发模式

1.1、前后端混合开发

1.2、前后端分离开发（主流模式）and前后端分离开发流程

2、YAPI（接口文档的管理平台）

三、前端工程化

1、Vue脚手架环境准备

1.1、安装NodeJS

2、Vue项目简介

2.1、Vue项目创建

2.2、Vue项目目录结构

2.3、Vue项目启动（serve）

2.4、修改Vue项目端口（vue.config.js）

3、Vue项目开发流程

3.1、Vue页面的显示过程

3.2、Vue的组件（template\script\style）

四、Vue组件库Element

1、什么是Element？

2、Element快速入门

2.1、安装ElementUI组件库

2.2、引入ElementUI组件库

views目录下新建目录（element）：​编辑

2.3、定义Vue组件（内容可复制官方文档）

3、常见组件

3.1、表格（Table）​编辑

3.2、分页组件（Pagination）

3.3、对话框组件（Dialog）

3.4、表单组件（Form）​编辑

4、案例：根据页面原型完成员工管理页面的开发

4.1、创建页面，并完成页面的整体布局规划

4.2、布局中各个组件的实现

4.3、列表数据的异常加载与渲染展示

五、Vue路由

1、前端路由

2、Vue Router

2.1、安装vue-router

2.2、定义路由配置信息（index.js）

3、案例：通过Vue的路由VueRouter完成左侧菜单栏点击切换效果

4、Bug：默认访问路由路径为/

六、打包部署

1、如何打包？

2、如何部署？（Nginx）

2.1、将 dist 目录下的文件复制到 nginx 安装目录

2.2、启动nginx.exe​编辑

2.3、扩展：反向代理、负载均衡

一、Ajax

1、同步与异步

2、原生Ajax（繁琐）

代码可参考W3School中的参考手册

效果：（查看所有的异步请求，可以点击XHR）

2.1、写一个简易的Ajax

function ajax(url) {const p = new Promise((resolve, reject) => {const xhr = new XMLHttpRequest();xhr.open('GET', url, true)xhr.onreadystatechange = () => {if(xhr.readyState === 4){if((xhr.status >= 200 && xhr.status  console.log(res)).catch(err => console.log(err))

3、Axios（推荐使用）

3.1、Axios入门

代码示例：

function getData(){//1. 创建XMLHttpRequest var xmlHttpRequest= new XMLHttpRequest();//2. 发送异步请求xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list');xmlHttpRequest.send();//发送请求//3. 获取服务响应数据xmlHttpRequest.onreadystatechange = function(){if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;}}}

3.2、Axios请求方式别名

代码示例：

function get(){//通过axios发送异步请求-get// axios({// method: "get",// url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"// }).then(result => {// console.log(result.data);// })axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {console.log(result.data);})}function 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);// })axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result => {console.log(result.data);})}

3.3、案例：基于Vue及Axios完成数据的动态加载展示

代码：

编号
姓名
图像
性别
职位
入职日期
最后操作时间
{{index + 1}}
{{emp.name}}
男女
{{emp.job}}
{{emp.entrydate}}
{{emp.updatetime}}
new Vue({ el: "#app", data: { emps:[] }, mounted () {//发送异步请求,加载数据axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {this.emps = result.data.data;}) }});

二、前后端分离开发

1、前后端开发模式

1.1、前后端混合开发

1.2、前后端分离开发（主流模式）and前后端分离开发流程

2、YAPI（接口文档的管理平台）

YAPI已经暂停使用

三、前端工程化

1、Vue脚手架环境准备

1.1、安装NodeJS

安装过程可参考：NodeJS安装文档.md

2、Vue项目简介

2.1、Vue项目创建

2.2、Vue项目目录结构

2.3、Vue项目启动（serve）

2.4、修改Vue项目端口（vue.config.js）

3、Vue项目开发流程

3.1、Vue页面的显示过程

render 是一个函数，它的作用就是将 App 当中定义的视图创建出对应的虚拟DOM 元素，然后挂载到 #app 这个区域

3.2、Vue的组件（template\script\style）

template相当于HTML部分，script就是js部分，style就是css的样式

在Vue项目的开发中，其实main.js以及index.html很少会去操作，主要修改的都是.vue文件

四、Vue组件库Element

官方文档：https://element.eleme.cn/#/zh-CN/component/installation

1、什么是Element？

为什么要学Element？主要是方便和优美

2、Element快速入门

2.1、安装ElementUI组件库

npm install element-ui@2.15.3

会被安装在node_modules目录下

2.2、引入ElementUI组件库

views目录下新建目录（element）：

默认显示根组件（App.vue）中的内容，所以要想显示其它组件，需要在根组件中进行设置：在template中定义element-view标签，下方的import语句就会自动导入

代码

默认按钮主要按钮成功按钮信息按钮警告按钮危险按钮export default { }

2.3、定义Vue组件（内容可复制官方文档）

views目录下新建目录（element）：

默认按钮主要按钮成功按钮信息按钮警告按钮危险按钮

默认显示根组件（App.vue）中的内容，所以要想显示其它组件，需要在根组件中进行设置：在template中定义element-view标签，下方的import语句就会自动导入

效果显示：

3、常见组件

3.1、表格（Table）

使用步骤：

Ⅰ、从官网复制代码到 ElementView.vue ：

tableData: [{date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1517 弄",},{date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1519 弄",},{date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",},],

3.2、分页组件（Pagination）

layout属性：

事件：size-change与current-change：

methods: {handleSizeChange: function (val) {alert("每页记录数变化" + val);},handleCurrentChange: function (val) {alert("页码发生变化" + val);}},};

3.3、对话框组件（Dialog）

打开嵌套表格的 Dialog

数据模型：

 gridData: [{date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},],dialogTableVisible: false,

3.4、表单组件（Form）

打开嵌套Form的Dialog Dialog-提交取消

数据模型

form: {name: '',region: '',date1: '',date2: '', },

方法：

通过JSON.stringify()将对象转为字符串

onSubmit :function(){//JSON>stringifyjson对象转字符串alert(JSON.stringify(this.form))}

效果：

4、案例：根据页面原型完成员工管理页面的开发

实现步骤：

4.1、创建页面，并完成页面的整体布局规划

创建EmpView.vue文件，并在根组件中进行声明和导入

待续~

4.2、布局中各个组件的实现

4.3、列表数据的异常加载与渲染展示

安装Axios

npm install axios

导入Axios：

在EmpView.vue文件中导入：

import axios from "axios";

发送异步请求：

yapi不可以用了，详见ajax地址访问不了-解决方案文件夹

mounted() {//发送异步请求,获取数据axios.get("http://localhost:10010/emp/list").then((result) => {this.tableData = result.data.data;});},

效果展示：

解决图片与性别展示（使用插槽 slot-scope）

row指代这一行所有的字段值

效果展示

五、Vue路由

1、前端路由

2、Vue Router

2.1、安装vue-router

安装（创建Vue项目时已选择）

npm install vue-router@3.5.1

2.2、定义路由配置信息（index.js）

如果你要访问的是/emp路径，那么你要导入的就是EmpView.vue组件，/dept同理：

3、案例：通过Vue的路由VueRouter完成左侧菜单栏点击切换效果

示例代码：

在组件的template中的对应位置添加标签：

tlias 智能学习辅助系统系统信息管理部门管理员工管理

在根组件中添加对应的标签：

4、Bug：默认访问路由路径为/

const routes = [{path: '/emp',name: 'emp',component: () => import('../views/tlias/EmpView.vue')},{path: '/dept',name: 'dept',component: () => import('../views/tlias/DeptView.vue')},{path: '/',redirect: '/dept'}]

六、打包部署

1、如何打包？

直接运行build 即可打包，打包生成的文件将放入dist

效果展示

打包后的文件：

2、如何部署？（Nginx）

2.1、将 dist 目录下的文件复制到 nginx 安装目录

2.2、启动nginx.exe

更换 nginx 的端口号

config目录 -> nginx.conf：

找到默认端口，将其改为90：

访问项目

2.3、扩展：反向代理、负载均衡

反向代理可参考：实现nginx反向代理（附nginx教程）

负载均衡可参考：Nginx如何优雅的实现负载均衡