空气质量管理系统+SSM(Spring+SpringMVC+Mybatis)+前后端分离总结

作者:

故事我忘了 ^￠

个人微信公众号:

程序猿的月光宝盒

点我进SSM演示地址

1.目录结构:

2.需要注意的地方

2.1在WEB-INFO下新建

2.1.1 springMVC-servlet.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:aop="http://www.springframework.org/schema/aop"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:tx="http://www.springframework.org/schema/tx"
       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/aop
       http://www.springframework.org/schema/aop/spring-aop.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/mvc
       http://www.springframework.org/schema/mvc/spring-mvc.xsd
">
    <context:component-scan base-package="monster._52cc"/>
    <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
        <property name="driverClassName" value="com.mysql.jdbc.Driver"/>
        <property name="url" value="jdbc:mysql:///kh75?useUnicode=true&characterEncoding=UTF-8"/>
        <property name="username" value="root"/>
        <property name="password" value="admin"/>
    </bean>
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource"/>
        <property name="typeAliasesPackage" value="monster._52cc.pojo"/>
        <property name="typeAliases" value="monster._52cc.util.PageUtils"/>
    </bean>
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource"/>
    </bean>
    <tx:annotation-driven/>
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="monster._52cc.mapper"/>
    </bean>
    <!--这是从Controller层使用@RestController注解引起从数据库到前台时间出现Long类型的时间(从1970-1-1至今的毫秒),解决SpringMVC 中@RestController 返回日期格式为时间戳-->
    <mvc:annotation-driven>
        <mvc:message-converters>
            <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
                <property name="objectMapper">
                    <bean class="com.fasterxml.jackson.databind.ObjectMapper">
                        <property name="dateFormat">
                            <bean class="java.text.SimpleDateFormat">
                                <constructor-arg type="java.lang.String" value="yyyy-MM-dd HH:mm:ss"/>
                            </bean>
                        </property>
                    </bean>
                </property>
            </bean>
        </mvc:message-converters>
    </mvc:annotation-driven>
</beans>

2.1.2 web.xml

<!DOCTYPE web-app PUBLIC
        "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
        "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
    <display-name>Archetype Created Web Application</display-name>
    <filter>
        <filter-name>encodingFilter</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>
    </filter>
    <filter-mapping>
        <filter-name>encodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
    <servlet>
        <servlet-name>springMVC</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>springMVC</servlet-name>
        <url-pattern>*.do</url-pattern>
    </servlet-mapping>
    <welcome-file-list>
        <welcome-file>list.html</welcome-file>
    </welcome-file-list>
</web-app>

2.2实体类,对应数据库中Data的字段上加注解 @DateTimeFormat(pattern = "yyyy-MM-dd")

@Data
@AllArgsConstructor
@NoArgsConstructor
public class AirQualityIndex {
    /**
    * 记录编号
    */
    private Integer id;

    /**
    * 区域编号
    */
    private Integer districtId;

    /**
    * 检测时间
    */
    @DateTimeFormat(pattern = "yyyy-MM-dd")
    private Date monitorTime;

    /**
    * pm10值
    */
    private Integer pm10;

    /**
    * pm2.5值
    */
    private Integer pm2_5;

    /**
    * 监测站
    */
    private String monitoringStation;

    /**
    * 最后修改时间
    */
    private String lastModifyTime;
}

2.3 暂时没有用到Mybatis的分页插件,所以自己写分页工具类

@ToString
public class PageUtils {
    private Integer pageSize;
    private Integer pageNo;
    private Integer totalCount;
    private Integer totalPages;
    private Integer startRow;
    /**
     * 需要分页的对象
     */
    private AirQualityIndex airQualityIndex;

    public PageUtils() {
    }

    public PageUtils(Integer pageSize, Integer pageNo, Integer totalCount, AirQualityIndex airQualityIndex) {
        this.pageSize = pageSize;
        this.pageNo = pageNo;
        this.totalCount = totalCount;
        this.airQualityIndex = airQualityIndex;

        setStartRow(pageSize,pageNo);
        setTotalPages(pageSize,totalCount);
    }

    public Integer getPageSize() {
        return pageSize;
    }

    public void setPageSize(Integer pageSize) {
        this.pageSize = pageSize;
    }

