springboot jpa搭建开发环境（二）

sucl

发布于 2019-08-07 15:13:58

5780

发布于 2019-08-07 15:13:58

在上一次搭建后台服务的基础上，本次主要是引入了一套前端框架，当然在进行界面与接口调试的过程中，发现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进行替换，项目结构比较简单。