位置: IT常识 - 正文

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

编辑:rootadmin
一文弄懂Vue与Servlet的交互:让你的大学课设变得容易起来 文章目录1 写作动机2 准备工作3 前端请求3.1 get请求3.1.1 仿照网站栏撰写3.1.2 按照Parms格式传参3.2 Post请求3.2.1 按照Data格式传参3.2.2 按照Params格式传参3.3 一个特殊的点4 后端接收请求4.1 提要4.2 代码4.2.1 架子4.2.2 模块一:获取参数4.2.3 模块二:处理参数4.2.4 模块三:反馈参数4.3 思考1 写作动机

推荐整理分享一文弄懂Vue与Servlet的交互:让你的大学课设变得容易起来(vue区别),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue区别,vue区别,vue和vuejs,vue和servlet,vue和ssm,vue和vuejs,vue和ssm,vue和ssm,内容如对您有帮助,希望把文章链接给更多的朋友!

目前较为流行的套装是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 仿照网站栏撰写

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

比如我想访问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'一文弄懂Vue与Servlet的交互:让你的大学课设变得容易起来(vue区别)

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

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

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

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

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

3.2.2 按照Params格式传参

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

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

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

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

然后便可正常发送成功!

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{}

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

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.jiuchutong.com/zhishi/299330.html 转载请保留说明!

上一篇:英雄联盟轮播图手动轮播(英雄联盟轮转模式2020时间表)

