Ajax：異步的js與xml。
作用：
1、通過ajax給服務(wù)器發(fā)送數(shù)據(jù)，并獲得其響應(yīng)的數(shù)據(jù)。
2、可以在不更新整個(gè)網(wǎng)頁的情況下，與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁的技術(shù)。
一、同步與異步
?二、原生Ajax
?1、準(zhǔn)備數(shù)據(jù)地址
?2、創(chuàng)建XMLHttpRequest對象，用于和服務(wù)器交換數(shù)據(jù)
?3、向服務(wù)器發(fā)送請求
?4、獲取服務(wù)器響應(yīng)的數(shù)據(jù)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" name="" id="" value="獲取數(shù)據(jù)" onclick="getData()">
<div id="div1"></div>
</body>
<script>
function getData() {
//1、創(chuàng)建XMLHttpRequset
var xmlHttpRequest = new XMLHttpRequest();
//2、發(fā)送異步請求
xmlHttpRequest.open("GET", "/test_/ajax/ajax_info.txt");
xmlHttpRequest.send();
//3、獲取服務(wù)器響應(yīng)數(shù)據(jù)
xmlHttpRequest.onreadystatechange = function() {
if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
alert("123");
document.getElementById("div1").innerHTML = xmlHttpRequest.responseText;
}
}
}
</script>
</html>1、Axios
對原生ajax進(jìn)行封裝，方便開發(fā)
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發(fā)送異步請求
axios({
method:"get",
url:"https://www.baidu.com"
}).then(result => {
console.log(result.data)
})
} 3、案例 通過vue的鉤子函數(shù)實(shí)現(xiàn)動(dòng)態(tài)加載頁面數(shù)據(jù)
ajax_info.txt 格式j(luò)son
{
"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>編號(hào)</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">優(yōu)秀</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:[]
},
//鉤子函數(shù) 當(dāng)頁面加載完成后 自動(dòng)發(fā)送數(shù)據(jù) 并將vue的users賦值
mounted() {
axios.get("/test_/ajax/ajax_info.txt").then(result => {
this.users = result.data.users;
})
}
})
</script>
</html>
?三、前后端分離開發(fā)
接口文檔規(guī)范了前端、后端工程師的開發(fā)
?開發(fā)流程：
1、YAPI
?YAPI是管理接口文檔的工具。詳見視頻
2、前端工程化
1、環(huán)境準(zhǔn)備
Vue-cli是Vue官方提供的一個(gè)腳手架，用于快速生成Vue項(xiàng)目模板。
功能：統(tǒng)一的目錄結(jié)構(gòu)、本地調(diào)式、熱部署、單元測試、集成打包上線
依賴環(huán)境：Nodejs
搭建環(huán)境：
下載nodejs 安裝完成后會(huì)自動(dòng)配置環(huán)境變量
1、設(shè)置npm
2、檢查npm的prefix值是否設(shè)置成功?
?
3、更改下載鏡像?
4、安裝vue-cli?
?
?5、檢查vue-cli是否安裝成功
2、Vue項(xiàng)目簡介
?1、創(chuàng)建vue項(xiàng)目
創(chuàng)建文件夾，并在文件夾導(dǎo)航欄輸入cmd，進(jìn)入cmd，輸入vue ui進(jìn)入圖像界面，配置項(xiàng)目屬性并下載，如圖所示
?如圖顯示，此時(shí)項(xiàng)目創(chuàng)建完成
?2、vue項(xiàng)目目錄介紹
?運(yùn)行項(xiàng)目
?熱部署：修改文件后，無需重啟瀏覽器、服務(wù)器即可在線顯示修改后的文件。
3、前端工程化開發(fā)流程
?以vue為結(jié)尾的文件均稱為組件文件。
每個(gè)組件由三部分組成<template>、<script>、<style>
template生成html代碼 script為js代碼控制數(shù)據(jù)來源和行為? ? style為css樣式控制
實(shí)例：
<template>
<div>
<!-- 通過插值表達(dá)式來顯示vue數(shù)據(jù)模型中的值 -->
<h1>{{message}}</h1>
</div>
</template>
<script>
//export導(dǎo)出模塊
export default {
//創(chuàng)建數(shù)據(jù)模型
data () {
return {
message:"Hello Vue"
}
},
methods: {
}
}
</script>
<style>
</style>
文章來源：http://www.zghlxwxcb.cn/news/detail-651024.html
?文章來源地址http://www.zghlxwxcb.cn/news/detail-651024.html
到了這里，關(guān)于Ajax及前端工程化的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
