JavaWeb开发项目-部门信息管理项目(3)-代码改进及最终效果

代码部分:

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中的编辑,效果如下:
在这里插入图片描述
修改数据,效果如下:
在这里插入图片描述
点击确定,效果如下:
在这里插入图片描述
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值