开发环境
idea、jdk1.8、mysql、tomcat
数据库dept表结构
项目启动后网址输入http://localhost:8080/login.jsp进入界面
Github地址:https://github.com/zs-neo/springboot-mybatis
界面截图
maven依赖
基本依赖
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<maven.compiler.source>1.8</maven.compiler.source>
<maven.compiler.target>1.8</maven.compiler.target>
<spring.version>5.0.2.RELEASE</spring.version>
<slf4j.version>1.6.6</slf4j.version>
<log4j.version>1.2.12</log4j.version>
<mysql.version>5.1.6</mysql.version>
<mybatis.version>3.4.5</mybatis.version>
</properties>
<dependencies>
<!-- spring -->
<dependency>
<groupId>org.aspectj</groupId>
<artifactId>aspectjweaver</artifactId>
<version>1.6.8</version>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.47</version>
</dependency>
<dependency>
<groupId>org.json</groupId>
<artifactId>json</artifactId>
<version>20150729</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.0.1</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-aop</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-test</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-tx</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-jdbc</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.12</version>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>${mysql.version}</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>2.5</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>jstl</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
<!-- log start -->
<dependency>
<groupId>log4j</groupId>
<artifactId>log4j</artifactId>
<version>${log4j.version}</version>
</dependency>
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-api</artifactId>
<version>${slf4j.version}</version>
</dependency>
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-log4j12</artifactId>
<version>${slf4j.version}</version>
</dependency>
<!-- log end -->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>${mybatis.version}</version>
</dependency>
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis-spring</artifactId>
<version>1.3.0</version>
</dependency>
<dependency>
<groupId>c3p0</groupId>
<artifactId>c3p0</artifactId>
<version>0.9.1.2</version>
<type>jar</type>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>net.sf.json-lib</groupId>
<artifactId>json-lib</artifactId>
<version>2.4</version>
<classifier>jdk15</classifier>
</dependency>
</dependencies>
配置xml和properties文件
<resources>
<resource>
<directory>src/main/java</directory>
<includes>
<include>**/*.properties</include>
<include>**/*.xml</include>
</includes>
<filtering>false</filtering>
</resource>
</resources>
前端页面
web.xml
web-app报错,删掉xml头部即可
<!DOCTYPE web-app PUBLIC
"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd" >
<web-app>
<display-name>Archetype Created Web Application</display-name>
<!--配置Spring的监听器,默认只加载WEB-INF目录下的applicationContext.xml配置文件-->
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<!--设置配置文件的路径-->
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:applicationContext.xml</param-value>
</context-param>
<!--配置前端控制器-->
<servlet>
<servlet-name>dispatcherServlet</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<!--加载springmvc.xml配置文件-->
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:springmvc.xml</param-value>
</init-param>
<!--启动服务器,创建该servlet-->
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>dispatcherServlet</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
<!--解决中文乱码的过滤器-->
<filter>
<filter-name>characterEncodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>characterEncodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>
登录页面
<body>
<div id="login">
<h1>Login</h1>
<form method="post" action="/control/login">
<input type="text" required="required" placeholder="用户名" name="u"></input>
<input type="password" required="required" placeholder="密码" name="p"></input>
<button class="but" type="submit" >登录</button>
<!--<a href="WEB-INF/JSP/index.jsp">进入页面</a>-->
</form>
</div>
</body>
索引页面
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">HIS - 东软云医院</div>
<!-- 头部区域(可配合layui已有的水平导航) -->
<ul class="layui-nav layui-layout-left">
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">
控制台
</a>
</li>
<li class="layui-nav-item">
<a href="javascript:;">
<img src="http://t.cn/RCzsdCq" class="layui-nav-img" >
Admin
</a>
</li>
<li class="layui-nav-item"><a href="">退出</a></li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域(可配合layui已有的垂直导航) -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">医院基本信息</a>
<dl class="layui-nav-child">
<dd class="layui-this"><a href="/control/toDept">科室信息</a></dd>
<dd><a href="javascript:;">疾病信息</a></dd>
<dd><a href="javascript:;">药品信息</a></dd>
</dl>
</li>
</ul>
</div>
</div>
<div class="layui-body">
<!-- 内容主体区域 -->
<div style="padding: 15px;">内容主体区域</div>
</div>
<div class="layui-footer">
<!-- 底部固定区域 -->
</div>
</div>
<script src="../layui/layui.js"></script>
<script>
//JavaScript代码区域
layui.use('element', function(){
var element = layui.element;
});
</script>
</body>
主页面
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">HIS - 东软云医院</div>
<!-- 头部区域(可配合layui已有的水平导航) -->
<ul class="layui-nav layui-layout-left">
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">
控制台
</a>
</li>
<li class="layui-nav-item">
<a href="javascript:;">
<img src="http://t.cn/RCzsdCq" class="layui-nav-img" >
Admin
</a>
</li>
<li class="layui-nav-item"><a href="">退出</a></li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域(可配合layui已有的垂直导航) -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">医院基本信息</a>
<dl class="layui-nav-child">
<dd class="layui-this"><a href="/control/toDept">科室信息</a></dd>
<dd><a href="javascript:;">疾病信息</a></dd>
<dd><a href="javascript:;">药品信息</a></dd>
</dl>
</li>
</ul>
</div>
</div>
<div class="layui-body">
<!-- 内容主体区域 -->
<div style="padding: 17px;">>科室信息管理</div>
<div style="padding: 10px; background-color: #F2F2F2;">
<div class="layui-card">
<div class="layui-card-body">
<!--cardBody-->
<form class="layui-form" action="">
<div class="layui-row">
<div class="layui-col-xs3">
<div class="grid-demo grid-demo-bg1">
<div class="layui-form-item">
<label class="layui-form-label">查询字段</label>
<div class="layui-input-block">
<select id="selects" name="deptsname" lay-filter="dept">
<option value="0">ID编码</option>
<option value="1">科室编码</option>
<option value="2" selected="true">科室名称</option>
<option value="3">科室类别</option>
<option value="4">科室类型</option>
</select>
</div>
</div>
</div>
</div>
<div class="layui-col-xs6">
<div class="grid-demo grid-demo-bg1">
<div class="layui-form-item">
<label class="layui-form-label"></label>
<div class="layui-input-block">
<input id="demoReload" type="text" name="title" lay-verify="title" autocomplete="off" placeholder="要查找的内容" class="layui-input">
</div>
</div>
</div>
</div>
<div class="layui-col-xs3">
<div class="grid-demo grid-demo-bg1">
<div class="layui-form-item">
<button class="layui-btn" data-type="reload" type="button">搜索</button>
</div>
</div>
</div>
</div>
</form>
<table class="layui-hide" id="test" lay-filter="demo"></table>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!--cardBody-->
</div>
</div>
</div>
</div>
<div class="layui-footer">
</div>
</div>
</body>
js部分
<script src="../layui/layui.js"></script>
<script>
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#test'
,url:'/dept/findAllDeptPage'
,cols: [[
{checkbox: true, fixed: true}
,{field:'id', width:80, title: 'ID编码', sort: true}
,{field:'dept_code', width:120, title: '科室编码'}
,{field:'dept_name', width:120, title: '科室名称', sort: true}
,{field:'dept_catagory', width:120, title: '科室类别'}
,{field:'dept_type', width:120, title: '科室类型', sort: true}
,{field:'right', title: '操作',toolbar:"#barDemo"}
]]
,page: true
,height:298
,id:'testTable'
});
});
</script>
<script>
//JavaScript代码区域
layui.use('element', function(){
var element = layui.element;
});
//监听工具条
layui.use('table', function(){
var table = layui.table;
//监听表格复选框选择
table.on('checkbox(demo)', function(obj){
console.log(obj)
});
//监听工具条
table.on('tool(demo)', function(obj){
var data = obj.data;
if(obj.event === 'detail'){
layer.alert("查看ID : "+data.id+" 的行");
} else if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
$.ajax({
url: "/dept/deleteDept",
type: "POST",
data:{"id":data.id},
dataType: "json",
success: function(data){
var json=JSON.parse(data);
if(json.result=="1"){
obj.del();
//关闭弹框
layer.close(index);
layer.msg("删除成功", {icon: 6});
$(".layui-laypage-btn").click()
}else{
layer.msg("删除失败", {icon: 5});
}
}
});
});
} else if(obj.event === 'edit'){
//layer.alert('编辑行:<br>'+ JSON.stringify(data));
layer.open({
type: 2,
closeBtn: 2,
title:'修改科室信息',
area: ['400px', '420px'],
shade: 0.8,
id: (new Date()).valueOf(), //设定一个id,防止重复弹出 时间戳1280977330748
btnAlign: 'r',
moveType: 1, //拖拽模式,0或者1
content: '/control/toDeptEdit?id=' + data.id+"&dept_code="+ data.dept_code
+"&dept_name="+ encodeURI(encodeURI(data.dept_name))+ "&dept_catagory=" + data.dept_catagory + "&dept_type=" + data.dept_type
});
}
});
var $ = layui.$, active = {
reload: function () {
var demoReload = $('#demoReload').val();//获取输入框的值
var selects = $('#selects').val();//获取输入框的值
//alert(demoReload+selects);
//执行重载
table.reload('testTable', {
page: {
curr: 1 //重新从第 1 页开始
}
, where: { valu: demoReload,domain:selects}//这里传参 向后台
, url: '/dept/findAllDeptPageBy'//后台做模糊搜索接口路径
, method: 'post'
});
}
};
//这个是用于创建点击事件的实例
$('.layui-form-item .layui-btn').on('click', function () {
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
function a() {
$(".layui-laypage-btn").click();
}
</script>
编辑页面
<body>
<br><br>
<form class="layui-form" action="" method="">
<%String oid =request.getParameter("id");%>
<input type="hidden" name="oid" value="<%=oid%>" class="layui-input">
<div class="layui-form-item">
<label class="layui-form-label">科室ID</label>
<div class="layui-input-block">
<input type="text" name="id" style="width:200px;" autocomplete="off" value="<%=oid%>" class="layui-input">
</div>
</div>
<%String dept_code =request.getParameter("dept_code");%>
<div class="layui-form-item">
<label class="layui-form-label">科室编码</label>
<div class="layui-input-block">
<input type="text" name="dept_code" style="width:200px;" autocomplete="off" value="<%=dept_code%>" class="layui-input">
</div>
</div>
<%String dept_name =request.getParameter("dept_name");
dept_name = URLDecoder.decode(dept_name,"UTF-8");%>
<div class="layui-form-item">
<label class="layui-form-label">科室名称</label>
<div class="layui-input-block">
<input type="text" name="dept_name" style="width:200px;" autocomplete="off" value="<%=dept_name%>" class="layui-input">
</div>
</div>
<%String dept_catagory =request.getParameter("dept_catagory");%>
<div class="layui-form-item">
<label class="layui-form-label">科室类别</label>
<div class="layui-input-block">
<input type="text" name="dept_catagory" style="width:200px;" autocomplete="off" value="<%=dept_catagory%>" class="layui-input">
</div>
</div>
<%String dept_type =request.getParameter("dept_type");%>
<div class="layui-form-item">
<label class="layui-form-label">科室类型</label>
<div class="layui-input-block">
<input type="text" name="dept_type" style="width:200px;" autocomplete="off" value="<%=dept_type%>" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit="" lay-filter="demo1" type="button">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<script src="../layui/layui.js"></script>
<script>
//JavaScript代码区域
layui.use('element', function(){
var element = layui.element;
});
layui.use(['form'], function () {
var form = layui.form;
form.on('submit(demo1)', function (data) {
$.ajax({
url: "/dept/updateDeptById",
type: "post",
dataType: "json",
data:{'oid':data.field.oid,'id':data.field.id,'dept_code':data.field.dept_code,
'dept_type':data.field.dept_type,'dept_name':data.field.dept_name,'dept_catagory':data.field.dept_catagory},
success: function (res) {
var json=JSON.parse(res);
if (json.result == "1") {
layer.msg("编辑成功!",{icon: 6});
parent.a();
} else {
layer.msg("编辑失败!",{icon: 5});//失败的表情
}
}
});
});
return false;
});
</script>
</body>
后端框架
配置文件
applicationContext.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:tx="http://www.springframework.org/schema/tx"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/aop
http://www.springframework.org/schema/aop/spring-aop.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx.xsd">
<!--开启注解的扫描,希望处理service和dao,controller不需要Spring框架去处理-->
<context:component-scan base-package="cn.neu" >
<!--配置哪些注解不扫描-->
<context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller" />
</context:component-scan>
<!-- 加载配置文件 -->
<context:property-placeholder location="classpath:jdbcConfig.properties" />
<!-- 配置数据源 -->
<bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
<property name="driverClass" value="${jdbc.driver}"></property>
<property name="jdbcUrl" value="${jdbc.url}"></property>
<property name="user" value="${jdbc.username}"></property>
<property name="password" value="${jdbc.password}"></property>
</bean>
<!--配置SqlSessionFactory工厂-->
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<property name="dataSource" ref="dataSource" />
<property name="typeAliasesPackage" value="cn.neu.domain"></property>
<property name="mapperLocations" value="classpath*:cn/neu/mapping/*.xml"></property>
</bean>
<!--配置AccountDao接口所在包-->
<bean id="mapperScanner" class="org.mybatis.spring.mapper.MapperScannerConfigurer">
<property name="basePackage" value="cn.neu.dao"/>
<property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"></property>
</bean>
<!--配置Spring框架声明式事务管理-->
<!--配置事务管理器-->
<bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
<property name="dataSource" ref="dataSource" />
</bean>
<!--配置事务通知-->
<tx:advice id="txAdvice" transaction-manager="transactionManager">
<tx:attributes>
<tx:method name="find*" read-only="true"/>
<tx:method name="*" isolation="DEFAULT"/>
</tx:attributes>
</tx:advice>
</beans>
jdbcConfig.properties
jdbc.driver=com.mysql.cj.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/cruds?useUnicode=true&characterEncoding=utf-8&serverTimezone=UTC
jdbc.username=root
jdbc.password=123456
springmvc.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:context="http://www.springframework.org/schema/context"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd">
<!--开启注解扫描,只扫描Controller注解-->
<context:component-scan base-package="cn.neu">
<context:include-filter type="annotation" expression="org.springframework.stereotype.Controller" />
</context:component-scan>
<!--配置的视图解析器对象-->
<bean id="internalResourceViewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/JSP/"/>
<property name="suffix" value=".jsp"/>
</bean>
<!--过滤静态资源-->
<mvc:resources location="/WEB-INF/css/" mapping="/css/**" />
<mvc:resources location="/WEB-INF/layui/" mapping="/layui/**" />
<!--开启SpringMVC注解的支持-->
<mvc:annotation-driven>
<mvc:message-converters register-defaults="true">
<!-- 配置Fastjson支持 -->
<bean class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter">
<property name="supportedMediaTypes">
<list>
<value>text/html;charset=UTF-8</value>
<value>application/json</value>
</list>
</property>
<property name="features">
<list>
<value>WriteMapNullValue</value>
<value>QuoteFieldNames</value>
</list>
</property>
</bean>
</mvc:message-converters>
</mvc:annotation-driven>
</beans>
后台代码框架
controller示例
@Controller
@RequestMapping("/dept")
public class DeptController {
@Autowired
private DeptService deptService;
@RequestMapping("/findAllDept")
@ResponseBody
public Map<String, Object> findAllDept(){
List<Dept> depts = deptService.findAllDept();
int count = deptService.countAllDept();
Map<String, Object> map = new HashMap<String, Object>();
map.put("msg","");
map.put("code",0);
map.put("count",count);
map.put("data",depts);
System.out.println(map);
return map;
}
......
service示例
public interface DeptService {
public List<Dept> findAllDept();
......
service实现类示例
@Service("deptService")
public class DeptSreviceImpl implements DeptService {
@Autowired
private DeptDao deptDao;
public List<Dept> findAllDept() {
return deptDao.findAllDept();
}
......
dao示例
@Repository
public interface DeptDao {
//@Select("select * from dept")
public List<Dept> findAllDept();
......
mapper示例
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="cn.neu.dao.DeptDao">
<select id="findAllDept" resultType="cn.neu.domain.Dept">
select * from dept
</select>
......
</mapper>
domain示例
public class Dept implements Serializable {
private int id;
private String dept_code;
private String dept_name;
private int dept_catagory;
private int dept_type;
......
}