Vue前后端数据交互
前后端数据交互
异步编程
ajax的异步编程
通过url访问地址获取数据，数据获取成功后通过ajax的success属性方法进行回调，但是存在一个问题：当需要多次回调时，如果有需求这几次回调的顺序必须固定，那么ajax就只能进行success的嵌套处理，但是这明显不符合程序的健壮性和代码的解耦性，所以Promise更为优秀。
Promise的方式进行异步操作
Promise处理对象的优点：①可以避免多层异步调用嵌套问题（回调地域）②Promise对象提供了简洁的API，使得控制异步操作更加容易。
基本用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Promise</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
/*实例化一个Promise的对象
* 内部参数：resolve：数据交互成功后实现的 reject：数据交互失败之后实现的
* 用setTimeout来模拟 异步操作
* */
const p = new Promise(function (resolve , reject) {
setTimeout(function () {
var flag = false;
if (flag) {
resolve('flag是true');
}else{
reject('flag是false');
}
},100);
});
/*p.then 之后是当数据传输成功/失败之后执行的 这时数据已经传到resolve和reject中了*/
p.then(function (successInfo) {
console.log(successInfo);
},function (failInfo) {
console.log(failInfo);
});
const vm = new Vue({
el:'#app',
data:{}
});
</script>
</body>
</html>
路由的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue</title>
<!--引入vue的支持文件-->
<script type="text/javascript" src="js/vue.js"></script>
<script src="js/vue-router.js"> </script>
</head>
<body>
<div id="app">
<!--to属性相当于一个 a标签-->
<router-link to="/login/1"> 登录 </router-link>
<router-link to="/login/2"> 登录 </router-link>
<router-link to="/login/3"> 登录 </router-link>
<router-link to="/register"> 注册</router-link>
<!--设置路由占位符-->
<router-view></router-view>
</div>
<script type="text/javascript">
/*定义子组件*/
const Login={
template:`<div>
//获取动态路由的参数值
<h1>Login id : {{$route.params.loginId}}</h1>
<hr/>
<router-link to="/username">用户名</router-link>
<router-link to="/password">密码</router-link>
<router-view></router-view>
</div>`
};
const Register={
template: `<h1>Register模块</h1>`
};
const username={
template: `
<div> username:<input type="text"></div>
`
};
const password = {
template: `
<div>password: <input type="password"></div>
`
};
/*初始化路由对象实例*/
const router = new VueRouter({
/*配置路由规则*/
routes:[
/*设置路由重定向*/
{path:'/' , redirect:'/login/1'},
/*通过restful的形式设置动态路由规则*/
{path:'/login/:loginId' , component:Login ,children:[
/*设置嵌套路由*/
{path:'/username' , component:username},
{path:'/password' , component : password}
]},
{path:'/register' , component:Register }
]
});
const vm = new Vue({
el:'#app',
data:{
},
router: router
});
</script>
</body