栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java

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

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

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

@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的文档地址:
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"%> 



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


  
    
	  
	  	java小白翻身
	  
	  Main
	  Footer
	
  

  
  
  
  
  

效果:

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


	 
	    
	  

效果:

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

再刷新,完美:

没报错了,哦耶~~

环境配置完毕,下一节咱继续撸!

转载请注明:文章转载自 www.mshxw.com
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号