Vue和Servlet搭配使用【转载】

最新推荐文章于 2024-08-26 14:19:42 发布

5477呀

最新推荐文章于 2024-08-26 14:19:42 发布

阅读量2.8k

点赞数 1

文章标签： vue servlet

原文链接：https://blog.csdn.net/cnds123321/article/details/103995065

版权

本文介绍了如何使用Vue和Servlet实现一个简单的前后端分离的JavaWeb项目。通过创建LoginServlet处理登录请求，利用Gson处理JSON数据，结合vue-resource插件进行前后端交互。在前端，用户输入的用户名和密码通过Vue发送HTTP请求到后端，后端根据输入判断登录是否成功并返回相应信息。

摘要由CSDN通过智能技术生成

原文链接：https://blog.csdn.net/cnds123321/article/details/103995065

这里使用Vue+Servlet实现简单的前后端分离的JavaWeb项目。

首先创建一个基本的JavaWeb项目。

按照下图创建文件夹和文件，并导入vue所需要使用的js文件和处理json格式数据所需要的第三方加包gson包。
在这里插入图片描述

要实现前后端交互这里需要使用到vue-resource插件，原生的vue没有前后端交互的，，要通过这个插件来实现。

下载vue-resource.js插件可以参考博客安装vue-resource插件

各文件代码如下：

LoginServlet.java

import com.google.gson.Gson;
 
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
 
public class LoginServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        doPost(req, resp);
    }
 
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        // 设置请求的编码格式
        req.setCharacterEncoding("UTF-8");
        // 设置响应的编码格式
        resp.setContentType("application/json; charset=utf-8");
        // 获取用户输入的用户名
        String user = req.getParameter("user");
        // 获取用户输入的密码
        String password = req.getParameter("password");
        // 实例化Gson
        Gson gson = new Gson();
        // 判断是否登录成功
        if (user.equals("admin") && password.equals("admin")) {
            // 登录成功则输出提示信息
            String result = gson.toJson(new ResultInfo(1, "登录成功"));
            resp.getWriter().write(result);
        } else {
            // 登录失败也输出提示信息
            String result = gson.toJson(new ResultInfo(0, "用户名或密码错误"));
            resp.getWriter().write(result);
        }
    }
}

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <servlet>
        <servlet-name>loginServlet</servlet-name>
        <servlet-class>LoginServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>loginServlet</servlet-name>
        <url-pattern>/loginServlet</url-pattern>
    </servlet-mapping>
</web-app>

index.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Vue学习</title>
    <!-- 引入vue.js -->
    <script src="js/vue.min.js"></script>
    <!--引入vue-resource.js插件-->
    <script src="js/vue-resource.min.js"></script>
</head>
<body>
<div id="app">
    用户名：<input type="text" v-model="user"><br>
    密码：<input type="password" v-model="password"><br>
    <input type="button" value="submit" @click="login()">
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            user: '',
            password: ''
        },
        methods: {
            login: function () {
                this.$http.get('http://localhost:8080/loginServlet', {
                    params: {
                        user: this.user,
                        password: this.password
                    }
                }).then(function (data) {
                    if (data.data.ok != 1) {
                        alert(data.data.msg);
                    } else {
                        alert(data.data.msg);
                    }
                }, function () {
                    console.log('传输失败');
                });
            }
        }
    })
</script>
</body>
</html>

运行效果：

输入用户名：user，密码：user

在这里插入图片描述

输入用户名：admin，密码：admin
在这里插入图片描述

代码解释说明：

vue-resource插件提供了一个$http方法来传递前后端的数据。
方法后面接传输方式：get()或post()
get()方法内的第一个参数是写后端请求的地址；第二个参数是以JSON形式放入的数据名和数据。
在get()方法后还能使用then()方法来进行报错判断，方法内传入两个处理函数。
then()方法内的第一个处理函数有个形参，该形参是后台定义的传入信息，自定义的，可以根据需要更改判断信息。
then()方法内的第二个处理函数没有参数表示如果信息无法传入后端，该怎么处理。第二个函数可以不要。

原文链接：https://blog.csdn.net/cnds123321/article/details/103995065