javaweb使用Thymeleaf 最凝练的CRUD项目-中

javaweb使用Thymeleaf 最凝练的CRUD项目-中

6、显示首页

①目标

浏览器访问index.html,通过首页Servlet,渲染视图,显示首页。

②思路

③代码

1\]创建PortalServlet ```XML PortalServlet com.atguigu.demo.servlet.PortalServlet PortalServlet /index.html ``` Servlet代码: ```java public class PortalServlet extends ViewBaseServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String viewName = "portal"; super.processTemplate(viewName, request, response); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { } } ``` \[2\]创建portal.html ![在这里插入图片描述](https://file.jishuzhan.net/article/1682189786904793090/1731de20e1ae4068be0631fbcf98d2e9.png) ```html 士兵信息管理系统 显示士兵信息列表 ``` ## 7、显示列表 ### ①目标 在目标页面显示所有士兵信息,士兵信息是从数据库查询出来的 ### ②思路 ![在这里插入图片描述](https://file.jishuzhan.net/article/1682189786904793090/97e946eedd8949539cf12c8482eac7ef.png) ### ③代码 #### \[1\]ModelBaseServlet 创建这个基类的原因是:我们希望每一个模块能够对应同一个Servlet, 这个模块所需要调用的所有方法都集中在同一个Servlet中。 如果没有这个ModelBaseServlet基类,我们doGet()、doPost()方法可以用来处理请求, 这样一来,每一个方法都需要专门创建一个Servlet(就好比咱们之前的LoginServlet、RegisterServlet其实都应该合并为UserServlet)。 ```javascript public class ModelBaseServlet extends ViewBaseServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 在doGet()方法中调用doPost()方法,这样就可以在doPost()方法中集中处理所有请求 doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 1.从请求参数中获取method对应的数据 String method = request.getParameter("method"); // 2.通过反射调用method对应的方法 // ①获取Class对象 Class clazz = this.getClass(); try { // ②获取method对应的Method对象 Method methodObject = clazz.getDeclaredMethod(method, HttpServletRequest.class, HttpServletResponse.class); // ③打开访问权限 methodObject.setAccessible(true); // ④通过Method对象调用目标方法 methodObject.invoke(this, request, response); } catch (Exception e) { e.printStackTrace(); throw new RuntimeException(e); } } } ``` #### \[2\]SoldierDao.selectSoldierList() ![在这里插入图片描述](https://file.jishuzhan.net/article/1682189786904793090/8c1db5e8fdc84429890fdf134209e9b4.png) ![在这里插入图片描述](https://file.jishuzhan.net/article/1682189786904793090/0588cd4a00784b12b779caed0794081a.png) **接口方法:** ```java public interface SoldierDao { List selectSoldierList(); } ``` **实现类方法:** ```java public class SoldierDaoImpl extends BaseDao implements SoldierDao { @Override public List selectSoldierList() { String sql = "select soldier_id soldierId,soldier_name soldierName,soldier_weapon soldierWeapon from t_soldier"; return getBeanList(Soldier.class, sql); } } ``` #### \[3\]SoldierService.getSoldierList() ![在这里插入图片描述](https://file.jishuzhan.net/article/1682189786904793090/d78791df3b014a25814f53361f049ab4.png) 接口方法: ```java public interface SoldierService { List getSoldierList(); } ``` 实现类方法: ```java public class SoldierServiceImpl implements SoldierService { private SoldierDao soldierDao = new SoldierDaoImpl(); @Override public List getSoldierList() { List soldierList = soldierDao.selectSoldierList(); return soldierList; } } ``` #### \[4\]SoldierServlet.showList() ##### 实现步骤 1.调用Service方法获取集合数据 2.将集合数据存入请求域 3.渲染视图(在渲染的过程中,已经包含了转发) ```javascript protected void showList(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 1.调用Service方法获取集合数据 List soldierList = soldierService.getSoldierList(); // 2.将集合数据存入请求域 request.setAttribute("soldierList", soldierList); // 3.渲染视图(在渲染的过程中,已经包含了转发) processTemplate("list", request, response); } ``` ## 8、删除功能 ### ①目标 点击页面上的超链接,把数据库表中的记录删除。 ### ②思路 \[1\]先不考虑后续 ![在这里插入图片描述](https://file.jishuzhan.net/article/1682189786904793090/ecb8cec7bb9640d588e99a0d0c173055.png) \[2\]加上后续返回响应页面 ![在这里插入图片描述](https://file.jishuzhan.net/article/1682189786904793090/6c573830720645458465303314bc5ab3.png) ### ③代码 #### \[1\]完成删除超链接 ![在这里插入图片描述](https://file.jishuzhan.net/article/1682189786904793090/a716d3dbc1fc4b3f8d73db6166e413fc.png) ```javascript 删除 ``` 关于@{地址}附加请求参数的语法格式: * 只有一个请求参数:@{地址(请求参数名=普通字符串)}或@{地址(请求参数名=${需要解析的表达式})} * 多个请求参数:@{地址(名=值,名=值)} 官方文档中的说明如下: ![在这里插入图片描述](https://file.jishuzhan.net/article/1682189786904793090/bb094f0e377c49e9bfd9144b44cb3b7d.png) #### \[2\]Servlet方法 1.从请求参数中获取士兵信息的id值 ##### 实现步骤 2.将集合数据存入请求域 ##### 实现方案 方案一:还是直接前往list.html,需要重新查询soldierList数据,代码重复 方案二:直接调用隔壁的showList() 方案三:通过请求转发的方式间接调用showList()方法 方案四:通过请求重定向的方式间接调用showList()方法 ```java protected void remove(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 1.从请求参数中获取士兵信息的id值 String soldierId = request.getParameter("soldierId"); // 2.调用Service方法执行删除操作 soldierService.remove(soldierId); // 3.后续...... // 方案一:还是直接前往list.html,需要重新查询soldierList数据,代码重复 // 1.调用Service方法获取集合数据 // List soldierList = soldierService.getSoldierList(); // 2.将集合数据存入请求域 // request.setAttribute("soldierList", soldierList); // processTemplate("list", request, response); // 方案二:直接调用隔壁的showList() // 也能实现需求,但是总感觉这样调用方法破坏了程序的结构 // showList(request, response); // 方案三:通过请求转发的方式间接调用showList()方法 // request.getRequestDispatcher("/SoldierServlet?method=showList").forward(request, response); // 方案四:通过请求重定向的方式间接调用showList()方法 response.sendRedirect(request.getContextPath() + "/SoldierServlet?method=showList"); } ``` #### \[3\]Service方法 ```java @Override public void remove(String soldierId) { soldierDao.delete(soldierId); } ``` #### \[4\]Dao方法 ```java @Override public void delete(String soldierId) { String sql = "delete from t_soldier where soldier_id=?"; update(sql, soldierId); } ``` ## 9、前往新增信息的表单页面 ### ①创建超链接 ```html 前往新增页面 ``` ### ②Servlet ```java protected void toAddPage(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processTemplate("add-page", request, response); } ``` ### ③创建表单页面 ![在这里插入图片描述](https://file.jishuzhan.net/article/1682189786904793090/d2d8c89638cb47ceb5c72f8d766c90ec.png) ```javascript

士兵姓名:
士兵武器:
```

相关推荐
carterwu几秒前
各个大厂是怎么实现组件库和相应扩展的?基础组件、区块、页面
前端
Face1 分钟前
promise 规范应用
前端
Mintopia2 分钟前
Node.js 中 fs.readFile API 的使用详解
前端·javascript·node.js
Face3 分钟前
事件循环
前端·javascript
ONE_Gua5 分钟前
chromium魔改——navigator.webdriver 检测
前端·后端·爬虫
CodePencil5 分钟前
CSS专题之盒模型
前端·css
谦谦橘子6 分钟前
服务端渲染原理解析
前端·javascript·react.js
carterwu6 分钟前
umi+模块联邦-配置指南
前端
Mintopia7 分钟前
深入理解 Three.js 中的 PerspectiveCamera
前端·javascript·three.js
可乐加.糖10 分钟前
一篇关于Netty相关的梳理总结
java·后端·网络协议·netty·信息与通信