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-17 17:47:18 +08:00
parent b3dea14708
commit 9aee2898ff
6 changed files with 97 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.js
View File

@ -1,13 +1,15 @@
const express = require("express")
const user = require('./modules/user') // 用户模块
const article = require('./modules/article') // 文章
const comment = require('./modules/comment') // 评论
const app = express(); // 创建express应用
app.use(express.json());
app.use(express.static('public')) // 设置静态文件路径
// 使用路由模块
app.use('/api/user',user)
app.use('/api/article',article)
app.use('/api/comment',comment)
app.listen(3000); // 监听端口
console.log('server run success! http://localhost:3000')

20
modules/article.js
View File

@ -24,23 +24,23 @@ router.get("/web/list", async function (req, res) {
}
});
// 2.查询单个文章详情
router.all('/web/detail',async (req,res)=>{
router.all('/web/detail', async (req, res) => {
let id = req.query['id'];
if(!id || id <1){
if (!id || id < 1) {
res.send([])
}else{
const article = await db.query('select * from article where id =? and status = 1',[id]);
} else {
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)=>{
router.all('/web/update', async (req, res) => {
let id = req.query['id'];
if(!id || id <1){
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})
if (!id || id < 1) {
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 })
}
});
// 管理后台模块

32
modules/comment.js
View File

@ -0,0 +1,32 @@
const dayjs = require('dayjs');
const db = require('./db')
const router = require('express').Router();
// 完整的请求接口地址： /api/comment/web/query
router.all('/web/query', async (req, res) => {
let id = req.query['id']; // 获取要查询文章的编号
if (!id || id < 1) {
res.send({ status: false, message: "参数不对" })
} else {
const list = await db.query('select * from comment where article_id =?', [id]);
res.send(list)
}
});
router.post('/web/add', async (req, res) => {
let commentData = req.body;
console.log(commentData)
if (!commentData || !commentData.article_id || !commentData.content) {
res.send({ status: false, message: "参数不对" })
} else {
try {
commentData.publish_time = dayjs().format("YYYY-MM-DD HH:mm:ss")
commentData.ip = '127.0.0.1'
await db.query('insert into comment set ?', commentData);
res.send({ status: true })
} catch (e) {
console.log(e)
res.send({ status: false, message: e.message })
}
}
});
module.exports = router

4
public/assets/style.css
View File

@ -21,9 +21,13 @@ header {
font-size: 30px;
flex: 1;
}
.logo a{
color: #fff;
}
.site-nav {
text-align: right;
margin-left: 20px;
}
.site-nav a {

53
public/detail.html
View File

@ -14,7 +14,7 @@
<div id="detail">
<header>
<div class="container show-flex">
<div class="logo">我的博客</div>
<div class="logo"><a href="./">我的博客</a></div>
<nav class="site-nav">
<a href="./">首页</a>
<a href="./login.html">登录</a>
@ -33,11 +33,32 @@
</div>
</div>
<div id="article-content" v-html="a.content"></div>
<div id="article-comment" style="margin-top: 50px;">
<h1>所有评论</h1>
<div class="publish" style="margin: 10px 0;">
<div>
<el-input type="textarea" v-model="xxx" />
</div>
<div style="margin-top: 10px;">
<el-button>评论</el-button>
</div>
</div>
<div id="comment-list">
<div class="comment-item" v-for="c in commentList" :key="c.id"
style="margin-top: 20px;background-color:#eaeaea;padding:20px;">
<div class="content">{{c.content}}</div>
<div class="info" style="padding:10px 0;font-size:12px;">
<span>评论IP:{{c.ip}}</span>
<span>评论时间:{{c.publish_time}}</span>
</div>
</div>
</div>
</div>
</div>
<div v-else class="error-notice">
<el-result icon="info" title="提示" sub-title="加载文章数据异常">
<template slot="extra">
<el-button type="primary" round size="medium">返回</el-button>
<el-button type="primary" round size="medium" @click="back">返回</el-button>
</template>
</el-result>
</div>
@ -57,10 +78,11 @@
el: '#detail', // 设置挂载对象
data() {
return {
isError:false,
xxx:'',
isError: false,
a: {
"id": 0,
"title": "",
"title": null,
"cover": "",
"publish_time": "",
"description": "",
@ -69,25 +91,44 @@
"view_count": 0,
"comment_count": 0,
"status": 1
}
},
// 所有的评论列表
commentList: []
}
},
async created() {
const params = qs.parse(location.search);
if (!params.id) {
this.setTitle()
this.isError = true;
return;
}
const id = params.id;
const id = this.a.id = params.id;
await request('./api/article/web/update', { id })
const articleList = await request('./api/article/web/detail', { id });
if (articleList.length != 1) {
this.isError = true;
this.setTitle()
return;
}
this.a = articleList[0];
this.setTitle()
this.loadCommentList()
},
methods: {
async loadCommentList() {
const id = this.a.id;
const list = await request('./api/comment/web/query', { id })
this.commentList = list;
},
back() {
history.back()
},
setTitle(title = null) {
document.title = this.a.title || '加载数据失败'
},
formatDate(time) {
return dayjs(time).format('YYYY-MM-DD HH:mm')
},

2
public/index.html
View File

@ -60,7 +60,7 @@
// vue 通过 Vue.createApp(选项)创建vue实例
import request from './modules/request.js'
const HomeApp = window.xxxx = new Vue({
new Vue({
el: '#home', // 设置挂载对象
data() {
return {