vue ajax请求

安装  npm install vue-resource --save

引入【main.js】

// 引入vue-resource
import VueResource from 'vue-resource'

// 使用vue-resource
Vue.use(VueResource)
mounted() {
            // 发ajax请求,用以获取数据,此处地址意思是查询 github中 vue 星数最高的项目
            const url = 'https://api.github.com/search/repositories?q=vue&sort=stars';
            this.$http.get(url).then(
                response => {
                    const result = response.data.items[0];
                    console.log(result)
                    this.repositoryUrl = result.html_url;
                    this.repositoryName = result.name;
                },

                response => {
                    alert('请求失败');
                },
            );
        }
data: {
        name:'xu',
        result:'',
        apiUrl: 'http://127.0.0.1:8889/POST/submitInfo'
    },
    methods: {
        submitInfo: function () {
            var vm = this;
            var data = {};
            var name = vm.name;
            data.name = name;
            data = JSON.stringify(data);
            vm.$http.post(vm.apiUrl, data)
                .then((response) => {
                    vm.result = response.body;
                });
        }
    }

分别是get post

        Login() {
            if(!this.loginruleForm.loginname || !this.loginruleForm.loginpass){
                this.$message.error('账号或密码不能为空!');
            }
            else {
                const url = '/user/login?username='+this.loginruleForm.loginname+'&password='+this.loginruleForm.loginpass;
                // console.log(url);
                this.$http.post(url)
                    .then(response => {
                        console.log(response.body.error)
                        // if ()
                        if (!response.body.error) {
                            this.$message({
                                message: '登录成功!',
                                type: 'success'
                                });
                                this.$router.push({ path: '/Dashboard' })
                        }
                        else {
                            this.$message.error('账号或密码错误,请重新输入!');
                        }

                    },
                    response => {
                        alert('请求失败');
                    },
                );
            }
        }

 

posted @ 2021-01-14 17:29  在学习编程的lsy呀  阅读(76)  评论(0编辑  收藏  举报