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. 點擊退出將清空本地登錄數據的存儲，需要再次登錄才可以評論