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

最新推荐文章于 2024-08-06 19:46:54 发布

一凡妈

最新推荐文章于 2024-08-06 19:46:54 发布

阅读量52

点赞数

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表单

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

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);
                    }                	
	            });
            }                	
        }
    }
});