Ajax：異步的js與xml。
作用：
1、通過ajax給服務器發送數據，并獲得其響應的數據。
2、可以在不更新整個網頁的情況下，與服務器交換數據并更新部分網頁的技術。
一、同步與異步
?二、原生Ajax
?1、準備數據地址
?2、創建XMLHttpRequest對象，用于和服務器交換數據
?3、向服務器發送請求
?4、獲取服務器響應的數據
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><input type="button" name="" id="" value="獲取數據" onclick="getData()"><div id="div1"></div></body><script>function getData() {//1、創建XMLHttpRequsetvar xmlHttpRequest = new XMLHttpRequest();//2、發送異步請求xmlHttpRequest.open("GET", "/test_/ajax/ajax_info.txt");xmlHttpRequest.send();//3、獲取服務器響應數據xmlHttpRequest.onreadystatechange = function() {if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {alert("123");document.getElementById("div1").innerHTML = xmlHttpRequest.responseText;}}}</script>
</html>1、Axios
對原生ajax進行封裝，方便開發
1、引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script><script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>2、
function get() {//axios發送異步請求axios({method:"get",url:"https://www.baidu.com"}).then(result => {console.log(result.data)})} 3、案例 通過vue的鉤子函數實現動態加載頁面數據
ajax_info.txt 格式json
{"users": [{"name": "Tom","age": 20,"gender": 1,"scorce": 78},{"name": "Rose","age": 18,"gender": 2,"scorce": 86},{"name": "Jerry","age": 26,"gender": 1,"scorce": 90},{"name": "Tony","age": 30,"gender": 1,"scorce": 52} ]
}<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="vue.js"></script><script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.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></tr><tr align="center" v-for="(user,index) in users"><td>{{index+1}}</td><td>{{user.name}}</td><td>{{user.age}}</td><td><span v-if="user.gender==1">男</span><span v-if="user.gender==2">女</span></td><td>{{user.scorce}}</td><td><span v-if="user.scorce>=85">優秀</span><span v-else-if="user.scorce>=60">及格</span><span style="color: red;" v-else>不及格</span></td></tr></table></div></body><script>new Vue({el: "#app",data:{users:[]},//鉤子函數 當頁面加載完成后 自動發送數據 并將vue的users賦值mounted() {axios.get("/test_/ajax/ajax_info.txt").then(result => { this.users = result.data.users;})}}) </script>
</html>
?三、前后端分離開發
接口文檔規范了前端、后端工程師的開發
?開發流程：
1、YAPI
?YAPI是管理接口文檔的工具。詳見視頻
2、前端工程化
1、環境準備
Vue-cli是Vue官方提供的一個腳手架，用于快速生成Vue項目模板。
功能：統一的目錄結構、本地調式、熱部署、單元測試、集成打包上線
依賴環境：Nodejs
搭建環境：
下載nodejs 安裝完成后會自動配置環境變量
1、設置npm
2、檢查npm的prefix值是否設置成功?
?
3、更改下載鏡像?
4、安裝vue-cli?
?
?5、檢查vue-cli是否安裝成功
2、Vue項目簡介
?1、創建vue項目
創建文件夾，并在文件夾導航欄輸入cmd，進入cmd，輸入vue ui進入圖像界面，配置項目屬性并下載，如圖所示
?如圖顯示，此時項目創建完成
?2、vue項目目錄介紹
?運行項目
?熱部署：修改文件后，無需重啟瀏覽器、服務器即可在線顯示修改后的文件。
3、前端工程化開發流程
?以vue為結尾的文件均稱為組件文件。
每個組件由三部分組成<template>、<script>、<style>
template生成html代碼 script為js代碼控制數據來源和行為? ? style為css樣式控制
實例：
<template><div><!-- 通過插值表達式來顯示vue數據模型中的值 --><h1>{{message}}</h1></div>
</template><script>
//export導出模塊
export default {//創建數據模型data () {return {message:"Hello Vue"}},methods: {}
}
</script><style></style>
?
![【Linux】Shell腳本之流程控制語句 if判斷、for循環、while循環、case循環判斷 + 實戰詳解[?建議收藏！！?]](http://pic.xiahunao.cn/【Linux】Shell腳本之流程控制語句 if判斷、for循環、while循環、case循環判斷 + 實戰詳解[?建議收藏！！?])
