优化文章管理及展示
This commit is contained in:
parent
84037e376c
commit
c903bf77a7
@ -1,4 +1,5 @@
|
||||
const db = require("./db"); //
|
||||
const dayjs = require("dayjs");
|
||||
// 文章模块
|
||||
const router = require("express").Router();
|
||||
// 用户网站模块
|
||||
@ -11,13 +12,14 @@ router.get("/web/list", async function (req, res) {
|
||||
const start = (page - 1) * size;
|
||||
const search = "%" + (req.query["search"] || "") + "%"; // 搜索关键字
|
||||
try {
|
||||
|
||||
const listResult = await db.query(
|
||||
`select id,title,category,publish_time,cover,description,view_count,comment_count
|
||||
from article where (title like ? or content like ? ) and status = 1 limit ?,?`,
|
||||
from article where status = 1 and publish_time <= now() and (title like ? or content like ?) order by id desc limit ?,?`,
|
||||
[search, search, start, size]
|
||||
); // 执行查询语句并等待结果出来后赋值给变量
|
||||
const totalCount = await db.query(
|
||||
`select count(*) as total from article where (title like ? or content like ?) and status = 1`,
|
||||
`select count(*) as total from article where status = 1 and publish_time <= now() and (title like ? or content like ?)`,
|
||||
[search, search]
|
||||
); // 执行获取总条数
|
||||
res.send({
|
||||
@ -66,7 +68,7 @@ router.get("/admin/list", async function (req, res) {
|
||||
const search = "%" + (req.query["search"] || "") + "%"; // 搜索关键字
|
||||
try {
|
||||
const listResult = await db.query(
|
||||
`select * from article where (title like ? or content like ? ) and status > 0 limit ?,?`,
|
||||
`select * from article where (title like ? or content like ? ) and status > 0 order by id desc limit ?,? `,
|
||||
[search, search, start, size]
|
||||
); // 执行查询语句并等待结果出来后赋值给变量
|
||||
const totalCount = await db.query(
|
||||
@ -84,6 +86,9 @@ router.get("/admin/list", async function (req, res) {
|
||||
}
|
||||
});
|
||||
router.post("/admin/save", async function (req, res) {
|
||||
req.body.publish_time = dayjs(req.body.publish_time).format(
|
||||
"YYYY-MM-DD HH:mm:ss"
|
||||
);
|
||||
// 从请求参数中获取要更新的数据
|
||||
const {
|
||||
id,
|
||||
@ -94,36 +99,41 @@ router.post("/admin/save", async function (req, res) {
|
||||
description,
|
||||
view_count,
|
||||
comment_count,
|
||||
publish_time,
|
||||
} = req.body;
|
||||
const article = await db.query(
|
||||
`update article set title=?,
|
||||
|
||||
if (id > 0) {
|
||||
// 有id说明在更新数据
|
||||
await db.query(
|
||||
`update article set title=?,
|
||||
category=?,
|
||||
content=?,
|
||||
cover=?,
|
||||
description=?,
|
||||
view_count=?,comment_count=? where id =?`,
|
||||
[
|
||||
title,
|
||||
category,
|
||||
content,
|
||||
cover,
|
||||
description,
|
||||
view_count,
|
||||
comment_count,
|
||||
id
|
||||
]
|
||||
);
|
||||
view_count=?,comment_count=?,publish_time=? where id =?`,
|
||||
[
|
||||
title,
|
||||
category,
|
||||
content,
|
||||
cover,
|
||||
description,
|
||||
view_count,
|
||||
comment_count,
|
||||
publish_time,
|
||||
id,
|
||||
]
|
||||
);
|
||||
} else {
|
||||
await db.query("insert into article set ?", req.body);
|
||||
}
|
||||
res.send({ status: true });
|
||||
});
|
||||
|
||||
// 更新状态
|
||||
router.all("/admin/update", async function (req, res) {
|
||||
// 从请求参数中获取要更新的数据
|
||||
const {id,status} = req.query;
|
||||
await db.query(
|
||||
`update article set status=? where id =?`,
|
||||
[status,id]
|
||||
);
|
||||
const { id, status } = req.query;
|
||||
await db.query(`update article set status=? where id =?`, [status, id]);
|
||||
res.send({ status: true });
|
||||
});
|
||||
module.exports = router;
|
||||
|
||||
@ -32,11 +32,25 @@ export default {
|
||||
});
|
||||
this.list = ret.list;
|
||||
},
|
||||
showEdit(a) {
|
||||
// 不能直接赋值一个对象
|
||||
this.form = { ...a };
|
||||
this.showDialog = true;
|
||||
showAdd(){
|
||||
|
||||
// 不能直接赋值一个对象
|
||||
this.form = {
|
||||
category: "",
|
||||
comment_count: 0,
|
||||
content: "",
|
||||
cover: "",
|
||||
description: "",
|
||||
id: 0,
|
||||
publish_time: null,
|
||||
status: 1,
|
||||
title: "",
|
||||
view_count: 0,
|
||||
};
|
||||
this.showDialog = true;
|
||||
this.showEditor('')
|
||||
},
|
||||
showEditor(content){
|
||||
if (editor == null) {
|
||||
// 将回调延迟到下次 DOM 更新循环之后执行
|
||||
this.$nextTick(() => {
|
||||
@ -48,9 +62,16 @@ export default {
|
||||
});
|
||||
} else {
|
||||
// 给编辑器设置内容
|
||||
editor.html(a.content);
|
||||
editor.html(content);
|
||||
}
|
||||
},
|
||||
showEdit(a) {
|
||||
// 不能直接赋值一个对象
|
||||
this.form = { ...a };
|
||||
this.showDialog = true;
|
||||
this.showEditor(a.content)
|
||||
|
||||
},
|
||||
saveArticle() {
|
||||
this.form.content = editor.html(); // 获取编辑器的内容
|
||||
request("./api/article/admin/save", this.form, "POST").then(
|
||||
|
||||
@ -36,7 +36,8 @@
|
||||
text-align: left;
|
||||
border-bottom: solid 1px #ddd;
|
||||
}
|
||||
.content-div{
|
||||
|
||||
.content-div {
|
||||
border: 1px solid #DCDFE6;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
@ -48,7 +49,9 @@
|
||||
<body>
|
||||
<div id="app">
|
||||
<div>
|
||||
<div class="action"></div>
|
||||
<div class="action">
|
||||
<el-button @click="showAdd">新增</el-button>
|
||||
</div>
|
||||
<div class="list">
|
||||
<table>
|
||||
<thead>
|
||||
@ -75,15 +78,11 @@
|
||||
<td>
|
||||
<!-- 不需要传参则可以不写方法后的小括号 -->
|
||||
<el-link @click="showEdit(art)">修改</el-link>
|
||||
<el-popconfirm
|
||||
title="此操作将永久删除该文章数据,是否继续?"
|
||||
@confirm="deleteArticlebyId(art.id)">
|
||||
<el-popconfirm title="此操作将永久删除该文章数据,是否继续?" @confirm="deleteArticlebyId(art.id)">
|
||||
<el-link slot="reference">删除</el-link>
|
||||
</el-popconfirm>
|
||||
|
||||
<el-popconfirm
|
||||
title="此操作将会更改文章状态,是否继续?"
|
||||
@confirm="updateArticleStatus(art)">
|
||||
|
||||
<el-popconfirm title="此操作将会更改文章状态,是否继续?" @confirm="updateArticleStatus(art)">
|
||||
<el-link slot="reference">{{art.status==1?'设为草稿':'发布文章'}}</el-link>
|
||||
</el-popconfirm>
|
||||
</td>
|
||||
@ -96,14 +95,6 @@
|
||||
<el-form-item label="文章标题">
|
||||
<el-input v-model="form.title" :maxlength="50"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="分类">
|
||||
<el-select v-model="form.category" placeholder="请选择文章分类">
|
||||
<el-option label="默认分类" value="默认"></el-option>
|
||||
<el-option value="生活"></el-option>
|
||||
<el-option value="随笔"></el-option>
|
||||
<el-option value="科技"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="文章缩略图">
|
||||
<el-input v-model="form.cover"></el-input>
|
||||
</el-form-item>
|
||||
@ -115,14 +106,41 @@
|
||||
<!-- <div id="toolbar"></div>
|
||||
<div id="editor" style="height: 400px"></div> -->
|
||||
<textarea v-model="form.content" id="editor_id" style="width:100%;height:300px;"></textarea>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="阅读数">
|
||||
<el-input v-model="form.view_count"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="评论数">
|
||||
<el-input v-model="form.comment_count"></el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="阅读数">
|
||||
<el-input v-model="form.view_count"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="评论数">
|
||||
<el-input v-model="form.comment_count"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="分类">
|
||||
<el-select v-model="form.category" placeholder="请选择文章分类" style="width: 100%;">
|
||||
<el-option label="默认分类" value="默认"></el-option>
|
||||
<el-option value="生活"></el-option>
|
||||
<el-option value="随笔"></el-option>
|
||||
<el-option value="科技"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="发表时间">
|
||||
<el-date-picker v-model="form.publish_time" type="datetime" style="width: 100%;"
|
||||
placeholder="选择文章的发表时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<!-- slot插槽位footer表示该元素会放入到组件的footer -->
|
||||
<span slot="footer" class="dialog-footer">
|
||||
@ -135,7 +153,7 @@
|
||||
|
||||
<script src="./vue/dist/vue.js"></script>
|
||||
<script src="./element-ui/lib/index.js"></script>
|
||||
|
||||
|
||||
<script type="module">
|
||||
Vue.config.productionTip = false;
|
||||
Vue.config.silent = true;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user