目录
网站的前台和后台
完整的网站系统一般分为前台和后台。前台是指匿名用户可以访问的内容,后台是指管理员能操作的部分。前台和后台的界面设计风格不一样。前台界面要求美观,能吸引大众的眼球。后台界面要求很一般,很注意实用性,不讲究花哨。
网上提供了很多后台ui框架,能够节省程序员设计网页的时间。其中layui框架就是目前经常使用的框架之一。
layui的官方网站
你可以从官方网站下载框架代码,或者码云https://www.layui.com/下载。
layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。
layui框架核心部分的目录结构
thinkphp5中使用layui
把layui框架放到public/static目录下
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试layui</title>
<link rel="stylesheet" href="__STATIC__/layui/css/layui.css">
</head>
<body>
<button type="button" class="layui-btn" id="btn">点击我</button>
<script type="text/javascript" src="__STATIC__/layui/layui.js"></script>
<script>
layui.use(['layer','jquery'], function () {
var layer = layui.layer,
$ = layui.$ //使用jquery
$('#btn').click(function () {
layer.msg('hello world')
})
})
</script>
</body>
</html>
layui可以按需加载各个模块,属于“模块化”设计结构。
['layer','jquery'] 表示即可使用的功能模块,一个是layui弹层,另一个是jquery