------------恢复内容开始------------
安装配置 maven
-
官网：
-
下载，解压后直接使用即可
-
注意！不同的 maven 版本对 JDK 需求不同！
-
找到 apache-maven-3.6.3\conf\setting.xml ，修改 本地的jar包存储位置 和 远程镜像地址
-
本地 jar 包存储位置
<!--配置本地仓库位置--> <localRepository>F:\app\maven\mavenRepository</localRepository>
-
远程镜像地址(注意！必须写在 mirrors 标签对中！)
<!--配置远程仓库位置--> <mirror> <id>alimaven</id> <name>aliyun maven</name> <url>http://maven.aliyun.com/nexus/content/groups/public/</url> <mirrorOf>central</mirrorOf> </mirror>
maven 的环境变量配置
-
在环境变量中创建 MAVEN_HOME 值为 MAVEN 的 home 目录
-
完成后在 cmd 命令窗口中测试，查看版本信息
-
cmd：mvn -v
--------------------------------------------------------------------------------------------------------------
项目搭建
IDEA 结合 maven
- 在 idea 初始界面进入设置（如果已经在项目中，则通过 file 选项进入 setting 设置）
- 搜索 maven 进行相关设置
IDEA 创建 maven 项目
-
在 IDEA 的初始界面选择 Create New Project（如果已经在项目中则选择 File ==> New ==> Project
-
选择对应的 JDK 版本，左侧选择 maven 右侧选择使用骨架
- 完成项目配置后，IDEA 右下脚会提示后续 pom 更新方式
- 整个 maven 项目搭建成功后会在 Run 窗口提示 BUILD SUCCESS
- 选择项目包右键，创建新的目录，完善项目结构
- 根据自己的项目需求进一步完成项目包结构
至此基于 maven 的 web 项目就构建成功了！
- 如果只是为了修改 web.xml 版本也可以直接替换 web.xml 中的约束
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
</web-app>
两个 tomcat 中选择 tomcat Server 中的 local，进行相关配置
选择 server 模块中的 configure 配置本地 tomcat 根路径
进入 deployment 模块，添加部署项目
选择不同的项目进行部署
部署完成后设置项目名(项目前缀)
回到 server 模块，添加解决乱码的虚拟机配置，以及热部署设置
-Dfile.encoding=UTF-8
最后，选择配置好的 tomcat 运行，控制台打印成功信息，index 页面弹出
至此，tomcat 配置成功
IDEA 连接数据库
-
选择 IDEA 右侧的 Database 模块，点击加号选择 Data Source 选择需要连接的数据库
可以在左侧 Drivers 中选择对应的连接驱动包进行配置，添加本地连接 jar 包或者使用 IDEA 给我们下载连接 jar 包
完成后连接后，设置展示需要的数据库
至此 IDEA 连接数据库的配置就完成了！
准备工作
依赖导入
-
当前项目需要很多的依赖包，可以通过 maven 的 pom 文件中 dependencies 中添加相关依赖
-
maven 远程仓库官网：
<!-- servlet 相关依赖 -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>4.0.1</version>
<scope>provided</scope>
</dependency>
<!-- spring 的相关依赖 -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>5.2.21.RELEASE</version>
</dependency>
<!-- spring 的 web 项目依赖 -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>5.2.21.RELEASE</version>
</dependency>
<!-- mysql 的连接依赖 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.23</version>
</dependency>
<!-- json 类型转换依赖 -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.80</version>
</dependency>
<!-- lombok 依赖 -->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.20</version>
</dependency>
<!-- druid 数据库连接池依赖 -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.2.9</version>
</dependency>
<!-- guava lists依赖 -->
<dependency>
<groupId>com.google.guava</groupId>
<artifactId>guava</artifactId>
<version>31.1-jre</version>
</dependency>
数据库建表，实体类创建
- 通过 IDEA 的数据库模块，使用可视化界面创建表
- IDEA 可视化建表界面说明
创建对应的 Student 实体类
/**
* @program: springWeb
* @description: 暂时空着，后续添加内容
* @author: lan
* @create: 2022-05-19 14:55
* @version:1.0
**/
public class Student {
}
servlet 功能实现
-
创建一个任意的 Servlet 类，继承 HttpServlet ，使用注解进行配置
1 @WebServlet("/findAll.do") 2 public class FindAllController extends HttpServlet { 3 @Override 4 protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 5 System.out.println("findAll.do"); 6 } 7 }
启动 tomcat 程序，访问成功说明，功能实现
spring 功能实现
-
编写 spring 的配置文件 applicationContext.xml
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context" xsi:schemaLocation="http://www.springframework.org/schema/beans https://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd"> <!-- spring 的 IOC 注解扫描 --> <context:component-scan base-package="com.mj" /> </beans>
配置 web.mxl 文件，使用监听功能，在 web 容器启动时读取 spring 配置文件，创建 IOC 容器
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<!-- 指定 spring 的配置文件位置 -->
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>
classpath:applicationContext.xml,
<!--classpath:applicationContext-*.xml-->
</param-value>
</context-param>
<!--监听器-->
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
创建 service 层测试代码
public class StudentService { public List<Student> findAll(){ return null; } }
在 controller 层注入 service 层，通过 web 程序获取 IOC 容器，再获取其中的 bean 组件
1 @WebServlet("/findAll.do") 2 public class FindAllController extends HttpServlet { 3 private StudentService studentService; 4 @Override 5 protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 6 System.out.println("findAll.do"); 7 8 System.out.println(studentService); 9 10 } 11 12 @Override 13 public void init(ServletConfig config) throws ServletException { 14 // 通过 web 程序获取 IOC 容器 15 WebApplicationContext wac = WebApplicationContextUtils 16 .getWebApplicationContext 17 (config.getServletContext()); 18 // 从 IOC 容器中取出 StudentService 实例 19 studentService = wac.getBean(StudentService.class); 20 21 // 将当前对象添加至 IOC 容器中 22 // SpringBeanAutowiringSupport 23 // .processInjectionBasedOnCurrentContext(this); 24 } 25 }
创建 BaseController 对 controller 层进行代码优化
1 public class BaseController extends HttpServlet { 2 private StudentService studentService; 3 @Override 4 public void init(ServletConfig config) throws ServletException { 5 // 通过 web 程序获取 IOC 容器 6 WebApplicationContext wac = WebApplicationContextUtils 7 .getWebApplicationContext 8 (config.getServletContext()); 9 // 从 IOC 容器中取出 StudentService 实例 10 studentService = wac.getBean(StudentService.class); 11 12 // 将当前对象添加至 IOC 容器中 13 // SpringBeanAutowiringSupport 14 // .processInjectionBasedOnCurrentContext(this); 15 } 16 17 18 /** 19 * 自定义的 servlet 初始设置 20 * @param req 21 * @param resp 22 * @throws UnsupportedEncodingException 23 */ 24 public void defaultSet(HttpServletRequest req, HttpServletResponse resp) throws UnsupportedEncodingException { 25 req.setCharacterEncoding("UTF-8"); 26 resp.setCharacterEncoding("UTF-8"); 27 // 设置允许其他非同源访问，Access-Control-Allow-Origin 28 resp.setHeader("Access-Control-Allow-Origin", "*"); 29 30 } 31 32 33 /** 34 * 将指定的内容响应至页面 35 * @param resp 36 * @param content 37 * @throws IOException 38 */ 39 public void printHtml(HttpServletResponse resp, String content) throws IOException { 40 PrintWriter writer = resp.getWriter(); 41 writer.print(content); 42 writer.close(); 43 } 44 }
优化后的 FindAllController 代码
1 @WebServlet("/findAll.do") 2 public class FindAllController extends BaseController{ 3 4 @Override 5 protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 6 System.out.println("findAll.do"); 7 // 1，设置编码格式，设置跨域 8 defaultSet(req, resp); 9 10 // 2，获取传递参数，调用 service 层 11 System.out.println(studentService); 12 List<Student> list = studentService.findAll(); 13 14 // 3，通过 resp 将 json 响应至页面 15 printHtml(resp, JSONArray.toJSONString(list)); 16 17 } 18 19 20 }
jdbc 功能实现
-
pom 中导入连接池依赖，横向替换 DBUtil 功能
<!-- druid 数据库连接池依赖 -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.2.9</version>
</dependency>
编写 jdbc 连接配置文件 jdbc.properties
将配置文件交由 IOC 容器管理，并且配置数据库连接池
编写 Dao 层代码，创建 StudentDao
@Repository
public class StudentDao { //druid 数据库连接池 @Autowired private DataSource ds; public List<Student> findAll(){ try { Connection cn = ds.getConnection(); PreparedStatement ps = cn.prepareStatement("select * from s_student"); ResultSet rs = ps.executeQuery(); while (rs.next()){ String stuname = rs.getString("stuname"); System.out.println(stuname); } } catch (SQLException e) { e.printStackTrace(); } return null; } }
修改 service 层代码
// 将其放入 IOC 容器中 @Service public class StudentService { @Autowired private StudentDao studentDao; public List<Student> findAll(){ return studentDao.findAll(); } }
启动 tomcat 程序，访问 /findAll.do 请求，控制台输出内容
前端页面的实现
页面结构代码和样式
-
home.html 页面结构和样式代码，简单使用 bootstrap 样式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>首页</title> 6 <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> 7 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> 8 <style> 9 .info-box{ 10 width: 1000px; 11 } 12 </style> 13 </head> 14 <body> 15 <center> 16 <div class="info-box"> 17 <h1 class="bg-primary">学员信息管理</h1> 18 19 <button class="btn btn-info">点击获取所有学员信息</button> 20 21 <br> 22 <br> 23 24 <table class="table table-striped table-hover"> 25 <thead> 26 <tr> 27 <th>学号</th> 28 <th>学生姓名</th> 29 <th>学生性别</th> 30 <th>学生班级</th> 31 <th>学生分院</th> 32 <th>学生状态</th> 33 <th>操作</th> 34 </tr> 35 </thead> 36 <!-- 以下内容需要通过 js 添加 --> 37 <tbody> 38 39 </tbody> 40 </table> 41 </div> 42 </center> 43 </body> 44 </html>
查询所有学员的 JS 代码
-
单独编写一个默认的外部 js ，通过主页引入
1 // 定义一些初始数据 2 var classes = ["软件1班","软件2班","软件3班","软件4班","软件5班","计网1班","计网2班"]; 3 var colleges = ["信工分院","建筑分院","机械分院"]; 4 5 6 // 查询所有学员的函数 7 function findAll(box) { 8 9 // 0，验证事件是否绑定成功 10 // alert("绑定成功！"); 11 12 // 清除之前的数据 13 document.querySelector(box).innerHTML = ""; 14 15 // 1，发送 ajax 获取数据 16 $.ajax({ 17 // 设置请求方式，get/post 18 type: "GET", 19 // 设置请求地址 20 url: "http://localhost:8014/findAll.do", 21 // 设置服务端返回数据类型 22 dataType: "json", 23 // 传给后端的数据 24 data:{ 25 26 }, 27 // 成功回调函数 28 success:function (data) { 29 30 // alert("异步获取成功！"); 31 console.log(data); 32 33 // 将获取的数据添加至页面 34 for (let i = 0; i < data.length; i++) { 35 // 创建节点 36 var tr = document.createElement('tr'); 37 var td_stuid = document.createElement('td'); 38 var td_stuname = document.createElement('td'); 39 var td_stusex = document.createElement('td'); 40 var td_stuclass = document.createElement('td'); 41 var td_stucollege = document.createElement('td'); 42 var td_stustate = document.createElement('td'); 43 var td_ply = document.createElement('td'); 44 45 // 添加节点中的内容 46 td_stuid.innerHTML = data[i].stuid; 47 td_stuname.innerHTML = data[i].stuname; 48 td_stusex.innerHTML = data[i].stusex; 49 // 通过初始数据数组获取值 50 td_stuclass.innerHTML = classes[data[i].stuclass-1]; 51 td_stucollege.innerHTML = colleges[data[i].stucollege-1]; 52 // 通过三元运算进行值的判断 53 td_stustate.innerHTML = data[i].stustate==1?"在读": 54 data[i].stustate==2?"毕业":"休学"; 55 56 // 将内容添加至 tr 标签 57 tr.appendChild(td_stuid); 58 tr.appendChild(td_stuname); 59 tr.appendChild(td_stusex); 60 tr.appendChild(td_stuclass); 61 tr.appendChild(td_stucollege); 62 tr.appendChild(td_stustate); 63 64 // 将 tr 添加至页面 65 document.querySelector(box).appendChild(tr); 66 } 67 }, 68 // 失败回调函数 69 error:function (jqXHR,textStatus,errorThrown) { 70 alert("异步获取失败！"); 71 } 72 }); 73 }
页面调用代码
1 <!-- 调入默认的 js 文件 --> 2 <script src="./default.js"></script> 3 4 <!-- 引入 JQ 文件 --> 5 <script src="https://code.jquery.com/jquery-3.6.0.js"></script> 6 7 <script> 8 onload = function () { 9 // 获取查询所有学员的标签 10 var btn = document.querySelector(".btn"); 11 // 给标签绑定点击事件 12 btn.onclick = function () { 13 // 调用查询所有学员的函数 14 findAll("tbody") 15 } 16 } 17 </script>
完整的页面功能代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>首页</title> 6 7 <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> 8 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> 9 10 <style> 11 .info-box{ 12 width: 1000px; 13 } 14 </style> 15 16 <!-- 调入默认的 js 文件 --> 17 <script src="./default.js"></script> 18 19 <!-- 引入 JQ 文件 --> 20 <script src="https://code.jquery.com/jquery-3.6.0.js"></script> 21 22 <script> 23 onload = function () { 24 // 获取查询所有学员的标签 25 var btn = document.querySelector(".btn"); 26 // 给标签绑定点击事件 27 btn.onclick = function () { 28 // 调用查询所有学员的函数 29 findAll("tbody") 30 } 31 } 32 </script> 33 34 </head> 35 <body> 36 37 38 <center> 39 <div class="info-box"> 40 <h1 class="bg-primary">学员信息管理</h1> 41 <button class="btn btn-info">点击获取所有学员信息</button> 42 <br> 43 <br> 44 45 <table class="table table-striped table-hover"> 46 <thead> 47 <tr> 48 <th>学号</th> 49 <th>学生姓名</th> 50 <th>学生性别</th> 51 <th>学生班级</th> 52 <th>学生分院</th> 53 <th>学生状态</th> 54 <th>操作</th> 55 </tr> 56 </thead> 57 <!-- 以下内容需要通过 js 添加 --> 58 <tbody> 59 60 </tbody> 61 </table> 62 </div> 63 </center> 64 </body> 65 </html>
删除学员的 JS 代码
-
default 文件中添加的 JS 代码
1 // 定义一些初始数据 2 var classes = ["软件1班","软件2班","软件3班","软件4班","软件5班","计网1班","计网2班"]; 3 var colleges = ["信工分院","建筑分院","机械分院"]; 4 5 6 // 查询所有学员的函数 7 function findAll(box) { 8 9 // 0，验证事件是否绑定成功 10 // alert("绑定成功！"); 11 12 // 清除之前的数据 13 document.querySelector(box).innerHTML = ""; 14 15 // 1，发送 ajax 获取数据 16 $.ajax({ 17 // 设置请求方式，get/post 18 type: "GET", 19 // 设置请求地址 20 url: "http://localhost:8014/findAll.do", 21 // 设置服务端返回数据类型 22 dataType: "json", 23 // 传给后端的数据 24 data:{ 25 26 }, 27 // 成功回调函数 28 success:function (data) { 29 30 // alert("异步获取成功！"); 31 console.log(data); 32 33 // 将获取的数据添加至页面 34 for (let i = 0; i < data.length; i++) { 35 // 创建节点 36 var tr = document.createElement('tr'); 37 var td_stuid = document.createElement('td'); 38 var td_stuname = document.createElement('td'); 39 var td_stusex = document.createElement('td'); 40 var td_stuclass = document.createElement('td'); 41 var td_stucollege = document.createElement('td'); 42 var td_stustate = document.createElement('td'); 43 var td_ply = document.createElement('td'); 44 45 // 添加节点中的内容 46 td_stuid.innerHTML = data[i].stuid; 47 td_stuname.innerHTML = data[i].stuname; 48 td_stusex.innerHTML = data[i].stusex; 49 // 通过初始数据数组获取值 50 td_stuclass.innerHTML = classes[data[i].stuclass-1]; 51 td_stucollege.innerHTML = colleges[data[i].stucollege-1]; 52 // 通过三元运算进行值的判断 53 td_stustate.innerHTML = data[i].stustate==1?"在读": 54 data[i].stustate==2?"毕业":"休学"; 55 56 // 给 ply 添加按钮 57 td_ply.innerHTML = '<button class="btn btn-danger"' 58 + 'onclick="del('+data[i].stuid+')" >删除</button>'; 59 60 61 // 将内容添加至 tr 标签 62 tr.appendChild(td_stuid); 63 tr.appendChild(td_stuname); 64 tr.appendChild(td_stusex); 65 tr.appendChild(td_stuclass); 66 tr.appendChild(td_stucollege); 67 tr.appendChild(td_stustate); 68 tr.appendChild(td_ply); 69 70 // 将 tr 添加至页面 71 document.querySelector(box).appendChild(tr); 72 } 73 }, 74 // 失败回调函数 75 error:function (jqXHR,textStatus,errorThrown) { 76 alert("异步获取失败！"); 77 } 78 }); 79 } 80 81 82 83 84 // 创建一个 delete(id) 函数 85 function del(id) { 86 // 查看出入的 id 值 87 alert(id); 88 // 1，发送 ajax 获取数据 89 $.ajax({ 90 // 设置请求方式，get/post 91 type: "GET", 92 // 设置请求地址 93 url: "http://localhost:8014/delete.do", 94 // 设置服务端返回数据类型 95 dataType: "json", 96 // 传给后端的数据 97 data:{ 98 // 将用户 id 传入后端 99 stuid:id 100 }, 101 // 成功回调函数 102 success:function (data) { 103 // alert("异步请求成功！"); 104 // console.log(data); 105 alert(data); 106 // 删除成功后刷新数据 107 document.querySelector(".btn").onclick(); 108 109 110 }, 111 // 失败回调函数 112 error:function (jqXHR,textStatus,errorThrown) { 113 alert("异步请求失败！"); 114 } 115 116 }); 117 118 }
功能实现
实体类补全
-
实体类 Student 代码，注意，使用 Lombok 记得下载相关插件
// 给当前类开启链式编程
@Accessors(chain = true)
// 使用 lombok 快速生成 get、set、equals、toString、hashCode
@Data(staticConstructor = "of")
public class Student { private Integer stuid; private String stuname; private String stusex; private Integer stuclass; private Integer stucollege; private Integer stustate; }
<!-- lombok 依赖 -->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.20</version>
</dependency>
查询所有学员
-
完成 controller 层功能
1 /** 2 * @program: springWeb 3 * @description: 4 * 用于接收用户发起的 /findAll.do 请求的 servlet 5 * @author: lan 6 * @create: 2022-05-19 15:13 7 * @version:1.0 8 **/ 9 @WebServlet("/findAll.do") 10 public class FindAllController extends BaseController { 11 12 @Override 13 protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 14 System.out.println("接收到了 /findAll.do 请求"); 15 // 1，设置编码格式，设置跨域 16 defaultSet(req, resp); 17 18 // 2，获取传递参数，调用 service 层 19 System.out.println(studentService); 20 List<Student> list = studentService.findAll(); 21 22 // 3，通过 resp 将 json 响应至页面 23 printHtml(resp, JSONArray.toJSONString(list)); 24 } 25 }
完成 service 层功能
1 /** 2 * @program: springWeb 3 * @description: 4 * Student 的业务罗层，暂时为测试代码 5 * @author: lan 6 * @create: 2022-05-19 15:36 7 * @version:1.0 8 **/ 9 // 将其放入 IOC 容器中 10 @Service 11 public class StudentService { 12 13 @Autowired 14 private StudentDao studentDao; 15 16 public List<Student> findAll(){ 17 return studentDao.findAll(); 18 } 19 }
完成 dao 层功能
<!-- guava lists依赖 -->
<dependency>
<groupId>com.google.guava</groupId>
<artifactId>guava</artifactId>
<version>31.1-jre</version>
</dependency>
1 /** 2 * @program: springWeb 3 * @description: 4 * 对应 Student 表的相关 sql 操作 5 * @author: lan 6 * @create: 2022-05-19 16:59 7 * @version:1.0 8 **/ 9 @Repository 10 public class StudentDao { 11 12 // druid 数据库连接池 13 @Autowired 14 private DataSource ds; 15 16 17 public List<Student> findAll() { 18 // 使用 guava 创建一个 List 集合存储查询结果 19 List<Student> list = Lists.newArrayList(); 20 21 try { 22 // 获取数据库连接 23 Connection cn = ds.getConnection(); 24 // 编写 sql 语句，生成 Statement 25 PreparedStatement ps = cn.prepareStatement 26 ("select * from webdb.s_student"); 27 // 给占位符赋值，执行 sql 语句 28 ResultSet rs = ps.executeQuery(); 29 // 将 ResultSet 中的数据取出 30 while (rs.next()){ 31 // 通过 lombok 静态工厂创建 Student 实例，并且赋值 32 Student student = Student.of() 33 .setStuid(rs.getInt("stuid")) 34 .setStuname(rs.getString("stuname")) 35 .setStusex(rs.getString("stusex")) 36 .setStuclass(rs.getInt("stuclass")) 37 .setStucollege(rs.getInt("stucollege")) 38 .setStustate(rs.getInt("stustate")); 39 // 将实例存入集合中 40 list.add(student); 41 } 42 // 将查询结果返回 43 return list; 44 } catch (SQLException e) { 45 e.printStackTrace(); 46 } 47 return list; 48 } 49 }
删除学员
-
完成 controller 层功能
1 /** 2 * @program: springWeb 3 * @description: 4 * @author: lan 5 * @create: 2022-05-21 16:54 6 * @version:1.0 7 **/ 8 @WebServlet("/delete.do") 9 public class DeleteController extends BaseController { 10 @Override 11 protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 12 System.out.println("接收到了 /delete.do 请求"); 13 14 // 1，设置编码格式，设置跨域 15 defaultSet(req, resp); 16 17 // 2，获取传递参数，调用 service 层 18 String stuid = req.getParameter("stuid"); 19 int result = studentService.delete(stuid); 20 21 // 3，通过 resp 将 json 响应至页面 22 String content = "{\"msg\":\"删除失败no\"}"; 23 if (result>0){ 24 content = "{\"msg\":\"删除成功yes\"}"; 25 } 26 printHtml(resp, content); 27 } 28 }
完成 service 层功能
1 /** 2 * @program: springWeb 3 * @description: 4 * Student 的业务罗层，暂时为测试代码 5 * @author: lan 6 * @create: 2022-05-19 15:36 7 * @version:1.0 8 **/ 9 // 将其放入 IOC 容器中 10 @Service 11 public class StudentService { 12 13 @Autowired 14 private StudentDao studentDao; 15 16 public List<Student> findAll(){ 17 return studentDao.findAll(); 18 } 19 20 21 public int delete(String stuid) { 22 // guava 数据校验 23 // boolean flag = Strings.isNullOrEmpty(stuid); 24 try { 25 Preconditions.checkNotNull(stuid, "stuid 不能为空"); 26 27 // 验证完成后调用 dao 层数据 28 int result = studentDao.delete(Integer.valueOf(stuid)); 29 30 return result; 31 }catch (Exception e){ 32 e.printStackTrace(); 33 } 34 35 return 0; 36 } 37 }
完成 dao 层功能
1 /** 2 * @program: springWeb 3 * @description: 4 * 对应 Student 表的相关 sql 操作 5 * @author: lan 6 * @create: 2022-05-19 16:59 7 * @version:1.0 8 **/ 9 @Repository 10 public class StudentDao { 11 12 // druid 数据库连接池 13 @Autowired 14 private DataSource ds; 15 16 17 public List<Student> findAll() { 18 // 使用 guava 创建一个 List 集合存储查询结果 19 List<Student> list = Lists.newArrayList(); 20 21 try { 22 // 获取数据库连接 23 Connection cn = ds.getConnection(); 24 // 编写 sql 语句，生成 Statement 25 PreparedStatement ps = cn.prepareStatement 26 ("select * from webdb.s_student"); 27 // 给占位符赋值，执行 sql 语句 28 ResultSet rs = ps.executeQuery(); 29 // 将 ResultSet 中的数据取出 30 while (rs.next()){ 31 // 通过 lombok 静态工厂创建 Student 实例，并且赋值 32 Student student = Student.of() 33 .setStuid(rs.getInt("stuid")) 34 .setStuname(rs.getString("stuname")) 35 .setStusex(rs.getString("stusex")) 36 .setStuclass(rs.getInt("stuclass")) 37 .setStucollege(rs.getInt("stucollege")) 38 .setStustate(rs.getInt("stustate")); 39 // 将实例存入集合中 40 list.add(student); 41 } 42 // 将查询结果返回 43 return list; 44 } catch (SQLException e) { 45 e.printStackTrace(); 46 } 47 48 return list; 49 } 50 51 public int delete(Integer stuid) { 52 53 try { 54 // 获取数据库连接 55 Connection cn = ds.getConnection(); 56 // 编写 sql 语句，生成 Statement 57 PreparedStatement ps = cn.prepareStatement 58 ("delete from webdb.s_student where stuid = ?"); 59 // 给占位符赋值，执行 sql 语句 60 ps.setInt(1,stuid); 61 int result = ps.executeUpdate(); 62 63 // 将查询结果返回 64 return result; 65 } catch (SQLException e) { 66 e.printStackTrace(); 67 } 68 69 70 return 0; 71 } 72 }
新增学员
完成 controller 层功能
@WebServlet("/add.do")
public class AddController extends BaseController{
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("add.do");
// 1，设置编码格式，设置跨域
defaultSet(req, resp);
// 2，获取传递参数，调用 service 层
System.out.println(studentService);
//通过lombok静态工厂创建Student实例并且赋值
Student student = new Student();
student.setStuid(Integer.valueOf(req.getParameter("stuid")));
student.setStuname(req.getParameter("stuname"));
student.setStusex(req.getParameter("stusex"));
student.setStuclass(Integer.valueOf(req.getParameter("stuclass")));
student.setStucollege(Integer.valueOf(req.getParameter("stucollege")));
student.setStustate(Integer.valueOf(req.getParameter("stustate")));
int result = studentService.add(student);
if (result>0){
resp.sendRedirect("/home.jsp");
}
}
}
完成 service 层功能
public int add(Student student){ return studentDao.add(student); }
完成 dao 层功能
public int add(Student student){ Connection cn = null; try { cn = ds.getConnection(); PreparedStatement ps = cn.prepareStatement( "insert into s_student(stuid,stuname,stusex,stuclass,stucollege,stustate) " + "values('" + student.getStuid() + "','" + student.getStuname() + "','" + student.getStusex() + "','" + student.getStuclass() + "','" + student.getStucollege() + "','" + student.getStustate() + "')"); int result = ps.executeUpdate(); return result; } catch (SQLException e) { e.printStackTrace(); } return 0; }
完成前端页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 登录隐藏 */ .login_hidden{ position: fixed; width: 100%; height: 100%; background: rgba(0,0,0,.3); top: 0px; left: 0px; z-index: 999; } .login_form{ width: 500px; height: 300px; background: white; position: fixed; top: 50%; left: 50%; /* transform 绝对剧中 */ transform: translate(-50%,-50%); border: 10px solid rgba(255,72,0,.3); border-radius: 3%; z-index: 9999; } .form_username{ width: 350px; height: 30px; font-size: 26px; font-weight: bolder; color: black; margin: 80px auto 20px; } .form_password{ width: 350px; height: 30px; font-size: 26px; font-weight: bolder; color: black; margin: 50px auto; } .form_password label{ padding-right: 26px; } .form_sub{ width: 60px; height: 30px; margin: 20px auto; } .form_sub button{ width: 100%; height: 100%; background: rgba(255,72,0,.6); border: 0px solid; } .login_form input{ width: 230px; height: 30px; font-size: 26px; } .login_hidden{ display: none; } .login_form{ display: none; } .login{ cursor: pointer; } </style> <!-- js代码 --> <script> // js 入口函数，页面所有资源加载完成后执行 window.onload = function () { /* * 区域的显现 * */ // 1，获取需要操作的节点 var login = document.querySelector(".login"); // 2，给操作节点绑定相应的事件处理 login.onclick = function () { // 0，验证事件是否绑定成功 // alert("绑定成功！"); // 1，获取需要操作的区域 var hidden = document.querySelector(".login_hidden"); var form = document.querySelector(".login_form"); // 2，对区域进行改变 // console.log(hidden); hidden.style.display = "block"; form.style.display = "block"; } /* * 区域的隐藏 * */ // 1，获取需要操作的节点 var hidden = document.querySelector(".login_hidden"); // 2，给操作节点绑定相应的事件处理 hidden.onclick = function () { // 0，验证事件是否绑定成功 // alert("绑定成功！"); // 1，获取需要操作的区域 var hidden = document.querySelector(".login_hidden"); var form = document.querySelector(".login_form"); // 2，对区域进行改变 // console.log(hidden); hidden.style.display = "none"; form.style.display = "none"; } } </script> </head> <body> <button class="login"> <span>登录</span> </button> <!-- 登录隐藏区域 --> <div class="login_hidden"> </div> <div class="login_form"> <form action="/add.do" method="post"> <div class="stuid"> <label>id：</label> <input type="text" name="stuid"> </div> <div class="stuname"> <label>用户名：</label> <input type="text" name="stuname"> </div> <div class="stusex"> <label>sex：</label> <input type="text" name="stusex"> </div> <div class="stuclass"> <label>class：</label> <input type="text" name="stuclass"> </div> <div class="stucollege"> <label>college：</label> <input type="text" name="stucollege"> </div> <div class="stustate"> <label>state：</label> <input type="text" name="stustate"> </div> <div> <input type="submit" name="stustate"> </div> </form> </div> </body> </html>
修改学员
完成 controller 层功能
@WebServlet("/updata.do")
public class UpdataController extends BaseController{
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("updata.do");
// 1，设置编码格式，设置跨域
defaultSet(req, resp);
// 2，获取传递参数，调用 service 层
System.out.println(studentService);
//通过lombok静态工厂创建Student实例并且赋值
Student student = new Student();
student.setStuid(Integer.valueOf(req.getParameter("stuid")));
student.setStuname(req.getParameter("stuname"));
student.setStusex(req.getParameter("stusex"));
student.setStuclass(Integer.valueOf(req.getParameter("stuclass")));
student.setStucollege(Integer.valueOf(req.getParameter("stucollege")));
student.setStustate(Integer.valueOf(req.getParameter("stustate")));
int result = studentService.updata(student);
if (result > 0) {
resp.sendRedirect("/home.jsp");
}
}}
完成 service 层功能
public int updata(Student student) { // guava 数据校验 // boolean flag = Strings.isNullOrEmpty(stuid); try { // 验证完成后调用 dao 层数据 int result =studentDao.update(student); return result; }catch (Exception e){ e.printStackTrace(); } return 0; }
完成 dao 层功能
public int update(Student student) { try { Connection cn = ds.getConnection(); PreparedStatement ps = cn.prepareStatement ("UPDATE s_student SET stuid=?,stuname=?,stusex=?,stuclass=?,stucollege=?,stustate=? WHERE stuid=?");//; // 给占位符赋值，执行 sql 语句 ps.setInt(1,student.stuid); ps.setString(2,student.stuname); ps.setString(3,student.stusex); ps.setInt(4,student.stuclass); ps.setInt(5,student.stucollege); ps.setInt(6,student.stustate); ps.setInt(7,student.stuid); int result = ps.executeUpdate(); // 将查询结果返回 return result; } catch (SQLException e) { e.printStackTrace(); } return 0; }
完成前端页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>updata</title> </head> <body> <div class="login_form"> <form action="/updata.do" method="post"> <div class="stuid"> <label>id：</label> <input type="text" name="stuid"> </div> <div class="stuname"> <label>用户名：</label> <input type="text" name="stuname"> </div> <div class="stusex"> <label>sex：</label> <input type="text" name="stusex"> </div> <div class="stuclass"> <label>class：</label> <input type="text" name="stuclass"> </div> <div class="stucollege"> <label>college：</label> <input type="text" name="stucollege"> </div> <div class="stustate"> <label>state：</label> <input type="text" name="stustate"> </div> <div> <input type="submit" name="stustate"> </div> </form> </div> </body> </html>
------------恢复内容结束------------
