于SpringBoot打造在线教育系统(4)-- SpringBoot集成ElementUI

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

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

d2333bb01af6a2550cee6e77b65896b5.png

@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,废话不多说,直接搞起来。

7b038901a3d78c412cfd6095ab224faf.png

##2. 引入资源

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

5c748a5f75e47e4986ff5521630cc2ed.png


有些资源没具体试过,但是vue的资源经过测试是可以使用的,这一块我吃了很多亏,终于找到了一款能用的!

因为我们不打算用webpack那一套,希望做成前后端不分离的模式,所以必须将elementUI本地化,其中的过程很痛苦,网上找了很多说法,都不能用!最终还是自己琢磨了一番才搞定,太难了我。


下面是elementUI的文档地址:

https://element.eleme.cn/#/zh-CN/component/quickstart

这也是element的开发手册,我们照着写就行了。说实话,我也不太会这个,但是有文档啊,照着写就完事了。

7d7cbfbf96e30e6dc421982c54cdc311.png


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

701c97912fe9a7b0cbab7b44b07fc7d6.png

这个好像就不错欸,那就用它了!

17326c7b1a561cd8b6c32ee7ea1cf626.png

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

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

f2e0dd657db978a58daa73a5f4e65278.png

第一波代码是这样子的:

<%@ 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>

效果:

df7f8f89f2467f81332fa5a3ae0b6852.png

我们需要在标题栏的右侧,放一个搜索栏,去文档找找。

用这个吧:

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

效果:

78da2b419729bb990df44c7585680f01.png

啊啊啊,图标没了,啥情况。百度了才知道,还缺少一个字体图标库的文件,我下载了,放在这里:

3efb87b7a93505270798ddf6bcd13099.png

再刷新,完美:

41d5a38ded7d6c7902193878c96761f1.png


没报错了,哦耶~~

环境配置完毕,下一节咱继续撸!本节源码加群获取,关注【java小白翻身】公众号,即可看到群号码~

相关文章
|
7天前
|
JavaScript 安全 Java
基于springboot的摄影器材租赁回收系统
本系统基于Java、Spring Boot与Vue技术,构建摄影器材租赁回收平台,解决市场不规范、资源浪费等问题。支持在线预约、信用免押、智能评估等功能,提升器材利用率,降低用户成本,推动行业绿色可持续发展。
|
3天前
|
JavaScript Java 关系型数据库
基于springboot的小区车位租售管理系统
针对城市化进程中小区停车难问题,本文设计基于SpringBoot的车位租售管理系统,结合Vue前端与MySQL数据库,实现车位信息数字化、租售流程自动化。系统支持在线查询、申请、支付及数据统计,提升管理效率与用户体验,促进资源优化配置。
|
7天前
|
JavaScript Java 关系型数据库
基于springboot的旅游门票预定系统
在数字化时代,旅游门票预定系统应运而生,结合Spring Boot、Vue、Java与MySQL技术,实现在线预订、电子验票、数据分析等功能,提升游客体验与景区管理效率,推动旅游业智能化转型。
|
6天前
|
搜索推荐 算法 JavaScript
基于springboot的健康饮食营养管理系统
本系统基于Spring Boot、Vue与MySQL技术,融合大数据与AI算法,构建个性化健康饮食管理平台。结合用户身体状况、目标需求,智能推荐营养方案,助力科学饮食与健康管理。
|
7天前
|
JavaScript 前端开发 Java
基于springboot的4s店汽车试驾销售服务系统
针对传统4S店运营效率低、服务体验差等问题,研究基于SpringBoot的汽车销售服务系统,融合Java、Vue、MySQL等技术,实现业务自动化、客户个性化服务与数据智能分析,提升管理效率与客户满意度,推动4S店数字化转型与竞争力升级。
|
3天前
|
JavaScript Java 关系型数据库
基于springboot的校内跑腿管理系统
针对校园跑腿服务效率低、信任难等问题,本研究设计基于Spring Boot与Vue的校内跑腿管理系统,融合MySQL数据库与智能化调度技术,实现任务发布、智能匹配、实时追踪与评价反馈一体化,提升服务效率与质量,助力智慧校园建设。
|
4天前
|
JavaScript Java 关系型数据库
基于springboot的快递分拣管理系统
本系统基于SpringBoot框架,结合Java、MySQL与Vue技术,构建智能化快递分拣管理平台。通过自动化识别、精准分拣与实时跟踪,提升分拣效率与准确性,降低人力成本,推动快递行业向智能化、高效化转型,助力电商物流高质量发展。
|
9天前
|
前端开发 安全 Java
基于springboot+vue开发的会议预约管理系统
一个完整的会议预约管理系统,包含前端用户界面、管理后台和后端API服务。 ### 后端 - **框架**: Spring Boot 2.7.18 - **数据库**: MySQL 5.6+ - **ORM**: MyBatis Plus 3.5.3.1 - **安全**: Spring Security + JWT - **Java版本**: Java 11 ### 前端 - **框架**: Vue 3.3.4 - **UI组件**: Element Plus 2.3.8 - **构建工具**: Vite 4.4.5 - **状态管理**: Pinia 2.1.6 - **HTTP客户端
87 4
基于springboot+vue开发的会议预约管理系统
|
4月前
|
JavaScript 前端开发 Java
制造业ERP源码,工厂ERP管理系统,前端框架:Vue,后端框架:SpringBoot
这是一套基于SpringBoot+Vue技术栈开发的ERP企业管理系统,采用Java语言与vscode工具。系统涵盖采购/销售、出入库、生产、品质管理等功能,整合客户与供应商数据,支持在线协同和业务全流程管控。同时提供主数据管理、权限控制、工作流审批、报表自定义及打印、在线报表开发和自定义表单功能,助力企业实现高效自动化管理,并通过UniAPP实现移动端支持,满足多场景应用需求。
437 1
|
5月前
|
前端开发 Java 关系型数据库
基于Java+Springboot+Vue开发的鲜花商城管理系统源码+运行
基于Java+Springboot+Vue开发的鲜花商城管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的鲜花商城管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。技术学习共同进步
420 7