初学js｜vue+express+mongodb个人博客demo项目总结

前言

利用10天左右的时间，完成了个人博客项目的80%左右，剩下的只有一些优化和内容补充，是时候从0总结一下项目了，本人是一个前端小白，技术水平不高

前台样式借鉴了这位大佬的设计风格www.ssevenk.com/

后端

选择了express和mongodb作为后端接口服务支持。

后端文件目录：

admin为后台管理静态文件，model为数据库模型，plugins用来存mongoose连接数据库文件，routes中包含前台和后台接口，uploads为图片上传文件夹，web是前台静态文件

数据库设计

博客使用了8张表来作为数据存储，分别为后台用户表(adminuser)、文章类型表(type)、文章表(article)、文章评论表(artcom)、历程表(time)、留言表(word)、留言回复表(reword)以及友链表(friend)

这几张表，文章相关的三张表进行关联，留言和回复留言表进行关联，其余独立

后端文件夹安装nodemon来调试Node

npm i -g nodemon

安装express mongoose cors模块，用来使用express框架，mongoose连接工具，cors跨域

npm i express@next mongoose cors

创建plugins文件夹，存放db.js用来连接数据库，用module.exports导出

module.exports=app=>{

    const mongoose=require('mongoose')

    mongoose.set('useCreateIndex', true)  // 解决报错问题

    mongoose.connect('mongodb://localhost:27017/blog',{ useNewUrlParser: true } )}

数据的结构分别为

const mongoose=require('mongoose')const schema=new mongoose.Schema({

    username:{type:String},

    password:{type:String,set(val){        return require('bcryptjs').hashSync(val,10)    }}})

module.exports=mongoose.model('AdminUser',schema)

const mongoose = require('mongoose')
const schema = new mongoose.Schema({    

// 文章类型名称    
typeName: {        type: String    }},
{    // 添加toJSON    toJSON:{ virtuals:true}})

schema.virtual("articles",
{    ref:"Article",    

localField:'_id',   

 foreignField:'type_id',    
justOne:false})

module.exports=mongoose.model('Type',schema)

const mongoose = require('mongoose')

const schema = new mongoose.Schema({    
// 文章类型编号    
type_id: {        type: mongoose.SchemaTypes.ObjectId,ref:'Type'    },   
 // 文章标题    title: {        type: String    },   
 // 文章主体内容    
article_content: {        type: String    },    
// 文章简介    introduce: {        type: String    },  
  // 浏览次数    viewcount: {        type: Number    },  
  LocalTime:{        type:String    },    
dzsj:{        type: Number    }}
,{    timestamps:true})

module.exports=mongoose.model('Article',schema)

const mongoose=require('mongoose')

const schema=new mongoose.Schema({  
  name:{type:String},    
img:{type:String},    
content:{type:String},    
artid:{type:mongoose.SchemaTypes.ObjectId,ref:'Article'},  
  time:{type:String}}
,{    timestamps:true})

module.exports=mongoose.model('Artcom',schema)

const mongoose=require('mongoose')

const schema=new mongoose.Schema({   
 name:{type:String},    
content:{type:String},  
  headIndex:{type:Number},  
  time:{type:String}},
{    timestamps:true})

module.exports=mongoose.model('Word',schema)

const mongoose=require('mongoose')

const schema=new mongoose.Schema({ 
   name:{type:String},  
  content:{type:String},    
headIndex:{type:Number},   
 time:{type:String}},
{    timestamps:true})

module.exports=mongoose.model('Word',schema)

只贴出重要的结构，历程和友链省略

在后端index.js引入express，监听3000端口

const express=require('express')const app=express()

//跨域
app.use(require('cors')())

// 数据库
require('./plugins/db')(app)

// 处理json中间件
app.use(express.json())

//后端路由
require('./routes/web/index')(app)
require('./routes/admin/index')(app)

app.listen(3000,function(){
    console.log('http://localhost:3000')
})//监听3000端口

创建routes文件夹，并在里面创建admin和web文件夹，分别处理前台和后台路由

接口

在routes/admin/index.js中写路由接口

module.exports = app => {

  const router = require('express').Router() 

 const AdminUser = require('../../model/AdminUser')

  app.use('/admin/api', router)}

使用mongoose API实现用户的增删改查

  router.post('/adminuser', async (req, res) => {  
  console.log(req.body)    
const user = await AdminUser.create(req.body)   
 res.send(user)  }) 

 router.put('/adminuser/:id', async (req, res) => {    
const model = await AdminUser.findByIdAndUpdate(req.params.id, req.body)   
 res.send(model)  })  

router.get('/adminuser/:id', async (req, res) => {    
const model = await AdminUser.findById(req.params.id)   
 res.send(model)  })  

router.get('/adminuser', async (req, res) => {  
  const model = await AdminUser.find()   
 res.send(model)  })

还有其他的增删改查，大致差不多，就省略了