一个后端工程师如何实现漂亮的后台管理系统

新华折光润 架构至善之路 

俗话说：“一个不会写前端页面的后端工程师不是一个合格的前端工程师”。虽然有点调侃的意味，但是后端工程师了解前端的一些知识点对后端开发也会有一定的帮助。

大多企业开发的后台管理系统只能在PC下访问才可以展示全部功能，而在移动端则不能访问或访问非常的不友好，若需要在移动端访问全部功能并友好的显示则需要单独的开发。

是否可以开发一个自适应的页面来满足PC端及移动端访问的需求呢？请看下图为后台管理系统中用户管理的页面，如何在移动端友好展示其功能。

 

 

首先我们看下移动端访问效果如下图：

图中红框1顶部菜单在移动端访问的时候只显示小图标；

图中红框2搜索功能框分行显示；

图中红框3用户信息多列分行显示，并自动填充列属性。

 

 

以上效果展示，在传统的SpringMVC中只介绍view中相关实现。

首先我们看下下图红框中部分CSS代码：@media screen and (max-width:767px)的作用是当页面宽度小于768px显示的样式。

 

 

我们再来看下jsp页面中的样式如下图红框中的样式：h5-table、h5-table-hover来控制页面的自适应。

 

 

jsp页面通常会与js搭配使用，本文中的js是用的JQuery+Ajax，下图中红框的代码会在自适应页面自动填充列属性名称。

 

 

以上功能通过修改SpringMVC中View的相关页面即可达到页面自适应的功能，但是对于前端知识了解很少的同学来实现此功能还会有一定的难度。

若想进一步了解功能详细实现步骤及源代码，请关注架构至善之路公众号参与讨论并获取源代码。