<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>管理後臺</title>
<link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">後臺管理</div>
<!-- 頭部區域（可配合layui已有的水平導航） -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item"><a href="">商品管理</a></li>
<li class="layui-nav-item"><a href="">用戶</a></li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">
<img src="http://t.cn/RCzsdCq" class="layui-nav-img">
賢心
</a>
<dl class="layui-nav-child">
<dd><a href="">基本資料</a></dd>
<dd><a href="">安全設置</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">退了</a></li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左側導航區域（可配合layui已有的垂直導航） -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">所有商品</a>
<dl class="layui-nav-child">
<dd><a href="./add.html">添加商品</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">解決方案</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">列表一</a></dd>
<dd><a href="javascript:;">列表二</a></dd>
<dd><a href="">超鏈接</a></dd>
</dl>
</li>
</ul>
</div>
</div>
<div class="layui-body">
<!-- 內容主體區域 -->
<div style="padding: 15px;">內容主體區域</div>
</div>
<div class="layui-footer">
<!-- 底部固定區域 -->
© layui.com - 底部固定區域
</div>
</div>
<script src="./layui/layui.all.js"></script>
<script>
</script>
</body>
</html>
login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>管理後臺</title>
<link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">後臺管理</div>
<!-- 頭部區域（可配合layui已有的水平導航） -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item"><a href="">商品管理</a></li>
<li class="layui-nav-item"><a href="">用戶</a></li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">
<img src="http://t.cn/RCzsdCq" class="layui-nav-img">
賢心
</a>
<dl class="layui-nav-child">
<dd><a href="">基本資料</a></dd>
<dd><a href="">安全設置</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">退了</a></li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左側導航區域（可配合layui已有的垂直導航） -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">所有商品</a>
<dl class="layui-nav-child">
<dd><a href="./add.html">添加商品</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">解決方案</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">列表一</a></dd>
<dd><a href="javascript:;">列表二</a></dd>
<dd><a href="">超鏈接</a></dd>
</dl>
</li>
</ul>
</div>
</div>
<div class="layui-body">
<!-- 內容主體區域 -->
<div style="padding: 15px;">內容主體區域</div>
</div>
<div class="layui-footer">
<!-- 底部固定區域 -->
© layui.com - 底部固定區域
</div>
</div>
<script src="./layui/layui.all.js"></script>
<script>
</script>
</body>
</html>
add.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>管理後臺</title>
<link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">後臺管理</div>
<!-- 頭部區域（可配合layui已有的水平導航） -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item"><a href="">商品管理</a></li>
<li class="layui-nav-item"><a href="">用戶</a></li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">
<img src="http://t.cn/RCzsdCq" class="layui-nav-img">
賢心
</a>
<dl class="layui-nav-child">
<dd><a href="">基本資料</a></dd>
<dd><a href="">安全設置</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">退了</a></li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左側導航區域（可配合layui已有的垂直導航） -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">所有商品</a>
<dl class="layui-nav-child">
<dd><a href="./add.html">添加商品</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">解決方案</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">列表一</a></dd>
<dd><a href="javascript:;">列表二</a></dd>
<dd><a href="">超鏈接</a></dd>
</dl>
</li>
</ul>
</div>
</div>
<div class="layui-body">
<!-- 內容主體區域 -->
<div style="padding: 15px;">
<span class="layui-breadcrumb">
<a href="">首頁</a>
<a href="">商品管理</a>
<a href="">商品添加</a>
</span>
<hr>
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">商品名稱</label>
<div class="layui-input-inline">
<input type="text" name="title" required lay-verify="required" placeholder="請輸入商品名稱"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">價格</label>
<div class="layui-input-inline">
<input type="text" name="price" required lay-verify="required" placeholder=""
autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">輔助文字</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">庫存</label>
<div class="layui-input-inline">
<input type="text" name="nums" required lay-verify="required" placeholder=""
autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">輔助文字</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">商品詳情</label>
<div class="layui-input-block">
<div id="editor">
<p>歡迎使用 <b>wangEditor</b> 富文本編輯器</p>
</div>
<textarea id="desc" name="desc" placeholder="請輸入內容" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="additem">添加</button>
</div>
</div>
</form>
</div>
</div>
<div class="layui-footer">
<!-- 底部固定區域 -->
© layui.com - 底部固定區域
</div>
</div>
<script src="https://unpkg.com/[email protected]/release/wangEditor.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="./layui/layui.all.js"></script>
<script>
var form = layui.form;
//監聽提交
form.on('submit(additem)', function (data) {
layer.msg(JSON.stringify(data.field));
// 把數據提交給服務器
let formdata = data.field;
axios.post('http://localhost:7001/add', formdata)
.then(function (response) {
layer.msg(response.data.Msg);
if(response.data.code == 1){
window.location.href = './index.html';
}
})
.catch(function (error) {
console.log(error);
});
return false;
});
var E = window.wangEditor
var editor2 = new E('#editor');
var $text1 = document.querySelector('#desc');
editor2.customConfig.onchange = function (html) {
// 監控變化，同步更新到 textarea
$text1.value = html;
};
// 配置服務器端地址
editor2.customConfig.uploadImgServer = 'http://localhost:7001/upload'
editor2.create()
</script>
</body>
</html>
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>非模塊化方式使用layui</title>
<link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>
<!-- 你的HTML代碼 -->
<script src="./layui/layui.all.js"></script>
<script>
//由於模塊都一次性加載，因此不用執行 layui.use() 來加載對應模塊，直接使用即可：
;!function(){
var layer = layui.layer
,form = layui.form;
layer.msg('Hello World');
}();
</script>
</body>
</html>