vue-cli + express + mongoDB

如何在开发环境下连接mongoDB呢?

1. 在项目目录下新建model文件夹

image.png

model文件下的index.js

var mongoose = require('mongoose')
mongoose.connect('mongodb://localhost:27017/blog')
var db = mongoose.connection
//监听数据库连接
db.on('open',(err)=>{
    if(err){
        console.log("数据库连接失败")
    }
    console.log('数据库连接成功')
})

//定义数据结构
var newSchema = new mongoose.Schema({
    title:String,
    id:String,
    content:String
},{
    versionKey: false
})

var userSchema = new mongoose.Schema({
    name: String,
    age:Number,
    password:String
},{
    versionKey: false
})

//定义数据模型
var newsList = mongoose.model("news",newSchema,"newsList")
var userList = mongoose.model("user",userSchema,"userList")

module.exports = {
    newsList:newsList,
    userList:userList
}

2. 在build文件夹下的dev-server.js中引入model中的index.js文件

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

• 在提交数据时,需要使用中间件

//引入中间件
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

//使用中间件
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());

3. 在dev-server.js中写接口

const app = express()

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());

app.get('/newsList', function (req, res) {
  var currentPage = req.query.currentPage
  var limitNum = 4
  var skipNum = (currentPage - 1) * limitNum
  newsList.count(function (err, num) {
      var totalPage = Math.ceil(num / limitNum)
      newsList.find({}).limit(limitNum).skip(skipNum).exec(function (err, docs) {
          res.status(200).json({
              data: docs,
              totalPage: totalPage
          })
      })
  })
})

如何打包上线?

1. 使用vue-cli打包

执行:npm run build
生成dist文件夹

2. express生成上线项目

新建上线项目,cmd后台输入: express -e project-online
将打包生成的dist目录复制进project-online的public文件夹中