vue-resource vue-axios传递数据

使用vue-resource传递数据

在Home.vue组件中传送数据

src/model/Storage.js中封装的数据

//封装操作localstorage本地存储的方法   模块化的文件
// nodejs  基础
var storage={
    set(key,value){
        localStorage.setItem(key, JSON.stringify(value));
    },
    get(key){
        return JSON.parse(localStorage.getItem(key));
    },remove(key){
        localStorage.removeItem(key);
    }
}
export default storage;

将Hone.vue引入根节点

将vue-resource引入main.js

import Vue from 'vue';
import App from './App.vue';
/*使用vue-resource请求数据的步骤
1、需要安装vue-resource模块，  注意加上  --save
  npm install vue-resource --save /  cnpm install vue-resource --save  
2、main.js引入 vue-resource
    import VueResource from 'vue-resource';
3、main.js  Vue.use(VueResource);
4、在组件里面直接使用
    this.$http.get(地址).then(function(){
    })
*/
import VueResource from 'vue-resource';
Vue.use(VueResource);
new Vue({
  el: '#app',
  render: h => h(App)
})

Axios请求数据

src/components/Home.vue (组件里请求数据)

以下方法是引入的方法

user.js

var vue = new Vue({
    el: "#app",
    data: {
        user: {id:"",username:"aaa",password:"",age:"",sex:"",email:""},  //定义数据类型Json
        userList: []     //代表多个数据，与v-for配合使用
    },
    methods: {
        findAll: function () {
            var _this = this;    //需在外部定义对象代表vue对象
            axios.get("/vuejsDemo/user/findAll.do").then(function (response) {
                _this.userList = response.data;       //接收返回数据
                console.log(_this.userList);
            }).catch(function (err) {
                console.log(err);
            });
        },
        findById: function (userid) {
            var _this = this;  //必须将对象定义在外边，代表是vue的对象，给axios引用
            axios.get("/vuejsDemo/user/findById.do", {
                params: {             //定义传输数据
                    id: userid
                }
            }).then(function (response) {
              _this.user = response.data;
                $('#myModal').modal("show");        
            }).catch(function (err) {
            });

        },
        update: function (user) {
            var _this = this;
            axios.post("/vuejsDemo/user/update.do",_this.user).then(function (response) {
                _this.findAll();
            }).catch(function (err) {
            });
        }
    },
    created(){               //代表每次刷新加载的方法
        this.findAll();
    }
});

user.html

    
    



        
        
            
            数据
            
            数据后台管理
        


        
        

            
            
                Toggle navigation
            

            

                

                    
                    

                        
                            
                            4
                        
                        

                            
你有4个邮件
                            

                                
                                

                                    

                                        
                                        
                                            

                                                
                                            
                                            

                                                系统消息
                                                 5 分钟前
                                            
                                            
欢迎登录系统?
                                        
                                    
                                    
                                    

                                        
                                            

                                                
                                            
                                            

                                                团队消息
                                                 2 小时前
                                            
                                            
你有新的任务了
                                        
                                    
                                    

                                        
                                            

                                                
                                            
                                            

                                                Developers
                                                 Today
                                            
                                            
Why not buy a new awesome theme?
                                        
                                    
                                    

                                        
                                            

                                                
                                            
                                            

                                                Sales Department
                                                 Yesterday
                                            
                                            
Why not buy a new awesome theme?
                                        
                                    
                                    

                                        
                                            

                                                
                                            
                                            

                                                Reviewers
                                                 2 days
                                            
                                            
Why not buy a new awesome theme?
                                        
                                    
                                
                            
                            
See All Messages
                        
                    
                    
                    

                        
                            
                            10
                        
                        

                            
你有10个新消息
                            

                                
                                

                                    

                                        
                                             5 new members joined today
                                        
                                    
                                    

                                        
                                             Very long description here that
                                            may not
                                            fit into the page and may cause design problems
                                        
                                    
                                    

                                        
                                             5 new members joined
                                        
                                    
                                    

                                        
                                             25 sales made
                                        
                                    
                                    

                                        
                                             You changed your username
                                        
                                    
                                
                            
                            
