入职的第一个星期,领导安排做了一个测试新人项目,框架要求用SpringMVC,数据库使用Oracle,页面没有要求,所以我就选用了我比较熟悉的Layui,小伙伴可以把该项目当成简易的SSM项目框架使用,不需要使用时不需要再次搭建。
spring-mybatis配置
springMvc配置
text/html;charset=UTF-8
log4j 配置
### 设置###
log4j.rootLogger = debug,stdout,D,E
### 输出信息到控制抬 ###
log4j.appender.stdout = org.apache.log4j.ConsoleAppender
log4j.appender.stdout.Target = System.out
log4j.appender.stdout.layout = org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern = [%-5p] %d{yyyy-MM-dd HH:mm:ss,SSS} method:%l%n%m%n
### 输出DEBUG 级别以上的日志到=E://logs/error.log ###
log4j.appender.D = org.apache.log4j.DailyRollingFileAppender
log4j.appender.D.Append = true
log4j.appender.D.Threshold = DEBUG
log4j.appender.D.layout = org.apache.log4j.PatternLayout
log4j.appender.D.layout.ConversionPattern = %-d{yyyy-MM-dd HH:mm:ss} [ %t:%r ] - [ %p ] %m%n
### 输出ERROR 级别以上的日志到=E://logs/error.log ###
log4j.appender.E = org.apache.log4j.DailyRollingFileAppender
log4j.appender.E.Append = true
log4j.appender.E.Threshold = ERROR
log4j.appender.E.layout = org.apache.log4j.PatternLayout
log4j.appender.E.layout.ConversionPattern = %-d{yyyy-MM-dd HH:mm:ss} [ %t:%r ] - [ %p ] %m%n
登录页面jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false" %>
登录页面
需要layui的资源文件直接去layui官网下载即可。
登录页面js
layui.use('form', function() {
var form = layui.form;
var layer = layui.layer;
form.on('submit(login)', function(data){
$.ajax({
url: '/login',
type : 'POST',
data: {
'username': data.field.username,
'password': data.field.password
},
dataType: 'json',
success: function (res) {
if (res.msg != '' && res.msg != null) {
layer.msg(res.msg);
return false;
}
$(location).prop('href','/index')
},
error: function (res) {
layer.msg("登录失败");
return false;
}
});
});
})
$(document).keyup(function(e){
if (e.keyCode == 13) {
if ($('username').val() != '' && $('password').val() != '') {
$('#login')[0].click();
}
}
});
登录后台
package com.cn.ssm.controller;
import javax.servlet.http.HttpSession;
@Controller
public class LoginController {
@Autowired
private UsersService usersService;
@Autowired
private IDCardService idCardService;
/**
* 用户登录
*
* @param user
* @param model
* @param session
* @return
*/
@RequestMapping(value = "/login", method = RequestMethod.POST)
@ResponseBody
public Result login(Users user, Model model, HttpSession session) {
Result
Result是我自己封装的一个类,主要用于返回信息,状态和数据
Result类代码
package com.cn.ssm.domain;
public class Result {
private String code = "0";
private String msg;
private T result;
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public T getResult() {
return result;
}
public void setResult(T result) {
this.result = result;
}
}
之后便是调用service里面selsctByName(),在写一些简单的sql即可。
登录页面和主页面样式一样,用到layui的主要包含数据表格,以下是代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false" %>
信息详情
身份证信息
登记信息
完成情况信息
相应JS代码:
$(function () {
var id = $("#ID").val();
var type = $("#type").val();
var table = layui.table;
var url = getRootPath() + "/station/StationInfo/searchList";
var cols =
layui.use('table', function () {
var table = layui.table;
table.render({
elem: '#one'
, url: '/searchList?ID=' + id
, cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
, cols: [[
{field: 'id', width: 200, title: '身份证号', sort: true},
{field: 'typeName', width: 200, title: '居住类型'}
, {field: 'startTime', width: 200, title: '开始时间', templet: '#startTime'}
, {field: 'endTime', width: 200, title: '截止时间', templet: '#endTime'}
]], page: true //开启分页
, limit: 10 //默认十条数据一页
, limits: [10, 20, 30, 50] //数据分页条
});
table.render({
elem: '#two'
, url: '/searchListTwo?ID=' + id + "&type=" + type
, cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
, cols: [[
{field: 'dzsffsbh', width: 200, title: '是否申请地址变更'},
{field: 'wyjjrq', width: 200, title: '网约取件时间', templet: '#wyjjrq'}
, {field: 'jjr_xm', width: 200, title: '取件人姓名'}
, {field: 'jjr_lxdh', width: 200, title: '取件联系电话'}
, {field: 'jjr_dz', width: 300, title: '取件地址'}
, {field: 'jjtscg', width: 200, title: '是否取件成功'}
, {field: 'jjsbyy', width: 200, title: '取件失败原因'}
, {field: 'jjsj', width: 200, title: '取件时间', templet: '#jjsj'}
, {field: 'jjdh', width: 200, title: '取件单号'}
, {field: 'sjr_xm', width: 200, title: '收件人姓名'}
, {field: 'sjr_lxdh', width: 200, title: '收件人联系电话'}
, {field: 'sjr_dz', width: 200, title: '收件地址'}
, {field: 'psrq', width: 200, title: '配送日期'}
, {field: 'psdh', width: 200, title: '配送单号'}
, {field: 'xgsj', width: 200, title: '修改日期', templet: '#xgsj'}
]],
parseData: function (res) {
console.log(res);
}
});
table.render({
elem: '#three'
, url: '/searchListThree?ID=' + id
, cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
, cols: [[
{field: 'yjmx_qzrq', width: 200, title: '签注时间', templet: '#yjmx_qzrq'},
{field: 'yjmx_sfps', width: 200, title: '是否配送'}
, {field: 'yjmx_pspc', width: 200, title: '配送批次'}
, {field: 'yjmx_qsrq', width: 200, title: '签收日期'}
, {field: 'yjmx_psdh', width: 200, title: '配送单号'}
]]
, page: true //开启分页
, limit: 10 //默认十条数据一页
, limits: [10, 20, 30, 50] //数据分页条
});
});
});
需要注意的一点是lauyi需特定的返回数据格式才能在页面显示出来,这是后台的代码
@RequestMapping("/searchList")
@ResponseBody
public Map searchListTwo(String ID,String type){
Map resultMap = new HashMap();
List list = new ArrayList();
if ("2".equals(type)) {
list = idCardService.selectByTypeOne(ID);
} else {
list = idCardService.selectByTypeTwo(ID);
}
for (int i = 0;i
resultMap中data,code,msg,count便是layui规定的返回数据格式。
之上就是简易的SSM加layui后台项目,如果有小伙伴有什么问题可留言,也可以关注我公众号加我微信。
Java核心基础
----------------------------------
(看那两撇小胡子)
基础 | 心得 | 经历 | 更重要的是开心嘛!