目录
一、登录页面/注册页面
1.HTMl、CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录&注册</title>
<link rel="stylesheet" href="/assets/lib/layui/css/layui.css">
<link rel="stylesheet" href="/assets/css/login.css">
</head>
<body>
<!-- 顶部logo -->
<div class="layui-main">
<img src="/assets/images/logo.png" alt="">
</div>
<!-- 中心区域后台管理系统 -->
<div class="center">
<div class="top"></div>
<!-- 登录 -->
<div class="register">
<form id="FormData" class="layui-form" action="">
<!-- 用户名 -->
<div class="layui-form-item">
<i class="layui-icon layui-icon-username"></i>
<input type="text" name="username" required lay-verify="required|username" placeholder="请输入用户名"
autocomplete="off" class="layui-input">
</div>
<!-- 密码 -->
<div class="layui-form-item">
<i class="layui-icon layui-icon-password"></i>
<input type="text" name="password" required lay-verify="required|password" placeholder="请输入密码"
autocomplete="off" class="layui-input">
</div>
<!-- 按钮 -->
<div class="layui-form-item">
<button class="layui-btn layui-btn-normal layui-btn-fluid" lay-submit
lay-filter="formDemo">登录</button>
</div>
<!-- a -->
<div id="zhcy" class="layui-form-item">
<a href="javascript:;">注册</a>
</div>
</form>
</div>
<!-- 注册 -->
<div class="login" style="display: none;">
<form id="Form" class="layui-form" action="">
<!-- 用户名 -->
<div class="layui-form-item">
<i class="layui-icon layui-icon-username"></i>
<input type="text" name="username" required lay-verify="required|username" placeholder="请输入用户名"
autocomplete="off" class="layui-input">
</div>
<!-- 密码 -->
<div class="layui-form-item">
<i class="layui-icon layui-icon-password"></i>
<input type="text" name="password" required lay-verify="required|password" placeholder="请输入密码"
autocomplete="off" class="layui-input">
</div>
<!-- 再次输入密码 -->
<div class="layui-form-item">
<i class="layui-icon layui-icon-password"></i>
<input type="text" name="repassword" required lay-verify="required|repassword" placeholder="请再次输入密码"
autocomplete="off" class="layui-input">
</div>
<!-- 按钮 -->
<div class="layui-form-item">
<button class="layui-btn layui-btn-normal layui-btn-fluid" lay-submit
lay-filter="formDemo">注册</button>
</div>
<!-- a -->
<div id="dengue" class="layui-form-item">
<a href="javascript:;">登录</a>
</div>
</form>
</div>
</div>
<script src="/assets/lib/layui/layui.all.js"></script>
<script src="/assets/lib/jquery.js"></script>
<script src="/assets/lib/axios.js"></script>
<script src="/assets/js/login.js"></script>
</body>
</html>body {
background: url('/assets/images/login_bg.jpg') no-repeat;
background-size: cover;
}
.layui-main {
margin-top: 20px;
}
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 310px;
background-color: #fff;
}
.top {
height: 60px;
background: url('/assets/images/login_title.png') no-repeat center;
}
.layui-form a {
font-size: 12px;
}
form {
padding: 0 30px;
}
.layui-form-item {
position: relative;
}
.layui-icon {
position: absolute;
left: 10px;
top: 10px;
}
.layui-form input {
padding-left: 30px;
}2、JavaScript
$(function () {
// 登录
$("#zhcy").on("click", function () {
$('.login').show()
$(".register").hide()
})
// 注册
$("#dengue").on("click", function () {
$(".register").show()
$('.login').hide()
})
const form = layui.form
// 注册正则判断
form.verify({
username: [
/^[a-zA-Z0-9]{1,10}$/,
'用户名必须是1-10位字母和数字'
],
password: [
/^[\S]{6,15}$/,
'密码长度必须是6-15位的非空字符串'
],
repassword: function (value) {
// 判断确认密码要和新密码一致
let txt = $('#Form [name=password]').val()
// console.log(txt);
if (txt != value) {
return '两次密码不一致'
}
}
})
// 注册
$("#Form").on("submit", function (e) {
e.preventDefault()
axios({
url: 'http://www.liulongbin.top:3007/api/reguser',
method: 'POST',
data: $(this).serialize()
}).then(res => {
//成功回调
console.log(res)
if (res.data.status != 0) {
return layer.msg(res.data.message)
}
// 成功
layer.msg(res.data.message)
setTimeout(function () {
$("#dengue").click()
}, 500)
});
})
// 登录
$('#FormData').on("submit", function (e) {
//阻止form表单默认提交
e.preventDefault()
axios({
url: 'http://www.liulongbin.top:3007/api/login',
method: 'POST',
data: $(this).serialize()
}).then(res => {
//成功回调
console.log(res)
if (res.data.status != 0) {
return layer.msg('用户名或者密码错误')
}
// 成功
// 跳转到index首页并且保存token
layer.msg('登录成功')
setTimeout(function () {
location.href = '/index.html'
}, 1000)
localStorage.setItem('token', res.data.token)
});
})
})
二、index首页
1、HTML、CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>大事件管理后台</title>
<link rel="stylesheet" href="/assets/lib/layui/css/layui.css">
<link rel="stylesheet" href="/assets/fonts/iconfont.css">
<link rel="stylesheet" href="/assets/css/index.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo layui-hide-xs"><img src="/assets/images/logo.png" alt=""></div>
<!-- 头部区域（可配合layui 已有的水平导航） -->
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item layui-hide layui-show-md-inline-block">
<a class="profile" href="javascript:;">
<img style="display: none;" src="/assets/images/sample2.jpg" class="layui-nav-img">
<span class="wenzi">C</span> 个人中心
</a>
<dl class="layui-nav-child">
<dd><a href="">基本资料</a></dd>
<dd><a href="">更换头像</a></dd>
<dd><a href="">重置密码</a></dd>
</dl>
</li>
<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
<a href="javascript:;" class="tuichu">
<span class="iconfont icon-tuichu"></span></i>退出
</a>
</li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<div class="profile">
<img style="display: none;" src="/assets/images/sample2.jpg" class="layui-nav-img">
<span class="wenzi">C</span>
<span class="hy"> 欢迎 </span>
</div>
<ul class="layui-nav layui-nav-tree" lay-filter="test" lay-shrink='all'>
<li class="layui-nav-item layui-this"><a href="/home/dashboard.html" target="fm"><span
class="iconfont icon-home"></span>首页</a></li>
<li class="layui-nav-item">
<a class="" href="javascript:;"><span class="iconfont icon-16"></span>文章管理</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;"><i class="layui-icon layui-icon-app"></i>文章类别</a></dd>
<dd><a href="javascript:;"><i class="layui-icon layui-icon-app"></i>文章列表</a></dd>
<dd><a href="javascript:;"><i class="layui-icon layui-icon-app"></i>发表文章</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;"><span class="iconfont icon-user"></span>个人中心</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;"><i class="layui-icon layui-icon-app"></i>基本资料</a></dd>
<dd><a href="javascript:;"><i class="layui-icon layui-icon-app"></i>更换头像</a></dd>
<dd><a href=""><i class="layui-icon layui-icon-app"></i>重置密码</a></dd>
</dl>
</li>
</ul>
</div>
</div>
<div class="layui-body">
<!-- 内容主体区域 -->
<iframe name="fm" src="/home/dashboard.html" frameborder="0"></iframe>
</div>
</div>
<script src="/assets/lib/layui/layui.all.js"></script>
<script src="/assets/lib/jquery.js"></script>
<script src="/assets/lib/axios.js"></script>
<script src="/assets/js/commom.js"></script>
<script src="/assets/js/index.js"></script>
</body>
</html>.layui-layout a {
font-size: 13px;
}
.iconfont {
margin-right: 6px;
}
.layui-icon {
margin-left: 15px;
margin-right: 6px;
}
.layui-body {
overflow: hidden;
}
iframe {
width: 100%;
height: 100%;
}
.layui-footer {
text-align: center;
font-size: 12px;
}
.profile {
height: 60px;
text-align: center;
line-height: 60px;
}
.layui-side-scroll .profile {
height: 70px;
line-height: 70px;
}
.wenzi {
display: inline-block;
width: 30px;
height: 30px;
background-color: #5885e8;
line-height: 30px;
border-radius: 50%;
}2、JavaScript
// 入口函数
$(function () {
// 渲染页面用户信息，作为全局变量
index()
// 退出
$(".tuichu").on("click", function () {
layer.confirm('确认退出登录吗？', { icon: 3, title: '提示' }, function (index) {
//do something
location.href = '/login.html'
localStorage.removeItem("token")
layer.close(index);
});
})
})
// 渲染用户信息，设置为全局变量
function index() {
axios({
url: '/my/userinfo',
method: 'GET',
}).then(res => {
//成功回调
// console.log(res)
if (res.data.status != 0) {
return layer.msg(res.data.message)
}
// 成功则渲染里面的图片和文字
getData(res.data.data)
});
}
function getData(res) {
// 渲染文字
let name = res.nickname || res.username
$('.hy').html(`  欢迎 ${name}`)
// 渲染头像
if (res.user_pic != null) {
$('.layui-nav-img').show().attr('src', res.user_pic)
$('.wenzi').hide()
} else {
$('.layui-nav-img').hide()
let first = name[0].toUpperCase()
$('.wenzi').show().html(first)
}
}三、个人中心-基本资料
1、HTML、CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/assets/lib/layui/css/layui.css">
<link rel="stylesheet" href="/assets/fonts/iconfont.css">
<link rel="stylesheet" href="/assets/css/user/user_data.css">
</head>
<body>
<div class="layui-card">
<div class="layui-card-header">修改用户信息</div>
<div class="layui-card-body">
<form class="layui-form" action="" lay-filter="form">
<!-- 登录名称 -->
<div class="layui-form-item">
<label class="layui-form-label">登录名称</label>
<input type="hidden" name="id">
<div class="layui-input-block">
<input type="text" name="username" 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-block">
<input type="text" name="nickname" required lay-verify="required|nickname" placeholder="请输入用户昵称"
autocomplete="off" class="layui-input" maxlength="10">
</div>
</div>
<!-- 用户邮箱 -->
<div class="layui-form-item">
<label class="layui-form-label">用户邮箱</label>
<div class="layui-input-block">
<input type="text" name="email" required lay-verify="required|email" placeholder="请输入用户邮箱"
autocomplete="off" class="layui-input">
</div>
</div>
<!-- 按钮 -->
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">提交修改</button>
<button id="chongjin" type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</div>
<script src="/assets/lib/layui/layui.all.js"></script>
<script src="/assets/lib/jquery.js"></script>
<script src="/assets/lib/axios.js"></script>
<script src="/assets/js/commom.js"></script>
<script src="/assets/js/user/user_data.js"></script>
</body>
</html>body {
background-color: #f2f2f2;
padding: 15px;
}
form {
width: 500px;
}2、JS
$(function () {
let form = layui.form
apply()// 渲染用户信息
function apply() {
axios({
url: '/my/userinfo',
method: 'GET',
}).then(res => {
//成功回调
// console.log(res)
if (res.data.status != 0) {
return layer.msg(res.data.message)
}
// 成功
form.val('form', res.data.data);
});
}
// 修改用户信息
$("form").on('submit', function (e) {
// 阻止表单默认提交
e.preventDefault()
axios({
url: '/my/userinfo',
method: 'POST',
data: $(this).serialize()
}).then(res => {
//成功回调
// console.log(res)
if (res.data.status != 0) {
return layer.msg(res.data.message)
}
// 成功
layer.msg('修改用户信息成功')
// index页面实时更新
window.parent.index()
});
})
//重置按钮
$("#chongjin").on("click", function (e) {
e.preventDefault()
apply()
})
//正则表达式
form.verify({
nickname: [
/^[\S]{1,10}$/,
'昵称的长度为1-10的非空字符串'
]
})
})三、个人中心-修改密码
1、HTMl、CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/assets/lib/layui/css/layui.css">
<link rel="stylesheet" href="/assets/fonts/iconfont.css">
<link rel="stylesheet" href="/assets/css/user/user_password.css">
</head>
<body>
<div class="layui-card">
<div class="layui-card-header">修改密码</div>
<div class="layui-card-body">
<form class="layui-form" action="" lay-filter="form">
<!-- 登录名称 -->
<div class="layui-form-item">
<label class="layui-form-label">原密码</label>
<input type="hidden" name="id">
<div class="layui-input-block">
<input type="text" name="oldPwd" required lay-verify="required|oldPwd" placeholder="请输入原密码"
autocomplete="off" class="layui-input">
</div>
</div>
<!-- 新密码 -->
<div class="layui-form-item">
<label class="layui-form-label">新密码</label>
<div class="layui-input-block">
<input type="text" name="newPwd" required lay-verify="required|oldPwd|newPwd"
placeholder="请输入新密码" autocomplete="off" class="layui-input" maxlength="10">
</div>
</div>
<!-- 确认新密码 -->
<div class="layui-form-item">
<label class="layui-form-label">确认新密码</label>
<div class="layui-input-block">
<input type="text" name="RenewPwd" required lay-verify="required|oldPwd|RenewPwd"
placeholder="请确认新密码" autocomplete="off" class="layui-input">
</div>
</div>
<!-- 按钮 -->
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">修改密码</button>
<button id="chongjin" type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</div>
<script src="/assets/lib/layui/layui.all.js"></script>
<script src="/assets/lib/jquery.js"></script>
<script src="/assets/lib/axios.js"></script>
<script src="/assets/js/commom.js"></script>
<script src="/assets/js/user/user_password.js"></script>
</body>
</html>body {
background-color: #f2f2f2;
padding: 15px;
}
form {
width: 500px;
}2、JS
$(function () {
// 正则表达式
let form = layui.form
form.verify({
oldPwd: [
/^[\S]{6,15}$/,
'密码的必须是6-15位的非空字符'
],
// 新密码不能与旧密码相同
newPwd: function (value) {
let v1 = $('[name=oldPwd]').val()
if (value == v1) {
return '新密码不能与旧密码相同'
}
},
// 确认密码要和新密码相同
RenewPwd: function (value) {
let v2 = $("[name=newPwd]").val()
if (value != v2) {
return '两次密码不一致'
}
}
})
// 修改密码
$("form").on('submit', function (e) {
e.preventDefault()
axios({
url: '/my/updatepwd',
method: 'POST',
data: $(this).serialize()
}).then(res => {
//成功回调
console.log(res)
if (res.data.status != 0) {
return layer.msg(res.data.message)
}
// 成功
layer.msg(res.data.message)
setTimeout(function () {
window.parent.location.href = '/login.html'
}, 1000)
localStorage.removeItem('token')
});
})
})四、个人中心-更换头像
1、HTML、CSS
body {
background-color: #f2f2f2;
padding: 15px;
}
form {
width: 500px;
}
/* 设置卡片主体区域的宽度 */
.layui-card-body {
width: 500px;
}
/* 设置按钮行的样式 */
.row2 {
display: flex;
justify-content: flex-end;
margin-top: 20px;
}
/* 设置裁剪区域的样式 */
.cropper-box {
width: 350px;
height: 350px;
background-color: cyan;
overflow: hidden;
}
/* 设置第一个预览区域的样式 */
.w100 {
width: 100px;
height: 100px;
background-color: gray;
}
/* 设置第二个预览区域的样式 */
.w50 {
width: 50px;
height: 50px;
background-color: gray;
margin-top: 50px;
}
/* 设置预览区域下方文本的样式 */
.size {
font-size: 12px;
color: gray;
text-align: center;
}
/* 设置图片行的样式 */
.row1 {
display: flex;
}
/* 设置 preview-box 区域的的样式 */
.preview-box {
display: flex;
flex-direction: column;
flex: 1;
align-items: center;
}
/* 设置 img-preview 区域的样式 */
.img-preview {
overflow: hidden;
border-radius: 50%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/assets/lib/layui/css/layui.css">
<link rel="stylesheet" href="/assets/lib/cropper/cropper.css" />
<link rel="stylesheet" href="/assets/css/user/user_pic.css">
</head>
<body>
<div class="layui-card">
<div class="layui-card-header">更换头像</div>
<div class="layui-card-body">
<!-- 第一行的图片裁剪和预览区域 -->
<div class="row1">
<!-- 图片裁剪区域 -->
<div class="cropper-box">
<!-- 这个 img 标签很重要，将来会把它初始化为裁剪区域 -->
<img id="image" src="/assets/images/sample.jpg" />
</div>
<!-- 图片的预览区域 -->
<div class="preview-box">
<div>
<!-- 宽高为 100px 的预览区域 -->
<div class="img-preview w100"></div>
<p class="size">100 x 100</p>
</div>
<div>
<!-- 宽高为 50px 的预览区域 -->
<div class="img-preview w50"></div>
<p class="size">50 x 50</p>
</div>
</div>
</div>
<!-- 第二行的按钮区域 -->
<div class="row2">
<input id="File" type="file" style="display: none;">
<button id="uploading" type="button" class="layui-btn">上传</button>
<button id="affirm" type="button" class="layui-btn layui-btn-danger">确定</button>
</div>
</div>
</div>
<script src="/assets/lib/layui/layui.all.js"></script>
<script src="/assets/lib/jquery.js"></script>
<script src="/assets/lib/cropper/Cropper.js"></script>
<script src="/assets/lib/cropper/jquery-cropper.js"></script>
<script src="/assets/lib/axios.js"></script>
<script src="/assets/js/commom.js"></script>
<script src="/assets/js/user/user_pic.js"></script>
</body>
</html>2、 js
$(function () {
// 1.1 获取裁剪区域的 DOM 元素
var $image = $('#image')
// 1.2 配置选项
const options = {
// 纵横比
aspectRatio: 1,
// 指定预览区域
preview: '.img-preview'
}
// 1.3 创建裁剪区域
$image.cropper(options)
// 点击上传按钮触发file文件选择框点击事件
$("#uploading").on("click", function () {
$("#File").click()
})
// file文件选择框change事件
$("#File").on("change", function (e) {
let file = e.target.files[0]
// console.log(file);
// 根据文件选择 创建一个对应的地址
let newImgURL = URL.createObjectURL(file)
$image
.cropper('destroy') // 销毁旧的裁剪区域
.attr('src', newImgURL) // 重新设置图片路径
.cropper(options) // 重新初始化裁剪区域
})
// 点击确认按钮
$("#affirm").on("click", function () {
var dataURL = $image
.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
width: 100,
height: 100
})
.toDataURL('image/png') // 将 Canvas 画布上的内容，转化为 base64 格式的字符串
axios({
url: '/my/update/avatar',
method: 'POST',
data: `avatar=${encodeURIComponent(dataURL)}`,
}).then(res => {
//成功回调
console.log(res)
if (res.data.status != 0) {
return layer.msg(res.data.message)
}
// 成功
layer.msg(res.data.message)
// index 页面实时刷新
window.parent.index()
});
})
})四、文章管理--文章类别
1、HTML、CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/assets/lib/layui/css/layui.css">
<link rel="stylesheet" href="/assets/css/article/article.sort.css">
</head>
<body>
<div class="layui-card">
<div class="layui-card-header">
<span>文章类别管理</span>
<button id="add" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit
lay-filter="formDemo">添加分类</button>
</div>
<div class="layui-card-body">
<table class="layui-table">
<colgroup>
<col width="150">
<col>
<col>
<col width="200">
</colgroup>
<thead>
<tr>
<th>序号</th>
<th>分类名称</th>
<th>分类别名</th>
<th>操作 </th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td>贤心</td>
<td>2016-11-29</td>
<td>人生就像是一场修行</td>
<td>
<button id="del" class="layui-btn layui-btn-danger layui-btn-xs" lay-submit
lay-filter="formDemo">删除</button>
<button id="xiugai" class="layui-btn layui-btn-xs" lay-submit
lay-filter="formDemo">修改</button>
</td>
</tr> -->
</tbody>
</table>
</div>
</div>
<script src="/assets/lib/layui/layui.all.js"></script>
<script src="/assets/lib/jquery.js"></script>
<script src="/assets/lib/axios.js"></script>
<script src="/assets/js/commom.js"></script>
<script src="/assets/js/article/article.sort.js"></script>
</body>
</html>body {
background-color: #f2f2f2;
padding: 15px;
}
.layui-card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
form {
padding-top: 20px;
padding-right: 30px;
}2、JS
$(function () {
let form = layui.form
// 渲染信息
getData()
function getData() {
axios({
url: '/my/article/cates',
method: 'GET',
}).then(res => {
//成功回调
// console.log(res)
if (res.data.status != 0) {
return layer.msg(res.data.message)
}
// 成功
let arr = []
res.data.data.forEach(value => {
arr.push(`
<tr>
<td>${value.Id}</td>
<td>${value.name}</td>
<td>${value.alias}</td>
<td>
<button data-id='${value.Id}' id="del" class="layui-btn layui-btn-danger layui-btn-xs" lay-submit
lay-filter="formDemo">删除</button>
<button data-id='${value.Id}' id="xiugai" class="layui-btn layui-btn-xs" lay-submit
lay-filter="formDemo">修改</button>
</td>
</tr>
`)
})
// 添加导tbody里
$('tbody').empty().html(arr.join(''))
});
}
let index = ''
// 添加分类
$("#add").on("click", function () {
index = layer.open({
title: '添加文章分类',
type: 1,
skin: 'layui-layer-lan',
area: ['500px', '250px']
, content: `
<form id="formData" class="layui-form" action="">
<!-- 分类名称 -->
<div class="layui-form-item">
<label class="layui-form-label">分类名称</label>
<div class="layui-input-block">
<input type="text" name="name" 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-block">
<input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别名" autocomplete="off"
class="layui-input">
</div>
</div>
<!-- 按钮 -->
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
`
});
})
// 点击确认添加 -- 事件委托
$('body').on('submit', '#formData', function (e) {
// 阻止表单默认提交
e.preventDefault()
axios({
url: '/my/article/addcates',
method: 'POST',
data: $(this).serialize()
}).then(res => {
//成功回调
// console.log(res)
if (res.data.status != 0) {
return layer.msg(res.data.message)
}
// 成功
layer.msg(res.data.message)
getData()
// 关闭弹出层
layer.close(index);
});
})
// 删除 -- 事件委托
$('tbody').on("click", '#del', function () {
//获取id
let id = $(this).attr('data-id')
layer.confirm('确认删除吗?', { icon: 3, title: '提示' }, function (index) {
//do something
axios({
url: '/my/article/deletecate/' + id,
method: 'get',
}).then(res => {
//成功回调
console.log(res)
if (res.data.status != 0) {
return layer.msg(res.data.message)
}
// 成功
layer.msg(res.data.message)
getData()
});
layer.close(index);
});
})
// 修改
$('tbody').on("click", '#xiugai', function () {
let id = $(this).attr('data-id')
index = layer.open({
title: '添加文章分类',
type: 1,
skin: 'layui-layer-lan',
area: ['500px', '250px']
, content: `
<form id="Formdata" class="layui-form" action="" lay-filter="Form">
<!-- 分类名称 -->
<div class="layui-form-item">
<input type="hidden" name="Id">
<label class="layui-form-label">分类名称</label>
<div class="layui-input-block">
<input type="text" name="name" 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-block">
<input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别名" autocomplete="off"
class="layui-input">
</div>
</div>
<!-- 按钮 -->
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
</div>
</div>
</form>
`
});
axios({
url: '/my/article/cates/' + id,
method: 'get',
}).then(res => {
//成功回调
// console.log(res)
if (res.data.status != 0) {
return layer.msg(res.data.message)
}
// 成功
form.val('Form', res.data.data);
});
})
//点击确认修改
$('body').on('submit', '#Formdata', function (e) {
e.preventDefault()
axios({
url: '/my/article/updatecate',
method: 'POST',
data: $(this).serialize()
}).then(res => {
//成功回调
console.log(res)
if (res.data.status != 0) {
return layer.msg(res.data.message)
}
// 成功
layer.msg(res.data.message)
getData()
// 关闭弹出层
layer.close(index);
});
})
})五、文章管理--发表文章
1、HTML、CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/assets/lib/layui/css/layui.css">
<link rel="stylesheet" href="/assets/lib/cropper/cropper.css" />
<link rel="stylesheet" href="/assets/css/article/article.data.css">
</head>
<body>
<div class="layui-card">
<div class="layui-card-header">写文章</div>
<div class="layui-card-body">
<form class="layui-form" action="">
<!-- 文章标题 -->
<div class="layui-form-item">
<label class="layui-form-label">文章标题</label>
<div class="layui-input-block">
<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-block">
<select name="cate_id" lay-verify="required">
<option value=""></option>
<!-- <option value="0">北京</option> -->
</select>
</div>
</div>
<!-- 文章内容 -->
<div class="layui-form-item">
<!-- 左侧的 label -->
<label class="layui-form-label">文章内容</label>
<!-- 为富文本编辑器外部的容器设置高度 -->
<div class="layui-input-block" style="height: 400px;">
<!-- 重要：将来这个 textarea 会被初始化为富文本编辑器 -->
<textarea name="content"></textarea>
</div>
</div>
<!-- 文章封面 -->
<div class="layui-form-item">
<!-- 左侧的 label -->
<label class="layui-form-label">文章封面</label>
<!-- 选择封面区域 -->
<div class="layui-input-block cover-box">
<!-- 左侧裁剪区域 -->
<div class="cover-left">
<img id="image" src="/assets/images/sample2.jpg" alt="" />
</div>
<!-- 右侧预览区域和选择封面区域 -->
<div class="cover-right">
<!-- 预览的区域 -->
<div class="img-preview"></div>
<!-- 选择封面按钮 -->
<input id="File" type="file" style="display: none;">
<button id="xuanze" type="button" class="layui-btn layui-btn-danger">选择封面</button>
</div>
</div>
</div>
<!-- 按钮 -->
<div class="layui-form-item">
<div class="layui-input-block">
<button id="fabu" class="layui-btn" lay-submit lay-filter="formDemo">发布</button>
<button id="caogao" class="layui-btn layui-btn-primary">存为草稿</button>
</div>
</div>
</form>
</div>
</div>
<script src="/assets/lib/layui/layui.all.js"></script>
<script src="/assets/lib/jquery.js"></script>
<script src="/assets/lib/axios.js"></script>
<script src="/assets/js/commom.js"></script>
<!-- 富文本 -->
<script src="/assets/lib/tinymce/tinymce.min.js"></script>
<script src="/assets/lib/tinymce/tinymce_setup.js"></script>
<script src="/assets/lib/cropper/Cropper.js"></script>
<script src="/assets/lib/cropper/jquery-cropper.js"></script>
<script src="/assets/js/article/article.data.js"></script>
</body>
</html>body {
background-color: #f2f2f2;
padding: 15px;
}
/* 封面容器的样式 */
.cover-box {
display: flex;
}
/* 左侧裁剪区域的样式 */
.cover-left {
width: 400px;
height: 280px;
overflow: hidden;
margin-right: 20px;
}
/* 右侧盒子的样式 */
.cover-right {
display: flex;
flex-direction: column;
align-items: center;
}
/* 预览区域的样式 */
.img-preview {
width: 200px;
height: 140px;
background-color: #ccc;
margin-bottom: 20px;
overflow: hidden;
}2、JS
$(function () {
let form = layui.form
// 渲染用户信息
getData()
function getData() {
axios({
url: '/my/article/cates',
method: 'GET',
}).then(res => {
//成功回调
// console.log(res)
if (res.data.status != 0) {
return layer.msg(res.data.message)
}
// 成功
let arr = []
res.data.data.forEach(value => {
arr.push(`<option value="${value.Id}">${value.name}</option>`)
})
// 添加到页面
$('select').empty().html(arr.join(''))
// 更新渲染
form.render('select'); //更新全部
});
}
// 初始化富文本编辑器
initEditor()
// 1. 初始化图片裁剪器
var $image = $('#image')
// 2. 裁剪选项
var options = {
aspectRatio: 400 / 280,
preview: '.img-preview'
}
// 3. 初始化裁剪区域
$image.cropper(options)
// 设置设置状态
let state = ''
$("#fabu").on("click", function () {
state = '已发布'
})
$("#caogao").on("click", function () {
state = '存为草稿'
})
// 选择选择封面触发file文件选择
$("#xuanze").on("click", function () {
$("#File").click()
})
// file change事件
$("#File").on("change", function (e) {
let file = e.target.files[0]
// 对应一个URL地址
let newImgURL = URL.createObjectURL(file)
$image
.cropper('destroy') // 销毁旧的裁剪区域
.attr('src', newImgURL) // 重新设置图片路径
.cropper(options) // 重新初始化裁剪区域
})
// 发布内容
$('form').on("submit", function (e) {
e.preventDefault()
// 创建FormDaat
let fd = new FormData(this)
fd.append('state', state)
console.log(...fd);
$image
.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
width: 400,
height: 280
})
.toBlob(function (blob) { // 将 Canvas 画布上的内容，转化为文件对象
// 得到文件对象后，进行后续的操作
fd.append('cover_img', blob)
// 发送ajax
axios({
url: '/my/article/add',
method: 'POST',
data: fd
}).then(res => {
//成功回调
console.log(res)
if (res.data.status != 0) {
return layer.msg(res.data.message)
}
// 成功
if (state == '已发布') {
layer.msg('发布成功')
} else if (state == '存为草稿') {
layer.msg('已存为草稿')
}
// 跳转到文章列表页，触发点击事件
setTimeout(function () {
window.parent.document.querySelector("#list").click()
}, 1000)
});
});
})
})六、文章管理--文章列表
1、HTML、CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/assets/lib/layui/css/layui.css">
<link rel="stylesheet" href="/assets/css/article/article.list.css">
</head>
<body>
<div class="layui-card">
<div class="layui-card-header">文章列表</div>
<div class="layui-card-body">
<form class="layui-form layui-form-pane" action="">
<!-- 分类 -->
<div class="layui-form-item layui-inline" pane>
<label class="layui-form-label">分类</label>
<div class="layui-input-block">
<select name="name" lay-verify="required">
<option value=""></option>
</select>
</div>
</div>
<!-- 状态 -->
<div class="layui-form-item layui-inline" pane>
<label class="layui-form-label">状态</label>
<div class="layui-input-block">
<select name="state" lay-verify="required">
<option value="">请选择状态</option>
<option value="已发布">已发布</option>
<option value="存为草稿">存为草稿</option>
</select>
</div>
</div>
<!-- 按钮 -->
<div class="layui-form-item layui-inline">
<button id="screen" class="layui-btn" lay-submit lay-filter="formDemo">筛选</button>
<button style="margin-left: 0px;" type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</form>
<!-- 表格 -->
<table class="layui-table">
<colgroup>
<col>
<col width="200">
<col width="200">
<col width="200">
<col width="200">
</colgroup>
<thead>
<tr>
<th>文章标题</th>
<th>分类</th>
<th>发表时间</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td>贤心</td>
<td>2016-11-29</td>
<td>人生就像是一场修行</td>
<td>人生就像是一场修行</td>
<td>
<button class="layui-btn layui-btn-danger layui-btn-xs" lay-submit
lay-filter="formDemo">删除</button>
<button type="reset" class="layui-btn layui-btn-xs">修改</button>
</td>
</tr> -->
</tbody>
</table>
<!-- 分页 -->
<div id="test1"></div>
</div>
</div>
<script src="/assets/lib/layui/layui.all.js"></script>
<script src="/assets/lib/jquery.js"></script>
<script src="/assets/lib/axios.js"></script>
<script src="/assets/js/commom.js"></script>
<script src="/assets/js/article/article.list.js"></script>
</body>
</html>body {
background-color: #f2f2f2;
padding: 15px;
}2、js
$(function () {
let form = layui.form
let p = {
pagenum: 1, // 是 int 页码值
pagesize: 3, // 是 int 每页显示多少条数据
cate_id: '', // 否 string 文章分类的 Id
state: '' // 否 string 文章的状态，可选值有：已发布、草稿
}
// 渲染表格
getData()
function getData() {
axios({
url: '/my/article/list',
method: 'get',
params: p
}).then(res => {
//成功回调
// console.log(res)
if (res.data.status != 0) {
return layui.msg(res.data.message)
}
// 成功
let arr = []
res.data.data.forEach(value => {
arr.push(`
<tr>
<td>${value.title}</td>
<td>${value.cate_name}</td>
<td>${value.pub_date}</td>
<td>${value.state}</td>
<td>
<button id="Del" data-id="${value.Id}" class="layui-btn layui-btn-danger layui-btn-xs" lay-submit
lay-filter="formDemo">删除</button>
</td>
</tr>
`)
})
$('tbody').empty().html(arr.join(''))
apple(res.data.total)
});
}
// 渲染分类
classify()
function classify() {
axios({
url: '/my/article/cates',
method: 'GET',
}).then(res => {
//成功回调
// console.log(res)
if (res.data.status != 0) {
return layer.msg(res.data.message)
}
// 成功
let arr = ['<option value="">请选择分类</option>']
res.data.data.forEach(value => {
arr.push(`<option value="${value.Id}">${value.name}</option>`)
})
$("[name=name]").empty().html(arr.join(''))
form.render(); //更新全部
});
}
// 筛选
$("#screen").on("click", function (e) {
e.preventDefault()
p.cate_id = $("[name=name]").val()
p.state = $("[name=state]").val()
getData()
})
// 分页
function apple(total) {
var laypage = layui.laypage;
//执行一个laypage实例
laypage.render({
elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
, count: total, //数据总数，从服务端得到
layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
curr: p.pagenum, // 起始页
limit: p.pagesize,
limits: [2, 3, 4, 5, 6],
jump: function (obj, first) {
//obj包含了当前分页的所有参数，比如：
// console.log(obj); //得到当前页，以便向服务端请求对应页的数据。
// console.log(first); //得到每页显示的条数
//首次不执行
if (!first) {
//do something
p.pagenum = obj.curr
p.pagesize = obj.limit
//更新页面
getData()
}
}
});
}
// 删除按钮
$("tbody").on("click", '#Del', function (e) {
e.preventDefault()
// 获取ID
let id = $(this).attr('data-id')
layer.confirm('确认删除吗?', { icon: 3, title: '提示' }, function (index) {
//do something
axios({
url: '/my/article/delete/' + id,
method: 'get',
}).then(res => {
//成功回调
// console.log(res)
if (res.data.status != 0) {
return layer.msg(res.data.message)
}
// 成功
layer.msg(res.data.message)
getData()
});
layer.close(index);
});
})
})
扫一扫
1592
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
