前端练手：左树右表的后台管理界面。
利用div和table实现常见布局（上中下，左中右）
使用jquery实现表格的CRUD，使用jquery的表格、树组件，如dataTable、zTree
前端数据可视化还有echart、jsmind
前端一些特殊功能
异步（ajax）+定时：进度条、轮播图。
跨域
右键
权限管理
权限控制其实就是登录功能的加强版。
使用Easyui + Tree插件实现权限管理功能（既练习了权限，又练习了tree插件）。
不能以易变的的东西为判断标准，这样扩展性就差。
比如在权限管理中
- 基于角色的访问控制扩展性就差：
// 如果该user是部门经理则可以访问if中的代码
if(user.getRole("部门经理")){
// 系统资源内容
// 用户报表查看
}
// 变更为部门经理和总经理都可以进行用户报表查看，代码改为：
if(user.getRole("部门经理") || user.getRole("总经理")){
// 系统资源内容
// 用户报表查看
}
- 基于资源的访问控制:
资源在系统中是不变的，比如资源有：类中的方法，页面中的按钮
对资源的访问需要具有permission权限，代码可以写为：
if(user.hasPermission("用户报表查看(权限标识符)")){
// 系统资源内容
// 用户报表查看
}
上面的方法就可以解决用户角色变更而不用修改上边权限控制的代码。
如果需要变更权限只需要在分配权限模块去操作，给部门经理或总经理增加或解除权限
建议使用基于资源的访问控制实现权限管理。
粒度
粗粒度权限管理，是对资源类型的管理，资源类型比如：菜单、url连接、用户添加页面、用户信息、类方法、页面中按钮。
粗粒度权限管理比如：超级管理员可以访问用户添加页面、用户信息等全部页面。
部门管理员可以访问用户信息页面，包括页面中所有按钮。
细粒度的权限管理就是数据级别的权限管理。
细粒度权限管理比如：部门经理只可以访问本部门的员工信息，用户只可以看到自己的菜单，大区经理只能查看本辖区的销售订单.
如何实现粗粒度和细粒度的权限管理
- 如何实现粗粒度的权限管理？
粗粒度权限管理比较容易将权限管理代码抽取出来在系统架构级别统一管理。比如基于url拦截的方式实现：通过Filter或SpringMVC的拦截器实现授权。
对于粗粒度的权限管理，建议使用优秀的权限管理框架进行实现，节省开发成本，提高开发效率。 - 如何实现细粒度的权限管理？
对细粒度的权限管理在数据级别是没有共性可言的，针对细粒度的权限管理就是系统业务逻辑的一部分，如果在业务层去处理相对简单，如果将细粒度的权限管理统一在系统架构级别去抽取，比较困难，即使进行了抽取，功能也可能存在扩展性不全的弊端。建议细粒度权限管理放在业务层去控制。比如：部门经理只查询本部门员工信息，在Service接口提供一个部门id的参数，controller中根据当前用户信息得到该用户属于哪个部门，调用service时将部门id传入service，实现该用户只查询本部门的员工。
本来，在权限管理中，有用户和权限就够了。但是单独为某个用户设置权限又很繁琐，所以就有了角色的概念。
角色其实就相当于一个用户组，可以批量操作权限。
权限表的每一条记录就是一个url地址。
跨域
前后台都有解决跨域的办法。
后台不会跨域，这也是爬虫的原理。
html模块化
html不支持include，后端的jsp、模板都是支持include。js可以模块化，html要如何模块化以便复用，例如：头部，底部，侧边栏等等。
方式一：iframe
1. 在一个浏览器窗口中显示多个HTML文件，用于复用部分界面
2. 通过Iframe标记，我们可将那些不变的内容以Iframe来表示，这样，不必重复写相同的内容。类似于程序设计中的过程或函数。
3. <Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe>
方式二：frameset
<frameset cols="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
方式三： ('selector').load('xx.html');})
先利用div布局，然后给每一个div加载不同的html。
load() 方法通过 AJAX 请求从服务器加载数据，并把返回的数据放置到指定的元素中。
https://blog.csdn.net/arvin0/article/details/56839242
js模块化
js虽然可以模块化，但是js没有java那样的命名空间。
https://blog.csdn.net/liuyingv8/article/details/83113228
前端布局练手
1. div布局
https://blog.csdn.net/kongkongyou/article/details/54561760
Float:
Float属性是DIV+CSS布局中最基本也是最常用的属性，用于实现多列功能，我们知道<div>标签默认一行只能显示一个，而使用Float属性可以实现一行显示多个div的功能，最直接解释方法就是能实现表格布局的多列功能。
Clear:
使用Float属性设置一行有多个DIV后（多列），最好在下一行开始之前使用Clear属性清楚一下浮动，否则上面的布局会影响到下面。
2. table布局
https://blog.csdn.net/JCY1009015337/article/details/53454960
网友评论