代码部分:
SituDemoApplication.java
package com.situ.company;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.ComponentScan;
@SpringBootApplication
//@ComponentScan主要为了扫描各个模块下的controller和service包
@ComponentScan(basePackages = { "department" })
//@MapperScan为了扫描各个模块下的mapper包
@MapperScan(value = "department")
public class SituDemoApplication {
public static void main(String[] args) {
SpringApplication.run(SituDemoApplication.class, args);
}
}
效果图:
与application.properties对应
DepartmentController.java
package department;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
/**
* 控制层:使用业务层中提供的功能方法
* @author Katrina
*/
@RestController
@RequestMapping("department") //不同Controller类上的@RequestMapping的内容不能相同
public class DepartmentController {
@Autowired
DepartmentService service;
//协议://IP:端口号/访问的工程名/类上requestmapping/方法上requestmapping?参数名=参数值&AA=BB&CC=DD&...
//http://127.0.0.1:8082/situ_demo/department/insert?code=a1&name=a2&tel=123
@RequestMapping("insert") //同一类中在不同的方法上的@RequestMapping的内容不能相同
public Map<String, Object> insert(DepartmentModel model) {
Map<String, Object> map = new HashMap<>();
map.put("code", service.insert(model));
return map;
}
//http://127.0.0.1:8082/situ_demo/department/delete?code=a1
@RequestMapping("delete")
public Map<String, Object> delete(DepartmentModel model) {
Map<String, Object> map = new HashMap<>();
map.put("code", service.delete(model));
return map;
}
//http://127.0.0.1:8082/situ_demo/department/update?code=a1&name=b2&tel=321
@RequestMapping("update")
public Map<String, Object> update(DepartmentModel model) {
Map<String, Object> map = new HashMap<>();
map.put("code", service.update(model));
return map;
}
//http://127.0.0.1:8082/situ_demo/department/selectModel?code=a1
@RequestMapping("selectModel")
public Map<String, Object> selectModel(DepartmentModel model) {
Map<String, Object> map = new HashMap<>();
map.put("code", service.selectModel(model));
return map;
}
//http://127.0.0.1:8082/situ_demo/department/selectList?name=b2
//http://127.0.0.1:8082/situ_demo/department/selectList?name=b
//http://127.0.0.1:8082/situ_demo/department/selectList
@RequestMapping("selectList")
public Map<String, Object> selectList(DepartmentModel model) {
Map<String, Object> map = new HashMap<>();
map.put("code", service.selectList(model));
return map;
}
// public int insert(DepartmentModel model) {
// return service.insert(model);
// }
// public int delete(DepartmentModel model) {
// return service.delete(model);
// }
// public int update(DepartmentModel model) {
// return service.update(model);
// }
// public DepartmentModel selectModel(DepartmentModel model) {
// return (DepartmentModel) service.selectModel(model);
// }
// public List<DepartmentModel> selectList(DepartmentModel model) {
// return service.selectList(model);
// }
}
效果图:
insert
若在浏览器中输入http://127.0.0.1:8082/situ_demo/department/insert?code=a1&name=a2&tel=123
,则如图下显示:
delete
若在浏览器中输入http://127.0.0.1:8082/situ_demo/department/delete?code=a1
,则如图下显示:
update
表中数据,效果图为:
若在浏览器中输入http://127.0.0.1:8082/situ_demo/department/update?code=a1&name=b2&tel=321
,则如图下显示:
selectModel
表中数据,效果图为:
若在浏览器中输入http://127.0.0.1:8082/situ_demo/department/selectModel?code=a1
,则如图下显示:
selectList
表中数据,效果图为:
情况一:若在浏览器中输入http://127.0.0.1:8082/situ_demo/department/selectList?name=b2
,则如图下显示:
情况二:若在浏览器中输入http://127.0.0.1:8082/situ_demo/department/selectList?name=b
,则如图下显示:
情况三:需要在DepartmentService.java
的基础上添加代码,如下:
相当于select * from stu_demo.department where name like '%%'
若在浏览器中输入http://127.0.0.1:8082/situ_demo/department/selectList
,则如图下显示:
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
jfkgjslsgklj
http://127.0.0.1:8082/situ_demo/a1/t2.html
http://127.0.0.1:8082/situ_demo/test.html
</body>
</html>
效果图:
若在浏览器中输入http://127.0.0.1:8082/situ_demo/test.html
,则如图下显示:
pox.xml
<?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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.2.4.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>situ</groupId>
<artifactId>situ_demo</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>war</packaging>
<name>situ_demo</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.1.2</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-tomcat</artifactId>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>org.apache.tomcat.embed</groupId>
<artifactId>tomcat-embed-jasper</artifactId>
<scope>provided</scope>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
test.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
dfsjkjfh
http://127.0.0.1:8082/situ_demo/test.jsp
</body>
</html>
若在浏览器中输入http://127.0.0.1:8082/situ_demo/test.jsp
,则如图下显示:
若在浏览器中输入https://www.layui.com
,则如图下显示:
使用layui文件夹,copy位置,效果图如下:
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<link rel="stylesheet" href="/situ_demo/layui/css/layui.css" media="all">
<script type="text/javascript" src="/situ_demo/layui/layui.all.js"></script> <!-- 绝对路径 -->
</head>
<body>
<!-- http://127.0.0.1:8082/situ_demo/layui/css/layui.css -->
<!-- http://127.0.0.1:8082/situ_demo/layui.all.js -->
<!-- http://127.0.0.1:8082/situ_demo/test.jsp -->
<div class="layui-carousel" id="test1">
<div carousel-item>
<div>条目1</div>
<div>条目2</div>
<div>条目3</div>
<div>条目4</div>
<div>条目5</div>
</div>
</div>
<!-- 条目中可以是任意内容,如:<img src=""> -->
<script type="text/javascript">
var carousel = layui.carousel;
//渲染
carousel.render({
elem:'#test1',
anim:'updown'
});
</script>
</body>
</html>
效果图:
若在浏览器中输入http://127.0.0.1:8082/situ_demo/test.jsp
,则如图下显示:
add.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>信息维护</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="/situ_demo/layui/css/layui.css" media="all">
<script type="text/javascript" src="/situ_demo/layui/layui.all.js"></script> <!-- 绝对路径 -->
</head>
<body>
<fieldset class="layui-elem-field" style="margin: 20px;padding:15px;">
<legend>信息维护--添加信息</legend>
<form class="layui-form" method="post">
<div class="layui-form-item">
<label class="layui-form-label">编号</label>
<div class="layui-input-inline">
<input type="text" name="code" lay-verify="required" autocomplete="off"
placeholder="请输入编号" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">名称</label>
<div class="layui-input-inline">
<input type="text" name="name" lay-verify="required" autocomplete="off"
placeholder="请输入名称" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">电话</label>
<div class="layui-input-inline">
<input type="text" name="tel" placeholder="请输入电话" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"></label>
<div class="layui-input-inline">
<input type="button" class="layui-btn" lay-submit lay-filter="add" value="确定" />
<input type="button" class="layui-btn" onclick="closeThis()" value="取消" />
</div>
</div>
</form>
</fieldset>
<script type="text/javascript">
function closeThis(){
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭
}
var form = layui.form;
var $ = layui.jquery;
var layer = layui.layer;
form.on('submit(add)', function(data) { //console.log(data.field)
$.ajax({
url : '/situ_demo/department/insert',
data : data.field,//{code:aa,pass:bb,...}
dataType : 'json',
type : 'post',
success : function(data) {// console.log(data)
var code =data.code;
if (code == 1) {
layer.msg('添加成功',closeThis)
} else if (code == 2) {
layer.msg('记录已存在');
} else {
layer.msg('添加失败');
}
}
})
});
</script>
</body>
</html>
效果图:
若在浏览器中输入http://127.0.0.1:8082/situ_demo/add.jsp
,则如图下显示:
list.jsp
需要在DepartmentController.java
的基础上添加代码,如下:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="/situ_demo/layui/css/layui.css" media="all">
<script type="text/javascript" src="/situ_demo/layui/layui.all.js"></script> <!-- 绝对路径 -->
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 0px; padding: 5px">
<legend>信息列表</legend>
<table id="demo" lay-filter="test"></table>
</fieldset>
<script type="text/html" id="toolDemo">
<a class="layui-btn layui-btn-xs" lay-event="upd">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="toolbarDemo">
<div class="layui-input-inline" style="width: 200px;">
<input type="text" name="name" placeholder="请输入名称" class="layui-input" autocomplete="off"/>
</div>
<button class="layui-btn layui-btn-sm" lay-event="sel">查询</button>
<button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
</script>
<script type="text/javascript">
var table = layui.table;
table.render({
elem: '#demo'
,url: '/situ_demo/department/selectList'
,toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
,height:'full-100'
,width:'1030'
//,page: true //开启分页
,cols: [[ //表头
{type:'numbers', title:'序号'}
,{field: 'code', title: '编号', width:'20%'}
,{field: 'name', title: '名称', width:'20%'}
,{field: 'tel', title: '电话', width:'20%'}
,{title:'操作', toolbar: '#toolDemo'}
]]
});
var layer = layui.layer;
var $=layui.jquery;
table.on("toolbar(test)",function(obj){
var event = obj.event;
switch(event){
case 'sel':
var name=$('input[name="name"]').val();
table.reload('demo', {
where: {name: name}//设定异步数据接口的额外参数,任意设
//,page: {curr: 1}//重新从第 1 页开始
}); //只重载数据
$('input[name="name"]').val(name);
layer.msg("查询");
break;
case 'add':
layer.open({
type:2,
area : [ '600px', '450px' ],
maxmin : true,
end:refresh,
content:"/situ_demo/add.jsp"
});
break;
}
});
function refresh(){
$('button[lay-event="sel"]').click();
}
table.on("tool(test)",function(obj){//获得当前行数据console.log(obj.data)
var code = obj.data.code
switch(obj.event){//获得 lay-event 对应的值
case "del":
layer.confirm('确定删除该记录?', {icon: 3, title:'提示'}, function(index){
$.ajax({
url:"/situ_demo/Department/delete",
data:"code="+code,
dataType:"json",
type:"post",
success:function(d){//console.log(d)
if(d.code==1){
layer.msg("删除成功",refresh)
}else if(d.code==2){
layer.msg("删除失败-该部门下存在员工")
}
}
})
});
break;
case "upd":
layer.open({
type:2,
area : [ '600px', '450px' ],
maxmin : true,
end:refresh,
content:"/situ_demo/upd.jsp?code="+code
});
break;
}
})
</script>
</body>
</html>
效果图:
表中数据,效果图为:
若在浏览器中输入http://127.0.0.1:8082/situ_demo/list.jsp
,则如图下显示:
输入1,效果图如下:
点击添加并输入数据,效果图如下:
点击确定,效果如下:
点击删除,效果如下:
点击确定,效果如下:
upd.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>信息维护</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="/situ_demo/layui/css/layui.css" media="all">
<script type="text/javascript" src="/situ_demo/layui/layui.all.js"></script> <!-- 绝对路径 -->
</head>
<body>
<fieldset class="layui-elem-field" style="margin: 20px;padding:15px;">
<legend>信息维护--修改信息</legend>
<form class="layui-form" lay-filter='formA' method="post">
<div class="layui-form-item">
<label class="layui-form-label">编号</label>
<div class="layui-input-inline">
<input type="text" name="code" lay-verify="required" autocomplete="off"
placeholder="请输入编号" class="layui-input" readonly="readonly">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">名称</label>
<div class="layui-input-inline">
<input type="text" name="name" lay-verify="required" autocomplete="off"
placeholder="请输入名称" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">电话</label>
<div class="layui-input-inline">
<input type="text" name="tel" placeholder="请输入电话" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"></label>
<div class="layui-input-inline">
<input type="button" class="layui-btn" lay-submit lay-filter="upd" value="确定" />
<input type="button" class="layui-btn" onclick="closeThis()" value="取消" />
</div>
</div>
</form>
</fieldset>
<script type="text/javascript">
var code = '<%=request.getParameter("code") %>';//console.log(code);
var $ = layui.jquery;
var form = layui.form;
var layer = layui.layer;
$.ajax({
url:"/situ_demo/department/selectModel",
data:"code="+code,
dataType:"json",
type:"post",
success:function(d){//console.log(d)//回显
//DepartmentModel--{code:'aa',name:'bb',tel:'cc'}
d=d.code;
form.val("formA",{code:d.code,name:d.name,tel:d.tel})
//Map--{code:{code:'aa',name:'bb',tel:'cc'}}
// form.val("formA",{code:d.code.code,name:d.code.name,tel:d.code.tel})
// $("input[name='code']").val(d.code);
// $("input[name='name']").val(d.name);
// $("input[name='tel']").val(d.tel);
}
})
function closeThis(){
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭
}
form.on('submit(upd)', function(data) { //console.log(data.field)
$.ajax({
url : '/situ_demo/department/update',
data : data.field,//{code:aa,pass:bb,...}
dataType : 'json',
type : 'post',
success : function(data) {// console.log(data)
if (data.code == 1) {
layer.msg('修改成功',closeThis)
}else {
layer.msg('修改失败');
}
}
})
});
</script>
</body>
</html>
效果图:
点击序号1中的编辑,效果如下:
修改数据,效果如下:
点击确定,效果如下: