提示：

1.單表查詢多條數據用 list

mapper層

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

2.兩表關聯查多條 list>

2.1兩表聯查查一條 map

一.具體步驟如下

表結構：

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 showDevices(@RequestParam(value ="pageno",required = false,defaultValue = "1")Integer pageno){

Map map = new HashMap<>();

//調用分頁的方法

PageHelper.startPage(pageno,2);

List 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 showDeviceName(String deviceName){

HashMap map = new HashMap<>();

List list = devicesService.showDeviceName(deviceName);

map.put("list",list);

return map;

}

//首頁有一個點擊的查詢

@ResponseBody

@RequestMapping("/xinxi.do")

public List> showData(@RequestParam(value = "deviceName",required = false) String deviceName){

List> 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+="

";

str+="

"+obj.list[i].id+"";

str+="

"+obj.list[i].deviceName+"";

str+="

"+obj.list[i].deviceModel+"";

if(obj.list[i].usage==0){

str+="

正常";

}else {

str+="

不正常";

}

str+="

"+obj.list[i].purchaseTime+"";

str+="

"+obj.list[i].assetCode+"";

str+="

"+obj.list[i].devicePrice+"";

str+="

"+obj.list[i].period+"";

str+="

";

})

str+="

";

str+="

第"+obj.pageInfo.pageNum+"/"+obj.pageInfo.pages+"頁";

if (obj.pageInfo.pageNum>1){

str+="

首頁";

str+="

上一頁";

}else {

str+="

首頁";

str+="

上一頁";

}

if(obj.pageInfo.pageNum

str+="

下一頁";

str+="

尾頁";

}else {

str+="

下一頁";

str+="

尾頁";

}

str+="

共"+obj.pageInfo.total+"條";

str+="

";

$("#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+="

";

str+="

"+obj[i].repairRecord+">";

str+="

";

})

},

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;

}

總結

以上是生活随笔為你收集整理的ssm拼接html,SSM前后端分离 ssm+html+js(ajax) 这种controll层的返回值是结合或者网址...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。