Vue的Ajax请求-axios、前后端分离练习-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue的Ajax请求-axios、前后端分离练习。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Vue的Ajax请求

axios简介

Axios，是Web数据交互方式，是一个基于promise [5]的网络请求库，作用于node.js和浏览器中，它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。 [2]
axios :不是vue的插件，可以在任何地方使用，推荐

axios的使用方式

1、使用npm安装

npm install axios

2、使用cdn链接axios

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

axios的语法

axios({
 // 请求方式
 method: 'post',
 url: 'api',
 // 传递参数
 data: obj,
 // 设置请求头信息
 headers: {
  key: value
 },
 responseType: 'json'
}).then(response => {
 // 请求成功
 let res = response.data;
 console.log(res);
}).catch(error => {
 // 请求失败，
 console.log(error);
});

axios案例

1、数据准备

Student.json

[
    {
        "sid":1,
        "name":"mary",
        "age":18,
        "gender":"女"
    },
    {
        "sid":2,
        "name":"lucy",
        "age":18,
        "gender":"女"
    },
    {
        "sid":3,
        "name":"tom",
        "age":19,
        "gender":"男"
    },
    {
        "sid":4,
        "name":"jack",
        "age":18,
        "gender":"男"
    }
]

2、初使用问题

VScode

Vue的Ajax请求-axios、前后端分离练习,前端,vue.js,ajax,前端

解决办法

Vue的Ajax请求-axios、前后端分离练习,前端,vue.js,ajax,前端

3、axios 发送get请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.global.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <table cellspacing="0" cellpadding="0" border="1" width="500" align="center">
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
            <tr v-for="stu in stus">
                <td>{{stu.sid}}</td>
                <td>{{stu.name}}</td>
                <td>{{stu.age}}</td>
                <td>{{stu.gender}}</td>
            </tr>
        </table>
    </div>
    <script>
        const vueApp = Vue.createApp({
            data:function(){
                return {
                    stus:""
                }
            },
            created:function(){
                //发送ajax请求，将得到的数据赋值给stus
                axios({
                    method:"get",
                    url:"json/students.json"
                }).then(resp => {
                    this.stus = resp.data;
                });
            }
        });

        vueApp.mount("#app");
    </script>
</body>
</html>

或者

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.global.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <table cellspacing="0" cellpadding="0" border="1" width="500" align="center">
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
            <tr v-for="stu in stus">
                <td>{{stu.sid}}</td>
                <td>{{stu.name}}</td>
                <td>{{stu.age}}</td>
                <td>{{stu.gender}}</td>
            </tr>
        </table>
    </div>
    <script>
        const vueApp = Vue.createApp({
            data:function(){
                return {
                    stus:""
                }
            },
            created:function(){
                //发送ajax请求，将得到的数据赋值给stus
                axios.get("json/students.json").then(resp => {
                    this.stus = resp.data;
                });
            }
        });

        vueApp.mount("#app");
    </script>
</body>
</html>

4、axios 发送post请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.global.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <table cellspacing="0" cellpadding="0" border="1" width="500" align="center">
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
            <tr v-for="stu in stus">
                <td>{{stu.sid}}</td>
                <td>{{stu.name}}</td>
                <td>{{stu.age}}</td>
                <td>{{stu.gender}}</td>
            </tr>
        </table>
    </div>
    <script>
        const vueApp = Vue.createApp({
            data:function(){
                return {
                    stus:""
                }
            },
            created:function(){
                //发送ajax请求，将得到的数据赋值给stus
                axios({
                    method:"post",
                    url:"json/students.json"
                }).then(resp => {
                    this.stus = resp.data;
                });
            }
        });

        vueApp.mount("#app");
    </script>
</body>
</html>

注意：绝大多数web服务器,都不允许静态文件响应POST请求,所以这里运行会报错哦。

5、补充

为所有支持的请求方法提供了别名
axios.request(confifig)
axios.get(url[, confifig])
axios.delete(url[, confifig])
axios.head(url[, confifig])
axios.post(url[, data[, confifig]])
axios.put(url[, data[, confifig]])
axios.patch(url[, data[, confifig]])

请求后台数据

