yunzerwebsite/yunzer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

前端应用文章模块并显示

Browse Source
This commit is contained in:
云泽网
2025-05-09 23:53:34 +08:00
parent e7bcaf29f5
commit d5da3a6ea8
40 changed files with 2990 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/admin/controller/Article.php
+64 -48
View File
@@ -13,31 +13,21 @@ class Article extends Base
// 文章列表
public function articlelist()
{
if (Request::isPost()) {
$lists = Db::table('yz_article')
->where('delete_time', null)
->where('status', '<>', 3)
->order('id DESC')
->select()
->each(function ($item) {
$item['create_time'] = date('Y-m-d H:i:s', strtotime($item['create_time']));
$item['publishdate'] = $item['publishdate'] ? date('Y-m-d H:i:s', strtotime($item['publishdate'])) : '';
return $item;
});
return json(['code' => 0, 'msg' => '获取成功', 'data' => $lists]);
} else {
$lists = Db::table('yz_article')
->where('delete_time', null)
->where('status', '<>', 3)
->order('id DESC')
->select()
->each(function ($item) {
$item['create_time'] = date('Y-m-d H:i:s', strtotime($item['create_time']));
return $item;
});
View::assign(['lists' => $lists]);
return View::fetch();
}
$lists = Db::table('yz_article')
->where('delete_time', null)
->where('status', '<>', 3)
->order('id DESC')
->select()
->each(function ($item) {
$item['cate'] = Db::table('yz_article_category')->where('id', $item['cate'])->value('name');
$item['create_time'] = date('Y-m-d H:i:s', $item['create_time']);
$item['publishdate'] = $item['publishdate'] ? date('Y-m-d H:i:s', $item['publishdate']) : '';
return $item;
});
View::assign([
'lists' => $lists
]);
return View::fetch();
}
// 添加文章
@@ -52,8 +42,8 @@ class Article extends Base
'author' => input('post.author'),
'desc' => input('post.desc'),
'status' => input('post.status', 2),
'publishdate' => date('Y-m-d H:i:s', time()),
'create_time' => date('Y-m-d H:i:s', time())
'publishdate' => time(),
'create_time' => time()
];
$insert = Db::table('yz_article')->insert($data);
@@ -66,7 +56,7 @@ class Article extends Base
->order('id DESC')
->select()
->each(function ($item, $key) {
$item['create_time'] = date('Y-m-d H:i:s', $item['create_time']);
$item['create_time'] = time();
return $item;
});
View::assign([
@@ -80,28 +70,46 @@ class Article extends Base
public function edit()
{
if (Request::isPost()) {
$article_id = input('post.article_id');
$id = input('get.id');
$data = [
'title' => input('post.title'),
'cate' => input('post.cate'),
'image' => input('post.image'),
'content' => input('post.content'),
'author' => input('post.author'),
'status' => input('post.status', 1),
'desc' => input('post.desc'),
'status' => input('post.status', 2),
'update_time' => time()
];
$update = Db::table('yz_article')
->where('article_id', $article_id)
->update($data);
if ($update === false) {
return json(['code' => 1, 'msg' => '更新失败', 'data' => []]);
}
return json(['code' => 0, 'msg' => '更新成功', 'data' => []]);
$update = Db::table('yz_article')->where('id', $id)->update($data);
return json(['code' => $update === false ? 1 : 0, 'msg' => $update === false ? '更新失败' : '更新成功', 'data' => []]);
} else {
$article_id = input('get.article_id');
$info = Db::table('yz_article')->where('article_id', $article_id)->find();
$id = input('get.id');
$info = Db::table('yz_article')->where('id', $id)->find();
if ($info === null) {
return json(['code' => 1, 'msg' => '文章不存在', 'data' => []]);
}
$cates = Db::table('yz_article_category')
->where('delete_time', null)
->where('status', 1)
->order('sort asc, id asc')
->select()
->toArray();
$info['content'] = !empty($info['content']) ? htmlspecialchars_decode(str_replace(["\r\n", "\r", "\n"], '', addslashes($info['content']))) : '';
$currentCate = Db::table('yz_article_category')
->where('id', $info['cate'])
->where('delete_time', null)
->where('status', 1)
->find();
$info['cate_name'] = $currentCate ? $currentCate['name'] : '';
View::assign([
'info' => $info
'info' => $info,
'cates' => $cates
]);
return View::fetch();
}
@@ -112,7 +120,7 @@ class Article extends Base
{
$id = input('post.id');
$data = [
'delete_time' => date('Y-m-d H:i:s', time()),
'delete_time' => time(),
];
$delete = Db::table('yz_article')->where('id', $id)->update($data);
if ($delete === false) {
@@ -136,7 +144,11 @@ class Article extends Base
->where('status', 1)
->order('id asc')
->page($page, $limit)
->select();
->select()
->each(function ($item) {
$item['create_time'] = date('Y-m-d H:i:s', $item['create_time']);
return $item;
});
return json(['code' => 0, 'msg' => '获取成功', 'data' => $lists]);
} else {
// 获取分类列表
@@ -144,7 +156,11 @@ class Article extends Base
->where('delete_time', null)
->where('status', 1)
->order('id asc')
->select();
->select()
->each(function ($item) {
$item['create_time'] = date('Y-m-d H:i:s', $item['create_time']);
return $item;
});
View::assign([
'lists' => $lists
@@ -192,7 +208,7 @@ class Article extends Base
{
if (Request::isPost()) {
// 将时间戳转换为 'Y-m-d H:i:s' 格式
$currentDateTime = date('Y-m-d H:i:s');
$currentDateTime = time();
$data = [
'name' => input('post.name'),
'cid' => input('post.cid'),
@@ -211,7 +227,7 @@ class Article extends Base
->order('id DESC')
->select()
->each(function ($item, $key) {
$item['create_time'] = date('Y-m-d H:i:s', strtotime($item['create_time']));
$item['create_time'] = time();
return $item;
});
View::assign([
@@ -231,7 +247,7 @@ class Article extends Base
'cid' => input('post.cid'),
'sort' => input('post.sort', 0),
'status' => input('post.status', 1),
'update_time' => date('Y-m-d H:i:s')
'update_time' => time()
];
$update = Db::table('yz_article_category')
@@ -269,7 +285,7 @@ class Article extends Base
$delete = Db::table('yz_article_category')
->where('id', $id)
->update(['delete_time' => date('Y-m-d H:i:s')]);
->update(['delete_time' => time()]);
if ($delete === false) {
return json(['code' => 1, 'msg' => '删除失败', 'data' => []]);
app/admin/view/article/add.php
+60 -12
View File
@@ -68,7 +68,7 @@
<div class="layui-input-block">
<div id="editor—wrapper" id="content" name="content" style="border: 1px solid #ccc;">
<div id="toolbar-container" style="border-bottom: 1px solid #ccc;"><!-- 工具栏 --></div>
<div id="editor-container" style="height: 500px;"><!-- 编辑器 --></div>
<div id="editor-container" style="height: 800px;"><!-- 编辑器 --></div>
</div>
</div>
</div>
@@ -174,9 +174,7 @@
if (res.code == 0) {
layer.msg(res.msg, { icon: 1 });
setTimeout(function () {
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
parent.location.reload();
window.location.href = '{:url("article/articlelist")}';
}, 1000);
} else {
layer.msg(res.msg, { icon: 2 });
@@ -185,12 +183,6 @@
});
return false;
});
// 返回上一页
function goBack() {
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
}
});
</script>
@@ -200,14 +192,63 @@
const { createEditor, createToolbar } = window.wangEditor
const editorConfig = {
MENU_CONF: {},
placeholder: '请输入内容...',
onChange(editor) {
const html = editor.getHtml()
// console.log('editor content', html)
// 也可以同步到 <textarea>
},
}
// 配置图片上传
editorConfig.MENU_CONF['uploadImage'] = {
server: '{:url("index/upload_imgs")}',
fieldName: 'file',
maxFileSize: 10 * 1024 * 1024, // 10M
maxNumberOfFiles: 10,
allowedFileTypes: ['image/*'],
meta: {
token: 'xxx'
},
metaWithUrl: true,
headers: {
Accept: 'text/x-json'
},
timeout: 5 * 1000, // 5s
onBeforeUpload(file) {
console.log('准备上传图片', file)
return file
},
onProgress(progress) {
console.log('上传进度', progress)
},
onSuccess(file, res) {
console.log('上传成功', file, res)
},
onFailed(file, res) {
layer.msg('上传失败：' + res.msg, { icon: 2 })
console.log('上传失败', file, res)
},
onError(file, err, res) {
layer.msg('上传出错：' + err.message, { icon: 2 })
console.error('上传出错', file, err, res)
},
customInsert(res, insertFn) {
// res 即服务端的返回结果
if (res.code === 0 && res.data) {
// 从res.data中获取src字段
const url = String(res.data.src || '');
if (url) {
insertFn(url);
} else {
layer.msg('图片地址无效', { icon: 2 });
}
} else {
layer.msg('图片上传失败', { icon: 2 });
}
}
}
const editor = createEditor({
selector: '#editor-container',
html: '<p><br></p>',
@@ -223,4 +264,11 @@
config: toolbarConfig,
mode: 'default', // or 'simple'
})
</script>
<script>
//返回文章列表
function goBack() {
window.location.href = '{:url("article/articlelist")}';
}
</script>
app/admin/view/article/articlelist.php
+1 -8
View File
@@ -73,14 +73,7 @@
}
function edit(id) {
layer.open({
type: 2,
title: '编辑文章',
shadeClose: true,
shade: 0.8,
area: ['800px', '600px'],
content: '{:url("article/edit")}?id=' + id
});
window.location.href = '{:url("article/edit")}?id=' + id;
}
function del(id) {
app/admin/view/article/edit.php
+285
View File
@@ -0,0 +1,285 @@
{include file="public/header" /}
<div class="config-container">
<div class="config-header" style="display:flex;justify-content: space-between;">
<div>
<span>编辑文章</span>
</div>
<div>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="goBack()">
<i class="layui-icon layui-icon-return"></i>返回
</button>
</div>
</div>
<form class="layui-form" action="" method="post">
<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" value="{$info.title}">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">分类</label>
<div class="layui-input-block">
<select name="cate" lay-verify="required">
<option value="">请选择分类</option>
{foreach $cates as $item}
<option value="{$item.id}" {if $info.cate==$item.id}selected{/if}>{$item.name}</option>
{/foreach}
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">描述</label>
<div class="layui-input-block">
<textarea name="desc" placeholder="请输入描述内容" class="layui-textarea">{$info.desc}</textarea>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">作者</label>
<div class="layui-input-block">
<input type="text" name="author" required lay-verify="required" placeholder="请输入作者" autocomplete="off"
class="layui-input" value="{$info.author}">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">封面</label>
<div class="layui-input-block">
<button type="button" class="layui-btn" id="upload-btn">
<i class="layui-icon layui-icon-upload"></i> 图片上传
</button>
<div style="width: 120px;">
<div class="layui-upload-list">
<img class="layui-upload-img" id="upload-img"
style="width: 118px; height: 118px;object-fit: cover;" src="{$info.image}">
<div id="upload-text"></div>
</div>
<div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
<div class="layui-progress-bar" lay-percent=""></div>
</div>
<input type="hidden" name="image" id="image" value="{$info.image}">
</div>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">内容</label>
<div class="layui-input-block">
<div id="editor—wrapper" id="content" name="content" style="border: 1px solid #ccc;">
<div id="toolbar-container" style="border-bottom: 1px solid #ccc;"><!-- 工具栏 --></div>
<div id="editor-container" style="height: 800px;"><!-- 编辑器 --></div>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formSubmit">立即提交</button>
<button class="layui-btn layui-btn-primary" lay-submit lay-filter="formDraft">存草稿</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
<script src="/static/js/wangeditor.js"></script>
<script>
layui.use(['form', 'layer'], function () {
var form = layui.form;
var layer = layui.layer;
var $ = layui.jquery;
var upload = layui.upload;
var element = layui.element;
// 图片上传
var uploadInst = upload.render({
elem: '#upload-btn',
url: '{:url("index/upload_img")}', // 上传图片接口
before: function (obj) {
// 预读本地文件示例，不支持ie8
obj.preview(function (index, file, result) {
$('#upload-img').attr('src', result); // 图片链接（base64）
});
element.progress('filter-demo', '0%'); // 进度条复位
layer.msg('上传中', { icon: 16, time: 0 });
},
done: function (res) {
// 若上传失败
if (res.code > 0) {
return layer.msg('上传失败');
}
// 上传成功
$('#image').val(res.data); // 设置图片路径到隐藏输入框
$('#upload-text').html(''); // 置空上传失败的状态
layer.msg('上传成功', { icon: 1 });
},
uploadError: function () { // 这里改为 uploadError
// 演示失败状态，并实现重传
var demoText = $('#upload-text');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function () {
uploadInst.upload();
});
},
// 进度条
progress: function (n, elem, e) {
element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
if (n == 100) {
layer.msg('上传完毕', { icon: 1 });
}
}
});
// 获取分类列表
$.get('{:url("article/getcate")}', function (res) {
if (res.code == 0) {
var html = '<option value="">请选择分类</option>';
res.data.forEach(function (item) {
// 如果cid为0，则设置为禁用
var disabled = item.cid == 0 ? 'disabled' : '';
var selected = item.id == '{$info.cate}' ? 'selected' : '';
html += '<option value="' + item.id + '" ' + disabled + ' ' + selected + '>' + item.name + '</option>';
// 如果有子分类，添加子分类选项
if (item.children && item.children.length > 0) {
item.children.forEach(function (child) {
var childSelected = child.id == '{$info.cate}' ? 'selected' : '';
html += '<option value="' + child.id + '" ' + childSelected + '>├─ ' + child.name + '</option>';
});
}
});
$('select[name="cate"]').html(html);
form.render('select');
} else {
layer.msg(res.msg, { icon: 2 });
}
});
// 表单提交
form.on('submit(formSubmit)', function (data) {
// 获取编辑器内容
var content = editor.getHtml();
if (!content || content === '<p><br></p>') {
layer.msg('请输入文章内容', { icon: 2 });
return false;
}
var loadIndex = layer.load(2);
data.field.content = content;
$.ajax({
url: '{:url("article/edit")}?id={$info.id}',
type: 'POST',
data: data.field,
success: function (res) {
layer.close(loadIndex);
if (res.code == 0) {
layer.msg(res.msg, { icon: 1 });
setTimeout(function () {
window.location.href = '{:url("article/articlelist")}';
}, 1000);
} else {
layer.msg(res.msg, { icon: 2 });
}
}
});
return false;
});
// 返回上一页
function goBack() {
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
}
});
</script>
<!-- wangeditor编辑器脚本 -->
<script>
const { createEditor, createToolbar } = window.wangEditor
const editorConfig = {
MENU_CONF: {},
placeholder: '请输入内容...',
onChange(editor) {
const html = editor.getHtml()
},
}
// 配置图片上传
editorConfig.MENU_CONF['uploadImage'] = {
server: '{:url("index/upload_imgs")}',
fieldName: 'file',
maxFileSize: 10 * 1024 * 1024, // 10M
maxNumberOfFiles: 10,
allowedFileTypes: ['image/*'],
meta: {
token: 'xxx'
},
metaWithUrl: true,
headers: {
Accept: 'text/x-json'
},
timeout: 5 * 1000, // 5s
onBeforeUpload(file) {
console.log('准备上传图片', file)
return file
},
onProgress(progress) {
console.log('上传进度', progress)
},
onSuccess(file, res) {
console.log('上传成功', file, res)
},
onFailed(file, res) {
layer.msg('上传失败：' + res.msg, { icon: 2 })
console.log('上传失败', file, res)
},
onError(file, err, res) {
layer.msg('上传出错：' + err.message, { icon: 2 })
console.error('上传出错', file, err, res)
},
customInsert(res, insertFn) {
// res 即服务端的返回结果
if (res.code === 0 && res.data) {
// 从res.data中获取src字段
const url = String(res.data.src || '');
if (url) {
insertFn(url);
} else {
layer.msg('图片地址无效', { icon: 2 });
}
} else {
layer.msg('图片上传失败', { icon: 2 });
}
}
}
const editor = createEditor({
selector: '#editor-container',
html: `{$info.content|raw|default=''}`,
config: editorConfig,
mode: 'default', // or 'simple'
})
const toolbarConfig = {}
const toolbar = createToolbar({
editor,
selector: '#toolbar-container',
config: toolbarConfig,
mode: 'default', // or 'simple'
})
</script>
<script>
//返回文章列表
function goBack() {
window.location.href = '{:url("article/articlelist")}';
}
</script>