首页手记 JFinal极速开发框架使用笔记（二）

JFinal极速开发框架使用笔记（二）

标签：

Java

接上篇手记

关于前台页面，需要看一下文档第六章，JFinal模板引擎的内容，了解JFinal如何在前台显示，这是很重要的

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生管理</title>
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/jquery-1.12.4.min.js"></script>
</head>
<body>
    <h1><a href="/student/jsp">学生管理</a></h1>
    <a href="/student/layui">测试layui</a>
    <a href="/student/test">编辑索引0</a><br>
    <a href="/student/add">添加</a><br>
    <form action="/student/get">
        id:<input type="text" name="studentid">
        <input type="submit" value="查询">
    </form>
    <a href="/student/delete">删除</a>
    <form action="/student/delete">
        id:<input type="text" name="studentid">
        <input type="submit" value="删除">
    </form>

    #for(x : [1..10])
        #(x)
    #end

    <table id="listtable" border="1">
        <tbody>
            <tr>
                <th>id</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>地址</th>
                <th>邮箱</th>
                <th>操作</th>
            </tr>
            #for(x : studentList)
            <tr>
                <td style="text-align:left;">#(x.studentid)</td>
                <td style="text-align:left;">#(x.studentname)</td>
                <td style="text-align:left;">#(x.sex)</td>
                <td style="text-align:left;">#(x.age)</td>
                <td style="text-align:left;">#(x.address)</td>
                <td style="text-align:left;">#(x.email)</td>
                <td style="text-align:left;">
                      <a href="/student/delete?studentid=#(x.studentid)">删除</a>
                      <a href="/student/delete1/#(x.studentid)">删除</a>
                      <a href="/student/get?studentid=#(x.studentid)">修改</a>
                      <a href="/student/get1/#(x.studentid)">修改1</a>
                </td>
            </tr>
            #end
        </tbody>
    </table>
</body>
</html>

这就是页面效果，因为没有样式所以看起来比较粗狂，然后下面是用正常使用的layui，加上正常习惯的方法返回数据组成的：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生管理layui</title>

<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/layui-v2.2.45/layui/layui.js"></script>
<link rel="stylesheet" href="/layui-v2.2.45/layui/css/layui.css"     media="all">
</head>
<body>
    <div style="margin: 0px; background-color: white; margin: 0 10px;">
        <blockquote class="layui-elem-quote">
            <a href="/student/add"><button type="button" id="usersAdd_btn"
                class="layui-btn layui-btn-small">
                <i class="fa fa-plus" aria-hidden="true"></i> 添加
            </button></a>
            <form class="layui-form" style="float: right;"
                onsubmit="return false">
                <div class="layui-form-item" style="margin: 0;">
                    <div class="demoTable">
                        搜索用户：
                        <div class="layui-inline">
                            <input class="layui-input" name="name" id="demoReload"
                                autocomplete="off">
                        </div>
                        <button class="layui-btn" style="transform: translateY(-3px);"
                            data-type="reload">搜索</button>
                    </div>
                </div>
            </form>
        </blockquote>
    </div>

    <table class="layui-table" 
        lay-data="{url:'/student/getlist',id:'idTest',height: 'full-60' ,}"
        lay-filter="demo">
        <thead>
            <tr>
                <th lay-data="{field:'studentid', width:'20%',}">id</th>
                <th lay-data="{field:'studentname', width:'20%'}">姓名</th>
                <th lay-data="{field:'sex', width:'20%'}">性别</th>
                <th lay-data="{field:'age', width:'20%'}">年龄</th>
                <th lay-data="{field:'address', width:'20%'}">地址</th>
                <th lay-data="{fixed: 'right', width:'17%', align:'center', toolbar: '#barDemo1'}"></th>
            </tr>
        </thead>
    </table>
