(新手) Vue2.0 POST 请求

---

一、准备工作

使用Vue进行POTS请求首先要引入两个JS文件:

<script src='../vue.js'></script>   //我自己本地导入的

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>   //线上的vue

<script src="https://unpkg.com/axios/dist/axios.js"></script>   //线上的axios，这个js就是要是用POST/GET的主要文件

---

二、静态界面

*v-bind 简写 :  v-on 简写@  这个应该都不用多说了吧

<!-- 一个简单的form表单页面 连CSS 都没写 哈哈哈哈 -->
<div id="app">
        <form action="" method="post">
            <div>
                <p>门诊名称</p>
                <input type="text" name="title" placeholder="请输入门诊名称" v-model="title" />
                {{title}}
            </div>
            <div>
                <p>联系方式</p>
                <input type="text" name="phone" placeholder="请输入联系方式" v-model="phone" />
                {{phone}}
            </div>
            <div>
                <p>详细地址</p>
                <input type="text" name="address" placeholder="请输入详细地址" v-model="address" />
                {{address}}
            </div>
            <div>
                <input type="checkbox" id="YES" value="false" v-model="picked" @click="btnstatus">
                <label for="checkbox">我同意</label>
                {{picked}}
            </div>
            <div>
                <input type="submit" @click="onSubmit($event)" :disabled="btndis"></input>
            </div>
        </form>
</div>

---

三、JS代码

<script>
    //最重要的一步 调用请求的开始
    Vue.prototype.$http = axios;
    new Vue({
        
        //获取 id为app 的div对象
        el: '#app',
        //定义全局数据
        data: {
            btndis: true,
            picked: false,
            address: "",
            title: "",
            phone: "",
        },
        //绑定方法执行函数的聚集地
        methods: {
            //点击同意 按钮才可以使用
            btnstatus() {
                this.btndis = !this.btndis;
            },
            //点击提交事件
            onSubmit(event) {
                if (this.title != '' || this.phone != '' || this.address != '')
                    //自行百度 不是VUE里面的
                    event.preventDefault();
                    
                    //解决了POST请求时，服务器拿不到请求的数据
                    let param = new URLSearchParams()
                    param.append('title', this.title)
                    param.append('phone', this.phone)
                    param.append('address', this.address)

                let config = {

                    headers: {

                        'content-Type': 'application/x-www-form-urlencoded'

                    }

                }
                this.$http.post('你自己的请求的URL路径', param,config).then(function (res) {
                    if (res.status === 200) {
                        console.log(res);
                    } else {
                        alert("出现错误");
                    }
                })
            }
        },
    })
</script>

---

四、遇到的坑

1.跨域名问题

我使用TP5框架写的，访问的是同一个域名下的，所以没有处理跨域名访问的问题，如果以后遇到再补充  

2.请求数据问题

刚开存储数据的方法是下面这种

                    var formdata = new FormData();
                    formdata.title = this.title;
                    formdata.phone = this.phone;
                    formdata.address = this.address;

这种方法会让(POST)服务器端得不到值，所以就改用了 (二) 里面的参数处理方法，也可以直接在URL里面加参数