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