11.16 Vue element
Ajax
概念：Asynchronous JavaScript Anderson XML，异步的JavaScript和XML。
作用：
- 数据交换：通过Ajax 可以给服务器发送请求，并收取服务器相应的数据。
- 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。
同步与异步：
原生Ajax
1.准备数据地址：https://mock.apifox.cn/m1/3128855-0-default/emp/list
2.创建XMLHttpRequest对象：用于和服务器交换数据
3.向服务器发送请求
4.获取服务器响应数据
Axios
介绍：Axios 对原生的Ajax进行了封装，简化书写，快速开发。
官网： Axios中文文档 | Axios中文网
•Axios入门
1.引入Axios的js文件
2.使用Axios发送请求，并获取响应结果
链接：https://mock.apifox.cn/m1/3128855-0-default/emp/list
案例
1. 数据准备的url： http://yapi.smart-xwork.cn/mock/169327/emp/list
2. 在页面加载完成后，自动发送异步请求，加载数据，渲染展示页面(性别：1 代表男，2 代表女)
<!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><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("https://mock.apifox.cn/m1/3128855-0-default/emp/list").then(result => {this.emps = result.data.data;})}});
</script>
</html>前后端分离开发
前后端混合开发
当前最为主流的开发模式：前后端分离
YApi
介绍：YApi 是高效、易用、功能强大的 api 管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务
前端工程化
前端工程化：是指在企业级的前端项目开发中，把前端开发所需要的工具、技术、流程、经验进行规范化、标准化。
-
环境准备
vue
介绍：Vue-cli 是官方提供的一个脚手架，用于快速生成一个Vue的项目模板
Vue-cli提供了如下功能：
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
依赖环境：NodeJS
安装NodeJS
安装vue-cli
-
Vue项目简介
Vue项目-创建
命令行：
图形化界面：
Vue项目-目录结构
- 基于Vue脚手架创建出来的工程，有标准的目录结构，如下：
Vue项目-启动
Vue项目-配置端口
-
Vue项目开发流程
Vue项目开发流程
Vue的组件文件以 .vue结尾，每个组件由三个部分组成：<template> 、<script>、<style> 。
Vue组件库Element
什么是Element
- Element：是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。
- 组件：组成网页的部件，例如 超链接、按钮、图片、表格、表单、分页条等等。
- 官网：https://element.eleme.cn/#/zh-CNListener
快速入门
安装ElementUI组件库 （在当前工程的目录下），在命令行执行指令：
引入ElementUI组件库
访问官网，复制组件代码，调整
常见组件
常见组件-表格
Table 表格：用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。
常见组件-分页
Pagination 分页：当数据量过多时，使用分页分解数据。
常见组件-对话框
Dialog 对话框：在保留当前页面状态的情况下，告知用户并承载相关操作。
常见组件-表单
Form 表单：由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。
案例
根据页面原型完成员工管理页面开发，并通过Axios完成数据异步加载。
服务端数据获取地址：https://mock.apifox.cn/m1/3128855-0-default/emp/list
步骤：
- 创建页面，完成页面的整体布局规划
- 布局中各个部分的组件实现
- 列表数据的异步加载，并渲染展示
Vue 路由
前端路由：URL中的hash（#号）与组件之间的对应关系。
Vue Router
介绍：Vue Router是Vue的官方路由。
组成：
- VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件
- <router-link：请求链接组件，浏览器会解析成<a>
- <router-view：动态视图组件，用来渲染展示与路由路径对应的组件。
案例：通过Vue的路由VueRouter完成左侧菜单栏点击切换效果。
打包部署
打包：npm 脚本直接打包
部署
Nginx
介绍：lNginx是一款轻量级的Web服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。
官网：nginx
部署：将打包号的dist目录下的文件，复制到nginx安装目录的html目录下。
启动：双击 nginx.exe 文件即可，Nginx服务器默认占用 80 端口号
Nginx默认占用80端口号，如果80端口号被占用，可以在nginx.conf中修改端口号。(netstat –ano | findStr 80) 注：在conf中的nginx.config修改端口为90
访问：http://localhost:90
