一、前言
接下来就是来解决这些问题
二、 Ajax
1.ajax
javscript是网页三剑客之一,空用来控制网页的行为的
xml是一种标记语言,是用来存储数据的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ajax-原生方式</title>
</head>
<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>
</html>‘
2.axios
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ajax-axios</title>
</head>
<body>
<input type="button" value="获取数据GET" onclick="get()">
<input type="button" value="删除数据POST" onclick="post()">
</body>
<script>
function get(){
axios({
method:'get',
url:'http://yapi.smart-xwork.cn/mock/169327/emp/list',
}).then(result =>{
console.log(result.data);
})
}
function post(){
axios({
method:'post',
url:'http://yapi.smart-xwork.cn/mock/169327/emp/deleteById',
data:'id=1',
}).then(result =>{
console.log(result.data);
})
}
</script>
</html>
3.axio案例
这三个代码都是没有用浏览器看到的(因为那个网址打不开)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ajax-axios案例</title>
</head>
<body>
<div id="app">
<table width="800px" cellspacing="0" border="1">
<tr>
<th>编号</th>
<th>姓名</th>
<th>图片</th>
<th>性别</th>
<th>职位</th>
<th>入职时间</th>
<th>更新时间</th>
</tr>
<tr v-for="(emp, index) in emps" align="center">
<td>{{index+1}}</td>
<td>{{emps.name}}</td>
<!-- <td>{{emps.image}}</td> -->
<td>
<img v-bind : src="emps.image" alt="" height="50px" width="70px">
</td>
<td>
<span v-if="gender == 1">男</span>
<span v-if="gender == 2">女</span>
</td>
<td>{{emps.job}}</td>
<td>{{emps.entrydate}}</td>
<td>{{emps.updatatime}}</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el:'a#pp',
data:{
emps:[]
},
mounted() {
axios.get('').then(result => {
this.emps = result.data.data;//当前vue实例中的data中的emps属性赋值
})
},
})
</script>
</html>
三、前后端分离开发
1.介绍
2.YAPI -接口文档管理平台
这里我插播一条:使用apipost
四、前端工程化
1.环境准备
如果需要可以找我要
2. vue项目介绍