vue3.0评论区功能的实现

vue3.0结合后端express框架以及mongodb数据库实现简单的评论区功能

• 最近在做一个个人网站，希望通过这个项目来提高自己的水平

• 前端页面可能是能力有限也做不出什么漂亮的页面

• 这是首页

• 评论留言部分长这样

评论区留言部分

• 评论前首先的登录

• 点击登录跳出登录框

• 登录输入昵称以及邮箱

• 昵称以及邮箱有个简单的正则验证

    // 昵称验证(2-8位任意字符)
    var Reg_nickname = /^.{2,8}$/;
    // 邮箱验证
    var Reg_email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

• 正则验证通过登录才有效

  

后端登录接口

1. 数据库的连接

• 启动mongodb数据库

mongod

• 连接数据库

mongo

2. 后端连接数据库

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);
        }
    });
})

3. 创建用户登录的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)

4. 在路由中引入连接数据库连接文件以及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('注册成功')
  }
})

注册成功后评论提交按钮显示，可以输入评论并且提交

1. 在这里使用了本地存储， 当刷新页面或者从新进入网页不用再次登录就可以评论

2. 自己的评论下有删除2字，属于自己的评论自己可以删除，输入别人的评论没有删除2字

3. 点击退出将清空本地登录数据的存储，需要再次登录才可以评论