1.index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.global.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <table cellspacing="0" cellpadding="0" border="1" width="500" align="center">
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>邮箱</th>
            </tr>
            <tr v-for="stu in stus">
                <td>{{stu.sid}}</td>
                <td>{{stu.sname}}</td>
                <td>{{stu.sage}}</td>
                <td>{{stu.sgender}}</td>
                <td>{{stu.semail}}</td>
            </tr>
        </table>
    </div>
    <script>
        const vueApp = Vue.createApp({
            data:function(){
                return {
                    stus:""
                }
            },
            created:function(){
                //发送ajax请求，将得到的数据赋值给stus
                axios.get("http://localhost:8888/day10_war_exploded/studentServlet?flag=getAllStudents").then(resp => {
                    this.stus = resp.data;
                });
            }
        });

        vueApp.mount("#app");
    </script>
</body>
</html>

2.StudentServlet.java

package com.etime.servlet;

import com.etime.entity.Student;
import com.fasterxml.jackson.databind.ObjectMapper;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

@WebServlet("/studentServlet")
public class StudentServlet extends BaseServlet {

    protected void getAllStudents(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        List<Student> list = new ArrayList<>();
        Student student1 = new Student(1,"范冰冰","女",18,"fbb@qq.com");
        Student student2 = new Student(2,"刘德华","男",18,"ldh@qq.com");
        Student student3 = new Student(3,"孙红雷","男",18,"shl@qq.com");
        list.add(student1);
        list.add(student2);
        list.add(student3);
        ObjectMapper mapper = new ObjectMapper();
        String res = mapper.writeValueAsString(list);
        PrintWriter out = resp.getWriter();
        out.print(res);
        out.close();
    }
}

3.跨域问题

Vue的Ajax请求-axios、前后端分离练习,前端,vue.js,ajax,前端

指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。
同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域，在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。
跨域问题怎么出现的？
- 开发一些前后端分离的项目，比如使用 Servlet + Vue 开发时，后台代码在一台服务器上启动，前台代码在另外一台电脑上启动，此时就会出现问题。
- 比如：
  - 后台地址为http://localhost:8080/
  - 前台地址为 http://127.0.0.1:5500/
  - 此时端口号不一致，不符合同源策略，造成跨域问题。
CorsFilter文章来源地址https://www.toymoban.com/news/detail-664988.html

package com.etime.filter;

import org.apache.commons.lang.StringUtils;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/*
  跨域请求
 */
@WebFilter("/*")
public class CorsFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }
    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        request.setCharacterEncoding("utf-8");
        // 不使用*，自动适配跨域域名，避免携带Cookie时失效
        String origin = request.getHeader("Origin");
        if(StringUtils.isNotBlank(origin)) {
            response.setHeader("Access-Control-Allow-Origin", origin);
        }
        // 自适应所有自定义头
        String headers = request.getHeader("Access-Control-Request-Headers");
        if(StringUtils.isNotBlank(headers)) {
            response.setHeader("Access-Control-Allow-Headers", headers);
            response.setHeader("Access-Control-Expose-Headers", headers);
        }
        // 允许跨域的请求方法类型
        response.setHeader("Access-Control-Allow-Methods", "*");
        // 预检命令（OPTIONS）缓存时间，单位：秒
        response.setHeader("Access-Control-Max-Age", "3600");
        // 明确许可客户端发送Cookie，不允许删除字段即可
        response.setHeader("Access-Control-Allow-Credentials", "true");
        filterChain.doFilter(request, response);
    }
    @Override
    public void destroy() {
    }
}

综合练习

