该博客介绍了如何在SpringBoot项目中结合Vue和Element UI搭建前端界面，通过JSP实现页面，并利用Spring MVC进行路由控制。由于考虑后端权限控制，未采用Vue CLI创建单页应用。文章提到了Vue的vuex和store在没有专业前端配合下带来的复杂性，并展示了header.jsp的部分引用，以及index.jsp的框架设计，使用iframe在Element的tab组件中加载工作页面。尽管测试显示IE10以上版本可以运行，但可能会有性能问题。
项目使用springboot做后端开发，前端使用vue，ui部分使用了element，页面使用spring mvc的路由控制，js是写在jsp文件中的，没有使用vue的cli工具搭建单页面框架，是考虑到使用后端做权限控制只做一套就可以了，vue中的vuex和store用起来比较麻烦，没有专业的前端开发配合，不好搞。
先来个header.jsp的引用部分
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<!DOCTYPE html>
<html>
<head>
<title>管理端</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/static/font-awesome-4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="/static/element/lib/theme-chalk/index.css">
<script src="/static/vx-easyui/babel-polyfill.js"></script>
<script src="/static/vx-easyui/babel.min.js"></script>
<script src="/static/vx-easyui/vue.min.js"></script>
<script src="/static/element/lib/index.js"></script>
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
width:100%;
}
#app {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
}
.el-container {
height: 100%;
width: 100%;
padding: 0;
}
</style>
</head>
<body style="width:100%;height: 100%;">
index.jsp中的框架界面：
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<jsp:include page="header.jsp"></jsp:include>
<div id="app">
<el-container>
<el-aside v-bind:style="{width:width+'px'}">
<el-menu class="el-menu-vertical-demo" style="height: 100%;"
background-color="#304156"
text-color="#fff"
active-text-color="#ffd04b"
@select="selectMenu"
:collapse=&
最低0.47元/天 解锁文章
6796
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
