空氣質量管理系統+SSM(Spring+SpringMVC+Mybatis)+前后端分離總結

作者: 故事我忘了^￠
個人微信公眾號: 程序猿的月光寶盒

---

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&amp;characterEncoding=UTF-8"/>
        <property name="username" value="root"/>
        <property name="password" value="xxx"/>
    </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="查找"/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <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;">首&nbsp;頁</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});">尾&nbsp;頁</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)">首&nbsp;頁</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});">尾&nbsp;頁</a>
                `
            }else if(obj.pageUtils.pageNo !== 1 && obj.pageUtils.pageNo === obj.pageUtils.totalPages){//如果不是第一頁,且是最后一頁
                pageStr = `
                <a href="javascript:void(0);" onclick="initPageData(1)">首&nbsp;頁</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;">尾&nbsp;頁</a>
                `
            }
            pageStr += `
            第&nbsp;
                ${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;">首&nbsp;頁</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});">尾&nbsp;頁</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)">首&nbsp;頁</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});">尾&nbsp;頁</a>
                `
            }else if(obj.pageUtils.pageNo !== 1 && obj.pageUtils.pageNo === obj.pageUtils.totalPages){//如果不是第一頁,且是最后一頁
                pageStr = `
                <a href="javascript:void(0);" onclick="initPageData(1)">首&nbsp;頁</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;">尾&nbsp;頁</a>
                `
            }
            pageStr += `
            第&nbsp;
                ${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");
        }
    })
}

以上,結束

點我進入對應的項目源碼下載