第二阶段项目总结（通过layUI实现小区管理系统）

最新推荐文章于 2022-07-16 16:32:32 发布

戟御

最新推荐文章于 2022-07-16 16:32:32 发布

阅读量279

点赞数

分类专栏： java代码自测文章标签： java layui

本文链接：https://blog.csdn.net/supertwoone/article/details/120361514

版权

java代码自测专栏收录该内容

27 篇文章 1 订阅

订阅专栏

设计的总体思路

1. 项目主体架构的搭建

首先明确项目所要实现的功能，根据以前的经验找到以前的jar包并导入。
三层的搭建，数据访问层 DAO层数据处理层 Service 表示层 servlet层
三层搭建完成之后就通过DButils 完成数据访问层的底层访问，完成数据库连接池的创建
数据库的设计，首先要明确数据库之间的包含关系，比如一对一，一对多，多对多的关系，特别注意在数据库的存储数据和页面的展示不一定相同，比如一个班级中有很多学生，那么在班级的表格中就只需要学生的主键储存就行，就算班级在展现学生具体信息的时候也能够通过学生主键查询。
实体类的设计，在数据库可能没有设置外键，那么在实体类的设计中要存在属性之间的关联，如果是一对多，那么就需要加上一个私有的List属性，一对一或者多对一就只需要设置对应对象的私有属性，
完成DAO层的设计，dao层只需要接口，具体实现类要在dao包下的Impl实体包中实现，在Impl包中，实现对应接口
在实体类中首先完成基础的增删查改功能，增可包含单增多增，删也包含单删和多删，在多删的时候可以用批量处理batch，或者in，查询根据功能要加上对数据库统计数量，分页查询，根据id查对象，根据输入信息模糊查询，对模糊查询数量统计，等等根据需求来实现，该数据的时候要结合主键查询，要注意修改时传入主键值。insert，delete，update，query
数据处理层，处理层的时候要将一对多或者多对一，一对一的特殊实体类，加上对应的私有属性（列表或属性），还需要自动生成特定序列号。
表示层：首先要有一个BaseServlet，然后要有一个过滤器，接着写对应页面的servlet，只需要写对应的方法比如，add，remove，edit，find。有的需要下拉列表的动态处理就需要对应的table查询方法。
设计index.html,login.html,signin.html还需要对应的js
前端方面使用layui框架。

2. layui框架的细节

table表格渲染
代码实例

//html代码
<table id="petList" lay-filter="petList"></table>

//js代码
var tableIns = table.render({
        elem: '#petList',
        url: '/cmss/pet?action=list',
        cellMinWidth : 95,
        page : true,
        height : "full-125",
        limit : 3,
        limits : [10,15,20,25],
        id : "petListTable",
        cols : [[
            {type: "checkbox", fixed:"left", width:50},

            {field: 'id', title: 'ID', minWidth:5, align:"center"},
            {field: 'pet_picture', title: '宠物照片', align:'center', templet: '<div><img src="{{d.pet_picture}}"></div>'},
            {field: 'pn_name', title: '所属成员', align:'center'},
            {field: 'pet_name', title: '宠物名称', align:'center'},
            {field: 'pet_Colour', title: '宠物颜色', align:'center'},
            {field: 'pet_actime', title: '收养时间', align:'center'},
            {field: 'foundtime', title: '创建时间', align:'center'},
            {field: 'pet_desc', title: '备注', align:'center'},

            {title: '操作', minWidth:175, templet:'#petListBar',fixed:"right",align:"center"}
        ]]

    });

下拉列表加信息修改

<div class="layui-form-item">
    <label class="layui-form-label">
        <span class='x-red'>*</span>所属小区
    </label>
    <div class="layui-input-block">
        <select name="co_name" id="co_name" lay-filter="co_name">
        </select>
    </div>
