web开辟之 HTML、CSS、JavaScript、以及JavaScript的高级框架Vue（学习版2 ...

尚未崩坏 · 2024-9-16 06:22:33

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

x

一、前言

接下来就是来办理这些问题
二、 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>
<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

四、前端工程化

五、Vue组件库Element

六、Vue路由

七、打包摆设

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

web开辟之 HTML、CSS、JavaScript、以及JavaScript的高级框架Vue（学习版2 ...

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

0 个回复

快速回复

楼主热帖

标签云

web开辟 之 HTML、CSS、JavaScript、以及JavaScript的高级框架Vue（学习版2 ...

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

0 个回复

快速回复

楼主热帖

标签云

登录参与点评抽奖加入IT实名职场社区

web开辟之 HTML、CSS、JavaScript、以及JavaScript的高级框架Vue（学习版2 ...