专栏首页企业平台构建springboot jpa搭建开发环境(二)

springboot jpa搭建开发环境(二)

在上一次搭建后台服务的基础上,本次主要是引入了一套前端框架,当然在进行界面与接口调试的过程中,发现jpa的使用还是有一些不是很明了的地方,有些地方已经解决,而有些地方目前没有精力去处理,但是不会影响我们的正常使用。

前面说到,前端使用的是layui,当然第一次用,很多地方都没有用到其精髓。当然也不可能从零开始搭建一套后台管理的界面,所以在github上找了一套UI,下载地址,但是发现其使用的版本好像不是最新,因此将里面的一些样式以及依赖的js进行了适当的调整,同时对于文件相对关系也做了简单的整理。

目前关于前端不想说太多,毕竟还不是精通这个框架。

因此在使用前我们先去了解下这个layui,官网,文档比较详细,但是想要用好,将这一堆api与样式搭配出合理的界面,还是不容易的。

其实使用起来很简单,和大多数多模块框架一样,我们可以选择一次性加载与按需加载:

//一次性加载
<script src="../layui/layui.all.js"></script>
<script>
!function(){
  var layer = layui.layer
  
  layer.msg('Hello World');
}();
</script> 
//按需加载
<script src="../layui/layui.js"></script>
<script>
layui.use(['layer', 'form'], function(){
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg('Hello World');
});
</script> 

根据模块进行操作其实与require很相似,分为定义与使用:

config:配置组件相关,比如路径

layui.config({
  base: '/res/js/' //假设这是你存放拓展模块的根目录
}).extend({ //设定模块别名
  mymod: 'mymod' //如果 mymod.js 是在根目录,也可以不用设定别名
  ,mod1: 'admin/mod1' //相对于上述 base 目录的子目录
});

define:定义组件

layui.define(function(exports){ //提示:模块也可以依赖其它模块,如:layui.define('layer', callback);
  var obj = {
    hello: function(str){
      alert('Hello '+ (str||'mymod'));
    }
  };
  //输出test接口
  exports('mymod', obj);
}); 

use:使用组件

layui.use(['layer', 'laypage', 'laydate'], function(){
  var layer = layui.layer //获得layer模块
  ,laypage = layui.laypage //获得laypage模块
  ,laydate = layui.laydate; //获得laydate模块
  
  //使用模块
}); 

其实过程就是定义、配置、使用,其他的无非就是使用组件已有的方法和扩展自己的组件,所以大部分工作就是查阅Api。

下面开始上次没有完成的部分,直接下载源码后,放到项目src/main/resources/static,为什么放到这个路径下,因为springboot在classpath下的public、static、resources中的资源都是直接可以访问不会拦截。然后去layui下载了最新的库文件,之后将这些js进行替换,项目结构比较简单。

根据文件名就可以知道每个目录的作用,其中views放的是页面,需要说明的是,目前页面采用的是iframe的模式,因此每个页面是相对独立的,所以会看到引入相同的js,由于没有对组件做过多的扩展,所以会看到有些累赘的地方,如果有机会,还是会处理一下。

项目的入口为index.js,在里面会引入下面几个js

其中layui.js就是本次的根本,当然引入的不是全部组件,在需要的时候才会按需加载。而menu.js主要是加载菜单用的。而index.js则是真正的入口,其中做了一些初始化的工作以及查找daa-main对应的组件。

所以最后的初始化工作全部在main中完成了。其他的子页面也是如此,因为每一个页面最终都会作为一个iframe嵌入到index.html指定的位置中。

最后的界面如下:

目前已经完成了用户管理、机构管理、角色管理、菜单管理、数据字典。

下一次将会对权限相关模块进行整理,主要围绕目前比较流行的shiro、spring-security。

本次完整代码见git:https://github.com/suspring/springboot-jpa-ms.git

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [重要] 深入理解 JavaScript 中的作用域和上下文

    在本教程中,我们将深入学习 JavaScript 中作用域(Scope)的一切。 所以,来吧。

    胡哥有话说
  • 【重要】你不得不知道的文件上传进度提示

    当上传的文件相对较大时,用户可能需要等待较长的时间,这个时候前端如果没有任何提示的话,体验不是很好,如果有上传进度提示,就会好很多。而要在上传过程实时显示上传进...

    胡哥有话说
  • javascript之Promise对象知识点整理

    Promise规范https://promisesaplus.com/中对Promise的状态的定义:

    开发架构二三事
  • vue之router文档

    查看 dist 目录. 注意,dist 目录下的文件是最新稳定版,不会同步更新到 dev 分支上的最新代码

    开发架构二三事
  • Vue中使用CSS预处理器 stylus以及配置全局变量的方法

    不得不说CSS预处理器(Sass/Less/Stylus)极大的方便了前端研发攻城狮编写CSS样式,提供了变量定义、可嵌套的选择器、mixins混合书写、函数定...

    胡哥有话说
  • 基于Taro的的微信小程序分享图片功能实践

    在各种小程序(微信、百度、支付宝)、H5、NativeApp 纷纷扰扰的当下,给大家强烈安利一款基于React的多终端开发利器:京东Taro(泰罗·奥特曼),T...

    胡哥有话说
  • 构建工具篇 - react 的 yarn eject 构建命令都做了什么

    前段时间,一直在研究 react 技术栈,对于项目的构建方面,又有一定的特殊需求,通过 npx create-react-app [filename] 安装以后...

    胡哥有话说
  • 微信小程序项目小点一

    在微信小程序中,自定义导航栏的颜色 可以在app.json的window里面添加navigationBarBackgroundColor属性。

    生南星
  • [Swagger] Springfox Swagger 项目接口自动化管理平台

    swagger相关maven文件放在公共父层,在parent-pom中,springfox的scope设置为provided,Springfox以及其依赖的ja...

    架构探险之道
  • 初探Vue的Mixin混入

    在停更了近一周之后(假期已完美结束),胡哥又开启了文章的每日更新,与大家一起分享、讨论大前端的技术原理与项目实践。抽丝剥茧,让技术方案可见可闻;归纳整理,让知识...

    胡哥有话说

扫码关注云+社区

领取腾讯云代金券