下一篇:uniapp中uni.navigateTo传递变量

  • 苹果13pro相机怎么提取文字(iphone 13 pro照相)

    苹果13pro相机怎么提取文字(iphone 13 pro照相)

  • 朋友仅展示最近一个月的朋友圈是被删了吗(朋友仅展示最近一个月的朋友圈是被屏蔽了吗)

    朋友仅展示最近一个月的朋友圈是被删了吗(朋友仅展示最近一个月的朋友圈是被屏蔽了吗)

  • 百词斩怎么注销账号(百词斩怎么注销微信绑定)

    百词斩怎么注销账号(百词斩怎么注销微信绑定)

  • 苹果怎么用身份证打电话(苹果怎么用身份证)

    苹果怎么用身份证打电话(苹果怎么用身份证)

  • 华为手机计算机怎么设置不旋转(华为手机计算机在哪里可以找到)

    华为手机计算机怎么设置不旋转(华为手机计算机在哪里可以找到)

  • 小米手机该怎么恢复出厂设置(小米手机该怎么隐藏游戏)

    小米手机该怎么恢复出厂设置(小米手机该怎么隐藏游戏)

  • 话费欠费不交3个月会怎样(话费欠费不交会越欠越多吗)

    话费欠费不交3个月会怎样(话费欠费不交会越欠越多吗)

  • 红米手机发烫怎么解决(红米手机发烫怎么办 只需一招轻松解决)

    红米手机发烫怎么解决(红米手机发烫怎么办 只需一招轻松解决)

  • lp68级防水是什么概念(lp68防水等级排名)

    lp68级防水是什么概念(lp68防水等级排名)

  • 不同ip地址是什么意思(不同的ip地址)

    不同ip地址是什么意思(不同的ip地址)

  • 苹果ipad能插手机卡么(ipad能接usb接口吗)

    苹果ipad能插手机卡么(ipad能接usb接口吗)

  • 为什么手机一直是3g(为什么手机一直发烫)

    为什么手机一直是3g(为什么手机一直发烫)

  • 怎么退订咪咕所有服务(如何取消咪咕续费)

    怎么退订咪咕所有服务(如何取消咪咕续费)

  • 手机4g网络慢怎么办(手机4g网很慢)

    手机4g网络慢怎么办(手机4g网很慢)

  • 手机贴吧怎么看私信(手机贴吧怎么看精品贴)

    手机贴吧怎么看私信(手机贴吧怎么看精品贴)

  • 苹果x呼吸灯怎么打开(苹果x呼吸灯怎么设置)

    苹果x呼吸灯怎么打开(苹果x呼吸灯怎么设置)

  • 抖音0播放怎么回事(抖音播放怎么录屏)

    抖音0播放怎么回事(抖音播放怎么录屏)

  • 新苹果11什么时候上市(iphone 11多久上市的)

    新苹果11什么时候上市(iphone 11多久上市的)

  • 抖音私发消息能删除么(抖音私发信息会显示已读吗)

    抖音私发消息能删除么(抖音私发信息会显示已读吗)

  • 段前分页在哪里设置(段前分页与分页符有什么区别)

    段前分页在哪里设置(段前分页与分页符有什么区别)

  • appstore无法设置生物识别(无法设定apple pay)

    appstore无法设置生物识别(无法设定apple pay)

  • 鸿蒙3.0平板适配名单最新详情(鸿蒙3.0平板适配名单)

    鸿蒙3.0平板适配名单最新详情(鸿蒙3.0平板适配名单)

  • Win11操作系统无缝支持安卓 App 界面大更新(win11开机后无法操作)

    Win11操作系统无缝支持安卓 App 界面大更新(win11开机后无法操作)

  • 前端如何调用后端接口进行数据交互(极简)(前端如何调用后端方法)

    前端如何调用后端接口进行数据交互(极简)(前端如何调用后端方法)

  • DOM学习详细笔记(dom常用方法)

    DOM学习详细笔记(dom常用方法)

  • 出口发票开错了如何处理
  • 财政补贴收入要交印花税吗
  • 公司交社保是怎么计算的
  • 个人动产租赁所得税税率表最新
  • 工程结算账务处理实例
  • 持有待售的固定资产减值可以转回吗
  • 报销餐费有增值税吗
  • 税前扣除的职工福利费标准
  • 企业发生的借款费用,可直接归属于
  • 工业企业月末结转分录
  • 增值税专票5%税率
  • 雇主责任险是否属于财产保险
  • 收购农产品销售会计分录怎么写
  • 仅提供发票
  • 小微企业必须给员工缴纳哪些保险
  • 初级备考心得总结
  • 开过去的普通发票多久不能冲红?
  • win11系统进程
  • 低值易耗品的界定标准何时修改的
  • 为什么可供出售的金融资产是非流动资产
  • 报考中级会计的工作证明
  • 固态硬盘如何接入电脑
  • php实验步骤
  • u盘重装系统电脑
  • 创业补贴的作用
  • 物流公司的收入怎么记账
  • axios异步请求数据
  • 蓝桥杯等级
  • 酒店会计科目及账务处理视频
  • 不动产出租管理办法
  • 年底社保怎么交
  • 社保缴费基数差1000一般差多少?
  • 现金流量表中如何考虑折旧费
  • 金税盘锁死咋办
  • 增值税多扣款了怎么处理
  • vmware vmtools
  • 民政局登记的教育机构
  • 差旅费报销会计凭证
  • 什么是房地产企业?它主要具有哪些特性?
  • 小规模纳税人附加税怎么算
  • 开发商出售商铺税费
  • 办公桌椅入什么会计科目
  • 个税手续费返还比例
  • 会计凭证的填制与审核实训总结
  • 资本公积的核算维度是什么
  • 长期待摊费用的二级科目有哪些
  • 可供出售债权投资
  • 差旅费抵扣政策内容
  • 合伙企业是如何成立的
  • 融资租赁固定资产不属于筹资活动
  • 工程担保属于什么
  • 资产负债率多少属正常范围
  • 企业如何进行年报
  • 在第一周
  • CentOs7.x安装Mysql的详细教程
  • the bluetooth device is ready to pale
  • 苹果电脑 输入
  • centos 安装选择
  • linux获取操作命令的使用方法或参数选项内容
  • parallel capacitor
  • centos6.5配置ssh
  • win8 自动登录
  • freebsd安装教程
  • 环境搭建怎么写
  • eclipse cocos2dx Couldn't load cocos2dcpp from loader
  • 运行node.js的应用程序服务器
  • web docs
  • 访问网页显示脚本错误
  • javascript的基本规范
  • jquerydom操作
  • 安卓小项目实战软件
  • android:ViewPager与FragmentPagerAdapter
  • jq form提交
  • 税务局收垃圾处置费
  • 江苏省国家税务局电话号码
  • 江西省税务局12366
  • 沈阳市税务局最新公告
  • 四川税务法人实名采集
  • 公司完税证明去哪里开具
  • 佛山退休办理
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设