vue3.0评论区功能的实现
vue3.0结合后端express框架以及mongodb数据库实现简单的评论区功能
-
最近在做一个个人网站,希望通过这个项目来提高自己的水平
-
前端页面可能是能力有限也做不出什么漂亮的页面
-
这是首页
- 评论留言部分长这样
评论区留言部分
-
评论前首先的登录
-
点击登录跳出登录框
-
登录输入昵称以及邮箱
- 昵称以及邮箱有个简单的正则验证
// 昵称验证(2-8位任意字符)
var Reg_nickname = /^.{2,8}$/;
// 邮箱验证
var Reg_email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
-
正则验证通过登录才有效
后端登录接口
- 数据库的连接
- 启动mongodb数据库
mongod
- 连接数据库
mongo
- 后端连接数据库
const mongoose = require('mongoose')
const DATAURL = 'localhost'
const PORT = 27017
const NAME = 'personalweb'
module.exports = new Promise((resolve, reject) => {
mongoose.connect(`mongodb://${DATAURL}:${PORT}/${NAME}`, {
useNewUrlParser: true,
useUnifiedTopology: true
})
mongoose.connection.on('open', (err) => {
if (!err) {
resolve('mongodb is connected!!');
console.log('mongodb is connected');
} else {
reject(err);
}
});
})
- 创建用户登录的Schema模型
const mongoose = require('mongoose')
let Schema = mongoose.Schema
let usersSchema = new Schema({
nickname: {
type: String,
required: true
},
email: {
type: String,
required: true
},
comment: {
type: Array,
required: false
},
sinupTime: {
type: Date,
default: Date.now
}
})
module.exports = mongoose.model('users', usersSchema)
- 在路由中引入连接数据库连接文件以及schema模型
var express = require('express');
var router = express.Router();
const db = require('../db/connect')
const users = require('../db/model/users')
// 用户注册账号后端简单逻辑
router.post('/sinup', async function (req, res) {
// 解构赋值,获取前端页面传递过来的昵称以及邮箱
let { nickname, email } = await req.body
// 在user集合中查找邮箱是否注册过,如果注册过将查找到的数据发给前端,如果没有则将该条数据收入数据库中
let result = await users.findOne( {email })
if (result) {
res.send(result)
} else {
users.create({
nickname,
email
})
res.send('注册成功')
}
})
注册成功后评论提交按钮显示,可以输入评论并且提交
-
在这里使用了本地存储, 当刷新页面或者从新进入网页不用再次登录就可以评论
-
自己的评论下有删除2字,属于自己的评论自己可以删除,输入别人的评论没有删除2字
-
点击退出将清空本地登录数据的存储,需要再次登录才可以评论