11月25日树形组件

今天来写这个课堂测试。

我不会写树形结构，同学告诉我说要layui的树形组件，然后我不知道怎么做了

在同学的指导下这样写出了

 前台界面

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/layui/css/layui.css"   media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>常规用法</legend>
</fieldset>

<div id="test1" ></div>
<script src="layui/layui/layui.js" charset="utf-8"></script>

<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
    layui.use(['tree', 'util'], function(){
        var tree = layui.tree
            ,layer = layui.layer
            ,util = layui.util

        var $ = layui.jquery;
        $.ajax({
            url: "treelist",    //后台数据请求地址
            type: "post",
            dataType:"json",
            success: function(resut){
                tree.render({
                    elem: '#test1',
                    data: resut,
                    // showCheckbox: true,     //是否显示复选框
                    // onlyIconControl: true
                });
            }
        });
    });


    //常规用法

</script>

</body>
</html>

 

后台

package controller;

import bean.news;
import dao.newsdao;
import udb.JsonUtils;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;

@WebServlet( "/treelist")
public class treelist extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");//传回去的中文数据需要加这一行不然会乱码
        request.setCharacterEncoding("UTF-8");

        String json = JsonUtils.toJsonTree();
        response.getWriter().write(json);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }
}

一个非常重要的工具类

package udb;
import bean.news;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import dao.newsdao;

import java.util.ArrayList;
import java.util.LinkedHashMap;
import java.util.Map;
public class JsonUtils {
    /**
     * 转化为前台格式json
     * @param count
     * @param object
     * @return
     */
    public static String toJsonstr(int count, Object object){
        String json = JSON.toJSONString(object);// List转json
        String patten = "{\"code\":0,\"msg\":\"\",\"count\":"+count+",\"data\":"+json+"}";
        System.out.println(patten);
        return patten;
    }

 
    


    public static String toJsonTree(){
        String alltitle = "财经,房产,教育,科技,军事,汽车,体育,综合体育最新,游戏,娱乐,体育焦点";
        String[] titles = alltitle.split(",");
        JSONArray res = new JSONArray();
        for (String title : titles) {
            Map<String, Object> tr = new LinkedHashMap<String, Object>();
            tr.put("title", title);
            JSONArray jsonArray = new JSONArray();
            ArrayList<news> dataBeans= newsdao.getshu(title);
            for (news dataBean : dataBeans) {
                JSONObject jsonObject = new JSONObject();
                jsonObject.put("title",dataBean.getTitle());
                //jsonArray.put(jsonObject);
                jsonArray.add(jsonObject);
            }
            tr.put("children", jsonArray);
            res.add(tr);
        }
        String json = JSON.toJSONString(res);
        return json;
    }

}

dao层就是很简单

 public static ArrayList<news> getshu(String kind) { // 查询热词和次数
        ArrayList<news> list = new ArrayList<news>(); // 创建集合
        Connection conn = Utils.getConnection();
        String sql = "select * from data where  channelName = '"+kind+"'  limit 10"; // SQL查询语句
        try {
            PreparedStatement pst = conn.prepareStatement(sql);
            ResultSet rs = pst.executeQuery();
            news data = null;
            while (rs.next()) {
                String title = rs.getString("title");

                data = new news(title);
                list.add(data);
            }
            rs.close(); // 关闭
            pst.close(); // 关闭

        } catch (SQLException e1) {

            e1.printStackTrace(); // 抛出异常

        }

        return list; // 返回一个集合

    }

我发现我写不出是因为我对json很不熟悉。同学这样直接去拼装json语句是我从未想到的，也是我不敢想的。

posted @ 2021-11-25 23:21  不咬牙  阅读(57)  评论(0)    收藏  举报