Vue前后端数据交互

时间：2020-02-03 20:56:36 阅读：82 评论：0 收藏：0 [点我收藏+]

前后端数据交互

异步编程

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>
 </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={
                 props:[‘loginId‘,‘uname‘,‘upassword‘],
             template:`
                         <div>
                                 //获取动态路由的参数值
                                 //第一种直接定义props为true
                         <h1>Login id : {{loginId}}</h1>
                                 //第二种props直接传递一个对象，但是id会失效
         <h1>Login id : {{loginId}} ---uname:{{uname}}---upassword:{{upassword}}</h1>
                                 //第三种定义一个箭头函数,这种方式既可以传递url中携带的参数，又可以传递自定义静态数据
         <h1>Login id : {{loginId}} ---uname:{{uname}}---upassword:{{upassword}}</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 ,props:true },*/
              /* /!*第二种*!/
               {path:‘/login/:loginId‘ , component:Login ,props:{uname:‘张浩‘ ,upassword:‘张浩‘} },*/
              /*第三种*/
               {path:‘/login/:loginId‘, component: Login , props: route => ({uname:‘张浩‘,upassword :‘张浩‘ , loginId: route.params.loginId})},
               {path:‘/register‘ , component:Register }
 ?
           ]
         });
         const vm = new Vue({
             el:‘#app‘,
             data:{
 ?
             },
             router: router
         });
     </script>
 </body>
 </html>

Vue前后端数据交互

原文：https://www.cnblogs.com/zhang188660586/p/12256891.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)