這裏我寫查所有和根據條件查詢javascript
這裏咱們引用的依賴和ssm也有區別css
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <!--parent替換爲SpringBoot模塊中的parent--> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.0.3.RELEASE</version> <relativePath/> <!-- lookup parent from repository --> </parent> <modelVersion>4.0.0</modelVersion> <artifactId>springboot-02</artifactId> <packaging>war</packaging> <name>springboot-02 Maven Webapp</name> <!-- FIXME change it to the project's website --> <url>http://www.example.com</url> <!--一樣是SpringBoot的--> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding> <java.version>1.8</java.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-logging</artifactId> </dependency> <!-- 核心依賴 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!-- 能夠實現熱部署,在IDEA上實現熱部署還需一些額外的配置,請查閱資料 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <optional>true</optional> <scope>runtime</scope> </dependency> <!-- JDBC for mysql --> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <scope>runtime</scope> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> <!-- mybatis --> <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId> <version>1.1.1</version> </dependency> <!-- alibaba的druid數據庫鏈接池 --> <dependency> <groupId>com.alibaba</groupId> <artifactId>druid</artifactId> <version>1.0.11</version> </dependency> <!-- 分頁插件 --> <!-- https://mvnrepository.com/artifact/com.github.pagehelper/pagehelper-spring-boot-starter --> <!-- 分頁插件 --> <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper-spring-boot-starter</artifactId> <version>1.2.3</version> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-jdbc</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> </dependencies> <build> <finalName>springboot-02</finalName> </build> </project>
首先從實體類開始html
package cn.studio.entity; import cn.studio.util.JsonDateSerializer; import com.fasterxml.jackson.annotation.JsonFormat; import com.fasterxml.jackson.databind.annotation.JsonSerialize; import org.springframework.format.annotation.DateTimeFormat; import java.util.Date; /** * Created by mycom on 2018/6/23. */ public class AirModel { private Integer id; private String district; @DateTimeFormat(pattern = "yyyy-MM-dd hh:mm:ss") @JsonSerialize(using = JsonDateSerializer.class) private Date monitorTime; private Integer pm10; private Integer pm25; private String monitoringStation; private Date createDate; public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getDistrict() { return district; } public void setDistrict(String district) { this.district = district; } public Date getMonitorTime() { return monitorTime; } public void setMonitorTime(Date monitorTime) { this.monitorTime = monitorTime; } public Integer getPm10() { return pm10; } public void setPm10(Integer pm10) { this.pm10 = pm10; } public Integer getPm25() { return pm25; } public void setPm25(Integer pm25) { this.pm25 = pm25; } public String getMonitoringStation() { return monitoringStation; } public void setMonitoringStation(String monitoringStation) { this.monitoringStation = monitoringStation; } public Date getCreateDate() { return createDate; } public void setCreateDate(Date createDate) { this.createDate = createDate; } }
而後是DAOjava
import cn.studio.entity.AirModel; import java.util.List; /** * Created by mycom on 2018/6/23. */ public interface IAirDAO { //查詢全部 public List<AirModel> findAll(); //根據條件查詢 public List<AirModel> selectBydistrict(AirModel airModel);
上一篇博客寫過這裏對應的xml文件的配置位置有所變更mysql
配置中jquery
<!--查詢全部--> <select id="findAll" resultType="AirModel"> select * from air_quality_index </select> <!--根據條件查詢--> <select id="selectBydistrict" resultType="AirModel"> select * from air_quality_index <where> <if test='district!="0"'> AND district=#{district} </if> </where> </select>
service層中和以前ssm的同樣git
在service的實現類中要注入dao而且要實現方法重寫github
在controller中web
package cn.studio.controller; import cn.studio.entity.AirModel; import cn.studio.service.IAirService; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import javax.annotation.Resource; import java.util.List; /** * Created by mycom on 2018/6/23. */ @Controller public class AirController { @Resource(name="airService") private IAirService airService; @RequestMapping("goHome") public String goHome(){ return "index"; } @RequestMapping("/findAll") @ResponseBody public Object findAll(Model model){ List<AirModel> all = airService.findAll(); model.addAttribute("allAir",all); return all; } @RequestMapping("/findBydistrict") @ResponseBody public Object findBydistrict(AirModel airModel){ List<AirModel> all = airService.selectBydistrict(airModel); return all; }
在頁面上(忽略刪除,刪除不在這篇博客上詳細介紹)ajax
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" th:src="@{/js/jquery-1.8.3.min.js}"></script> <script type="text/javascript"> //根據條件查詢 function myselect() { var district=$("#ourSelect").val(); $.ajax({ url: "/findBydistrict", data:{ "district":district }, type:"POST", success: function (data) { //清空數據 $("#list-content").html(''); //追加數據 $.each(data, function (i, dom) { //一個dom就是一個新聞對象 $("#list-content").append("<tr><td>"+ dom.id + "</td><td><a onclick='update("+dom.id+")'>"+dom.district+"</a>" + "</td><td>" + dom.monitorTime + "</td><td>" + dom.pm10 + "</td><td >" + dom.pm25 + "</td><td>"+ dom.monitoringStation+"</td><td><a onclick='deleteair("+dom.id+")'>刪除</a></td></tr>"); }); $("tr:odd").css("background","pink"); } }) } function deleteair(id) { alert(id) $.ajax({ url: "/deleteAir", data:{ "id":id }, type:"POST", success: function (data) { $("[name=id]").val(data.id); $("[name=district]").val(data.district); $("[name=monitorTime]").val(data.monitorTime); $("[name=pm10]").val(data.pm10); $("[name=pm25]").val(data.pm25); $("[name=monitoringStation]").val(data.monitoringStation); } }) } load(); //默認初始化 /*點擊查詢的觸發事件*/ function load() { $.ajax({ url: "/findAll", type: "post", success: function (data) { //清空數據 $("#list-content").html(''); //追加數據 $.each(data, function (i, dom) { //一個dom就是一個新聞對象 $("#list-content").append("<tr><td>"+ dom.id + "</td><td><a onclick='update("+dom.id+")'>"+dom.district+"</a>" + "</td><td>" + dom.monitorTime + "</td><td>" + dom.pm10 + "</td><td >" + dom.pm25 + "</td><td>"+ dom.monitoringStation+"</td><td><a onclick='deleteair("+dom.id+")'>刪除</a></td></tr>"); }); $("tr:odd").css("background","pink"); } }); }; </script> </head> <body> <table width="70%" border="1" align="center" id="list"> <caption><h1 style="height: 50px;line-height5:0px;border: 1px">空氣質量檢測信息庫</h1> 按區域查詢 <select name="district" id="ourSelect"> <option value="0">不限</option> <option value="西城區">西城區</option> <option value="東城區">東城區</option> <option value="海淀區">海淀區</option> <option value="豐臺區">豐臺區</option> </select> <input type="button" onclick="myselect()" value="查找"/> <a href="/goAddPage">添加空氣質量信息</a> </caption> <thead> <tr class="t_head"> <th>序號</th> <th>區域</th> <th>檢測時間</th> <th>PM10數據</th> <th>PM2.5數據局</th> <th>監測站</th> <th>操做</th> </tr> </thead> <tbody id="list-content"> </tbody> </table> </body> </html>
這裏在補充一點在resources下
標紅框的這兩個目錄分別是存放css,js和html文件的
這裏還有一個application.yml文件
server: port: 8080 spring: thymeleaf: prefix: classpath:/templates/ mode: HTML5 cache: false datasource: name: test url: jdbc:mysql://localhost:3306/exam username: root password: type: com.alibaba.druid.pool.DruidDataSource driver-class-name: com.mysql.jdbc.Driver filters: stat maxActive: 20 initialSize: 1 maxWait: 60000 minIdle: 1 timeBetweenEvictionRunsMillis: 60000 minEvictableIdleTimeMillis: 300000 validationQuery: select 'x' testWhileIdle: true testOnBorrow: false testOnReturn: false poolPreparedStatements: true maxOpenPreparedStatements: 20 mybatis: //配置mapping下的xml文件路徑 mapper-locations: classpath:mapping/*.xml //配置別名 type-aliases-package: cn.studio.entity