    public Integer getPageNo() {
        return pageNo;
    }

    public void setPageNo(Integer pageNo) {
        this.pageNo = pageNo;
    }

    public Integer getTotalCount() {
        return totalCount;
    }

    public void setTotalCount(Integer totalCount) {
        this.totalCount = totalCount;
    }

    public Integer getTotalPages() {
        return totalPages;
    }

    public void setTotalPages(Integer pageSize,Integer totalCount) {
        this.totalPages = totalCount%pageSize==0?totalCount/pageSize:totalCount/pageSize+1;
    }

    public Integer getStartRow() {
        return startRow;
    }

    public void setStartRow(Integer pageSize,Integer pageNo) {
        this.startRow = (pageNo-1)*pageSize;
    }

    public AirQualityIndex getAirQualityIndex() {
        return airQualityIndex;
    }

    public void setAirQualityIndex(AirQualityIndex airQualityIndex) {
        this.airQualityIndex = airQualityIndex;
    }
}

2.4 省去mapper的xml,使用注解写sql

注意查询的动态sql上要用 <script></script> 包起来

AirQualityIndexMapper.java

public interface AirQualityIndexMapper {

    @Delete("DELETE FROM air_quality_index where id = #{id}")
    int deleteByPrimaryKey(Integer id);

    @Insert("INSERT INTO air_quality_index VALUES (NULL,#{districtId}, #{monitorTime}, #{pm10}, #{pm2_5}, #{monitoringStation}, #{lastModifyTime})")
    int insert(AirQualityIndex airQualityIndex);

    @Update("UPDATE air_quality_index SET districtId = #{districtId},monitorTime = #{monitorTime},pm10 = #{pm10},pm2_5 = #{pm2_5},monitoringStation = #{monitoringStation},lastModifyTime = #{lastModifyTime} WHERE id = #{id}")
    int updateByPrimaryKey(AirQualityIndex airQualityIndex);

    @Select("<script>" +
            "SELECT a.*,d.name FROM air_quality_index a,district d WHERE a.districtId = d.id" +
            "<if test='airQualityIndex != null and airQualityIndex.id != null'>" +
            "  AND a.id=#{airQualityIndex.id}" +
            "</if>" +
            "<if test='airQualityIndex != null and airQualityIndex.districtId != -1 and airQualityIndex.districtId != null'>" +
            "  AND a.districtId=#{airQualityIndex.districtId}" +
            "</if>" +
            "<if test='pageSize != null and startRow != null'>" +
            "  LIMIT #{startRow},#{pageSize}" +
            "</if>" +
            "</script>")
    List<Map<String,Object>> selectByPrimaryKey(PageUtils pageUtils);

    @Select("<script>" +
            "  SELECT count(0) FROM air_quality_index" +
            "  <where>" +
            "    <if test='districtId != null and districtId != -1'>" +
            "        AND districtId=#{districtId}" +
            "    </if>" +
            "  </where>" +
            "</script>")
    int getTotalCount(AirQualityIndex airQualityIndex);
}

2.5 service中要注意的事情

2.5.1因为分页逻辑属于service要做的事,所以贴上对应serviceImp中的逻辑

AirQualityIndexServiceImpl.java 中的 selectByPrimaryKey(PageUtils pageUtils)

@Service
@Transactional
public class AirQualityIndexServiceImpl implements AirQualityIndexService {
    @Autowired
    private AirQualityIndexMapper airQualityIndexMapper;

    @Override
    public int deleteByPrimaryKey(Integer id) {
        return airQualityIndexMapper.deleteByPrimaryKey(id);
    }

    @Override
    public int insert(AirQualityIndex airQualityIndex) {
        //todo获取当前系统时间
        Date d = new Date();
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        //2019-10-23 10:31:37
        airQualityIndex.setLastModifyTime(sdf.format(d));
        if (airQualityIndex.getDistrictId() == -1) {
            return 0;
        }
        return airQualityIndexMapper.insert(airQualityIndex);
    }

