接着web巩固项目

    功能管理概要设计
    image.png
    功能列表展示
    使用ajax技术。就可以先访问网页，在网页中发现缺少数据，再通过ajax请求数据
    image.pnghttps://fly.layui.com/extend/tableTree/
    treetable不是layui自带组件，需要额外引入
    image.png
    treetable-lay文件夹包含：treeTable.csstreeTable.jsimage.png
    使用treetable组件，帮我们ajax请求数据，并自动组装数据
    a)在网页中定义一个

    标签指定treetable组件组装数据的位置
    image.png
    b)在js中渲染treetable，通过配置信息告诉treetable组件如何处理表格**

    1. <script>
    2.             layui.config({
    3.                 base: './treetable-lay/' //指定treetable组件所在的文件夹目录
    4.             }).use(['treeTable'], function () { //use() 使用指定的layui组件
    5.                 var treeTable = layui.treeTable;
    6.                 treeTable.render({
    7.                     elem:'#funGrid',//指定渲染的位置
    8.                     url:'funAll',//使用ajax技术展示请求表格中要展示的数据
    9.                     cols:[[//告诉组件按照什么样的表格形式取展示数据
    10.                         {title:'功能名称',field:'fname'},//<td>
    11.                         {title:'功能类别',field:'ftype'},
    12.                         {title:'请求url',field:'fhref'},
    13.                         {title:'权限范围',field:'auth'},
    14.                     ]]
    15.                 });
    17.             });
    18.         </script>

    c)treetable组件会通过url属性向服务器发送(ajax技术的)请求)
    服务器按照业务需求，需要返回所有的功能信息（List-》JsonStr）
    服务器使用封装的mvc框架处理请求
    i) 引入mvc框架源码
    ii) 引入mvc框架的依赖（jar）
    iii) 在web.xml中配置框架核心入口
    iv) 在web.xml中配置核心入口时指定映射关系注解所在的类的所在包

    <servlet>
        <servlet-name>mvc</servlet-name>
        <servlet-class>myweb.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>controller-scan</param-name>
            <param-value>controller</param-value>
        </init-param>
    </servlet>
    <servlet-mapping>
        <servlet-name>mvc</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

    d)创建controller和方法，通过注解配置映射关系
    将查询结果直接响应
    此次响应回浏览器的内容treetable组件使用
    这就要求响应回去的内容必须符合treetable的规范

    package controller;

import domain.Fun;
import myweb.annotation.Controller;
import myweb.annotation.RequestMapping;
import myweb.annotation.ResponseBody;
import service.FunService;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

@Controller
public class FunController {
    private FunService service=new FunService();

    @RequestMapping("/funAll")
    @ResponseBody
    public Map<String,Object> findAll(){
        List<Fun> funs=service.findAll();
        //将查询结果按照layui-treetable组件的规范组装并响应
        Map<String,Object> map=new HashMap<>();
        map.put("code",0);
        map.put("msg","出错啦");
        map.put("data",funs);
        return map;
    }
}

    package service;

import dao.FunDao;
import domain.Fun;
import orm.SqlSession;

import java.util.List;

public class FunService {
    FunDao dao=new SqlSession().getMapper(FunDao.class);
    public List<Fun> findAll(){
        return dao.findAll();
    }
}

    package dao;

import domain.Fun;
import orm.annotation.Select;

import java.util.List;

public interface FunDao {
    @Select("select * from t_fun")
    public List<Fun> findAll();
}

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
        <script src="./layui/layui.all.js"></script>
    </head>
    <body>
        <%--数据展示的位置--%>
        <div id="funGrid"></div>

        <!-- layui-js代码实现 -->
        <script>
            layui.config({
                base: './treetable-lay/' //指定treetable组件所在的文件夹目录
            }).use(['treeTable'], function () { //use() 使用指定的layui组件
                var treeTable = layui.treeTable;
                treeTable.render({
                    elem: '#funGrid',//指定渲染的位置
                    url: 'funAll',//使用ajax技术展示请求表格中要展示的数据
                    cols: [[//告诉组件按照什么样的表格形式取展示数据
                        {title: '功能名称', field: 'fname'},//<td>
                        {title: '功能类别', field: 'ftype'},
                        {title: '请求url', field: 'fhref'},
                        {title: '权限范围', field: 'auth'},
                    ]],
                    tree:{//设置查询数据之间的子父关系
                        iconIndex: 0,
                        idName:'fid',//按照id和pid的关系实现子父级别
                        pidName:'pid',
                        isPidData:true,//表示按照id和pid的关系实现子父级别
                    }
                });

                    });
        </script>

    </body>
</html>

    image.png