<script type="text/html" id="barDemo1">
<a class="layui-btn layui-btn-xs" id="edit" lay-event="edit">修改</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</body>
<script>
layui.use('table', function(){
  var table = layui.table,
  form = layui.form;;

  //监听表格复选框选择
  table.on('checkbox(demo)', function(obj){
    console.log(obj)
  });
  //监听工具条
  table.on('tool(demo)', function(obj){
    var data = obj.data;
    if(obj.event === 'del'){
      layer.confirm('真的删除用户吗', function(index){
        $.ajax({
            type:"post",
            url:"/student/delete?studentid="+data.studentid,
            dataType:"text",//返回的
            success:function(returndata) {
                table.reload("idTest");
            },
            error:function(msg) {
                console.log(msg);
            }
        }); 

      });
    } else if(obj.event === 'edit'){

        var index = layui.layer.open({
              title : "修改",
              type : 2,
              area: ['380px', '80%'],
              content : "/student/get?studentid="+data.studentid,
              cancel: function(index, layero){ 
                      layer.close(index);
                      table.reload("idTest");

                }  
          })
          //改变窗口大小时，重置弹窗的高度，防止超出可视区域（如F12调出debug的操作）
          $(window).resize(function(){
              layui.layer.full(index);
          })
          layui.layer.full(index); 
    }else if(obj.event === 'detail'){
         layer.confirm('确定通过该用户吗', function(index){
           $.ajax({
               type:"post",
               url:"<%=basePath%>/sys/user/passuser",
               data:{id:data.id},
               //dataType:"text",//返回的
               success:function(returndata) {

                   layui.use('layer', function() {
                       layer.msg(returndata.msg);
                      });
                   table.reload('idTest', {
                       page: {
                           curr: 1 //重新从第 1 页开始
                         },
                   });
               },
               error:function(msg) {
                   console.log(msg);
               }
           }); 

         });
    }
  });

  var $ = layui.$, active = {
    getCheckData: function(){ //获取选中数据
      var checkStatus = table.checkStatus('idTest'),
      data = checkStatus.data;
      layer.alert(JSON.stringify(data));

    }
    ,getCheckLength: function(){ //获取选中数目
      var checkStatus = table.checkStatus('idTest')
      ,data = checkStatus.data;
      layer.msg('选中了：'+ data.length + ' 个');
    }
    ,isAll: function(){ //验证是否全选
      var checkStatus = table.checkStatus('idTest');
      layer.msg(checkStatus.isAll ? '全选': '未全选')
    }
  };

  $('.demoTable .layui-btn').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });
});
</script>

</html>

public void getlist() {
        List<Student> list = Student.dao.find("select * from student");
        JSONObject jo = new JSONObject();
        jo.put("code", 0);
        jo.put("msg", true);
        jo.put("count",list.size());
        jo.put("data", list);
        renderJson(jo);
    }

这是layui表格url指向的方法，在这里，需要将json数据用renderJson的方式返回。

然后需要注意的是，我尝试过直接返回list集合，貌似方法是可行的，只是因为layui表格必须是以上格式才能接收数据所以没有显示到页面上，但是当我直接return jo的时候后台报错，这个问题只能等明天在学习并解决了。
然后需要注意的是方法的调用和传参：

如下两种方法和传参的方式：

　　　　　　　　　　　   <a href="/student/delete?studentid=#(x.studentid)">删除</a>
                      <a href="/student/delete1/#(x.studentid)">删除</a>
                      <a href="/student/get?studentid=#(x.studentid)">修改</a>
                      <a href="/student/get1/#(x.studentid)">修改1</a>

public void delete() {
        // 获取表单域名为studentid的值
        Student.dao.deleteById(getPara("studentid"));
        forwardAction("/student");
    }

    public void delete1() {
        // 获取url请求中第一个值
        Student.dao.deleteById(getParaToInt());
        forwardAction("/student");
    }

    public void update() {
        Student student = getModel(Student.class);
        student.update();
        forwardAction("/student");
    }

    public void get() {
        Student student = Student.dao.findById(getPara("studentid"));
        setAttr("student", student);
        render("index2.html");
    }

    public void get1() {
        Student student = Student.dao.findById(getParaToInt());
        setAttr("student", student);
        render("index2.html");
    }

最后就是添加接受实体类的两种方式：

@Before(StudentValidator.class)
    public void save() {
        /**
         * getModel用来接收页面表单域传递过来的model对象，表单域名称以”modelName.attrName”
http://www.jfinal.com
方式命名，getModel 使用的 attrName 必须与数据表字段名完全一样。
getBean 方法用于支持传统 Java Bean，包括支持使用 jfnal 生成器生成了 getter、setter 方法
的 Model，页面表单传参时使用与 setter 方法相一致的 attrName，而非数据表字段名。
getModel与getBean区别在于前者使用数表字段名而后者使用与setter方法一致的属性名进
行数据注入。建议优先使用 getBean 方法。
         */
        //getBean(Student.class).save();
        getModel(Student.class).save();
        redirect("/student");
    }

    @Before(StudentValidator2.class)
    public void savebean() {
        getBean(Student.class).save();
        redirect("/student");
    }

其中第二中的getBean方式在我这个demo中，可能由于没有设置getset的原因，添加之后是只有生成了ID，没有其他数据的。

如果需要使用。下面是官方demo的写法：

package com.demo.common.model.base;

import com.jfinal.plugin.activerecord.Model;
import com.jfinal.plugin.activerecord.IBean;

/**
 * Generated by JFinal, do not modify this file.
 */
@SuppressWarnings({"serial", "unchecked"})
public abstract class BaseBlog<M extends BaseBlog<M>> extends Model<M> implements IBean {

    public M setId(java.lang.Integer id) {
        set("id", id);
        return (M)this;
    }

    public java.lang.Integer getId() {
        return getInt("id");
    }

    public M setTitle(java.lang.String title) {
        set("title", title);
        return (M)this;
    }

    public java.lang.String getTitle() {
        return getStr("title");
    }

    public M setContent(java.lang.String content) {
        set("content", content);
        return (M)this;
    }

    public java.lang.String getContent() {
        return getStr("content");
    }
}

点击查看更多内容