> 技术文档 > JavaWeb项目入门(从0开始)

JavaWeb项目入门(从0开始)


文章目录

  • 一、Students2025项目(用页面展示学生列表---模拟数据
  • 原始Servlet+JSP架构项目初步搭建
    • 项目结构:
    • 数据库导入数据
    • 创建Java版本的Web项目
    • 控制层:servlet
      • StudentServlet
    • 数据模型
      • Student
    • Service层
      • 定义接口:StudentService
      • 定义实现类 StudentServiceImpl
    • 数据仓库(对数据进行读取):Dao层
      • 定义接口:StudentDao
      • 定义具体的实现类 :StudentDaoImpl
    • 页面展示:jsp部分
    • 最终的pom.xml配置文件
    • 项目运行结果

一、Students2025项目(用页面展示学生列表—模拟数据)

原始Servlet+JSP架构项目初步搭建

jsp项目已被淘汰,在此学习目的是了解未来学习的新技术的底层原理

项目结构:

JavaWeb项目入门(从0开始)

项目结构介绍:
目前阶段只完成了初始化的后端搭建,实现从本地数据库获取数据在浏览器显示
请求处理流程
HTTP请求 → StudentsServlet → StudentServiceImpl → StudentDaoImpl → Global → 数据库
响应方向:
数据库 → Global → StudentDaoImpl → StudentServiceImpl → StudentsServlet → JSP → HTTP响应

各层职责MVC: DAO层:负责数据获取和初步封装(M)

Service层:理论上应包含业务逻辑处理,但当前示例简单透传

Servlet:控制流程和准备视图数据(C)

JSP:专注于数据展示(V)

响应与请求路径差异:请求是\"控制流\"向下传递响应是\"数据流\"向上返回最终在表示层完成数据到视图的转换

项目书写顺序:

数据库设计 → 模型类 → DAO层 → Service层 → Controller → 视图 ↑______________________________________|  自底向上,逐层依赖

项目大体运行流程为Global->StudentServlet->StudentService->StudentDao,model的Student类为数据模型
接下来按项目大体运行流程的顺序介绍各部分

数据库导入数据

我们将数据全都写在了sql文件里面,现在直接将数据导入到数据库里面

首先在navicat里面建立数据库students2025:

JavaWeb项目入门(从0开始)
建立完成后,直接导入我们准备好的数据:右键选择运行SQL文件
JavaWeb项目入门(从0开始)JavaWeb项目入门(从0开始)
出现下面的加载信息:successfully证明我们已经成功导入数据了

JavaWeb项目入门(从0开始)

创建Java版本的Web项目

JavaWeb项目入门(从0开始)
创建完成后,要做的是设置编码格式(一定要先配置编码格式),配置maven,查看修改pom.xml引入项目需要的依赖。

配置编码格式:
JavaWeb项目入门(从0开始)
配置maven:使用的是本地的maven
JavaWeb项目入门(从0开始)

查看pom.xml文件,加入我们所需要的相关配置:引入servlet和jsp依赖 ,引入lombok依赖(实体类里面用到的)。引入后一定要保存刷新maven

JavaWeb项目入门(从0开始)

代码如下:

<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 https://maven.apache.org/xsd/maven-4.0.0.xsd\"> <modelVersion>4.0.0</modelVersion> <groupId>com.situ</groupId> <artifactId>students20252</artifactId> <version>1.0-SNAPSHOT</version> <name>students20252</name>  <packaging>war</packaging> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <maven.compiler.target>21</maven.compiler.target> <maven.compiler.source>21</maven.compiler.source> <junit.version>5.11.0</junit.version> </properties> <dependencies>  <dependency> <groupId>org.apache.tomcat</groupId> <artifactId>tomcat-jsp-api</artifactId> <version>11.0.0</version>  <scope>provided</scope> </dependency>  <dependency> <groupId>org.apache.tomcat</groupId> <artifactId>tomcat-servlet-api</artifactId> <version>11.0.9</version> <scope>provided</scope> </dependency>  <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <version>1.18.38</version> </dependency> </dependencies> <build>  <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-war-plugin</artifactId> <version>3.4.0</version> </plugin> </plugins> </build></project>

创建并配置项目完成,接下来真正写项目
项目采用MVC三层架构的模式,可以先写出包,然后将对应层次的代码放在指定的包下:

JavaWeb项目入门(从0开始)

控制层:servlet

StudentServlet

package com.situ.students20252.servlet;import com.situ.students20252.model.Student;import com.situ.students20252.service.impl.StudentServiceImpl;import jakarta.servlet.ServletException;import jakarta.servlet.annotation.WebServlet;import jakarta.servlet.http.HttpServlet;import jakarta.servlet.http.HttpServletRequest;import jakarta.servlet.http.HttpServletResponse;import java.io.IOException;import java.util.List;//1.配置访问路径@WebServlet(\"/admin/student/*\")public class StudentServlet extends HttpServlet { //2.重写doget和dopost方法(因为浏览器只支持这两个请求方式) @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //3.想用页面展示学生列表,但是servlet写网页不方便,所以请求转发去jsp(jsp写网页很方便,且用户无感知) String action = req.getPathInfo();//3.1先获取用户输入的*对应的是什么.getPathInfo()是专门获取*是什么的方法 if(\"/list\".equals(action)){//3.2进行判断,技巧:用已知的字符串去比较,放在前面.这样绝对不会出现空的情况异常 //4.下面应该处理业务逻辑部分了,但是业务逻辑通常不写在这里,因为servlet是控制器 ,负责接收请求调度请求 ,在这里写业务逻辑会很臃肿 //5.所以去service里面写,然后这里只需要用面向对象的思想new对象调用方法即可:前面一系列相关方法写完后: StudentServiceImpl studentService = new StudentServiceImpl(); List<Student> students = studentService.findAll();//结果保存在students里面 //6.把调用方法之后的结果存到域对象中 :第一个参数(\"students\")是这个数据的标识符; // 第二个参数(students)是真正存储的数据。 req.setAttribute(\"students\",students); //3.3:请求转发的具体实现:由jsp页面负责展示给浏览器内容--去看(写)list.jsp页面 req.getRequestDispatcher(\"/WEB-INF/jsp/student/list.jsp\").forward(req,resp); } } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //项目中需要写的地方很多,加上这个to do可以防止我们遗漏东西,方便后续项目的完成:View--Tool Windows---todo //todo }}

作用:
处理http请求,
用户访问URL: /admin/student/list,if判断用户输入地址是不是/admin/student//list,如果是,创建StudentServiceImpl对象,调用findall方法,将获取到的数据存到List中,然后将名为students的集合存放到request请求域中,然后request调用请求转发方法将students转发到/WEB-INF/jsp/student/list.jsp。

数据模型

Student

model下的Student类:数据模型类,用来保存数据,每一行student的数据存一行。

package com.situ.students20252.model;import lombok.Getter;import lombok.Setter;import java.time.LocalDate;//使用lombok:在pom.xml里面引入依赖,添加getter和setter方法。虽然看不见,但是编译的时候会编译出来@Getter@Setterpublic class Student { //数据模型(每一行student的数据存一行),用来保存数据: //属性的名字尽量要和数据库里面的名字对应,同时遵循java的命名规范 private Integer id; private String stuId; private String name; private String pinyin; private String sex; private String qq; private String email; private String phone; private String wechat; private LocalDate birthday;}

数据模型建立好(实体类)之后,才可以编写业务逻辑(有了实体类才能new对象,写方法)):

