Vue和Servlet搭配使用

这里使用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 {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException {doPost(req, resp);}@Overrideprotected 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");// 实例化GsonGson 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);}}
}

ResultInfo.java

public class ResultInfo {private int ok;private String msg;public ResultInfo(int ok, String msg) {this.ok = ok;this.msg = msg;}public int getOk() {return ok;}public void setOk(int ok) {this.ok = ok;}public String getMsg() {return msg;}public void setMsg(String msg) {this.msg = msg;}
}

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()方法内的第二个处理函数没有参数表示如果信息无法传入后端，该怎么处理。第二个函数可以不要。

如果对完整源码有兴趣。

可搜索微信公众号【Java实例程序】或者扫描下方二维码关注公众号获取更多。

注意：在公众号后台回复【CSDN202001151958】可获取本节源码。

Vue和Servlet搭配使用相关推荐

Vue的项目搭配以及实现页面跳转【电竞杜小帅】
Vue的项目搭建 1.安装Node.js 下载Node.js,Node.js安装包及源码下载地址:https://nodejs.org/en/download,其他默认就行. 安装好了以后调出命令行输 ...
nodejs+python+php+springboot+vue 女生穿衣搭配系统
本文研究的女生穿衣搭配管理基于当前较为流行的B/S结构通过本系统,实现了不同权限的用户登录,包括用户和管理员.管理员:用户管理.类型信息管理.服饰单品管理.今日搭配管理.论坛管理.系统管理.我的收藏 ...
vue父子组件搭配(添加数据和删除)
<template><div><Shijian :addTodo="addTodo" /> ...
用 cooking 搭建一个简单又优雅的 Vue 项目开发环境 (入门篇)
本文适合 Vue 的初学者,以及对 webpack 不熟悉的同学阅读.前提是你要会用基本的命令行. Node 和 NPM,以及掌握 ES2015 的基础知识.本文都是在 macOS 环境下运行,要求使 ...
echarts迁徙图 vue_vue中高德搭配echarts做数据迁徙流线图
前言此系列共分为以下几篇 <vue中高德地图的使用> <vue中基于高德的多行政区域覆盖> <vue中高德搭配echarts做数据迁徙流线图> (本篇) 本篇效果 ...
vue 获取当前发布的版本_Vue 3.0重磅发布！
来源:OSC开源社区(ID:oschina2013) Vue.js 3.0 "One Piece" 已正式发布,此框架新的主要版本提供了更好的性能.更小的捆绑包体积.更好的 Typ ...
vue + element-ui 聊天_推荐6款Vue管理后台框架，收藏好，留备用
Vue.js 是一个目前比较流行的前端框架,在业界也算很有名气,今天这里为大家罗列一下基于Vue的后端管理的框架. 使用这些框架你会发现它包括了我们常用的路由,状态,交互等等,我们只需要去复用它的代码 ...
vue人力管理_Vue管理后台框架选择推荐（收藏）
VUE Vue.js 是一个目前比较流行的前端框架,在业界也算很有名气,今天这里为大家罗列一下基于Vue的后端管理的框架.使用这些框架你会发现它包括了我们常用的路由,状态,交互等等,我们只需要去复用它 ...
Vue 3 正式发布
Vue.js 3.0 "One Piece" 已正式发布,此框架新的主要版本提供了更好的性能.更小的捆绑包体积.更好的 TypeScript 集成.用于处理大规模用例的新 API, ...

Vue和Servlet搭配使用

Vue和Servlet搭配使用相关推荐

最新文章

热门文章