MVC之利用Vue与axios传递json串实现页面请求

我看见光了

已于 2023-02-19 17:52:51 修改

阅读量529

点赞数

文章标签： java mvc 前端 Powered by 金山文档

于 2023-02-19 00:07:51 首次发布

本文链接：https://blog.csdn.net/qq_51114005/article/details/129105992

版权

以注册项目为例：

前端部分

 zc() {
                // 发请求
                if(this.flag) {
                    axios.post("register.do",{
                        username: this.username,
                        password: this.password
                    }).then(function(response) {
                        _this.msg = "success";
                    })
                }else {
                    alert("请检查用户名！");
                }
            }

上述代码理解：

①调用axios库的方法post来发送局部请求，这也正表明了axios可以实现局部刷新的原因就是实现了局部发送请求，而非将整个表单的请求发送以至于刷新整个页面。

②post在发送请求时，可以带有属性参数一并发给Controller层，以返回对应的响应。

③需要注意的是，这里的username和password是在vue对象的“data”里定义好的，如果没有事先定义的话，在运行程序进行时，也能够正常进行渲染，只是会有报错信息！

④flag是用来先一步判断用户名是否存在的，不是重点，不要管~

控制层部分

 PrintWriter out = response.getWriter();
            // 准备接收axios传过来的json串类型的参数↓
            BufferedReader reader = request.getReader();
            String json = reader.readLine();
            //把json串转成对象↓
            User user = JSON.parseObject(json,User.class);

            boolean b = userService.register(user);

            if(b) {
                out.write(JSON.toJSONString(new Message(200,"successed")));
            }else {
                out.write(JSON.toJSONString(new Message(201," failed ")));
            }

上述代码理解：

①由于axios传过来的是json串，所以我们不能普通地用request.getParameter()来接参数，这时就要调用request的方法，调用一个输入流来接。然后再将接到的json串存入一个普通的字符串里。

②第六行代码，这里使用了阿里的一个工具类fastjson，将json串转成我们要的对象（直接就能把json串里的“键值对”转成属性！太神奇了，感谢前辈负重前行~）。接下来直接把转成的对象传入Model层的方法就能实现我们的功能了（这里Service里的login方法就是判断用户名和密码是否在数据库匹配）~

   exists() {
                let _this = this;
                axios.get("exists.do?username=" + this.username)
                    .then(function(response) {
                        let data = response.data;
                        console.log(data);
                        if(data.code == 200) {
                            _this.msg = "用户可以使用";
                            _this.flag = true;
                        }
                        if(data.code == 201) {
                            _this.msg = "用户名已存在";
                        }

③（案例比较尴尬，register没用到这部分内容，于是这第③点要参考上述exists部分代码）我们得到了json串，同样也要传回一个json串，这里也是用到了fastjson的方法，将对象转成json串，之后用response的方法，调用一个输出流输出去~（这里的Message对象是自己写的一个工具类，里面的参数code和message随便定义），这是专门用来做响应的，前端收到这个json串会解析出里面的内容，这时你就可以根据code来给用户做出回应咯~

HTML完整代码：

<body>
<div id="app">
    帐号：<input type="text" v-model="username" @blur="exists"><span>{{msg}}</span><br>
    密码：<input type="password" v-model="password"><br>
    <input type="button" value="注册" @click="zc">
</div>
<script src="static/js/vue.js"></script>
<script src="static/js/axios.min.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            username:"",
            password:"",
            msg:"",
            flag: false,
        },
        methods: {
            exists() {
                let _this = this;
                axios.get("exists.do?username=" + this.username)
                    .then(function(response) {
                        let data = response.data;
                        console.log(data);
                        if(data.code == 200) {
                            _this.msg = "用户可以使用";
                            _this.flag = true;
                        }
                        if(data.code == 201) {
                            _this.msg = "用户名已存在";
                        }
                    });
            },
            zc() {
                // 发请求
                if(this.flag) {
                    axios.post("register.do",{
                        username: this.username,
                        password: this.password
                    }).then(function(response) {
                        _this.msg = "success";
                    })
                }else {
                    alert("请检查用户名！");
                }
            }
        }
    });
</script>
</body>

Servlet之register代码：

@WebServlet("/register.do")
public class RegisterServlet extends HttpServlet {
    private UserService userService = new UserServiceImpl();
        @Override
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            PrintWriter out = response.getWriter();
            // 准备接收axios传过来的json串类型的参数↓
            BufferedReader reader = request.getReader();
            String json = reader.readLine();
            //把json串转成对象↓
            User user = JSON.parseObject(json,User.class);

            boolean b = userService.register(user);

            if(b) {
                out.write(JSON.toJSONString(new Message(200,"successed")));
            }else {
                out.write(JSON.toJSONString(new Message(201," failed ")));
            }
        }
    }

Servlet之exists代码：

@WebServlet("/exists.do")
public class ExistsServlet extends HttpServlet {
    private UserService userService = new UserServiceImpl();
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");

        boolean b = userService.checkUsername(username);

        PrintWriter out = response.getWriter();
        if(b) {
            out.write(JSON.toJSONString(new Message(200,"username is unused")));
        }else {
            out.write(JSON.toJSONString(new Message(201,"username is used")));
        }
    }

}

工具类Message代码

public class Message {

    private Integer code;
    private String message;

    public Integer getCode() {
        return code;
    }

    public void setCode(Integer code) {
        this.code = code;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public Message() {
    }

    public Message(Integer code, String message) {
        this.code = code;
        this.message = message;
    }
}