View all
                        
                    
                    
                    

                        
                            
                            9
                        
                        

                            
你有9个新任务
                            

                                
                                

                                    

                                        
                                        
                                            

                                                Design some buttons
                                                20%
                                            
                                            

                                                

                                                    20% Complete
                                                
                                            
                                        
                                    
                                    
                                    

                                        
                                        
                                            

                                                Create a nice theme
                                                40%
                                            
                                            

                                                

                                                    40% Complete
                                                
                                            
                                        
                                    
                                    
                                    

                                        
                                        
                                            

                                                Some task I need to do
                                                60%
                                            
                                            

                                                

                                                    60% Complete
                                                
                                            
                                        
                                    
                                    
                                    

                                        
                                        
                                            

                                                Make beautiful transitions
                                                80%
                                            
                                            

                                                

                                                    80% Complete
                                                
                                            
                                        
                                    
                                    
                                
                            
                            

                                View all tasks
                            
                        
                    
                    
                    

                        
                            
                            张猿猿
                        
                        

                            
                            

                                

                                

                                    张猿猿 - 数据管理员
                                    最后登录 11:20AM
                                
                            

                            
                            

                                

                                    修改密码
                                
                                

                                    注销
                                
                            
                        
                    

                
            
        
    
    

    
    

        
        

            
            

                

                    
                
                

                    
张猿猿
                     在线
                
            
            
            
            


            
            

                
菜单

                
 首页
                

                


                

                    
                         用户管理
                        
                        
                    
                    
                    


                        

                            
                                 查询所有用户
                            
                        

                    
                

                
            
        
        
    
    

    
    
    

    


        
        

            

                数据管理
                数据列表
            
            

                
 首页
                
数据管理
                
数据列表
            
        
        

        
        


            
            

                

                    
列表
                

                


                    
                    


                        
                        

                            

                                

                                     新建
                                    
                                     删除
                                    
                                    
                                        开启
                                    
                                    
                                        屏蔽
                                    
                                     刷新
                                    
                                
                            
                        
                        

                            

                                
                                
                            
                        
                        

                        
                        


                                

                                    

                                        

                                            

                                                
                                                    ×
                                                
用户信息
                                            
                                            


                                                

                                                    



                                                        

                                                            用户名:
                                                            

                                                                
                                                            
                                                        
                                                        

                                                            密码:
                                                            

                                                                
                                                            
                                                        
                                                        

                                                            性别:
                                                            

                                                                
                                                            
                                                        
                                                        

                                                            年龄:
                                                            

                                                                
                                                            
                                                        
                                                        

                                                            邮箱:
                                                            

                                                                
                                                            
                                                        
                                                    
                                                

                                            
                                            

                                                关闭
                                                修改
                                            
                                        
                                        
                                    

                                    
                                
                                
                            

                            

                            

                                

                                    
                                
                                
ID
                                
用户名
                                
密码
                                
性别
                                
年龄
                                
邮箱
                                
操作
                            
                            
                            


                            

                                

                                
{{u.id}}
                                
{{u.username}}
                                
                                
{{u.password}}
                                
{{u.sex}}
                                
{{u.age}}
                                
{{u.email}}
                                

                                    详情
                                    编辑
                                
                            

                            
                            
                            
                            
                        
                        

                        
                        

                            

                                

                                     新建
                                    
                                     删除
                                    
                                    
                                        开启
                                    
                                    
                                        屏蔽
                                    
                                     刷新
                                    
                                
                            
                        
                        

                            

                                
                                
                            
                        
                        



                    
                    


                
                

                
                

                    

                        

                            总共2 页，共14 条数据。 每页
                            
                                1
                                2
                                3
                                4
                                5
                             条
                        
                    

                    

                        

                            

                                首页
                            
                            
上一页
                            
1
                            
2
                            
3
                            
4
                            
5
                            
下一页
                            

                                尾页
                            
                        
                    

                
                


            

        
        

    
    
    

    
    

        

            Version 1.0.8
        
        Copyright © 2014-2017 研究院研发部. All rights reserved.