搭建 MVC 架构,实现数据的增删改查
1.前言
之前学习了MVC 设计模式、HTML、JSP(EL表达式、JSTL)、JDBC、MySql、Servlet、Filter等,在这个例子中加以巩固练习一下。虽然是一个简单的demo,但由于是初学Java web,写完了代码之后,觉得有必要整理一下思路并记录下来。值得记录的有两个方面:1.如何搭建MVC架构 2.各JSP页面是怎么通过URI、Servlet关联起来的 3.前后端怎么进行数据传递?后端查询得到的数据是怎么传给前端的,用户在前端提交的表单信息怎么传给后端。
该例子实现了数据库中表的增删改查,具体的效果请见测试一节。
2.搭建MVC架构
MVC概念
MVC:Model模型,View视图,Controller控制器
Model模型:负责操作数据库(dao包,bean包)
View视图:给用户呈现的页面,html、JSP页面
Controller控制器:负责前后端的交互(web包,service包)
JavaBean
分为2类(bean和dao),
封装业务逻辑的JavaBean(即dao)
封装数据的JavaBean(即bean,又叫:实体类):对应于数据库中的一张表,即数据库中有个Student表,项目中就有个Student.java类。
- 表名=类名,列名=属性名
- public修饰的类,提供public 无参构造方法
- 所有属性 都是private
- 提供getter和setter方法
数据库相关配置
为了能够正常使用JDBC操作数据,以及使用Druid连接池,需要做以下工作:
1.创建lib文件夹,在idea里配置其为project library(过程略)
2.在lib里放有关数据库的jar包(Druid的jar包,JDBC的jar包)
3. src文件夹里放druid.properties文件,别放错地方了,里边的配置要改一下(数据库的名字)
4. 创建util包,util里放DruidUtil.java文件,这是一个工具类,方便使用连接池
5. dao的impl实现类要继承DruidUtil类
lib中的jar包
从上到下,各Jar包的作用依次为:
- Druid
- Druid
- JSTL
- JDBC
- JSTL
project目录
创建bean包、dao包、service包、web包,这4个包必须创建。util包放工具类,可要可不要。
对于dao和service而言,都采用接口+实现类的模式,impl包里放实现类。
src文件夹:
3.各JSP页面、URI、Servlet的关系
将JSP页面、URI、Servlet的关系绘制成下图,清晰明了。在写该例子的代码时,有时候会感到思维混乱,页面被各URI和、Servlet关联着,跳过来跳过去的,在写代码的同时,画出下图可能有助于理清思路。
蓝色方框:JSP页面
绿色框:Servlet
红色字:URI
白色框:form表单
下划线:html中的a标签(链接)
注意:本图省略了Filter,每个URI都会先经过Filter。Filter的作用:1.设置编码方式 2.判断用户填写的form是否合乎规范。
4.前后端如何实现数据传递
后端传给前端
后端从数据库里查询出来的数据需要传给前端。
后端:
在SelectServlet.java中,调用Service方法进行数据查询,查询出来的所有产品信息存储在List中,将List存入request域。
req.setAttribute("bestsellers",bsList);//将产品信息存入request域
前端:
在showAllBestsellers.jsp中,通过EL表达式,将存在request域里的数据取出来。
<c:forEach items="${bestsellers}" var="bs">
前端传给后端
用户在前端填写的form表单里的信息,需要传递给后端,后端利用这些信息来做增、删、改。
前端:
用户点击表单的提交按钮,表单中的元素就会自动存储在request域,以键值对的形式,键:元素的name属性,值:用户填写的内容。
后端:
从request域里取数据,通过request对象的getParameter方法,传入参数:键。
String name = req.getParameter("name");
5.代码
JSP
mainPage.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>主页</title>
</head>
<body>
<h1 style="color: coral">Nana Cosmetics Bestsellers</h1>
<h2>Menu:</h2>
<h2><a href="/toSelect">查看所有热销产品</a></h2>
<h2><a href="add.jsp">添加产品信息</a></h2>
<h2><a href="delete.jsp">删除产品信息</a></h2>
<h2><a href="update.jsp">修改产品信息</a></h2>
</body>
</html>
showAllBestsellers.jsp
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>所有热销产品</title>
</head>
<body>
<h1 style="color: coral">所有热销产品:</h1>
<table border="1" cellspacing="0" width="500px">
<tr>
<!--<td>序号</td>-->
<td>产品名称</td>
<td>价格</td>
</tr>
<%--使用JSTL和EL表达式来获取存入request域里的数据,是个List,存有所有产品的信息--%>
<%--bs就是获取的单个的Bestseller对象,通过对象.属性名获取属性值--%>
<c:forEach items="${bestsellers}" var="bs">
<tr>
<%--<td>${bs.id}</td>--%>
<td>${bs.brand}${bs.name}</td><%--牌子和产品名连在一起,作为产品名称--%>
<td>${bs.price}</td>
</tr>
</c:forEach>
</table>
<br><h4><a href="mainPage.jsp">点击返回主页</a></h4>
</body>
</html>
add.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>添加产品信息</title>
</head>
<body>
<h2>请输入需要添加的产品信息:</h2>
<form action="/toAdd" method="get">
产品名:<input type="text" name="name"><br><br>
品牌:<input type="text" name="brand"><br><br>
价格:<input type="text" name="price"><br><br>
<input type="submit" value="提交">
</form>
<br><h4><a href="mainPage.jsp">点击返回主页</a></h4>
</body>
</html>
delete.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>删除产品信息</title>
</head>
<body>
<h2>请输入需要删除的产品信息:</h2>
<form action="/toDelete" method="get">
产品名:<input type="text" name="name"><br><br>
品牌:<input type="text" name="brand">