Service层

定义接口:StudentService

定义接口:无需关注它的具体实现

package com.situ.students20252.service;import com.situ.students20252.model.Student;import java.util.List;public interface StudentService { //定义查询功能的方法:findAll: List<Student> findAll();}

定义实现类 StudentServiceImpl

我们要做的是查询所有数据的业务逻辑,如何查询?从数据库中进行查询读取,关于数据的是dao层处理,所以我们只需要用面向对象的思维交给dao层处理,我们这里只需要 new dao层的对象然后调用方法即可。

package com.situ.students20252.service.impl;import com.situ.students20252.dao.impl.StudentDaoImpl;import com.situ.students20252.model.Student;import com.situ.students20252.service.StudentService;import java.util.List;public class StudentServiceImpl implements StudentService { @Override public List<Student> findAll() { //实现业务逻辑:如何读取?从数据库中查---交给dao层处理 //我们本层只需要用面向对象的思维:new实现类的对象,调用方法即可: StudentDaoImpl studentDao = new StudentDaoImpl(); List<Student> students = studentDao.findAll(); //返回结果: return students; }}

数据仓库(对数据进行读取):Dao层

定义接口:StudentDao

同样也是只定义接口,不实现 ,交给实现类去实现

package com.situ.students20252.dao;import com.situ.students20252.model.Student;import java.util.List;public interface StudentDao { List<Student> findAll();}

定义具体的实现类 :StudentDaoImpl

在这里真正实现方法:从数据库中读取具体的数据并返回结果。

这里采用模拟数据的方法,先不从数据库里面调取数据:先模拟一个假的数据:

package com.situ.students20252.dao.impl;import com.situ.students20252.dao.StudentDao;import com.situ.students20252.model.Student;import java.time.LocalDate;import java.util.ArrayList;import java.util.List;public class StudentDaoImpl implements StudentDao { @Override public List<Student> findAll() { //具体实现查询所有数据的功能: //模拟假的数据: List<Student> list = new ArrayList<>(); Student student = new Student(); student.setId(1); student.setName(\"张三\"); student.setPinyin(\"zhangsan\"); student.setSex(\"男\"); student.setQq(\"2344\"); student.setBirthday(LocalDate.of(2000,1,2)); student.setWechat(\"123\"); student.setPhone(\"123334\"); list.add(student); Student student2 = new Student(); student2.setId(2); student2.setName(\"李四\"); student2.setPinyin(\"lisi\"); student2.setSex(\"男\"); student2.setQq(\"1212\"); student2.setBirthday(LocalDate.of(2000,1,2)); student2.setWechat(\"456\"); student2.setPhone(\"4111\"); list.add(student2); Student student3 = new Student(); student3.setId(3); student3.setName(\"张三五\"); student3.setPinyin(\"zhangsanwu\"); student3.setSex(\"男\"); student3.setQq(\"2344\"); student3.setBirthday(LocalDate.of(2000,1,2)); student3.setWechat(\"123\"); student3.setPhone(\"123334\"); list.add(student); return list; }}

页面展示:jsp部分

list…jsp:

<html><head> <title>学生列表页面</title></head><body><table id=\"tbl\"> <thead> <tr> <th>ID</th> <th>学号</th> <th>姓名</th> <th>拼音</th> <th>性别</th> <th>出生日期</th> <th>手机号</th> <th>微信号</th> <th>邮箱</th> <th>QQ</th> </tr> </thead> <tbody>  <c:forEach items=\"${students}\" var=\"s\"> <tr> <td>${s.id}</td> <td>${s.stuId}</td> <td>${s.name}</td> <td>${s.pinyin}</td> <td>${s.sex}</td> <td>${s.birthday}</td> <td>${s.phone}</td> <td>${s.wechat}</td> <td>${s.email}</td> <td>${s.qq}</td> </tr> </c:forEach> </tbody></table></body></html>

至此,我们已经实现了采用模拟数据的方式,将数据显示在浏览器页面上。

最终的pom.xml配置文件

<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 https://maven.apache.org/xsd/maven-4.0.0.xsd\"> <modelVersion>4.0.0</modelVersion> <groupId>com.situ</groupId> <artifactId>students20252</artifactId> <version>1.0-SNAPSHOT</version> <name>students20252</name>  <packaging>war</packaging> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <maven.compiler.target>21</maven.compiler.target> <maven.compiler.source>21</maven.compiler.source> <junit.version>5.11.0</junit.version> </properties> <dependencies>  <dependency> <groupId>org.apache.tomcat</groupId> <artifactId>tomcat-jsp-api</artifactId> <version>11.0.0</version>  <scope>provided</scope> </dependency>  <dependency> <groupId>org.apache.tomcat</groupId> <artifactId>tomcat-servlet-api</artifactId> <version>11.0.9</version> <scope>provided</scope> </dependency>  <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <version>1.18.38</version> </dependency>    <dependency> <groupId>jakarta.servlet.jsp.jstl</groupId> <artifactId>jakarta.servlet.jsp.jstl-api</artifactId> <version>3.0.2</version> </dependency>   <dependency> <groupId>org.glassfish.web</groupId> <artifactId>jakarta.servlet.jsp.jstl</artifactId> <version>3.0.1</version> </dependency> </dependencies> <build>  <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-war-plugin</artifactId> <version>3.4.0</version> </plugin> </plugins> </build></project>

项目运行结果

总的项目结构以及项目运行结果如图所示:

JavaWeb项目入门(从0开始)

项目运行结果:

JavaWeb项目入门(从0开始)