SpringBoot整合ssm案例中關於查詢

這裏我寫查所有和根據條件查詢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
相關文章
相關標籤/搜索