一文弄懂Vue与Servlet的交互:让你的大学课设变得容易起来

这篇具有很好参考价值的文章主要介绍了一文弄懂Vue与Servlet的交互:让你的大学课设变得容易起来。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1 写作动机

目前较为流行的套装是SpringBoot+Vue。SpringBoot操作简单,仅会使用的话上手非常容易。那么小游你为何逆流而上,要写一个Vue+Servlet的交互呢?

要知道,CSDN最大的受众是学生,而且多数是大学生。就目前的形势而言,大学里的技术偏基础,有些甚至已经过时,如JSP。而有些老师又特别的“顽固”,规定学生的课设必须采用某某技术,那么小游的这篇文章就是为了方便这些人群,让他们在一定的后端限制上,也可以使用较流行的Vue来开发前端网站。

2 准备工作

对于Servlet不太纯熟的朋友,安利一下小游的JavaWeb专栏— JavaWeb专栏,虽然不是很好,但也足矣完成基础的工作。如果想直接使用的话,建议看一下里面的两篇实战。

Vue的准备工作,这涉及到挺多知识的了。略微列举一下:router(跳转)、aixos(发送请求+接受请求)。使用Elementui的话,还需引入Elementui,甚至有些特殊的操作,需要用到Vuex。

安利一下小游的这篇文章 从零搭建一个Vue项目,想要了解axios基础的。本文对接口进行统一管理,建议看一下小游的 Axios详解

3 前端请求

3.1 get请求

关于axios的get请求,我记录了两种方法。

3.1.1 仿照网站栏撰写

vue和servlet怎样结合的,Vue,Java Web,vue.js,前端,javascript

?后面是参数名=参数的内容,如果需要写多个,则用&分隔开来

比如我想访问loginServlet,同时携带用户名和密码

export const reqGetStudentByUsername = (username,password) => requests({ url: `/loginServlet?username=${username}&password=${password}`, method: 'get' });

此处的username、password即为后端 request.getParameter(参数);的参数值。

3.1.2 按照Parms格式传参

格式如下

export const reqGetStudentByLikename = (username) => requests({
   url: `/likeServlet`, params: {
      username:username
   }, method: 'get'
});

对于params,官方给出了这样两句话

  • params 是与请求一起发送的 URL 参数
  • 必须是一个简单对象或 URLSearchParams 对象

使用多个参数时,只需要在params这个参数里面继续写即可

export const reqGetStudentByLikename = (username) => requests({
   url: `/likeServlet`, params: {
      username:username,
   	  password:password,
       //........
   }, method: 'get'
});

3.2 Post请求

3.2.1 按照Data格式传参

对于Data的解释,官方给了如下几点:

  • data 是作为请求体被发送的数据

  • 仅适用 ‘PUT’, ‘POST’, 'DELETE 和 ‘PATCH’ 请求方法

  • 在没有设置 transformRequest 时,则必须是以下类型之一: string, plain object, ArrayBuffer,ArrayBufferView,URLSearchParams

  • 浏览器专属: FormData, File, Blob

  • Node 专属: Stream, Buffer

在统一管理的页面需要写成如下格式:

export const reqPreserveColor = (data) => requests({ url: "/preserveColor", method: 'post', data: data });

在使用的页面里面,需要进行如下操作:

npm install qs --save-dev

随后,在调用reqPreserveColor的文件中引入qs

import qs from 'qs'

在传参之前需要进行一步操作,

let data = qs.stringify({
        username: "游坦之",
        password: "20221114"
})

为什么要进行这样的一步操作呢?

可以追溯到上面Axios官方给出的解释,要求所传的Data必须是 string, plain object, ArrayBuffer,ArrayBufferView,URLSearchParams其中的一种,Vue中的Object应该不是其中之一,所以需要转化一下。

如果不转换直接传一个对象,那么netWork就不会显示这个请求,而且后端的Servlet也不会获取到相应的参数。

vue和servlet怎样结合的,Vue,Java Web,vue.js,前端,javascript

3.2.2 按照Params格式传参

Params要求的是一个对象,而不需要使用Qs转化,否者会爆如下的错误。所以使用Post请求,一定要区分好Params和Data两种方式。否则就容易出错

