day03-Vue-Element

一、Ajax

1 Ajax 介绍

1.1 Ajax 概述

概念：Asynchronous JavaScript And XML，异步的 JavaScript 和 XML。

作用：

数据交换：通过 Ajax 可以给服务器发送请求，并获取服务器响应的数据。
异步交互：可以在 不重新加载整个页面 的情况下，与服务器交换数据并 更新部分网页 的技术，如：搜索联想、用户名是否可用的校验等等。

1.2 同步异步

在这里插入图片描述

2 原生 Ajax

准备数据地址：http://yapi.smart-xwork.cn/mock/169327/emp/list
创建 XMLHttpRequest 对象：用于和服务器交换数据
向服务器发送请求
获取服务器响应数据

<body><input type="button" value="获取数据" onclick="getData()"><div id="div1"></div></body><script>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;}}}
</script>

3 Axios

介绍：Axios 对原生的 Ajax 进行了封装，简化书写，快速开发。
官网： https://www.axios-http.cn/

3.1 Axios 的基本使用

（1）引入 Axios 的 js 文件

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

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

axios({method: "get",url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"
}).then((result) => {console.log(result.data);
});

axios({method: "post",url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",data: "id=1"
}).then((result) => {console.log(result.data);
});

axios() 是用来发送异步请求的，小括号中使用 js 的 JSON 对象传递请求相关的参数：

method 属性：用来设置请求方式的。取值为 get 或者 post。
url 属性：用来书写请求的资源路径。如果是 get 请求，需要将请求参数拼接到路径的后面，格式为： url?参数名=参数值&参数名2=参数值2。
data 属性：作为请求体被发送的数据。也就是说如果是 post 请求的话，数据需要作为 data 属性的值。
then() 需要传递一个匿名函数。我们将 then() 中传递的匿名函数称为 回调函数，意思是该匿名函数在发送请求时不会被调用，而是在成功响应后调用的函数。而该回调函数中的 resp 参数是对响应的数据进行封装的对象，通过 resp.data 可以获取到响应的数据。

3.2 请求方法的别名

1️⃣axios.get(url [, config])
2️⃣axios.delete(url [, config])
3️⃣axios.post(url [, data[, config]])
4️⃣axios.put(url [, data[, config]])

axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").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);
});

<!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>
</head>
<body><input type="button" value="获取数据GET" onclick="get()"><input type="button" value="删除数据POST" onclick="post()"></body>
<script>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);})}
</script>
</html>

3.3 案例

需求：基于Vue及Axios完成数据的动态加载展示

<!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("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {this.emps = result.data.data;})}});
</script>
</html>

二、前后台分离开发

1 前后台分离开发介绍

1.1 前后台混合开发

在这里插入图片描述

这种开发模式有如下缺点：

沟通成本高：后台人员发现前端有问题，需要找前端人员修改，前端修改成，再交给后台人员使用
分工不明确：后台开发人员需要开发后台代码，也需要开发部分前端代码。很难培养专业人才
不便管理：所有的代码都在一个工程中
不便维护和扩展：前端代码更新，和后台无关，但是需要整个工程包括后台一起重新打包部署。

1.2 前后端分离开发

在这里插入图片描述

2 YAPI

2.1 YAPI介绍

介绍：YApi 是高效、易用、功能强大的 api 管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务
地址： http://yapi.smart-xwork.cn/

YApi主要提供了2个功能：

API接口管理：根据需求撰写接口，包括接口的地址，参数，响应等等信息。
Mock服务：模拟真实接口，生成接口的模拟测试数据，用于前端的测试。

2.2 接口文档管理

添加项目
添加分类
添加接口

三、前端工程化

1 前端工程化介绍

所以现在企业开发中更加讲究前端工程化方式的开发，主要包括如下4个特点

模块化：将js和css等，做成一个个可复用模块
组件化：我们将UI组件，css样式，js行为封装成一个个的组件，便于管理
规范化：我们提供一套标准的规范的目录接口和编码规范，所有开发人员遵循这套规范
自动化：项目的构建，测试，部署全部都是自动完成

2 前端工程化入门

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

Vue-cli 提供了如下功能：

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

依赖环境：NodeJS

Vue项目-目录结构

Vue项目-启动

Vue项目-配置端口

Vue项目开发流程

四、Vue 组件库 Element

1 Element介绍

Element：是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。

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

官网：https://element.eleme.cn/#/zh-CNListener

2 快速入门

安装ElementUI组件库（在当前工程的目录下），在命令行执行指令：

npm install element-ui@2.15.3

引入 ElementUI 组件库

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);

访问官网，复制组件代码，调整

<template><div><el-container  style="height: 700px; 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"><router-link to="/dept">部门管理</router-link></el-menu-item><el-menu-item index="1-2"><router-link to="/emp">员工管理</router-link></el-menu-item></el-submenu></el-menu></el-aside><el-main><!-- 表单 --><el-form :inline="true" :model="searchForm" class="demo-form-inline"><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 label="入职日期"><!-- 日期选择器 --><el-date-pickerv-model="searchForm.entrydate"type="daterange"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"></el-date-picker></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item></el-form><!-- 表格 --><el-table :data="tableData" border><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column label="图像" width="180"><template slot-scope="scope"><img :src="scope.row.image" width="100px" height="70px"></template></el-table-column><el-table-column label="性别" width="140"><template slot-scope="scope">{{scope.row.gender == 1 ? '男':'女'}}</template></el-table-column><el-table-column prop="job" label="职位" width="140"></el-table-column><el-table-column prop="entrydate" label="入职日期" width="180"></el-table-column><el-table-column prop="updatetime" label="最后操作时间" width="230"></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><!-- 分页条 --><!-- Pagination 分页 --><el-pagination background layout="total,sizes, prev, pager, next, jumper" @size-change="handleSizeChange"@current-change="handleCurrentChange":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("查询数据");},handleSizeChange:function(val){alert("每页记录数变化" + val)},handleCurrentChange:function(val){alert("页码发生变化" + val)}},mounted () {//发送异步请求,获取数据axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result) => {this.tableData = result.data.data;  });}
}
</script><style></style>