    @Override
    public int updateByPrimaryKey(AirQualityIndex airQualityIndex) {
        //todo获取当前系统时间
        Date d = new Date();
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        //2019-10-23 10:31:37
        //设置时区
        sdf.setTimeZone(TimeZone.getTimeZone("Asia/Shanghai"));
        airQualityIndex.setLastModifyTime(sdf.format(d));
        if (airQualityIndex.getDistrictId() == -1) {
            return 0;
        }
        System.out.println(airQualityIndex);
        return airQualityIndexMapper.updateByPrimaryKey(airQualityIndex);
    }

    @Override
    public List<Map<String, Object>> selectByPrimaryKey(PageUtils pageUtils) {
        if(pageUtils.getPageNo()==null){
            return airQualityIndexMapper.selectByPrimaryKey(pageUtils);
        }
        pageUtils.setTotalCount(airQualityIndexMapper.getTotalCount(pageUtils.getAirQualityIndex()));
        pageUtils.setPageSize(5);
        pageUtils.setTotalPages(pageUtils.getPageSize(), pageUtils.getTotalCount());
        pageUtils.setStartRow(pageUtils.getPageSize(), pageUtils.getPageNo());
        return airQualityIndexMapper.selectByPrimaryKey(pageUtils);
    }
}

2.5.2其中,因为要实时保存修改时间,所以也在service中实现

//todo获取当前系统时间
        Date d = new Date();
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        //2019-10-23 10:31:37
        //设置时区
        sdf.setTimeZone(TimeZone.getTimeZone("Asia/Shanghai"));
        airQualityIndex.setLastModifyTime(sdf.format(d));
        if (airQualityIndex.getDistrictId() == -1) {
            return 0;
        }
        System.out.println(airQualityIndex);

2.6最终的Controller文件

CenterControllerOfAir.java

@RestController
public class CenterControllerOfAir{
    @Autowired
    private AirQualityIndexService airQualityIndexService;
    @Autowired
    private DistrictService districtService;

    @RequestMapping("/deleteByPrimaryKey.do")
    public int deleteByPrimaryKey(Integer id) {
        return airQualityIndexService.deleteByPrimaryKey(id);
    }

    @RequestMapping("/insert.do")
    public int insert(AirQualityIndex airQualityIndex) {
        if(airQualityIndex.getDistrictId()==-1 || airQualityIndex.getMonitoringStation()==null || airQualityIndex.getMonitorTime()==null || airQualityIndex.getPm2_5()==null || airQualityIndex.getPm10()==null){
            return 0;
        }
        return airQualityIndexService.insert(airQualityIndex);
    }

    @RequestMapping("/updateByPrimaryKey.do")
    public int updateByPrimaryKey(AirQualityIndex airQualityIndex) {
        if(airQualityIndex.getDistrictId()==-1 || airQualityIndex.getMonitoringStation()==null || "".equals(airQualityIndex.getMonitoringStation().trim()) || airQualityIndex.getMonitorTime()==null || airQualityIndex.getPm2_5()==null || airQualityIndex.getPm10()==null){
            return 0;
        }
        return airQualityIndexService.updateByPrimaryKey(airQualityIndex);
    }

    @RequestMapping("/selectByPrimaryKey.do")
    public Map<String, Object> selectByPrimaryKey(PageUtils pageUtils) {
        Map<String, Object> map = new HashMap<>(16);
        List<Map<String, Object>> airQualityIndexList = airQualityIndexService.selectByPrimaryKey(pageUtils);
        map.put("airQualityIndexList",airQualityIndexList);
        map.put("pageUtils",pageUtils);
        return map;
    }

    @RequestMapping("/showAllDistrict.do")
    public List<Map<String, Object>> showAllDistrict() {
        return districtService.showAllDistrict();
    }

    @RequestMapping("/info.do")
    public Map<String, Object> info(PageUtils pageUtils) {
        Map<String, Object> map = new HashMap<>(16);
        map.put("airQualityIndex",airQualityIndexService.selectByPrimaryKey(pageUtils).get(0));
        map.put("optionData",districtService.showAllDistrict());
        return map;
    }
}

2.7对应的几个页面要注意的:

list.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<center>
    <h1>空气质量监测信息库</h1>
    <form id="selDistrictForm">
    按区域查询
        <select name="districtId" id="selDistrictSel" title="区域查询">
            <option value="-1">不限</option>
        </select>
        <input type="button" name="sel" value="查找"/>
                        
        <a href="add.html">添加空气质量信息</a>
    </form>
    <br/>
    <table>
        <tr>
            <th>序号</th>
            <th>区域</th>
            <th>监测时间</th>
            <th>PM10</th>
            <th>PM2.5</th>
            <th>监测站</th>
        </tr>
    </table>
    <p class="pageFoot"></p>