1.register.html–注册功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <script src="js/vue.global.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <form>
            账号：<input type="text" v-model="username" @blur="checkUsername()">
            <span style="color:red">{{username_msg}}</span><br>
            密码：<input type="password" v-model="pwd" @blur="checkPwd()">
            <span style="color:red">{{pwd_msg}}</span><br>
            <input type="button" value="注册" @click="register()">
        </form>
    </div>
    <script>
        const vueApp = Vue.createApp({
            data:function(){
                return {
                    username:"",
                    pwd:"",
                    username_msg:"",
                    pwd_msg:"",
                    username_flag:false,
                    pwd_flag:false
                }
            },
            methods:{
                checkUsername:function(){
                    if (this.username == "") {
                        this.username_msg = "账号不能为空";
                        this.username_flag = false;
                    } else if (this.username.length < 6) {
                        this.username_msg = "账号至少6个字符";
                        this.username_flag = false;
                    } else {
                        //账号是否为已注册账号的判断
                        axios({
                            method:"get",
                            url:"http://localhost:8888/day10_war_exploded/managerServlet?flag=checkUsername&username="+this.username
                        }).then(resp => {
                            if (resp.data) {
                                this.username_msg = "";
                                this.username_flag = true;
                            } else {
                                this.username_msg = "账号已存在";
                                this.username_flag = false;
                            }
                        });
                    }
                },
                checkPwd:function(){
                    if (this.pwd == "") {
                        this.pwd_msg = "密码不能为空";
                        this.pwd_flag = false;
                    } else if (this.pwd.length < 8) {
                        this.pwd_msg = "密码至少8个字符";
                        this.pwd_flag = false;
                    } else {
                        this.pwd_msg = "";
                        this.pwd_flag = true;
                    }
                },
                register:function(){
                    if (this.username_flag && this.pwd_flag) {
                        //处理需要传递给后端的数据,使用这种方式处理数据时,method值必须是post
                        let params = new URLSearchParams();
                        params.append("flag","register");
                        params.append("username",this.username);
                        params.append("pwd",this.pwd);
                        //数据全部通过校验
                        axios({
                            method:"post",
                            url:"http://localhost:8888/day10_war_exploded/managerServlet",
                            data:params
                        }).then(resp => {
                            if (resp.data) {
                                alert("注册成功");
                                window.location.href = "login.html";
                            } else {
                                alert("注册失败，请稍后再试");
                            }
                        });
                    } else {
                        alert("请认真填写数据");
                    }
                }
            }
        });
        vueApp.mount("#app");
    </script>
</body>
</html>

2.login.html-登录功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <script src="js/vue.global.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <form>
            账号：<input type="text" v-model="username" @blur="checkUsername()">
            <span style="color:red">{{username_msg}}</span><br>
            密码：<input type="password" v-model="pwd" @blur="checkPwd()">
            <span style="color:red">{{pwd_msg}}</span><br>
            <input type="button" value="登录" @click="login()">
        </form>
    </div>
    <script>
        const vueApp = Vue.createApp({
            data(){
                return {
                    username:"",
                    pwd:"",
                    username_msg:"",
                    pwd_msg:"",
                    username_flag:false,
                    pwd_flag:false
                }
            },
            methods:{
                checkUsername(){
                    if (this.username == "") {
                        this.username_msg = "账号不能为空";
                        this.username_flag = false;
                    } else if (this.username.length < 6) {
                        this.username_msg = "账号至少6个字符";
                        this.username_flag = false;
                    } else {
                        axios({
                            method:"get",
                            url:"http://localhost:8888/day10_war_exploded/managerServlet?flag=checkUsername&username="+this.username
                        }).then(resp => {
                            if (resp.data) {
                                this.username_msg = "该账号未注册，请先注册";
                                this.username_flag = false;
                            } else {
                                this.username_msg = "";
                                this.username_flag = true;
                            }
                        });
                    }
                },
                checkPwd(){
                    if (this.pwd == "") {
                        this.pwd_msg = "密码不能为空";
                        this.pwd_flag = false;
                    } else if (this.pwd.length < 8) {
                        this.pwd_msg = "密码至少8个字符";
                        this.pwd_flag = false;
                    } else {
                        this.pwd_msg = "";
                        this.pwd_flag = true;
                    }
                },
                login(){
                    if (this.username_flag && this.pwd_flag) {
                        let params = new URLSearchParams();
                        params.append("flag","login");
                        params.append("username",this.username);
                        params.append("pwd",this.pwd);
                        axios({
                            method:"post",
                            url:"http://localhost:8888/day10_war_exploded/managerServlet",
                            data:params
                        }).then(resp => {
                            if (resp.data) {
                                alert("登录成功");
                                window.location.href = "index.html";
                            } else {
                                alert("密码有误，请查证后再登录");
                            }
                        });
                    } else {
                        alert("请认真填写数据");
                    }
                }
            }
        });
        vueApp.mount("#app");
    </script>
</body>
</html>

3.学生信息展示

