问题描述: 由于我是第一次写前后端分离的网页,所以心里一直不怎么清楚如何实现前后端连接,查阅了网上的资料后,发现大家后端基本都是用的SpringBoot,后端获取前端传送的数据,只需要通过注解就可以了,而传统的JSP写法,后端获取前端数据是通过
request.getParameter("参数名")
但是我们还是用不上,因为我们是用的 Vue+Servlet 这种不伦不类的组合,不过好在最终还是从网上到了解决方法. 解决方法: 前端,使用axios发送请求
//在main.js中 引入axios
import axios from 'axios'
//挂载axios
Vue.prototype.$http = axios
具体使用,以系统登录为例

在这里插入图片描述

<el-button type="primary" @click="login" style="width: 8vw">登录</el-button>
按钮绑定方法,点击按钮调用方法,获取用户输入的账号和密码,传递给后端,

在这里插入图片描述

后端:使用Servlet 接受前端数据,完成业务逻辑,返回结果

/*
因为没办法通过request.getParameter("参数名")方法获取前端传来的数据,
于是通过此方法接受前端传来的数据,转换为字符串输出
*/
private String getRequestPayload(HttpServletRequest req) {
		StringBuilder sb = new StringBuilder();
		try (BufferedReader reader = req.getReader();) {
			char[] buff = new char[1024];
			int len;
			while ((len = reader.read(buff)) != -1) {
				sb.append(buff, 0, len);
			}
		} catch (IOException e) {
			e.printStackTrace();
		}
		return sb.toString();
	}
使用上述方法,可以将前端传来的数据(键值对)转换为字符串,但这对我们的取数据就造成了麻烦,我前期一直用正则表达式处理字符串,获取想要的数据,最后随着前端传送的数据越来越复杂,该方法就不再合适了,**这里强推阿里的 fastjson包,可以直接将json字符串转换为对象,真香**

fastjson下载,看这篇文档

后端方法具体调用
String str = getRequestPayload(request);   //调用方法 获取前端数据,返回字符串
		System.out.println(str);
		if (str != null && str.length() != 0) {    //如果字符串不为空
			if (!str.contains("command")) {
				if (str.contains("admin")) {
					password = str.replaceAll("[[^0-9]]", ""); //正则表达式处理字符串,很麻烦
					System.out.println(password);
					res = manager.adminLogin("admin", password);
					flag = 0;
				} else {
					String newStr = str.replaceAll("[[^0-9,]]", "");
					String data[] = newStr.split(",");
					if (data[0].substring(0, 1).equals("4")) {
						res = manager.studentLogin(data[0], data[1]);
						flag = 2;
					} else {
						res = manager.teacherLogin(data[0], data[1]);
						flag = 1;
					}
				}
				PrintWriter out = response.getWriter();  //返回数据要用到的对象
				if (res && flag == 0) {
					out.write("管理员登录成功");    //具体返回数据,这里的内容就是前端res.data获取的内容
				} else if (res && flag == 1) {     //由于该方法只能返回字符串,所以如果你要返回数据(比如从数据库查询的数据)
					out.write("教师登录成功");	   //需要先将数据 通过阿里的fastjson工具转换为一个json字符串,这样发送过去,前端接收到会自动转换为对象
				} else if (res && flag == 2) {
					out.write("学生登录成功");
				}
				if (!res) {
					out.write("登录失败");
				}
到这一步,前后端的连接就打通了,之后就是不断的复用了,如果你的Servlet还不知道怎么跑起来,问度娘呗
Logo

前往低代码交流专区

更多推荐