</center>
<script rel="script" type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script rel="script" type="text/javascript" src="js/initOptionSel.js"></script>
<script rel="script" type="text/javascript" src="js/list.js"></script>
</body>
</html>

list.js

$(function () {
    // 初始化分页数据
    initPageData(1);
    //条件查找
    $("[type=button]").click(function () {
        initPageData(1);
    });

});



function initPageData(pageNo) {
    var table = $("table");
    var pageFoot = $("[class=pageFoot]");
    var districtId = $("[name=districtId]").val();
    $.ajax({
        url: "selectByPrimaryKey.do",
        type: "post",
        dataType: "json",
        data: {"pageNo": pageNo, "airQualityIndex.districtId": districtId},
        async: true,
        success: function (obj) {
            var tableStr = "";
            console.log(obj.airQualityIndexList.length===0);
            if (obj.airQualityIndexList.length===0){
                $("tr:gt(0)").remove();
                tableStr=`
                <tr style="text-align: center">
                    <td colspan="6"><strong>抱歉,暂无数据</strong></td>
                </tr>
                `;
            }else{
                //在循环的前面清空标题以下的所有行
                //获取行>0的那行.移除方法
                $("tr:gt(0)").remove();
                $.each(obj.airQualityIndexList, function (i) {
                    tableStr += `
                <tr>
                  <td>${obj.airQualityIndexList[i].id}</td>
                  <td> <a href="edit.html?id=${obj.airQualityIndexList[i].id}">${obj.airQualityIndexList[i].name}</a></td>
                  <td>${obj.airQualityIndexList[i].monitorTime}</td>
                  <td>${obj.airQualityIndexList[i].pm10}</td>
                  <td>${obj.airQualityIndexList[i].pm2_5}</td>
                  <td>${obj.airQualityIndexList[i].monitoringStation}</td>
                </tr>
                `;
                });
            }
            table.attr("width", "600");
            table.append(tableStr);
            $("tr").first().attr("style", "background-color:#ADD8E6");
            $("tr:gt(0):odd").attr("style", "background-color:#90EE90");

            //分页
            //在分页前,清空原来分页的内容
            pageFoot.html("");
            var pageStr = "";
            if(obj.pageUtils.totalCount===0){//如果没有数据,就不显示分页条
                return ;
            }
            if (obj.pageUtils.pageNo === 1 && obj.pageUtils.pageNo !== obj.pageUtils.totalPages) {//如果是第一页,并且还有下一页
                pageStr = `
                <a href="javascript:void(0);" style="text-decoration: none;color: grey;cursor:no-drop;">首 页</a>|
                <a href="javascript:void(0);" style="text-decoration: none;color: grey;cursor:no-drop;"><< 上一页</a>|
                <a href="javascript:void(0);" onclick="initPageData(${obj.pageUtils.pageNo + 1 });">下一页>></a>|
                <a href="javascript:void(0);" onclick="initPageData(${obj.pageUtils.totalPages});">尾 页</a>
                `
            }else if (obj.pageUtils.pageNo === 1 && obj.pageUtils.pageNo !== obj.pageUtils.totalPages) {//如果是第一页,并且没有有下一页
                pageStr = ``//nothing to do
            }else if(obj.pageUtils.pageNo !== 1 && obj.pageUtils.pageNo !== obj.pageUtils.totalPages){//如果不是第一页,并且还有下一页
                pageStr = `
                <a href="javascript:void(0);" onclick="initPageData(1)">首 页</a>|
                <a href="javascript:void(0);" onclick="initPageData(${obj.pageUtils.pageNo - 1 });"><< 上一页</a>|
                <a href="javascript:void(0);" onclick="initPageData(${obj.pageUtils.pageNo + 1 });">下一页>></a>|
                <a href="javascript:void(0);" onclick="initPageData(${obj.pageUtils.totalPages});">尾 页</a>
                `
            }else if(obj.pageUtils.pageNo !== 1 && obj.pageUtils.pageNo === obj.pageUtils.totalPages){//如果不是第一页,且是最后一页
                pageStr = `
                <a href="javascript:void(0);" onclick="initPageData(1)">首 页</a>|
                <a href="javascript:void(0);" onclick="initPageData(${obj.pageUtils.pageNo - 1 })"><< 上一页</a>|
                <a href="javascript:void(0);" style="text-decoration: none;color: grey;cursor:no-drop;">下一页>></a>|
                <a href="javascript:void(0);" style="text-decoration: none;color: grey;cursor:no-drop;">尾 页</a>
                `
            }
            pageStr += `
            第 
                ${obj.pageUtils.pageNo}
                页/共
                ${obj.pageUtils.totalPages}
                页(${obj.pageUtils.totalCount}条)
            `;
            pageFoot.append(pageStr);
        },
        error: function () {
            alert("initPageData error");
        }
    })
}

