基于SpringBoot打造在线教育系统（4）-- SpringBoot集成ElementUI

剽悍一小兔

发布于 2021-01-13 10:31:17

5080

发布于 2021-01-13 10:31:17

补一个代码，上一节漏掉了，就是访问后台首页的时候，还得需要一个视图接口啊。来，在这：

@RequestMapping("/admin/{page}")
    public String adminView(@PathVariable(name = "page") String page) {
        return "admin/" + page;
    }

这个接口还可以访问其他的后台页面，只要你把jsp放在admin目录下面就可以了。

1.UI选型

终于开始画页面了，用什么框架好呢？我反正是懒得全部自己手写css，我们可以挑一个好用的框架，bootstrap有点太老了，easyUI就更加不用说了，虽然我曾经也是easyUI的死忠粉。

几经踌躇，最终，我选择用ElementUI，Element是（饿了么团队）根据MVVM结构Vue开源出来的一套前端ui组件。我靠，大公司，有保障！

element-ui是一个ui库，它不依赖于vue。但是却是当前和vue配合做项目开发的一个比较好的ui框架。

既然用了element-ui，那么自然就得配套使用Vue了。

如果你没有jquery的基础，那... ... 岂不美哉？？

众所周知，vue的设计思路是和jquery不同的，如果你要是不会jquery，反而更好。

OK，废话不多说，直接搞起来。

2. 引入资源

我们需要一些资源，引入进来，为了快速看到效果，直接用CDN又很慢，所以我们不妨直接把资源下载下来，保存到本地：

有些资源没具体试过，但是vue的资源经过测试是可以使用的，这一块我吃了很多亏，终于找到了一款能用的！因为我们不打算用webpack那一套，希望做成前后端不分离的模式，所以必须将elementUI本地化，其中的过程很痛苦，网上找了很多说法，都不能用！最终还是自己琢磨了一番才搞定，太难了我。

下面是elementUI的文档地址： https://element.eleme.cn/#/zh-CN/component/quickstart 这也是element的开发手册，我们照着写就行了。说实话，我也不太会这个，但是有文档啊，照着写就完事了。

这里有个布局容器，看看有没有啥可以抄袭，哦不，借鉴的？

这个好像就不错欸，那就用它了！

注意，这边我又吃了没文化的亏，我以为直接copy就完事了，谁知道这个例子的代码只是一个大概的演示，很多css还是得自己搞上去才有的！

如果你也想本地使用elementUI来玩玩，这一路的坑我提前帮你踩了，跪求支持一波啊，哈哈。

第一波代码是这样子的：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include  file="../common/taglib.jsp"%> 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="${basePath}/css/element.css">
  <style>
    .el-main {
        background-color: #e9eef3;
        color: #333;
        text-align: center;
        line-height: 160px;
    }
    
    .el-footer, .el-header {
        background-color: #b3c0d1;
        color: #333;
        line-height: 60px;
    }
    
    .el-footer {
        text-align:center;
    }

    #app a{
        text-decoration: none;
        color:#ffffff;
    }
  </style>
</head>
<body>
  <div id="app">
    <el-container>
      <el-header style="height:60px;">
        <a href="#"><span>java小白翻身</span></a>
      </el-header>
      <el-main class="el-main">Main</el-main>
      <el-footer style="height:60px;">Footer</el-footer>
    </el-container>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="${basePath}/js/vue.js"></script>
  <!-- import JavaScript -->
  <script src="${basePath}/js/element.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { 
            
        }
      }
    })
  </script>
</html>

效果：

我们需要在标题栏的右侧，放一个搜索栏，去文档找找。用这个吧：

<div style="float:right;">
     <el-input placeholder="请输入内容" v-model="keywords" class="input-with-select">
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
</div>

效果：