毕业项目

一.layer的功能http://layer.layui.com/
（1）警告框

layer.alert('内容', {
  icon: 1,
  skin: 'layer-ext-moon' 
})

（2）询问框

layer.confirm('您是如何看待前端开发？', function(){
alert("重要")；
}

（3）提示层 1：是正确 2：是错误

 layer.msg("列表显示成功！",{
               	icon:1,
               	time:200
               })

（4）加载load

	         var index = layer.load(1, {
					time:2000,
					shade: [0.1, 'fff'] //0.1透明度的白色背景
				});
			      layer.close(index);//关闭

（5）iframe

  $(".addUser").click(function () {
          var index=layer.open({
                type: 2,
                area: ['700px', '450px'],
                fixed: false, //不固定
                maxmin: true,
                content: 'addUserA.html'
            });
         layer.full(index);//全屏显示内容
        });

1.列表显示
（1）向后台发送一个ajax请求。需要带上页码和条数

        up_bind(1,10);
        var total;//用户分页查看用
        function up_bind(pn,size) {
            $.ajax({
                type: "GET",
                url: "/TestUsera",
                async: false,
                data: {
                    "pn":pn,
                    "size":size
                },
                "success": function (result) {
                    if (result.code == 100) {
                        up_show(result);
                        total = result.extend.UserInfo.total;
                    }
                }
            });
        }

（2）Controller层

    @RequestMapping("/TestUsera")
    @ResponseBody
    public Msg list_user(@RequestParam(defaultValue = "1")Integer pn,
                         @RequestParam(defaultValue = "10")Integer size){
        // 这不是一个分页查询
        // 引入PageHelper分页插件
        // 在查询之前只需要调用，传入页码，以及每页的大小
        PageHelper.startPage(pn,size);
        // startPage后面紧跟的这个查询就是一个分页查询
        UserA user=new UserA();//返回的是一个List的对象
       List<UserA>userAS= userAService.getAll(user);
        // 使用pageInfo包装查询后的结果，只需要将pageInfo交给页面就行了。
        // 封装了详细的分页信息,包括有我们查询出来的数据，传入连续显示的页数
        PageInfo pageInfo=new PageInfo(userAS,1);
        return Msg.success().add("UserInfo",pageInfo);
    }

（3）ServiceImpl

     public List<UserA> getAll(UserA userA) {
       List<UserA>result= useraDao.selectByAll(userA);
     return result;
      }

（4）Service

  public List<UserA> getAll(UserA userA);

（5）dao层

 List<UserA> selectByAll(UserA userA);

（6）mapper层

扫描二维码关注公众号，回复： 4646854 查看本文章

<?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="com.material.dao.UseraDao">
  <select id="selectByAll" parameterType="com.material.bean.UserA" resultType="com.material.bean.UserA">
   select * from user
  </select>
</mapper>

（7）把数据在表格中显示

unction up_show(result) {
            var data = result.extend.UserInfo.list;
                $("#table_tbody").empty();
            $.each(data, function (index, item) {
                var tr = $("<tr></tr>");
                var td1 = $("<td></td>").append("<input type='checkbox'lay-skin='primary'>");
                var td2 = $("<td></td>").append(item.username);
                var td3 = $("<td></td>").append(item.password);
                var td4 = $("<td></td>").append("<button class='layui-btn'>编辑</button>").append("<button class='layui-btn layui-btn-danger'>删除</button>");
                tr.append(td1).append(td2).append(td3).append(td4).appendTo($("#table_tbody"));
                form.render();
            });
        }

2.分页查询
分页：依赖laypage内置模块–>分页要在html页面定义一个div
1.layui.use(['form','layer','util','laypage'], function(){ var laypage=layui.laypage;
2.通过核心方法：

   laypage.render({
            elem: 'table_page'
            ,count: total, //数据总数，从服务端得
             layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
            ,jump: function(obj, first){
                //首次不执行
                if(!first){
                    up_bind(obj.curr,obj.limit)
                }
            }
        });

在每次循环的时候都要把上一页的清空$("#tbody").empty();
怎么获取total的总页数：在success中拿到taltal，在外部定义全局变量。
注意：分页拿到total记得改成同步async: false, var total;
total = result.extend.UserInfo.total;
$("#table_tbody").empty();

      laypage.render({
                elem: 'table_page'
                ,count: total, //数据总数，从服务端得
                 layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
                ,jump: function(obj, first){
                    //首次不执行
                    if(!first){
                        up_bind(obj.curr,obj.limit)
                    }
                }
            });

3.新增
1.userAjs中写下以下代码

  $(".addUser").click(function () {
          var index=layer.open({
                type: 2,
                area: ['700px', '450px'],
                fixed: false, //不固定
                maxmin: true,
                content: 'addUserA.html'
            });
         layer.full(index);//全屏显示内容
        });

2.addUser页面—input框中的name值必须和pojo实体类中的相同

<div id="form_id">
    <form class="layui-form" action="#">
      <!--  账号-->
        <div class="layui-form-item">
            <label class="layui-form-label">账号</label>
            <div class="layui-input-block">
                <input type="text" id="input_account" name="username" required  lay-verify="required" 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="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn add" lay-submit lay-filter="formDemo">添加</button>
                <a href="UserA.html" class="layui-btn layui-btn-primary">返回</a>
            </div>
        </div>
    </form>

3.addUser js代码
.serialize():序列化拿到表单中的值
parent.location.reload();//刷新父页面
window.location.href=“UserA.html”;//跳转到父页面

            $(".add").click(function () {
            var formData=$("#form_id form").serialize();//序列化获取表单中的数据
            $.ajax({
                type:"POST",
                url:"/saveUser",
                async:false,
                data:formData,
                "beforeSend":function () {

                },
                "success":function (result) {
                    parent.location.reload();
                    window.location.href="UserA.html";

                }
            });
        });

4.Controller
method = RequestMethod.POST

   @RequestMapping(value = "/saveUser",method = RequestMethod.POST)
   @ResponseBody
     public Msg savaUser(UserA userA){
        userAService.savaUser(userA);
        return Msg.success();
    }

5.serviceImpl

    public void savaUser(UserA userA) {
        useraDao.insertUserA(userA);
      }

6.service

  public void savaUser(UserA userA);

7.dao层

    int insertUserA(UserA userA);

8.Mapper.xml

  <insert id="insertUserA" parameterType="com.material.bean.UserA">
        insert into user (username,password) values (#{username},#{password})
    </insert>

猜你喜欢