一个简单的SSM--房屋管理系统
文件和数据库：
https://pan.baidu.com/s/1jIw2ppm 若已失效可以联系我
需求： 能够通过SSM实现数据的增删改
- 一个HTML 页面就可以实现(Bootstrap)
- 通过模态框
- SSM框架
- 支持批量删除
1. 环境准备
软件环境
- CentOS 8.0
- IDEA 2020.2
- JDK 11.0.7
- MySQL 5.6
- Tomcat 9.0.37
- Maven 3.6.3
- Bootstrap v3.3.7
1. 数据库
CREATE TABLE `housedeal` (
`hid` int(11) NOT NULL AUTO_INCREMENT,
`hName` varchar(10) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
`hDevelopname` varchar(10) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
`hCity` varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
PRIMARY KEY (`hid`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 4 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Compact;
INSERT INTO `housedeal` VALUES (1, 'wanke 柏翠园', 'vanke', '长春');
INSERT INTO `housedeal` VALUES (2, 'wanke 8090', 'vanke', '长春');
2. 实体类
@Setter
@Getter
@ToString
public class HouseDeal implements Serializable {
String hid;
String hname;
String hdevelopname;
String hcity;
}
2. ssm环境搭建
1.pom.xml 导入相关依赖
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<maven.compiler.source>11</maven.compiler.source>
<maven.compiler.target>11</maven.compiler.target>
<spring.version>5.2.8.RELEASE</spring.version>
</properties>
<dependencies>
<!--springmvc-->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>${spring.version}</version>
</dependency>
<!--spring-->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-jdbc</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-aspects</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-test</artifactId>
<version>${spring.version}</version>
</dependency>
<!--mybatis-->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.5.5</version>
</dependency>
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis-spring</artifactId>
<version>1.3.1</version>
</dependency>
<!--mysql driver-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.49</version>
</dependency>
<!--jackson-->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.11.2</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.11.2</version>
</dependency>
<!--connection pool-->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.1.12</version>
</dependency>
<!--servlet-->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>4.0.1</version>
<scope>provided</scope>
</dependency>
<!--JSTL-->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
<!--lombok-->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.12</version>
</dependency>
</dependencies>
<build>
<resources>
<resource>
<directory>src/main/java</directory>
<includes>
<include>**/*.properties</include>
<include>**/*.xml</include>
</includes>
<filtering>false</filtering>
</resource>
</resources>
<plugins>
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.8.0</version>
</plugin>
</plugins>
</build>
</project>
2.配置SSM环境
1.mybatis-config.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration
PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
<settings>
<!--SQL日志-->
<setting name="logImpl" value="STDOUT_LOGGING"/>
</settings>
</configuration>
2.spring-mvc.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"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd">
<!--声明注解驱动-->
<mvc:annotation-driven/>
<!--扫描控制器、异常处理器-->
<context:component-scan base-package="cn.ccut.**.web.*"/>
<!--静态资源管理-->
<mvc:default-servlet-handler/>
</beans>
3.jdbc.properties
jdbc.url=jdbc:mysql://127.0.0.1:3306/test
jdbc.username=root
jdbc.password=root
4.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"
xmlns:tx="http://www.springframework.org/schema/tx"
xmlns:aop="http://www.springframework.org/schema/aop"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx.xsd
http://www.springframework.org/schema/aop
http://www.springframework.org/schema/aop/spring-aop.xsd">
<!--声明组件扫描器-->
<context:component-scan base-package="cn.ccut.**.service" />
<!--导入外部配置文件-->
<context:property-placeholder location="classpath:jdbc.properties"/>
<!--配置数据源druid-->
<bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource" init-method="init" destroy-method="close">
<property name="url" value="${jdbc.url}"/>
<property name="username" value="${jdbc.username}"/>
<property name="password" value="${jdbc.password}"/>
</bean>
<!--声明SqlSessionFactoryBean 注意 -->
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<property name="dataSource" ref="dataSource"/>
<property name="typeAliasesPackage" value="cn.ccut.domain"/>
<property name="configLocation" value="classpath:mybatis-config.xml"/>
</bean>
<!--声明MyBatis的扫描器-->
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
<property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/>
<property name="basePackage" value="cn.ccut.**.mapper"/>
</bean>
<!--配置声明式事务-->
<bean id="tranManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
<property name="dataSource" ref="dataSource"/>
</bean>
<!--配置切面-->
<tx:advice id="myAdvice" transaction-manager="tranManager">
<tx:attributes>
<tx:method name="*" rollback-for="java.lang.Exception" />
<tx:method name="get*" propagation="SUPPORTS" read-only="true"/>
</tx:attributes>
</tx:advice>
<!--配置AOP-->
<aop:config>
<!--指定切入点-->
<aop:pointcut id="allService" expression="execution(* *..service..*.*(..))"/>
<!--指定切面+指定切入点-->
<aop:advisor advice-ref="myAdvice" pointcut-ref="allService"/>
</aop:config>
</beans>
5.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"
id="WebApp_ID" version="4.0">
<!--springmvc的中央调度器-->
<servlet>
<servlet-name>dispatcherServlet</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:spring-mvc.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>dispatcherServlet</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
<!--spring的加载监听-->
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:applicationContext.xml</param-value>
</context-param>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<!--字符集过滤器-->
<filter>
<filter-name>characterEncodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>utf-8</param-value>
</init-param>
<init-param>
<param-name>forceRequestEncoding</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>forceResponseEncoding</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>characterEncodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
</web-app>
3.页面的代码
- index.html
<html>
<head>
<title>房屋交易系统</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css"/>
<script type="text/javascript" src="/static/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.form.extend.js"></script>
<script type="text/javascript" >
jQuery(function($){
//jQuery页码存放处
});
</script>
</head>
<body>
<!-- 增加和修改公用一个模态窗口 -->
<div class="modal fade" id="actModal" role="dialog">
<div class="modal-dialog" role="document" style=" 85%;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel1">--缓存中--</h4>
</div>
<div class="modal-body">
<form id="houseDealForm" class="form-horizontal" role="form">
<input type="hidden" id="haid" name="hid" />
<div class="form-group">
<label for="housename" class="col-sm-2 control-label">房屋名称<span style="font-size: 15px; color: red;">*</span></label>
<div class="col-sm-10" style=" 300px;">
<input name="hname" type="text" class="form-control" id="housename">
</div>
</div>
<div class="form-group">
<label for="development" class="col-sm-2 control-label">开发商<span style="font-size: 15px; color: red;">*</span></label>
<div class="col-sm-10" style=" 300px;">
<input name="hdevelopname" type="text" class="form-control" id="development">
</div>
</div>
<div class="form-group">
<label for="city" class="col-sm-2 control-label">所在城市<span style="font-size: 15px; color: red;">*</span></label>
<div class="col-sm-10" style=" 300px;">
<input name="hcity" type="text" class="form-control" id="city">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button id="saveBtn" type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
<!--主窗体-->
<div style="margin:10px;">
<div style="position: relative; top: -10px;">
<div class="page-header">
<h3 >房屋交易管理系统</h3>
</div>
</div>
</div>
<div style="position: relative; top: -20px; margin:10px; height: 100%;">
<div style=" 100%; position: absolute;top: 5px;">
<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
<div class="btn-group" style="position: relative; top: 18%;">
<button id="addBtn" type="button" class="btn btn-primary" data-toggle="modal"><span class="glyphicon glyphicon-plus"></span> 创建</button>
<button id="editBtn" type="button" class="btn btn-default" data-toggle="modal"><span class="glyphicon glyphicon-pencil"></span> 修改</button>
<button id="delBtn" type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus"></span> 删除</button>
</div>
</div>
<div style="position: relative;top: 10px;">
<table class="table table-hover">
<thead>
<tr style="color: #B3B3B3;">
<td><input type="checkbox" id="selectAll" /></td>
<td>序号</td>
<td>名称</td>
<td>开发商</td>
<td>所在城市</td>
</tr>
</thead>
<tbody id="dataBody"></tbody>
</table>
</div>
</div>
</div>
</body>
</html>
3.实战
1.查询所有
- ajax 由于考虑到每次 都需要用到，所以封装成一个方法
/*查询所有 */
function load_data(){
$.get("/house/getAll.json",function (data) {
var htmlArr = [];
$(data).each(function (i) {
htmlArr.push(
'<tr class="'+(i%2==0?'active':'')+'">
<td><input type="checkbox" name="hid" value="'+this.hid+'" /></td>
<td>'+(i+1)+'</td>
<td>'+this.hname+'</td>
<td>'+(this.hdevelopname||'')+'</td>
<td>'+(this.hcity||'')+'</td>
</tr>'
);
});
$("#dataBody").html(htmlArr.join(''))
});
}
load_data();
- controller
@ResponseBody
@RequestMapping("/getAll.json")
public List<HouseDeal> getAll(){
return houseDealService.getAll();
}
-
mapper
java: List<HouseDeal> getAll(); // ----- xml: <select id="getAll" resultType="HouseDeal"> select * from housedeal </select>
2.删除
- ajax
// 删除操作
$("#delBtn").click(function () {
//获取所有选择的按钮对象,若没有选择提示让其输入 或用户点击取消该操作
var $cks = $(":checkbox[name=hid]:checked");
if ($cks.size() == 0) {
alert("请选择要删除的内容！")
return;
}
if (!confirm("确定？")) return;
var ids = [];
//遍历选择的 ，把其存进数组
$cks.each(function () {
ids.push("hid=" + this.value)
});
// 发送post 异步请求，返回的是true 就代表删除成功，表单数据重新加载
// 否则弹出框信息
$.post("/house/del.do", ids.join("&"), function (data) {
if (data.success) {
load_data();
}
});
});
- Controller
@ResponseBody
@RequestMapping("/del.do")
public Map<String,Object> del(String[] hid){
Map<String,Object> map=new HashMap<String,Object>();
houseDealService.delete(hid);
map.put("success",true);
return map;
}
- mapper
<insert id="insert">
insert into `housedeal` values(
#{hid},
#{hname},
#{hdevelopname},
#{hcity}
)
3.增加和修改
- ajax 包含两个事件 1. 弹出模态框2.保存
// 打开添加模态框
$("#addBtn").click(function () {
$("#myModalLabel1").text("创建房屋信息");
$("#actModal").modal('show');
// 重置表单
$("#houseDealForm :input").val("");
});
// 打开修改模态框
$("#editBtn").click(function () {
var $id = $("#dataBody :checkbox[name=hid]:checked:first");
if ( $id.size() == 0 ) {
alert("请选择要修改的市场活动！");
return ;
}
$("#houseDealForm").initForm("/house/getOne.json?hid=" + $id.val());
$("#myModalLabel1").text("修改房屋信息");
$("#actModal").modal('show');
});
//发送请求到后端，做添加和修改的操作
$("#saveBtn").click(function () {
// 获取表单数据
var data = $("#houseDealForm").formJSON();
$.post("/house/update.do", data, function (data) {
if ( data.success ) {
alert("操作成功");
$("#actModal").modal('hide');
load_data();
}
}, "json");
});
- Controller
//修改需要先进行查询一条记录
@ResponseBody
@RequestMapping("/getOne.json")
public HouseDeal getOne(String hid){
return houseDealService.getOne(hid);
}
@ResponseBody
@RequestMapping("/update.do")
public Map<String,Object> update(HouseDeal houseDeal){
Map<String,Object> map=new HashMap<String,Object>();
houseDealService.update(houseDeal);
map.put("success",true);
return map;
}
- Service
@Override
public void update(HouseDeal houseDeal) {
if(houseDeal.getHid()==null|| "".equals(houseDeal.getHid())){
houseDeal.setHid(UUID.randomUUID().toString().replace("-",""));
houseDealMapper.insert(houseDeal);
}else{
houseDealMapper.update(houseDeal);
}
}
- mapper
<insert id="insert">
insert into `housedeal` values(
#{hid},
#{hname},
#{hdevelopname},
#{hcity}
)
</insert>
<update id="update">
update `housedeal` set
`hName`=#{hname},
`hDevelopname`=#{hdevelopname},
`hCity`=#{hcity}
where `hid`=#{hid}
</update>
4.问题
1. 页面乱码
根据个人计算配置，有的不用配置，有需要需要配置成GBK 字符解析，自己对照下
<meta charset="UTF-8" />