首页 > 其他分享 >vue和servlet 前后端分离 (复习)

vue和servlet 前后端分离 (复习)

时间:2023-07-12 20:23:53浏览次数:36  
标签:vue HTTP 复习 servlet HttpServlet Servlet 请求

一、vue复习

1.vue的使用步骤:

(1)导入vue.js
(2)创建除body以外最大的div标签,给定id值
(3)创建vue对象

 new Vue({
           el:"#app",
           data:{}//定义变量
           methods:{} //定义方法

2.vue语法:

v-bind:value(:value),v-model:value="",v-if,v-show,
v-for的使用及用途
  {{}}插值表达式
1、v-bind单项数据绑定 
<input v-bind:value= "***">
2、v-model双向数据绑定 
<input v-model= "***">
同步更改data里面的***值(只能运用在表单元素中) 
3、v-model相当于value的效果

二、servlet和tomcat

Servlet是一个java程序,是一个能够接收HTTP请求的Java类,因此需要实现HTTP请求
在JavaEE库中有一个类javax.servlet.http.HttpServlet实现了HTTP协议,我们创建的类只要继承这个HttpServlet类,就实现了HTTP协议,就能接受HTTP请求

创建一个类继承javax.servlet.http.HttpServlet
继承HttpServlet的类就能够接收HTTP请求,我们把这样的类称之为Servlet类,类似***Servlet格式命名
在我们创建的Servlet类中,重写doPost/doGet用于处理用户不同的请求

servlet配置

在创建的Servlet类上添加@WebServlet注解,在注解后的参数中配置url,url也必须是以/开头

//每一个类,继承HttpServlet,该类就是一个Servlet,每一个servlet都有一个访问路径
@WebServlet("/deptC")
public class DeptC extends HttpServlet {
    //引入service层
    private IDeptService deptService=new DeptServiceImpl();
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("测试访问doget...");
        var list = deptService.list();
        System.out.println(list);
        //数据转化成json格式,再响应给游览器
        JsonUtil.transJson(list,resp);
    }

在这里插入图片描述
在这里插入图片描述

tomcat配置
![](/i/ll/?i=8fbacb8233c946b494d8248dcf8e9b79.png

Tomcat 响应用户请求的过程如下:

1、用户通过浏览器向 Tomcat(web服务器)发送一个 HTTP 请求。
2、Tomcat 接收到请求后,将请求信息发送给 Servlet 容器,并交给servlet 容器一个请求对象和一个响应对象。
3、Servlet 容器加载 Servlet,先创建一个 Servlet实例。然后告诉这个 servlet 实例说:嘿!小伙,我这里有一个用户的请求对象和响应对象,你来处理一下。
4、Servlet 实例从请求对象拿到客户端的请求信息,然后进行相应的处理。
5、Servlet 实例将处理结果交给响应对象,通过响应对象发送到客户端。
在这里插入图片描述
注解:
请求对象:HttpServletRequest
响应对象:HttpServletResponse

标签:vue,HTTP,复习,servlet,HttpServlet,Servlet,请求
From: https://www.cnblogs.com/xw-01/p/17548723.html

相关文章

  • 数学复习 定积分的应用
    这里主要复习积分的几何应用首先按应用情况进行梳理:(1)求平面图形的面积这部分的应用分为平面直角坐标和极坐标两种情况平面直角坐标的情况:当对x积分时,其取微分的方法是取长为f(x)-g(x),宽为dx的小矩形极坐标的情况在这种方法中,取微分的方法是取角度为dθ的狭窄的小扇形,整......
  • springboot+vue前后端分离项目发布上线
    首先呢不用多说就是买阿里云服务器,但是呢,学生免费一个月。前端呢就是配置与后端端口 然后呢就是要打包:npmrunbuild把你的dist文件东西进行上传到服务器。后端springboot呢就是要打jar包上传。然后服务器是先去下载配置jdk,然后就是点击网站选择springboot项目最后一步呢......
  • Vue无感刷新当前页面
    使用Vue选项/组合Apiprovide/inject Api地址,此方法可以实现无感刷新并且不会出现闪烁的空白。首先在根组件App.vue定义这个方法 html复制代码<template><divid="app"><router-viewv-if="routerAlive"></router-view></div><......
  • 记录--你知道Vue中的Scoped css原理么?
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助追忆Scoped偶然想起了一次面试,二面整体都聊完了,该做的算法题都做出来了,该背的八股文也背的差不多了,面试官频频点头,似乎对我的基础和项目经验都很是满意。嗯,我内心os本次面试应该十拿九稳了。突然,面试官说:「我的......
  • Vue3 实现点击菜单实现切换主界面组件
    子组件菜单组件 MenuComponent列表组件 ExtTelListComponent状态组件 ExtTelStatusComponent父组件界面主体MainIndex 实现功能:在 MainIndex中引入三个子组件 通过点击 菜单组件切换加载 列表组件和状态组件 实现效果一、菜单组件 MenuComponent<......
  • Vue bug from backend
    一个后端引发前端的BUG使用的框架是vue代码里面有一个获取后台数据this.data=awaitfetch()table里面是一些可以编辑的inputconstdataMock=[{id:3,input:''}]大概是一个这样的数据结构一切正常一段时间后,代码不正常了,但是前端这边没有更改通过Vue开发者工具......
  • vue2 + elementUI + sortablejs 实现可行拖拽排序表格
    需要实现表格(可以新增行,表格中直接编辑数据,行可上下拖动重新排序)实现效果(整行上下拖动之后,序号变化为1,2,3.......,可根据名称看效果哦):初始表格: 拖拽后:1.安装拖拽插件npminstallsortablejs--save页面中引入importSortablefrom'sortablejs'2.页面el-table......
  • Windows系统使用Nginx部署Vue
    Nginx是什么?Nginx(enginex)是一个高性能的HTTP和反向代理web服务器,同时也提供了IMAP/POP3/SMTP服务。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点开发的,因它的稳定性、丰富的功能集、简单的配置文件和低系统资源的消耗而闻名。优点速度更快、并发更高......
  • vue 打开浏览器新标签页预览 pdf 和 txt 文档,以及新标签页标题修改
    1//在线查看2showOnline({id,fileExt,fileName}){3if(fileExt&&['jpg','jpeg','gif','bmp','png'].includes(fileExt.toLowerCase())){4download(`/file-item/${id}/downl......
  • Vue3+.net6.0 六 条件渲染
    v-if,v-else-if,v-else控制元素是否渲染,不满足条件的时候不会有相应元素。<divv-if="type==='A'">A</div><divv-else-if="type==='B'">B</div><divv-else-if="type==='C'">C&l......