使用tomcat部署前后端程序与前后端交互的几种方式_部署完前端怎么把后端

本文主要涉及如何使用tomcat部署前后端程序与前后端交互的几种方式,首先先是如何在tomcat中部署后端程序

部署后端程序

1.创建项目

首先要在idea中创建一个maven项目

右上角文件-新建-新建项目选择maven项目 这样就得到了一个pom.xml的项目

2.引入依赖

创建<dependencies>标签 并在其中引入对应jar包 代码如下文

 <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
            <scope>provided</scope>
        </dependency>

该代码中包含了接下来所需要的http类所需要的父类

引入后pom.xml项目文件如下

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
 
    <groupId>org.example</groupId>
    <artifactId>untitled1</artifactId>
    <version>1.0-SNAPSHOT</version>
 
    <properties>
        <maven.compiler.source>8</maven.compiler.source>
        <maven.compiler.target>8</maven.compiler.target>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>
    <dependencies>
        <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
            <scope>provided</scope>
        </dependency>
        <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.14.1</version>
        </dependency>
        
    </dependencies>
<packaging>war</packaging>
    <build><finalName>hello_servlet1</finalName></build>
</project>

3.创建项目

在webapp文件夹下新建一个WEB-INF文件 在此文件夹下创建一个web.xml文件

引入该文件主要是告诉tomcat 该项目需要tomcat所带运行

在web.xml中写入如下代码

<!DOCTYPE web-app PUBLIC
        "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
        "http://java.sun.com/dtd/web-app_2_3.dtd" >
<web-app>
    <display-name> Archetype Created Web Appl ication </display-name>
</web-app>

 到现在为止都是固定套路

4.创建代码

在java文件夹下创建java代码

@WebServlet("/hello1")
public class hellosevelet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
 
       // super.doGet(req, resp);
        //属于resp对象 写入resp的body对象
        String student=req.getParameter("studentid");
        String classid=req.getParameter("classid");
        resp.getWriter().write("studentid="+student+"classid="+classid);
 
 
    }
}

这里有几个注意点

1.需要继承httpservlet 此类在第一步所依赖的jar包中

2.将代码自带的super屏蔽,因为父类默认返回报错界面

3.req是客户端发来的请求 会自动解析 resp则是程序员自己设置的反馈信息

4.最后需要在代码前面加上@WebServlet("/你想设置的文件路径")

5.doget在前端发送get请求时调用 dopost则是发送post时调用

5.打包程序

首先 tomcat运行后端代码需要war包 而打包默认jar包 因此需要在pom.xml中写入代码

<packaging>war</packaging>

将其变成war包

然后找到右侧maven程序找到packet 双击运行 这样就会出现一个默认项目名的jar包

6.部署程序

将所得到的jar包放到tomcat中的webapp下 tomcat会自动生成目录 然后在bin文件夹下找到start.bat程序 启动tomcat

7.验证

在网站中输入验证

http://127.0.0.1:8080/hello_servlet1/hello2

127.0.0.1代表本机ip 8080代表tomcat所绑定的本地端口 hello_servlet为jar包名也就是context path hello2则是自己写的文件路径

这样 我们就成功将后端代码部署到tomcat(注意 使用dopost方法会显示405方法错误 因为打开后端页面代码默认都是get)

当然还有插件例如smarttomcat 可以将打包项目和部署项目合并,大家可以下载安装尝试一下,能够提高效率

接下来 我们看如何部署前端代码

部署前端代码

部署前端代码相比于后端较为简单既在webapp中创建html项目(tomcat中规定前端代码需要在此保存)

前后端交互的几种方式

1.通过键值对既query string进行传输

        String student=req.getParameter("studentid");
        String classid=req.getParameter("classid");
        resp.getWriter().write("studentid="+student+"classid="+classid);

接下来 我们默认后端代码需要接受student和classid两个值并将他们打印

第一种 也是最简单的 可以在网站中加入查询字符串进行传递信息

http://127.0.0.1:8080/hello_servlet1/hello1?studentid=100&classid=200

键值之间用=连接 文件层次和查询字符串直接用?分隔 不同的键值对用&分割

这样就能正确的把studentid和classid传给后端

2.通过ajax进行传递

首先引入包含ajax的jquery cdn

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js">
 
</script>

以及所需要的方法以及相对路径(这是对于html文件所在的路径来说)

$.ajax({
 type:'get',
  url:'hello1',
  
 
  
 
});

构建完成后即可完成前后端交互 实现数据传输

3.使用form标签

 <form action="hello1"method="Post">
  <input type="text" name="studentid">
  <input type="text"name="classid">
  <input type="submit"value="submit">
</form> 

action与method与ajax中的url和type相同 用户通过input进行输入 并用submit提交 后端就能得到name所对应的值

4.用postman发送json请求

body-raw-json 发送json请求(send)json请求格式类似于

{

    "studentid":10,

    "classid":20

}一样

注意 此时后端收到json请求时 并不会自动解析出键值对 而是req通过读字节将json请求完整读出

想要解析出键值对 则要

1.引入依赖

  <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.14.1</version>
        </dependency>

2.在java代码中创建class包含所需要读取的键值对

class student{
    public int studentid;
    public int classid;
}

3.创建ObjectMapper objectMapper = new ObjectMapper();

4.通过objectmapper中的getvalueof 将req读入的json请求字节流转化为类中的对应属性 并返回一个新的类对象

student s=objectMapper.readValue(req.getInputStream(),student.class);

这样就能够得到所需的键值对 实际生产中  如果使用tomcat实现前后端交互 json请求用的比较多