https://blog.csdn.net/qq_56248592/article/details/127003340?spm=1001.2014.3001.5502
上篇文章的回顾的链接在上面
总功能:从用户页面中增加一条记录到数据库中去如何操作:在这里做了一些调整
本博文的核心内容如何显示部门的信息:一个字段多条记录在Java中用什么方式来存放呢？
功能展示:
上面的页面如何实现要用到一级的联动将信息显示在下拉表中
填入必要的信息内容
如何让这里变红？
增加成功后数据如何交给数据库呢！
在数据库中显示如图所示表示以增加成功
第一步:数据库开始起步:建立数据库 建立数据库中的表 /*
Navicat Premium Data Transfer
Source Server : demossmtest
Source Server Type : MySQL
Source Server Version : 80023
Source Host : localhost:3306
Source Schema : mdb
Target Server Type : MySQL
Target Server Version : 80023
File Encoding : 65001
Date: 23/09/2022 09:43:57
*/
SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;
-- ----------------------------
-- Table structure for emp
-- ----------------------------
DROP TABLE IF EXISTS `emp`;
CREATE TABLE `emp` (
`id` int NOT NULL AUTO_INCREMENT COMMENT '员工编号',
`name` varchar(20) CHARACTER SET utf8 COLLATE utf8_bin NULL DEFAULT NULL COMMENT '员工姓名',
`sex` varchar(2) CHARACTER SET utf8 COLLATE utf8_bin NULL DEFAULT NULL COMMENT '员工性别',
`age` int NULL DEFAULT NULL COMMENT '员工年龄',
`openDate` varchar(21) CHARACTER SET utf8 COLLATE utf8_bin NULL DEFAULT NULL COMMENT '员工入职时间',
`workClass` varchar(25) CHARACTER SET utf8 COLLATE utf8_bin NULL DEFAULT NULL COMMENT '员工入职时间',
PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 7 CHARACTER SET = utf8 COLLATE = utf8_bin ROW_FORMAT = Dynamic;
-- ----------------------------
-- Records of emp
-- ----------------------------
INSERT INTO `emp` VALUES (1, '张三', '男', 34, '2022-05-10', '行政管理部门');
INSERT INTO `emp` VALUES (2, '李四', '女', 23, '2022-05-10', '前端开发部门');
INSERT INTO `emp` VALUES (3, '万物', '男', 23, '2022-09-21', '开发软件部门');
INSERT INTO `emp` VALUES (4, '我是增加的数据信息', '男', 356, '2022-09-21', '前端开发部门');
INSERT INTO `emp` VALUES (5, 'Applate', '男', 567, '2022-09-22', '睡觉部门');
INSERT INTO `emp` VALUES (6, '李四小安', '男', 23, '2022-09-23', '全栈开发');
INSERT INTO `emp` VALUES (7, '我是增加的数据为2', '男', 20, '2022-09-23', '自己的部');
SET FOREIGN_KEY_CHECKS = 1;
第二步:编写Sql语句
查询表的结构 DESC emp
结果如图所示
查询表中部门信息:更据下面的结果信息推断出在Java中用List<String>存放 select distinct workClass from emp
运行结果如图
写出emp表中的增加一条记录的语句: 返回值的类型 方法名(转入的参数)? int add(Map<String, String[]> map); INSERT INTO `mdb`.`emp` ( `name`, `sex`, `age`, `openDate`, `workClass` )
VALUES
(
'我是第四题增加的几信息',
'男',
56,
'2022-9-23',
'少年部')
运行结果信息
第三步:SSM三层的构建使用的是??
Servlet为控制层? 控制页面的跳转 Service为业务逻辑层? 利用的是接口+实现类 Dao为数据反问层使用的是 JdbcTemplate??利用的是接口+实现类
第四步:前期的一些环境搭建 JdbcTemplate?工具类的实现代码 一个是工具类的操作一个是连接池的操作 package Com.Emp.Utils;
import com.alibaba.druid.pool.DruidDataSourceFactory;
import org.springframework.jdbc.core.JdbcTemplate;
import javax.sql.DataSource;
import java.io.InputStream;
import java.util.Properties;
/**
* 简化代码sql代码
*/
public class DBUtil {
public static JdbcTemplate jt;
//获得druid配置的数据库连接池
static {
//使用反射机制获得druid配置文件转换成输入流
InputStream is= DBUtil.class.getClassLoader()
.getResourceAsStream("Com/Emp/Utils/druid.properties");
//创建Properties对象
Properties properties=new Properties();
try {
//将输入流导入properties对象
properties.load(is);
//获得数据库连接池
DataSource dataSource= DruidDataSourceFactory.createDataSource(properties);
jt=new JdbcTemplate(dataSource);
} catch (Exception e) {
e.printStackTrace();
}
}
}
driverClassName=com.mysql.cj.jdbc.Driver
url=jdbc:mysql://localhost:3306/mdb?useUnicode=true&characterEncoding=UTF-8
username=root
password=123456
initialSize=5
maxActive=10
maxWait=3000Html基础的增加页面信息的大的构架 <div align="center">
<form action="HomeServlet" method="get">
<table>
<tr>
<th colspan="2">在数据库的表中增加一条记录</th>
</tr>
<tr>
<td>姓名：</td>
<td><input type="text" name="name" placeholder="请输入新员工姓名"></td>
</tr>
<tr>
<td>性别：</td>
<td><input type="radio" value="男" name="sex">男
<input type="radio" value="女" name="sex">女
</td>
</tr>
<tr>
<td>年龄：</td>
<td><input type="number" name="age" placeholder="请输入新员工年龄"></td>
</tr>
<tr>
<!--可以选择现有的部门，也可以新增部门-->
<td>部门名称：</td>
<td><input type="search" list="dl" name="workClass" placeholder="请选择部门">
<datalist id="dl">
</datalist>
</td>
</tr>
<tr>
<td colspan="2"><input id="sub" type="submit" value="添加"></td>
</tr>
</table>
</form>
</div>
实现上面的功能
Html增加的页面发出Ajax请求 <script src="js/jquery-3.6.js"></script>
<script>
//当该页面加载完成，自动触发事件，发送ajax请求
//获得数据库中现有的部门信息
$(function () {
$.ajax({
url: "HomeServlet",
type: "POST",
data: "",
success: function (json) {
},
error: function () {
alert("连接服务器失败");
},
dataType: "json"
});
});
</script>
下面是三层页面代码的展示图
@WebServlet(urlPatterns = "/HomeServlet")
public class HomeServlet extends HttpServlet {
IEmpService service=new EmpServiceImp();
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
request.setCharacterEncoding("UTF-8");
//收到ajax的请求，从数据库中查询出现有的部门信息
System.out.println("收到添加新员工页面发送的ajax请求");
List<String> workClass = service.getWorkClass();
}
上是Servlet为控制层?
实现上面接口没有实现的方法
上面是Service为业务逻辑层?
数据访问层的接口
自己定义一个List<String>方法
/*自己定义*/
class MyRowMapper implements RowMapper<String> {
String str = "";
public MyRowMapper(String str) {
this.str = str;
}
@Override
public String mapRow(ResultSet resultSet, int i) throws SQLException {
return resultSet.getString(str);
}
} /*一级联动*/
@Override
public List<String> getWorkClass() {
/*在*/
return DBUtil.jt.query("select distinct workClass from emp",
new MyRowMapper("workClass"));
}
上面是Dao为数据反问层使用的是 JdbcTemplate
然后控制层要给Html页面一个交代 //使用json框架将所有部门信息转换成json格式["","",""]
new ObjectMapper().writeValue(response.getWriter(),workClass); <script>
//当该页面加载完成，自动触发事件，发送ajax请求
//获得数据库中现有的部门信息
$(function () {
$.ajax({
url: "HomeServlet",
type: "POST",
data: "",
success: function (json) {
//["行政管理部","前端开发部","人力资源部"] 获得请求为post请求
for (var i = 0; i < json.length; i++) {
$("#dl").append("<option>" + json[i] + "</option>");
}
},
error: function () {
alert("连接服务器失败");
},
dataType: "json"
});
});
</script>运行结果如图所示:
?增加一条记录下次再说无非又是用了下面的Sql语句:各位可以自己思考一下
@Override
public int add(Map<String, Object> map) {
return DBUtil.jt.update("insert into emp values(?,?,?,?,?,?)",
new Object[]{0, map.get("name"),
map.get("sex"), map.get("age"),
map.get("openDate"), map.get("workClass")});
}
下篇博客的介绍
