vue devserver post失败_Vue学习3（拉取数据）

1，跨域：我们的程序是在127.0.0.1:8080跑的，不能请求192.168.2.250/news的，因为ip不同，这个就是跨域限制。

CORS跨域，代理跨域

2，axios，底层是ES5的Promise

npm install --save axios

Ajax要在一个“生命周期”叫做created中发出，created表示组件已经创建完毕。是时候请求数据了。

使用方法：axios.get(网址).then(回调函数)

<script>
    import axios from 'axios';
    export default {
        // 组件诞生之后做的事情
        created(){
            // 要把Ajax写到这里
            axios.get('http://192.168.2.250/news').then(data => {
                this.arr = data.data;;
            });
        }
    }
</script>

注意回调函数一定是箭头函数，不能写function，必须是data.data读取数据。准备一个data，里面有一个arr，天生是空白的数组！用Ajax请求回来数据之后，替换这个空数组。

然后界面就可以被v-for：

<template>
    <div>
        <h1>你好</h1>
        <ul>
            <li v-for="item in arr" :key="item.id">
                <a :href="item.link">
                    {{item.title}}
                </a>
            </li>
        </ul>
    </div>
</template>

3，代理跨域：

不再给你CORS跨域解禁了。需要你使用“代理跨域”。代理跨域需要配置webpack.config.js文件。配置代理跨域的网址：

开发中 Server(devServer)​www.webpackjs.com

const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
    mode: 'development',
    entry: './app/main.js',
    output: {
        filename: 'bundle.js',
        publicPath: 'xuni'
    },
    module: {
        rules: [
            {
                test: /.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /.vue$/,
                loader: 'vue-loader'
            }
        ],
    },
    plugins: [
        // 请确保引入这个插件！
        new VueLoaderPlugin()
    ],
    resolve: {
        alias: {
          'vue$': 'vue/dist/vue.esm.js'
        }
    },
    devServer: {
        proxy: {
            "/api": {
                target: "http://192.168.2.250",
                pathRewrite: {"^/api" : ""}
            }
        }
    }
}

重新启动项目，npm run dev

现在服务器的接口，被你偷到了127.0.0.1:8080/api里面

4，关于Ajax：

Ajax有一个大问题，有一段时间数据是{}空对象，这是computed里面的语句，应该加判断：

allC(){
    if(this.obj[this.p] !== undefined){
        return Object.keys(this.obj[this.p]);
    }else{
        return [];
    }
}

查看所有地址：http://192.168.2.250/shdz/南宫羽儿 GET请求
新增地址：http://192.168.2.250/shdz/南宫羽儿 POST请求

RESTful风格地址：地址一样，但是请求类型不一样，就是RESTful风格。

不是RESTful风格的地址：http://192.168.2.250/shdz/view.php?id=南宫羽儿http://192.168.2.250/shdz/add.php?id=南宫羽儿

POST能带大型数据，但是GET不能带。语法：

axios.get(网址).then(回调函数)
axios.post(网址, 数据).then(回调函数)

推送数据：

axios.post('/api/shdz/关羽', {p, c, a, s, n, d, alias, tel}).then(data => {
    if(data.data == '添加成功'){
        this.$Message.success('添加成功');
        // 拉取
        this.laqu();
    }else{
        this.$Message.error('添加失败，请联系管理员！');
    }
});

5，删除地址：

删除关羽的下标为1的地址：

http://192.168.2.250/shdz/关羽/1 DELETE请求

axios.delete('/api/shdz/关羽/' + i).then(data => {
    console.log(data.data);
    // 拉取
    this.laqu();
    // 提示
    this.$Message.success('删除成功');
});

6，修改地址

发出PATCH请求

http://192.168.2.250/shdz/关羽/1 PATCH请求

axios.patch(网址, 数据).then(回调函数);

7，JavaScript中，使用Date.parse()函数可以快速将日期变为时间戳：

Date.parse(new Date(2019, 8, 6))

时间戳如何变为日期文字： new Date(1081733795781)

moment库：日期处理库

moment(row.buydate).format('YYYY年MM月DD日')

8，分页功能：

做分页条需要使用<Page>组件，

Page组件需要有三个属性，叫做三要素，缺一不可：

• total 总条数 → 服务器返回给你的
• current 当前页 → data中定义的
• page-size 每页条数 → data中定义的

 <Page 
:total="total" 
:current="this.page" 
:page-size="10" 
@on-change="changePage($event)" 
show-elevator 
/>

9、 更好用的数据传递系统$bus

Vue的prototype上如果有一个a，所有组件，无论深浅，可以直接无脑使用a。

入口文件，在new Vue之前，prototype上绑定一个a：

import Vue from 'vue';
import ElementUI from 'element-ui';
import App from './App.vue';

Vue.use(ElementUI);

Vue.prototype.a = 10;

new Vue({
    el: '#app',
    render(h){
        return h(App);
    }
});

任何组件可以不接受任何值、不注册任何值，直接无脑使用这个a：

<template>
    <div>
        我是哈哈组件{{a}}
    </div>
</template>

原因是任何组件都是Vue类的实例

在Vue的prototype上绑定了一个新的Vue的实例。

Vue.prototype.$bus = new Vue({
    a: 10
});

bus就是公交车，人人都能上，用来运输数据，组件和组件之间可以平等的获得全局数据了，从公交车上得到，而不是父组件传。

<h1>我是App父组件{{$bus.a}}</h1>

10， Vuex

vuex是一个将数据放到全局的“可预测状态容器”

npm install --save vuex

修改入口文件

import Vue from 'vue';
import Vuex from 'vuex';
import ElementUI from 'element-ui';
import App from './App.vue';

Vue.use(ElementUI);
Vue.use(Vuex);
 
new Vue({
    el: '#app',
    render(h){
        return h(App);
    }
});

创建store文件夹，store是仓库的意思。

store文件夹里面创建gxtStore.js，这个文件：

export default {
    namespaced: true,
    state: {
        idx: 3,
        star: 'jindong'
    },
    mutations: {
        // 同步
     add(state){
    	 state.idx ++;
},
minus(state){
        state.idx --;
}
    },
    actions: {
        // 异步
    }
};

这个文件是一个标准的JS对象。

namespaced: true表示它要有命名空间
state： 表示数据
mutations： 英语原意表示“突变”，Vuex要求所有对state的变化都要写在里面
actions： 写异步的语句，比如Ajax、延时等等

在store文件夹中创建一个index.js文件，它是一个统领文件：

import gxtStore from './gxtStore.js';

export default {
    modules: {
        gxtStore: gxtStore
    }
};

罗列所有的小store，用modules属性罗列，还要改变入口文件main.js:

import Vue from 'vue';
import Vuex from 'vuex';
import ElementUI from 'element-ui';
import App from './App.vue';
import store from './store/index.js';

Vue.use(ElementUI);
Vue.use(Vuex);
 
new Vue({
    el: '#app',
    render(h){
        return h(App);
    },
    store: new Vuex.Store(store)
});

组件中可以直接无脑使用：

{{$store.state.命名空间.属性}}
比如

{{$store.state.gxtStore.idx}}

Vuex规定，唯一能够改变数据的地方就是mutations。

组件要使用$store.commit()这个函数，来触发mutations中罗列的函数。

<Button @click="$store.commit('gxtStore/add')">按我加1</Button>