</div>

	$(function () {
        var url=window.location.href;
        var temp = url;
        var aa=url.indexOf('=');
        if (aa>-1){
            url=url.substring(aa+1);
        }
        //动态添加下拉列表选项
        $.ajax({
            type:"get",
            url:"/cmss/pn?action=pn_tableCom",
            // data:{id:url},
            dataType:"json",
            success:function(res) {
                var htmlcode = "<option value=''>--选择小区名称--</option>";
                for(var com in res){
                    // console.log(res[com]);
                    var coname = res[com];
                    htmlcode = htmlcode + "<option value="+res[com]+">"+coname+"</option>>"
                }
                // alert(htmlcode);
                $("#co_name").html(htmlcode);
				//如果要手动添加必须加一下选项
                form.render("select");
            }
        });
        //动态添加下拉列表选项
        $.ajax({
            type:"get",
            url:"/cmss/pn?action=pn_tableHp",
            // data:{id:url},
            dataType:"json",
            success:function(res) {
                var htmlcode = "<option value=''>--选择房产名称--</option>";
                for(var com in res){
                    // console.log(res[com]);
                    var coname = res[com];
                    htmlcode = htmlcode + "<option value="+res[com]+">"+coname+"</option>>"
                }
                // alert(htmlcode);
                $("#hp_name").html(htmlcode);

                form.render("select");
            }
        });
        if(url===temp){

        } else {
            $.ajax({
                type:"get",
                url:"/cmss/pn?action=pn_edit",
                data:{id:url},
                dataType:"json",
                success:function(res) {
                    var cona = 'dd[lay-value=' + res.co_name + ']';
                    $('#co_name').siblings("div.layui-form-select").find('dl').find(cona).click();
                    var pnna = 'dd[lay-value=' + res.pn_name + ']';
                    $('#pn_name').siblings("div.layui-form-select").find('dl').find(pnna).click();
                    $("input[name='pn_name']").val(res.pn_name);
                    $("input[name='identitycard']").val(res.identitycard);
                    $("input[name='phonenum']").val(res.phonenum);
                    $("input[name='pn_profession']").val(res.pn_profession);
                    $("input[name='birthday']").val(res.birthday);
                    //下拉列表默认选项选中
                    var pnge = 'dd[lay-value=' + res.pn_gender + ']';
                    $('#pn_gender').siblings("div.layui-form-select").find('dl').find(pnge).click();
                    var pnty = 'dd[lay-value=' + res.pn_type + ']';
                    $('#pn_type').siblings("div.layui-form-select").find('dl').find(pnty).click();
                    $("input[name='pn_desc']").val(res.pn_desc);

                    $(".layui-btn").text("修改");
                    $(".layui-btn").attr("lay-filter","edit");
                }
            });
        }
    })

select的点击改变事件

	form.on('select(c_id)', function (data) {
        var cidtemp = $("#c_id").val();
        $.ajax({
            type:"get",
            url:"/cmss/rn?action=rn_table",
            dataType:"json",
            success:function(res) {
                var co_homenum;
                var coname;
                var htmlcode = "<option value=''>--请选择栋数名称--</option>";
                for(var com in res){
                    coname = res[com].id;
                    if(coname==cidtemp){
                        co_homenum = res[com].co_homenum;
                        for(var i = 0; i < res[com].co_ridgepolenum; i++){
                            var charnum = String.fromCharCode(65+i);
                            htmlcode = htmlcode + "<option value="+charnum+"栋>"+charnum+"栋</option>>"
                        }
                    }
                }
                $("#co_homenum").val(co_homenum);
                $("#rn_name").html(htmlcode);

                form.render("select");
            }
        });
    })

