用SpringBoot2.0+Thymeleaf+Layui 做了个极简数据展示网站

最近用SpringBoot2.0+Thymeleaf+Layui做了个极简的网站，有空就写这篇博客来说说我在这条小路上踩到的一些坑，坑不大但也是坑啊！

先丢网站： http://lay.putop.top

GitHub: https://github.com/Folgerjun/lay.putop.top

• 首先为什么我用SpringBoot2.0来作为框架，对了，当然是她搭建起来快啊，而且2.0发布也有一段时间了，来熟悉熟悉。

本来准备用druid作为连接池，后来发现2.0她不再用原先的TomcatJDBC了而是采用了Hikari（号称java平台最快连接池），刚好也不用去费时间搭druid配置了

• 第一个坑来了来了，既然选择采用了Hikari那我就简单配置下用户名密码什么的就行了吧，所以我配置文件是这么写的:

    spring.datasource.url=jdbc:mysql://localhost:3306/mi_show?useUnicode=true&characterEncoding=utf-8&useSSL=false
    spring.datasource.username=root
    spring.datasource.password=root

这么一看好像么问题啊，可是运行发现报错，说找不到数据源…
后来我就去springboot官网去看了，不看不晓得啊，发现这么一句：

Also, if you happen to have Hikari on the classpath, this basic setup does not work, because Hikari has no url property (but does have a jdbcUrl property).

可以可以，肥瑞古德！
然后我就看着官网，改了改，OK了，解决！

   @Bean
        @ConfigurationProperties("spring.datasource")
        public DataSource dataSource() {
            return DataSourceBuilder.create().build();
        }

    spring.datasource.jdbc-url=jdbc:mysql://localhost:3306/mi_show?useUnicode=true&characterEncoding=utf-8&useSSL=false
    spring.datasource.username=root
    spring.datasource.password=root

• 然后主要是用到了layui的数据表格,这个数据表破用起来是真的挺方便的，layui数据表格在线示例，不过还是要看前后台数据交互格式，这里吃了个小亏没看。所以有问题还是要多去官网看看。

• 接下来帅了，layer官网 layer作为web弹层组件真是用起来太方便了，而且易上手。完美利用iframe自定义内容、格式。一用我就爱上了她~

• 首页轮播没有用layui的轮播，因为layui的轮播不能自适应，我找了个插件，挺好用的 轮播插件

• 还有用layer弹出层时遇到个问题，就是不能获取弹出层的值，后也是通过网络看了别人也是这种情况然后试了试一个老哥的方法，成了。先在弹出层中写个返回数据方法，然后再通过点击按钮，yes回调方法来获取。如下示例：

var callbackdata = function () {
        var miName = $("#miName").val();
        var miType = $("#miType").val();
        var miDes = $("#miDes").val();
        var miUrl = $("#miUrl").val();
        var data = {
            miName: miName,
            miType: miType,
            miDes: miDes,
            miUrl: miUrl
        };
        return data;
    }

 // 点击新增按钮
          $('#addMi').on('click', function() {
              layer.open({
                  type: 2,
                  title: '新增',
                  area: ['500px', '400px'],
                  content: '/form',
                  btn: ['提交','取消'],
                  yes: function(index){
                      // 从弹出框中获取数据
                      //当点击‘确定’按钮的时候，获取弹出层返回的值
                      var res = window["layui-layer-iframe" + index].callbackdata();
                      //打印返回的值，看是否有我们想返回的值。
                      var miName = res.miName,
                          miType = res.miType,
                          miDes = res.miDes,
                          miUrl = res.miUrl;
                      console.log(miName + ' ' + miType + ' ' + miDes + ' '+ miUrl);

• 其余的也就没什么大毛病了，总之遇到问题求助网络，去看官网，然后发现那都不是问题。

• 代码虽然没几行，不过挺适合初学者练练手的。GitHub地址贴上面了，去吧，别客气！