springBoot 使用 Layui入門 HelloWorld

SpringBoot 使用 LayUI

一、使用 IDEA 構建 SpringBoot 項目

在這裏插入圖片描述

在這裏插入圖片描述
點擊Next
在這裏插入圖片描述
點擊 Next

在這裏插入圖片描述
選擇 springWeb 和 template Engines

在這裏插入圖片描述

在這裏插入圖片描述
最後設置項目名和項目存放位置點擊 Finsh 就構建了項目

在這裏插入圖片描述
到【LayUI】官網下載文件 https://www.layui.com/doc/

在這裏插入圖片描述
把 layui 拷貝進 static 中,作爲靜態資源文件
然後創建 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Layui HTML</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>


<script src="layui/layui.js"></script>
<script>
    layui.config({
        base: '/js/module/'
    }).use('index');
</script>
</body>
</html>

這裏使用了 layUI 模塊化的創建方法
在這裏插入圖片描述
然後我們在 static 下創建 index.js

layui.define(['layer', 'form'],function (exports) {
   var layer = layui.layer,form = layui.form;

   layer.msg('Hello World');
    exports('index', {});
});

最後點擊
在這裏插入圖片描述
找一個瀏覽器輸入 localhost:8080顯示
在這裏插入圖片描述
完成

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章