vue和servlet怎样结合的,Vue,Java Web,vue.js,前端,javascript

在管理接口的文件处,格式写成如下

export const reqPreserveColor = (params) => requests({ url: "/preserveColor", method: 'post', params: params });

在使用接口的地方,直接使用Vue的Object即可。

vue和servlet怎样结合的,Vue,Java Web,vue.js,前端,javascript

然后便可正常发送成功!

vue和servlet怎样结合的,Vue,Java Web,vue.js,前端,javascript

3.3 一个特殊的点

method千万不要写成methods,这个错困惑了我很长的时间

4 后端接收请求

4.1 提要

后端基本上都是固定的格式,大体分三步:接收参数、处理参数、反馈参数。

当然要产生不同的效果,就需要使用不同的Sql语句,切记,使用update和insert的时候,一定切记要提交一下,否则不会保存在数据库里面的。自己手动添加,数据库也会提醒你要commit的。

最后反馈的时候,还要转化成JSON格式,这样前端的页面,才能拿到正确的数值。

4.2 代码

4.2.1 架子

@WebServlet("/preserveColor")
public class preserveColor extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter out = resp.getWriter();
        /* 1、模块一:获取参数 */
        /* 2、模块二:执行业务逻辑*/
        /* 3、模块三:反馈给前端 */
        out.flush();
        out.close();
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doGet(req, resp);
    }
}

4.2.2 模块一:获取参数

String username = req.getParameter("user_no");
String color = req.getParameter("color");

4.2.3 模块二:处理参数

包括连接数据库以及操作数据库(这里省略了数据库sql语句的撰写,也就是insertUserInfo这个方法,需要写在UserMapper.interface这个类里面)

 String resource = "mybatis-config.xml";
 InputStream inputStream = null;
 inputStream = Resources.getResourceAsStream(resource);
 SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
 SqlSession sqlSession = sqlSessionFactory.openSession();
 UserMapper mapper = sqlSession.getMapper(UserMapper.class);
 boolean user = mapper.insertUserInfo(username,color);
 resp.setContentType("text/html;charset=UTF-8");
 PrintWriter writer = resp.getWriter();

4.2.4 模块三:反馈参数

如果执行的是update或者insert,一定要记得 sqlSession.commit();提交

 if (user) {
   sqlSession.commit();
   String json = JSON.toJSONString(user);
   System.out.println(json);
   out.write(json)
 }else{}

可以看到是可以正常获取到数据的。

vue和servlet怎样结合的,Vue,Java Web,vue.js,前端,javascript

4.3 思考

前两天和一个同学聊天聊到:前端每发一个请求都需要为之撰写Servlet匹配吗?