2.7.1其中,分页逻辑可以以后稍作修改直接使用

//分页
            //在分页前,清空原来分页的内容
            pageFoot.html("");
            var pageStr = "";
            if(obj.pageUtils.totalCount===0){//如果没有数据,就不显示分页条
                return ;
            }
            if (obj.pageUtils.pageNo === 1 && obj.pageUtils.pageNo !== obj.pageUtils.totalPages) {//如果是第一页,并且还有下一页
                pageStr = `
                <a href="javascript:void(0);" style="text-decoration: none;color: grey;cursor:no-drop;">首 页</a>|
                <a href="javascript:void(0);" style="text-decoration: none;color: grey;cursor:no-drop;"><< 上一页</a>|
                <a href="javascript:void(0);" onclick="initPageData(${obj.pageUtils.pageNo + 1 });">下一页>></a>|
                <a href="javascript:void(0);" onclick="initPageData(${obj.pageUtils.totalPages});">尾 页</a>
                `
            }else if (obj.pageUtils.pageNo === 1 && obj.pageUtils.pageNo !== obj.pageUtils.totalPages) {//如果是第一页,并且没有有下一页
                pageStr = ``//nothing to do
            }else if(obj.pageUtils.pageNo !== 1 && obj.pageUtils.pageNo !== obj.pageUtils.totalPages){//如果不是第一页,并且还有下一页
                pageStr = `
                <a href="javascript:void(0);" onclick="initPageData(1)">首 页</a>|
                <a href="javascript:void(0);" onclick="initPageData(${obj.pageUtils.pageNo - 1 });"><< 上一页</a>|
                <a href="javascript:void(0);" onclick="initPageData(${obj.pageUtils.pageNo + 1 });">下一页>></a>|
                <a href="javascript:void(0);" onclick="initPageData(${obj.pageUtils.totalPages});">尾 页</a>
                `
            }else if(obj.pageUtils.pageNo !== 1 && obj.pageUtils.pageNo === obj.pageUtils.totalPages){//如果不是第一页,且是最后一页
                pageStr = `
                <a href="javascript:void(0);" onclick="initPageData(1)">首 页</a>|
                <a href="javascript:void(0);" onclick="initPageData(${obj.pageUtils.pageNo - 1 })"><< 上一页</a>|
                <a href="javascript:void(0);" style="text-decoration: none;color: grey;cursor:no-drop;">下一页>></a>|
                <a href="javascript:void(0);" style="text-decoration: none;color: grey;cursor:no-drop;">尾 页</a>
                `
            }
            pageStr += `
            第 
                ${obj.pageUtils.pageNo}
                页/共
                ${obj.pageUtils.totalPages}
                页(${obj.pageUtils.totalCount}条)
            `;
            pageFoot.append(pageStr);

initOptionSel.js

初始化下拉列表

$(function () {
    //初始化查询下啦列表
    initSelOption();}
);
function initSelOption() {
    $.ajax({
        url: "showAllDistrict.do",
        type: "post",
        dataType: "json",
        data: {},
        async: true,
        success: function (obj) {
            var str = "";
            $.each(obj, function (i) {
                str += `
               <option value="${obj[i].id}">${obj[i].name}</option>
               `
            });
            //获取下拉列表
            $("#selDistrictSel").append(str);
        },
        error: function () {
            alert("initSelOption error");
        }
    })
}

以上,结束

点我进入对应的项目源码下载