码迷，mamicode.com
首页 > 编程语言 > 详细

空气质量管理系统ssm（mybatis+spring+springMVC）框架+前后端分离

时间：2019-12-29 18:52:26      阅读：153      评论：0      收藏：0      [点我收藏+]

标签：frame   zone   pattern   int   ack   cto   wal   number   ESS   

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");
        }
    })
}


本文章转至 故事我忘了：
转载地址：https://www.cnblogs.com/jsccc520/p/11976748.html

空气质量管理系统ssm（mybatis+spring+springMVC）框架+前后端分离

标签：frame   zone   pattern   int   ack   cto   wal   number   ESS   

原文地址：https://www.cnblogs.com/zhaozhitong/p/12115602.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！