2. 科技
    3. 在vue框架中使用axios对接接口访问数据的四种情况

    在vue框架中使用axios对接接口访问数据的四种情况

    科技2026-01-02  9

    将vue，axios，qs的js文件引入到代码中 写好界面按钮信息以及按钮绑定事件

    <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.js"></script> <title>axios</title> </head> <body> <div id="app"> <!-- <div>{{response}}</div> --> <button @click="findAllCustomers">查询所有顾客信息</button> <button @click="findCustomerById">根据ID获取顾客信息</button> <button @click="login">登录</button> <button @click="queryCustomers">分页查询顾客信息</button> </div> </body>

    查询所有顾客信息属于get请求无参数情况 根据ID获取顾客信息属于get请求有参数情况 登录属于post请求无参数情况 分页查询顾客信息属于post请求有参数情况

    一.get方式没有参数

    url获取路径，method获取请求方式

    findAllCustomers() { axios({ url: "http://120.26.177.210:5588/customer/findAll", method: "get", params: {} }).then((res) => { console.log(res.data.data) this.response = res.data.data }) },

    二.get方式携带参数

    params获取请求参数，没有参数就为空

    findCustomerById() { let baseURL = "http://120.26.177.210" axios({ method: 'get', url: baseURL + "/customer/findCustomerById", params: { id: 134 } }).then((res) => { console.log(res.data.data) this.response = res.data.data }) },

    三.post传递JSON字符串

    传递的数据放到obj对象中

    login() { let obj = { password: 123321, type: "customer", username: "susan" } axios({ method: 'post', url: "http://120.26.177.210/user/login", data: obj }).then((res) => { console.log(res.data.data) }) },

    四.post传递qs类型数据

    qs.stringify()将json对象转换成查询字符串

    queryCustomers() { let obj = { page: 0, pageSize: 10 } axios({ method: 'post', url: "http://120.26.177.210/customer/query", data: Qs.stringify(obj) }).then((res) => { console.log(res.data.data.list) }) }

    所有情况的简写为

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.js"></script> <title>axios</title> </head> <body> <div id="app"> <!-- <div>{{data}}</div> --> <button @click="findAllUser">查询所有用户</button> <button @click="findUserById">根据id查用户</button> <button @click="login">登录</button> <button @click="queryUser">分页查询用户</button> </div> </body> <script> new Vue({ el:"#app", data() { return { data:[] } }, methods: { // get无参 // 查询所有用户信息 findAllUser() { // 简写 axios.get("http://39.96.21.48:5588/customer/findAll").then(res=>{ console.log(res.data.data) }) }, // get有参 // 根据id查询用户信息 findUserById() { // 简写 axios.get("http://39.96.21.48:5588/customer/findCustomerById",{params:{id:134}}).then((res) => { this.data = res.data.data console.log(res.data.data) }) }, // post-json字符串 // 登录 login() { let obj = { password:123321, type:"customer", username:"susan" } axios.post("http://39.96.21.48:5588/user/login",obj).then((res) => { console.log(res.data.data) }) }, // post-查询字符串 // 分页查询用户信息 queryUser() { let obj = { page:0, pageSize:10 } // 简写 axios.post("http://39.96.21.48:5588/customer/query",Qs.stringify(obj)).then(res=>{ console.log(res.data.data.list) }) } } }) </script> </html>
    Processed: 0.016, SQL: 9