文件的上传下载

   <div class="layui-upload upload">
       <label class="layui-form-label">
           <span class='x-red'>*</span>宠物缩略图
       </label>
       <button type="button" class="layui-form-label" id="upload">上传图片</button>
       　　　　　　　<input  class="layui-upload-file" type="file" accept="" name="file" id="file" value="5.phg">
       <div class="layui-upload-list">
           <img class="layui-upload-img" id="demo1">
           <p id="demoText"></p>
       </div>
   </div>

    //上传图片
    var uploadInst = upload.render({
        elem: '#upload'
        , url: '/cmss/pet?action=pet_images' //改成您自己的上传接口
        , before: function (obj) {
            //预读本地文件示例，不支持ie8
            obj.preview(function (index, file, result) {
                $('#demo1').attr('src', result); //图片链接（base64）
            });
        }
        // 上传成功之后服务器异步返回的数据
        ,done: function(res){
            // alert(res.fileName);
            $('#pet_picture').attr('value',res.fileName)
        }
    });

    //图片上传
    public void pet_images(HttpServletRequest request, HttpServletResponse response) throws Exception {
        // 获取到前端提交的文件， 封装了文件的所有的信息
        Part part = request.getPart("file");

        // content 包含了文件名（不仅仅包含文件名） -> form-data; name="file"; filename="demo-1.png"
        String content = part.getHeader("content-disposition");

        String fileNamePrefix = "filename=\""; // suffix

        /**
         * content.indexOf(fileNamePrefix) -> 拿到 filename=" 中第一个字符 f 所在的索引
         */
        // 获取到文件名
        String fileName = content.substring(content.indexOf(fileNamePrefix) + fileNamePrefix.length()).replace("\"", "");

        // 获取文件的后缀
        String suffixOfFileName = fileName.substring(fileName.lastIndexOf("."));

        /**
         * 生成新的文件名：202109171632xxxxxxx
         */
        String newFileName = DateUtil.format(LocalDateTime.now(), "yyyyMMddHHmmss") + RandomUtil.randomString(6) + suffixOfFileName;

        InputStream is = part.getInputStream();

        OutputStream os = new FileOutputStream(SERVER_IMG_LOCATION + newFileName);

        IoUtil.copy(is, os);


        Map<String, String> data = new HashMap<>();
        data.put("fileName", newFileName);

        writeJson(data, response);

        System.out.println("上传结束！");
        // TODO 将新的文件名存入到数据库
    }

    //增加宠物信息
    public void pet_add(HttpServletRequest request, HttpServletResponse response) throws Exception {
        String json = request.getParameter("pet");
        Pet pet = JSON.parseObject(json, Pet.class);
        pet.setPet_picture("http://localhost/"+pet.getPet_picture());
        boolean flag = petService.addPet(pet);
        if(flag){
            response.getWriter().write("success");
        } else {
            response.getWriter().write("fail");
        }
    }

项目过程中错误总结

jsp文件没有加前缀，导致页面出现乱码
配置文件没有修改，数据库没有找到
Invocation Target Exception 调用目标异常（重复去调用login方法，出现空指向异常）
InvocationTargetException 调用目标异常
NumberFormatException 数字格式异常
上述两个异常是因为编辑的时候输入格式有误
在修改信息的时候没有传入id属性
layui下拉列表失效，在success：function中添加上
form.render(‘select’);
json解析对象的时候，最后一位对象中的对象解析未成功，且date数据解析为时间戳，以下是解决方法
String json = JSON.toJSONStringWithDateFormat(data,“yyyy-MM-dd HH:mm:ss”,SerializerFeature.DisableCircularReferenceDetect);
存入date数据
可用Timestamp 类
也可以直接使用Date 类
数据库中存入的是date属性就只能显示年月日，如果是datetime属性就还能显示时分秒，且java这边只需要传入date属性就行
文件上传后表格中没有图片显示只有路径名
解决办法

{field: 'pet_picture', title: '宠物照片', align:'center', templet: '<div><img src="{{d.pet_picture}}"></div>'},

图片存入路径前必须加 http://

戟御

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第二阶段项目总结（通过layUI实现小区管理系统）

设计的总体思路1. 项目主体架构的搭建首先明确项目所要实现的功能，根据以前的经验找到以前的jar包并导入。三层的搭建，数据访问层 DAO层数据处理层 Service 表示层 servlet层三层搭建完成之后就通过DButils 完成数据访问层的底层访问，完成数据库连接池的创建数据库的设计，首先要明确数据库之间的包含关系，比如一对一，一对多，多对多的关系，特别注意在数据库的存储数据和页面的展示不一定相同，比如一个班级中有很多学生，那么在班级的表格中就只需要学生的主键储存就行，就算班级在展现学生具
复制链接

扫一扫