基于ElementUI+html和VUE实现的java后台管理系统

ElementUI是目前比较流行的前端UI框架，随着前后的分离开发方式的普及，使用纯html+elementui搭建的后台系统资源有限，本节主要介绍以ElementUI+Html+Vue为前端、Springboot做后台搭建的后台管理系统模板的基本思路，系统实现了登录验证、用户管理、权限管理、角色管理等基础模块，适合直接拿来做二次开发，搭建自己的业务系统。

1、系统登陆页面：

引入ElementUI、Vue相关的资源文件

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

登录页Html表单

Vue初始化

new Vue({
    el: '#app',
    data: {
        loginLoading:false,
        loginForm: {
            username: '',
            password: ''
        }
    },
    methods: {
        submitForm() {
            if(!this.loginForm.username){
            	this.message.error("登录密码不能为空!");
            }else if(!this.loginForm.password){
            	this.$message.error("登录密码不能为空!");
            }else{
                let _this = this;
                _this.loginLoading = true;
                $.post("/login",_this.loginForm,function(resp){
                    if(resp.code==0){
                    location.href = '/index';
                    }else{
                        _this.loginLoading = false;
                        _this.$message.error(resp.msg);
                    }                	
	            });
            }                	
        }
    }
});

登录页面效果

2、系统后台首页：采用ElementUI 的Container布局容器分别实现左侧菜单栏，顶部状态栏以及中间内容区域，左侧菜单实现多层级展示，中间部分采用iframe实现

效果图

3、后台框架：后台采用Springboot实现，整合JFinal的ActiveRecord操作数据库，使用Shiro做登录验证，Redis做数据缓存。

项目结构

4、需要源码学习或者二次开发的可留言