简易SSM+Layui 查询信息项目

      入职的第一个星期,领导安排做了一个测试新人项目,框架要求用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" %>



    
    登录页面
    
    


查询登录
Project one test

需要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 = new Result();
        //获取用户名和密码
        String username = user.getUsername();
        String password = user.getPassword();
        //些处横板从数据库中获取对用户名和密码后进行判断
        Users userInfo = usersService.selectByName(username);
        if (userInfo == null) {
            result.setCode("1");
            result.setMsg("用户名或密码错误");
            return result;
        }else {
            String pwd = userInfo.getPassword();
            if (pwd.equals(password)) {
                session.setAttribute("USER_SESSION", userInfo);
                return result;
            } else {
                result.setCode("1");
                result.setMsg("用户名或密码错误");
                return 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核心基础

                                                                                 ----------------------------------

                                                                                    (看那两撇小胡子)

                                                                                    

                                                                          基础 | 心得 | 经历 | 更重要的是开心嘛!

你可能感兴趣的:(简易SSM+Layui 查询信息项目)