他讲到:通过获取Servlet的访问路径,对路径进行拆分,可以实现一个Servlet完成多个不同的请求。如/brand/*下的路径都来访问aServlet,再根据后缀路径找到不同的方法,如/brand/getOperaID,根据getOperaID,去找查询戏剧Id的方法,/brand/updateMusicID,根据updateMusicID去找修改音乐ID的方法。

我恍然大悟,原来SpringBoot每个方法前面的@GetMapping(“”)也应该是通过这种形式实现的。

访问路径,对路径进行拆分,可以实现一个Servlet完成多个不同的请求。如/brand/*下的路径都来访问aServlet,再根据后缀路径找到不同的方法,如/brand/getOperaID,根据getOperaID,去找查询戏剧Id的方法,/brand/updateMusicID,根据updateMusicID去找修改音乐ID的方法。

我恍然大悟,原来SpringBoot每个方法前面的@GetMapping(“”)也应该是通过这种形式实现的。

可见学习一定不要闭门造车,多和志同道合的人交流会有意想不到的收货,这一点是我所欠缺的。勉之!文章来源地址https://www.toymoban.com/news/detail-806831.html

到了这里,关于一文弄懂Vue与Servlet的交互:让你的大学课设变得容易起来的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Vue】怎样让你的组件变得更灵活?

    在我们的日常开发中,我们一般会引入做的比较成熟的第三方UI框架,比如ElementUI。 当我们在调用UI框架中的组件时,会发现常用的调用方式有两种,一种是直接在页面中嵌入组件: 另一种则是在js中通过方法调用: 可以看到ElementUI中的组件使用方式更加灵活,可以满足不同

    2024年02月06日
    浏览(82)
  • Vue自定义指令-让你的业务开发更简单

    在日常开发中,我们会将重复代码抽象为一个函数或者组件,然后在需要时调用或者引入。但是,对于某些功能,这种方法可能不够优雅或者不够灵活。例如,我们可能需要在DOM元素上添加一些自定义属性或者绑定一些事件,这些操作可能难以通过函数或组件来实现。这时,

    2024年02月08日
    浏览(64)
  • Vue实现二维码,让你的数据轻松传递

    在我们生活中,二维码的应用越来越广泛,特别是在移动互联网的时代,二维码成为了快速传达信息的一种利器。在这篇文章中,我们将会介绍如何在Vue框架下,实现一个具备扫描和查看数据的二维码。 在这一篇文章中,我们将会使用到以下两个库: qrcode.js :一个简单易用

    2024年02月05日
    浏览(54)
  • vue设置全局变量:让你的数据无处不在!

    在 vue 开发中,如何设置全局变量是一个关键问题。本文将介绍多种方法,帮助大家轻松实现全局变量的共享,提升 vue 项目的开发效率。让我们一起来探索这些方法,为你的 vue 项目带来更好的开发体验。 通过在 vue 的原型上定义属性,可以在所有组件中访问该属性。例如,

    2024年02月08日
    浏览(42)
  • Vue3实现酷炫打字机效果:让你的网站文字动起来

    ✅创作者:陈书予 🎉个人主页:陈书予的个人主页 🍁陈书予的个人社区,欢迎你的加入: 陈书予的社区 🌟专栏地址: 三十天精通 Vue 3

    2024年02月05日
    浏览(62)
  • 一篇让你完全弄懂GPIO的8种配置模式

            配置GPIO口是我们软件开发中必须要掌握的,每个模式的作用效果也是需要清楚的。如果连gpio应该配置成什么模式都不懂,是无法进行后面的开发的。 I/O端口的电平信号进入输入数据寄存器。I/O的电平状态是不确定的(高阻态),完全由外部输入决定。 其中 TTL施密

    2024年02月13日
    浏览(38)
  • 【大学生体质】图书管理系统(Vue+SpringBoot2)-完整部署教程【课设OR毕设提供API接口文档、数据库文件、README.MD、部署视频】

    本项目拥有完整的API后台接口文档(文尾) 项目部署视频正在录制 如果项目对您有所帮助,可以Star⭐一下,受到鼓励的我会继续加油。 项目在线演示地址 项目前端地址 项目后端地址 项目部署视频 ☃️前端主要技术栈 技术 作用 版本 Vue 提供前端交互 2.6.14 Vue-Router 路由式编

    2024年01月18日
    浏览(53)
  • 一文彻底弄懂ConcurrentHashMap

    前面分析 HashMap 的文章,提到过 HashMap 是线程不安全的,其主要原因还是在链表扩容。 JDK1.7 的 HashMap 的扩容操作用到两个方法: resize() 和 transfer() ,主要是重新定位每个桶的下标,并采用 头插法 将元素迁移到新的数组中。假设有多个线程都对 HashMap 进行扩容,有可能扩容

    2024年02月05日
    浏览(43)
  • 一文弄懂Flink CDC

    1.CDC概述 CDC(Change Data Capture)是一种用于捕获和处理数据源中的变化的技术。它允许实时地监视数据库或数据流中发生的数据变动,并将这些变动抽取出来,以便进行进一步的处理和分析。 传统上,数据源的变化通常通过周期性地轮询整个数据集进行检查来实现。但是,这

    2024年02月14日
    浏览(58)
  • 一文弄懂numpy数组

    前言 学习数据分析,必绕不开numpy和pandas这两个库,numpy的ndarray数据结构和矩阵数据非常类似,最近搞科研的时候总是会用到,之前学的都忘记完了,所以,这次打算把numpy库的基本用法记录在一篇文章里,以便后面复习和使用。 ndarray多维数组创建 不要管复杂的概念,我们

    2024年02月05日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包