(1) studentInfo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.global.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <table cellspacing="0" cellpadding="0" border="1" width="500" align="center">
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>邮箱</th>
                <th>头像</th>
            </tr>
            <tr v-for="stu in stus">
                <td>{{stu.sid}}</td>
                <td>{{stu.sname}}</td>
                <td>{{stu.sage}}</td>
                <td>{{stu.sgender}}</td>
                <td>{{stu.semail}}</td>
                <td>
                    <img :src="'http://localhost:8888/sms_pic/student/'+stu.sphoto" width="50">
                </td>
            </tr>
        </table>
        <div>
            <a href="javascript:void(0)" @click="getStudentByPage(1)">首页</a>
            <a href="javascript:void(0)" @click="getStudentByPage(prevPage)">上一页</a>
            {{page}}/{{countPages}}
            <a href="javascript:void(0)" @click="getStudentByPage(nextPage)">下一页</a>
            <a href="javascript:void(0)" @click="getStudentByPage(countPages)">尾页</a>
        </div>
    </div>
    <script>
        const vueApp = Vue.createApp({
            data:function(){
                return {
                    stus:"",
                    page:"",
                    countPages:"",
                    prevPage:"",
                    nextPage:""
                }
            },
            methods:{
                getStudentByPage(p){
                    let params = new URLSearchParams();
                    params.append("flag","getStudentByPage");
                    params.append("page",p);
                    axios({
                        method:"post",
                        url:"http://localhost:8888/day10_war_exploded/studentServlet",
                        data:params
                    }).then(resp => {
                        this.stus = resp.data.list;
                        this.page = resp.data.page;
                        this.countPages = resp.data.countPages;
                        this.prevPage = resp.data.prevPage;
                        this.nextPage = resp.data.nextPage;
                    });
                }
            },
            created:function(){
                this.getStudentByPage(1);
            }
        });

        vueApp.mount("#app");
    </script>
</body>
</html>

(2) PageUtil.java-分页代码

package com.etime.util;

import java.util.List;

public class PageUtil {
    private int page;      //当前页页码
    private int rows;       //每页显示条数
    private int index;      //偏移量
    private int countRows;      //总条数
    private int countPages;     //总页数
    private int prevPage;       //当前页的上一页页码
    private int nextPage;       //当前页的下一页页码
    private List list;  //当前页的数据

    public PageUtil(String page,int rows,int countRows){
        init_page(page);
        this.rows = rows;
        init_index();
        this.countRows = countRows;
        init_countPages();
        init_prevPage();
        init_nextPage();
    }

    private void init_page(String page){
        if (page == null || "".equals(page)) {
            this.page = 1;
        } else {
            this.page = Integer.parseInt(page);
        }
    }

    private void init_index(){
        this.index = (this.page - 1) * this.rows;
    }

    private void init_countPages(){
        int mod = this.countRows % this.rows;
        if (mod == 0) {
            this.countPages = this.countRows / this.rows;
        } else {
            this.countPages = this.countRows / this.rows + 1;
        }
    }

    private void init_prevPage(){
        if (this.page == 1) {
            this.prevPage = 1;
        } else {
            this.prevPage = this.page - 1;
        }
    }

    private void init_nextPage(){
        if (this.page == this.countPages) {
            this.nextPage = this.countPages;
        } else {
            this.nextPage = this.page + 1;
        }
    }

    public int getPage() {
        return page;
    }

    public int getRows() {
        return rows;
    }

    public int getIndex() {
        return index;
    }

    public int getCountRows() {
        return countRows;
    }

    public int getCountPages() {
        return countPages;
    }

    public int getPrevPage() {
        return prevPage;
    }

    public int getNextPage() {
        return nextPage;
    }

    public List getList() {
        return list;
    }

    public void setList(List list) {
        this.list = list;
    }
}

(3)StudentServlet.java

    protected void getStudentByPage(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        //分页数据查询
        String page = req.getParameter("page");
        int rows = 10;
        int countRows = studentService.getCountRows();
        PageUtil pageUtil = new PageUtil(page, rows, countRows);
        List<Student> list = studentService.getStudentByPage(pageUtil);
        pageUtil.setList(list);
        ObjectMapper mapper = new ObjectMapper();
        String res = mapper.writeValueAsString(pageUtil);
        PrintWriter out = resp.getWriter();
        out.print(res);
        out.close();
    }

(3)StudentServlet.java

    protected void getStudentByPage(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        //分页数据查询
        String page = req.getParameter("page");
        int rows = 10;
        int countRows = studentService.getCountRows();
        PageUtil pageUtil = new PageUtil(page, rows, countRows);
        List<Student> list = studentService.getStudentByPage(pageUtil);
        pageUtil.setList(list);
        ObjectMapper mapper = new ObjectMapper();
        String res = mapper.writeValueAsString(pageUtil);
        PrintWriter out = resp.getWriter();
        out.print(res);
        out.close();
    }