一个简单的SSM--房屋管理系统

一个简单的SSM--房屋管理系统

文件和数据库：

https://pan.baidu.com/s/1jIw2ppm   若已失效可以联系我

需求： 能够通过SSM实现数据的增删改

  • 一个HTML 页面就可以实现(Bootstrap)
  • 通过模态框
  • SSM框架
  • 支持批量删除

1. 环境准备

软件环境

  1. CentOS 8.0
  2. IDEA 2020.2
  3. JDK 11.0.7
  4. MySQL 5.6
  5. Tomcat 9.0.37
  6. Maven 3.6.3
  7. 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" />

2. 记得序列化，虽然没啥影响

不停的思考，就会不停的进步
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/zhenqk/p/13701183.html