SSM先後端分離 ssm+html+js(ajax) 這種controll層的返回值是結合或者網址

提示：

1.單表查詢多條數據用 list<實體類名字>

mapper層

1.1單表查詢單條數據用  對象

2.兩表關聯查多條 list<map<String,Object>>

2.1兩表聯查查一條 map<String,Object>

一.具體步驟以下

表結構：

 

1.建立實體類：

2.建立mapper層  ，裏面放的是接口還有用註解寫sql語句

3.建立service層 裏面有接口和接口的實現類

3.1接口的做用就是給用戶看的方法

j接口的實現類：

4.建立controller層

package cn.kgc.controller;
import cn.kgc.service.DevicesService;
import cn.kgc.service.RepairService;
import cn.kgc.vo.Devices;
import cn.kgc.vo.Repair;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * Created by 86182 on 2019/7/24.
 * 由於用的是@Controller和@ResponseBody 因此他們的返回值是 集合
 */
@Controller 
public class DevicesController {
    @Autowired
    private DevicesService devicesService;
    @Autowired
    private RepairService repairService;

    //首頁的查詢全部

    @RequestMapping("/main.do")
    @ResponseBody
    //這裏分頁插件 pageno表明的是頁碼
    public Map<String, Object> showDevices(@RequestParam(value ="pageno",required = false,defaultValue = "1")Integer pageno){
        Map<String,Object> map = new HashMap<>();
        //調用分頁的方法
        PageHelper.startPage(pageno,2);
        List<Devices> list = devicesService.showDevices();
        //使用pageinfo這個方法，將查到的東西放到裏面，他裏面封裝了不少信息
        PageInfo pageInfo = new PageInfo(list);
        System.out.println(pageInfo);
        map.put("list",list);
        map.put("pageInfo",pageInfo);
        return map;
    }
    //首頁的條件查詢
    @ResponseBody
    @RequestMapping("/info.do")
   public HashMap<Object,Object> showDeviceName(String deviceName){
        HashMap<Object,Object> map = new HashMap<>();
        List<Devices> list = devicesService.showDeviceName(deviceName);
        map.put("list",list);
        return map;
    }

    //首頁有一個點擊的查詢
    @ResponseBody
    @RequestMapping("/xinxi.do")
    public List<Map<String,Object>> showData(@RequestParam(value = "deviceName",required = false) String deviceName){

        List<Map<String,Object>> list = repairService.showRepair(deviceName);

        return list;
    }
    //添加一條信息
    @ResponseBody
    @RequestMapping("/tianjia.do")
    public String addRepair(Repair repair){
        repairService.add(repair);
        return "main.jsp";
    }
}

 第二階段前臺html頁面

好比說主頁面main.html

 

js頁面代碼以下:  這種呢是前臺頁面什麼都沒有，須要往頁面上拼接值

 

$(function () {
    init(1);
})
 function  init (pageno) {
     $.ajax({
         url:"main.do",
         type:"post",
         dataType:"json",
         data:{"pageno":pageno},
         async:true,
         success:function (obj) {
             console.log(obj);
 $("#nihao").html(" ") //做用就是清空當前頁面
             var str="";
             $.each(obj.list,function(i) {
                 str+="<tr>";
                 str+="    <td>"+obj.list[i].id+"</td>";
                 str+="    <td><a href='xinxi.html?deviceName="+obj.list[i].deviceName+"'>"+obj.list[i].deviceName+"</a></td>";
                 str+="    <td>"+obj.list[i].deviceModel+"</td>";
                 if(obj.list[i].usage==0){
                 str+="    <td>正常</td>";
                 }else {
                     str+="    <td>不正常</td>";
                 }
                 str+="    <td>"+obj.list[i].purchaseTime+"</td>";
                 str+="    <td>"+obj.list[i].assetCode+"</td>";
                 str+="    <td>"+obj.list[i].devicePrice+"</td>";
                 str+="    <td>"+obj.list[i].period+"</td>";
                 str+="</tr>";

             })



             str+="<tr>";
             str+="    <td>第"+obj.pageInfo.pageNum+"/"+obj.pageInfo.pages+"頁</td>";
             if (obj.pageInfo.pageNum>1){

                 str+="    <td><a href='javascript:void(0);'onclick='init(1)'>首頁</a></td>";
                 str+="    <td><a href='javascript:void(0);' onclick='init("+(obj.pageInfo.pageNum-1)+")'>上一頁</a></td>";
             }else {
                 str+="    <td>首頁</td>";
                 str+="    <td>上一頁</td>";
             }
             if(obj.pageInfo.pageNum<obj.pageInfo.pages){
                 str+="    <td><a href='javascript:void(0);'onclick='init("+(obj.pageInfo.pageNum+1)+")'>下一頁</a></td>";
                 str+="    <td><a href='javascript:void(0);' onclick='init("+obj.pageInfo.pages+")'>尾頁</a></td>";
             }else {
                 str+="    <td>下一頁</td>";
                 str+="    <td>尾頁</td>";
             }

             str+="    <td>共"+obj.pageInfo.total+"條</td>";
             str+="</tr>";
             $("#nihao").append(str);
                   },
         error:function () {
             alert("error")
         }
     });
 }

 

還有一種就是前臺頁面有寫的輸入框之類的，須要用ajax往頁面裏面輸入值：

前臺界面：

後臺js

$(function () {        var deviceName = GetQueryString("deviceName"); //括號裏放地址欄傳參變量        console.log(deviceName);        button(deviceName);    })//設備詳細信息function button(deviceName) {    $.ajax({        url:"xinxi.do",        type:"post",        dataType:"json",        data:{"deviceName":deviceName},        async:true,        success:function (obj) {            console.log(obj);            $("input[name='id']").val(obj[0].id);            $("input[name='purchaseTime']").val(obj[0].purchaseTime);            $("input[name='deviceName']").val(obj[0].deviceName);            $("input[name='usage']").val(obj[0].usage);            $("input[name='deviceModel']").val(obj[0].deviceModel);            $("input[name='devicePrice']").val(obj[0].devicePrice);            $("input[name='assetCode']").val(obj[0].assetCode);            $("input[name='period']").val(obj[0].period);            var str="";            $.each(obj,function (i) {                str+="<tr>";                str+="<td>"+obj[i].repairRecord+"</td>>";                str+="</tr>";            })        },        error:function () {            alert("error");        }    });}function GetQueryString(name) {    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");    var r = window.location.search.substr(1).match(reg);    if (r != null) return decodeURI(r[2]); return null;}