面试日记实操题

最新推荐文章于 2024-09-13 21:30:49 发布

浅语千寻

最新推荐文章于 2024-09-13 21:30:49 发布

阅读量1.2k

点赞数

文章标签：面试 easyui 前端

本文链接：https://blog.csdn.net/qq_34368334/article/details/121211889

版权

项目场景

离职找工作的第个星期第一天
题目：面试官让我设计一个权限表从前端到数据库设计到请求逻辑。

问题描述：

用shiro对菜单授权，菜单下面有子菜单，针对不同的用户做授权认证。

原因分析：

当时我没写出来，后来思考了一下，发现自己脱离文档或者以前的项目去自己写代码的能力比较薄弱，可能复制粘贴多了有关吧！

解决方案：

前端

针对这道题我一般都会想到前端展示会是什么样子的呢？因为以前有个的经验脑海中自然想到了EazyUI的菜单工具栏。

简单的写下前端代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic SideMenu - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="static/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="static/themes/icon.css">
	<script type="text/javascript" src="static/jquery.min.js"></script>
	<script type="text/javascript" src="static/jquery.easyui.min.js"></script>
</head>
<body>
	<h2>菜单授权模拟</h2>
	<p>这里是一个菜单</p>
	
	<div style="width:200px;height:auto;border:1px solid #ccc;">
		<ul id="tt" class="easyui-tree"></ul>
	</div>
	<script type="text/javascript">
		$(function (){
            $("#tt").tree({
                url:"static/tree.json",
            })
        });
	</script>
</body>
</html>

真正有用得是<p>标签下的9行代码，先加载着静态的数据先，有后台再动态从sql拉吧！

现在看得出效果了。

menu表设计

接下来是数据库设计部分来了！因为题目给出的是菜单和权限，肯定要有两章表，先不管三七二十一，把这两张表搞出来再说。

我先搞个懵逼的数据库，反正我当时很懵逼！

先把menu_tb（菜单表）设计出来

注意把它的father_id和它自己的id搞个外键关联（别问为啥！就是经验）。

设计了menu表后，权限表没什么灵感。先别管插入几条数据，把数据展示到前端再说。

把Menu的数据展示到前端

如何把表数据展示到前端，使用ssm的三层设计模式很简单。数据库数据如下：

代码如下:

@Controller
public class MenuController {

    @Autowired
    MenuService menuService;

    /**获取树形菜单数据*/
    @RequestMapping("/getTreeData")
    @ResponseBody
    public List<Menu> getTreeData(){
        return menuService.getTreeData();
    }
}

public interface MenuService{
    List<Menu> getTreeData();
}

@Service
@Transactional
public class MenuServiceImp implements MenuService {

    @Autowired
    MenuMapper menuMapper;

    @Override
    public List<Menu> getTreeData() {
        return menuMapper.getTreeData();
    }
}

public interface MenuMapper {
    List<Menu> getTreeData();
}

@Setter
@Getter
@ToString
public class Menu {
    private Long id;
    private String name;
    /**用来存放自己的父菜单*/
    private Menu father;
    /**存放自己的子菜单*/
    private List<Menu> children;
}

menuMapper.xml

<?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.mycode.mapper.MenuMapper" >
    <resultMap id="BaseResultMap" type="com.mycode.domain.Menu">
        <id column="id" property="id" jdbcType="BIGINT" />
        <result column="menu_name" property="name" jdbcType="VARCHAR" />
        <association property="father" javaType="com.mycode.domain.Menu" columnPrefix="c_">
            <result property="id" column="id"/>
            <result property="name" column="menu_name"/>
        </association>
        <collection property="children" ofType="com.mycode.domain.Menu" select="listChildMenu" column="id"></collection>
    </resultMap>

    <!--获取树形菜单数据
   分步查询 先查根菜单
   根据根菜单的id 查询出子菜单
     -->
    <select id="getTreeData" resultMap="BaseResultMap">
        SELECT *
        FROM
        menu_tb
        WHERE father_id IS NULL;
    </select>
    <!--根据菜单的id，查询出子菜单-->
    <select id="listChildMenu" resultMap="BaseResultMap">
        SELECT *
        FROM
        menu_tb
        WHERE father_id = #{id}
    </select>
</mapper>

js处理后段返回json数据，使其字段符合EazyUI规则。

<script type="text/javascript">
		$(function (){
		    //递归遍历json数据，重新组合成标准树的数据格式
           function json(treeData,arrayTree){
                for(var i = 0;i<treeData.length;i ++){
                    var tree = {}; //对象表达式
                    tree.id = treeData[i].id;
                    tree.text = treeData[i].name;
                    if(treeData[i].children != null){ //判断该节点是否有子节点
                        var childrens = [];
                        tree.children = json(treeData[i].children,childrens);

                    }
                    arrayTree.push(tree);
                }
                return arrayTree;
           }
            var arrayTree = []
            $("#tt").tree({
                url:"/getTreeData",
               //对响应的数据进行过滤，返回标准树的数据格式
               loadFilter:function (data) {
                   return json(data,arrayTree)
               }
            })
        });
	</script>

把Menu展示到前端的难点主要在实体类Menu的设计，以及用js处理返回的json数据上。

这样就可以展示了：