study/pro-blog
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

完善文章修改

Browse Source
This commit is contained in:
LittleBoy 2022-05-26 09:15:51 +08:00
parent bbe96a8821
commit 4667279624
6 changed files with 4663 additions and 2093 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
modules/article.js
View File

@ -1,72 +1,119 @@
const db = require('./db'); //
const db = require("./db"); //
// 文章模块
const router = require('express').Router();
const router = require("express").Router();
// 用户网站模块
// 1.查询文章列表(分页|搜索)
router.get("/web/list", async function (req, res) {
const page = parseInt(req.query['page'] || 1); // 获取页码
const size = parseInt(req.query['size'] || 5); // 每天条数
const page = parseInt(req.query["page"] || 1); // 获取页码
const size = parseInt(req.query["size"] || 5); // 每天条数
// 默认每页5条
const start = (page - 1) * size;
const search = '%' + (req.query['search'] || '') + '%'; // 搜索关键字
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 ?,?`,
[search, search, start, size]); // 执行查询语句并等待结果出来后赋值给变量
[search, search, start, size]
); // 执行查询语句并等待结果出来后赋值给变量
const totalCount = await db.query(
`select count(*) as total from article where (title like ? or content like ?) and status = 1`, [search, search]); // 执行获取总条数
res.send({ total: totalCount[0]['total'], list: listResult, size: size });
`select count(*) as total from article where (title like ? or content like ?) and status = 1`,
[search, search]
); // 执行获取总条数
res.send({
total: totalCount[0]["total"],
list: listResult,
size: size,
});
} catch (e) {
console.log(e)
console.log(e);
res.send({ count: 0, list: [] });
}
});
// 2.查询单个文章详情
router.all('/web/detail', async (req, res) => {
let id = req.query['id'];
router.all("/web/detail", async (req, res) => {
let id = req.query["id"];
if (!id || id < 1) {
res.send([])
res.send([]);
} else {
const article = await db.query('select * from article where id =? and status = 1', [id]);
res.send(article)
const article = await db.query(
"select * from article where id =? and status = 1",
[id]
);
res.send(article);
}
});
// 3.更新阅读数量
router.all('/web/update', async (req, res) => {
let id = req.query['id'];
router.all("/web/update", async (req, res) => {
let id = req.query["id"];
if (!id || id < 1) {
res.send({ status: false, message: "参数不对" })
res.send({ status: false, message: "参数不对" });
} else {
const article = await db.query('update article set view_count=view_count + 1 where id =?', [id]);
res.send({ status: true })
const article = await db.query(
"update article set view_count=view_count + 1 where id =?",
[id]
);
res.send({ status: true });
}
});
// 管理后台模块
router.get("/admin/list", async function (req, res) {
const page = parseInt(req.query['page'] || 1); // 获取页码
const size = parseInt(req.query['size'] || 5); // 每天条数
const page = parseInt(req.query["page"] || 1); // 获取页码
const size = parseInt(req.query["size"] || 5); // 每天条数
// 默认每页5条
const start = (page - 1) * size;
const search = '%' + (req.query['search'] || '') + '%'; // 搜索关键字
const search = "%" + (req.query["search"] || "") + "%"; // 搜索关键字
try {
const listResult = await db.query(
`select * from article where (title like ? or content like ? ) and status = 1 limit ?,?`,
[search, search, start, size]); // 执行查询语句并等待结果出来后赋值给变量
[search, search, start, size]
); // 执行查询语句并等待结果出来后赋值给变量
const totalCount = await db.query(
`select count(*) as total from article where (title like ? or content like ?) and status = 1`, [search, search]); // 执行获取总条数
res.send({ total: totalCount[0]['total'], list: listResult, size: size });
`select count(*) as total from article where (title like ? or content like ?) and status = 1`,
[search, search]
); // 执行获取总条数
res.send({
total: totalCount[0]["total"],
list: listResult,
size: size,
});
} catch (e) {
console.log(e)
console.log(e);
res.send({ count: 0, list: [] });
}
});
router.post("/admin/save", async function (req, res) {
res.send({
status:true,data:req.body
})
// 从请求参数中获取要更新的数据
const {
id,
title,
category,
content,
cover,
description,
view_count,
comment_count,
} = req.body;
const article = 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
]
);
res.send({ status: true });
});
module.exports = router
module.exports = router;

2
modules/db.js
View File

@ -3,7 +3,7 @@ const mysql = require('mysql')
// 创建数据库连接池
const pool = mysql.createPool({
user: 'root',
password: '123',
password: '123456',
database: 'pro_blog',
timezone: 'Asia/Shanghai'
});

2536
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

67
public/assets/manage.js Normal file
View File

@ -0,0 +1,67 @@
///
import request from "../modules/request.js";
let editor = null;
export default {
el: "#app", // 设置挂载对象
data() {
return {
list: [],
showDialog: false,
form: {
category: "",
comment_count: 0,
content: "",
cover: "",
description: "",
id: 0,
publish_time: null,
status: 1,
title: "",
view_count: 0,
},
};
},
mounted() {
this.loadArticleList();
},
methods: {
// 加载所有的文章列表
async loadArticleList() {
const ret = await request("./api/article/admin/list", {
size: 10000,
});
this.list = ret.list;
},
showEdit(a) {
// 不能直接赋值一个对象
this.form = {...a};
this.showDialog = true;
if (editor == null) {
// 将回调延迟到下次 DOM 更新循环之后执行
this.$nextTick(() => {
// 声明全局变量 表示编辑器是否已经初始化
if (editor == null) {
// // 初始化编辑器
editor = KindEditor.create("#editor_id");
}
});
} else {
// 给编辑器设置内容
editor.html(a.content);
}
},
saveArticle() {
this.form.content = editor.html(); // 获取编辑器的内容
request("./api/article/admin/save", this.form, "POST").then((ret) =>{
if(ret.status){
this.$message('更新成功')
this.showDialog = false // 隐藏对话框
this.loadArticleList()
}else{
this.$message('更新出错了')
}
});
},
},
};

12
public/manage.html
View File

@ -7,8 +7,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录</title>
<link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="./assets/wangEditor.css">
<style>
* {
margin: 0;
@ -44,7 +42,6 @@
overflow: hidden;
}
</style>
<script src="./assets/wangEditor.js"></script>
<script src="./kindeditor/kindeditor-all-min.js"></script>
</head>
@ -74,7 +71,8 @@
<td>{{art.view_count}}</td>
<td>{{art.comment_count}}</td>
<td>
<el-link @click="showEdit(art,a,a)">修改</el-link>
<!-- 不需要传参则可以不写方法后的小括号 -->
<el-link @click="showEdit(art)">修改</el-link>
<el-link>删除</el-link>
</td>
</tr>
@ -84,7 +82,7 @@
<el-dialog :visible.sync="showDialog" :close-on-click-modal="false">
<el-form ref="form" :model="form" label-width="100px" label-position="left">
<el-form-item label="文章标题">
<el-input v-model="form.title"></el-input>
<el-input v-model="form.title" :maxlength="50"></el-input>
</el-form-item>
<el-form-item label="分类">
<el-select v-model="form.category" placeholder="请选择文章分类">
@ -98,7 +96,7 @@
<el-input v-model="form.cover"></el-input>
</el-form-item>
<el-form-item label="文章摘要">
<el-input type="textarea" v-model="form.description"></el-input>
<el-input type="textarea" :maxlength="500" :rows="4" v-model="form.description"></el-input>
</el-form-item>
<el-form-item label="文章内容">
<div class="content-div">
@ -131,7 +129,7 @@
Vue.config.silent = true;
// import Vue from './vue/dist/vue.esm-browser.js'
// vue 通过 Vue.createApp(选项)创建vue实例
import manage from './manage.js'
import manage from './assets/manage.js'
new Vue(manage)
</script>
</body>

52
public/manage.js
View File

@ -1,52 +0,0 @@
///
import request from './modules/request.js'
let editor = null
export default {
el: '#app', // 设置挂载对象
data() {
return {
list: [],
showDialog: false,
form: {
category: "",
comment_count: 0,
content: "",
cover: "",
description: "",
id: 0,
publish_time: null,
status: 1,
title: "",
view_count: 0
}
}
},
mounted() {
this.loadArticleList();
},
methods: {
// 加载所有的文章列表
async loadArticleList() {
const ret = await request('./api/article/admin/list', { size: 10000 })
this.list = ret.list;
},
showEdit(a, b, c) {
console.log(a, b, c)
this.form = a; // 直接赋值
this.showDialog = true;
this.$nextTick(() => {
// 声明全局变量 表示编辑器是否已经初始化
if (editor == null) {
// // 初始化编辑器
editor = KindEditor.create('#editor_id')
}
})
},
saveArticle(){
this.form.content = editor.html()
request('./api/article/admin/save',this.form,'POST').then(ret=>console.log(ret))
}
}
}