vue中 axios 安装 + post 登录 + get 表单

npm install axios　　　　　　安装

import axios from 'axios'　　　　在需要使用的 .vue 文件中引入

 

get请求：("",{  })        第一个参数表示请求地址，第二个参数表示配置信息
params： 表示传递到服务器端的数据
headers： 表示请求头


post请求：("",{ },{ })    请求地址，传递的数据，配置信息

 

---

post 请求登录：

handLogin(loginForm){
        this.$refs[loginForm].validate((valid) => {        //表单验证
            if (valid) {
            axios.post('https://xxxxxxx.com/pwd/login',{},{
                params:{                　　　　　　　　　　//*** 用户名和密码写在 pramas 中！！ ***
                    username: this.loginForm.user,
                    password: md5(this.loginForm.password + 'xxxxxxxxxx')        // md5加密  
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//npm install --save js-md5    //import md5 from 'js-md5';   使用的文件中引入    //使用 md5()
                },
            })
            .then(
                res => {if(res.data.success == true){
                    this.$router.replace('/welcome')        //登陆成功跳转
                }else{
                    alert(res.data.msg)            //失败弹出错误提示窗口
                }}
                )
            .catch(err => console.log(err));        //错误打印err
            } 
            else {
            console.log('error submit!!');        //表单验证失败
            return false;
            }
        })
    }

 

get 请求写入表单：

searchForm(ruleForm) {
        this.$refs[ruleForm].validate((valid) => {        //验证表单
            if (valid) {
                // console.log(this.ruleForm.date);
                axios.get('https://xxxxxx.cn/xxxxxxxxList',{
                    params:{              　　　　　　　　　　 //要传入的内容都写在pramas中！！
                    startDate : dayjs(this.ruleForm.date[0]).format('YYYY-MM-DD'),    // 时间转换格式  **要用表单内容都需要加 this.
                    endDate : dayjs(this.ruleForm.date[1]).format('YYYY-MM-DD'),
                    merchantType : 6 ,
                    relateType: 2 ,
                    userPhone : this.ruleForm.number        // 表单输入的手机号 **要用表单内容都需要加 this.
                }
                })
                .then(res => {
                    // console.log(res);
                    this.dataList1 = res.data.data.list        //成功则把表单内容赋值给 dataList1 ，**注意是data.data 
                })
                .catch(err => console.log(err));
            } 
            else {
            console.log('error submit!!');
            return false;
            }
        });
    }    

1、在data中注册 dataList1

data() {
    return:{    
        dataList1:'',
    }
}

2、注册子组件 + 引入子组件

import zds_card from '../view/card/zds_card.vue'

components:{
    zds_card,
},

3、将表单内容传到子组件

<zds_card :tableData1="dataList1" ></zds_card> 　　 　　//把 dataList1 中获得的 get 的表单内容传给子组件的 tableData1

4、在子组件中获得

props: ['tableData1'],

5、子组件的 el-table 值的     :data="tableData1"    就可以直接传入数据，prop 值与 list 中的值会对应写入