vue-cli3 + express + mongodb小型全栈项目（一）

1、express搭建服务器

1、新建一个项目文件夹，node_app,进去文件夹后，使用命令npm init 初始化项目。

注意：这里将入口文件改为了server.js.
2、安装express，全局安装nodemon。
3、项目根目录新建server.js文件，内容如下：

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

const port = process.env.PORT || 5000;

app.get('/',(req,res)=>{
   
    res.send("hello express")
})

app.listen(port,()=>{
   
    console.log(`Server running on port ${
     port}`);
})

4、修改package.json文件 ，增加两个脚本命令。

 "scripts": {
   
    "server": "nodemon server.js",
    "start":"node server.js"
  },

5、浏览器打开http://localhost:5000/。

说明express服务器搭建成功了。

2、连接MongoDB数据库

1、下载mongoose
2、根目录新建config文件夹 新建keys.js文件
keys.js文件内容如下：

module.exports = {
   
    mongonURI:"mongodb://localhost:27017/test"
}

3、在server.js文件中添加如下代码

const mongoose = require('mongoose')


const users = require('./routers/api/users')


const db = require("./config/keys").mongonURI

mongoose.connect(db)
    .then(()=>{
   
   	 		console.log("mongodb connet"); 
		})
	.catch(err=>console.log(err))

表示连接成功。
4、创建数据模型
根目录下新建models文件夹 新建User.js文件
User.js文件内容如下

const mongoose = require("mongoose")

const Schema = mongoose.Schema;

const UserSchema = new Schema({
   
    name:{
   
        type:String,
        required:true
    },
    email:{
   
        type:String,
        required:true
    },
    password:{
   
        type:String,
        required:true
    },
    avatar:{
   
        type:String
    },
    date:{
   
        type:Date,
        default:Date.now
    }
})
module.exports = User = mongoose.model('users',UserSchema)

3、创建路由

根目录下新建routerswen文件夹，新建api文件夹，新建users.js 文件
新建users.js 文件内容如下：

const express = require("express");

const router = express.Router();

// get请求 /api/users/test
router.get('/test',(req,res)=>{
   
    res.json({
   
        msg:"test msg"
    })
})

module.exports = router;

server.js文件添加如下代码

const users = require('./routers/api/users')
app.use('/api/users',users)

浏览器打开http://localhost:5000/api/users/test

4、创建注册接口并存储到数据库

4.1 安装body-parser，用于解析POST请求的body数据。然后在server.js中添加如下代码：

const bodyParser = require('body-parser')
// ...省略已有代码
// 使用 body-parser 中间件
app.use(bodyParser.urlencoded({
   extended:false}))
app.use(bodyParser.json())

4.2 安装bcrypt，用于加密密码。
4.3 安装gravatar，用于生成头像的。全球公认头像gravatar
在此网站可以注册一个账号，并上传头像。

4.4 在user.js文件中添加如下代码：

const bcrypt = require('bcrypt')
const gravatar = require('gravatar')


router.post('/register',(req,res)=>{
   
   console.log(req.body);
   //查询数据库中是否有邮箱
   User.findOne({
   email:req.body.email}).then(user =>{
   
       if (user) {
   
           return res.status(400).json({
   email:"该邮箱已经被注册"})
       }else{
   
           const newUser = new User({
   
               name:req.body.name,
               email:req.body.email,
               avatar:gravatar.url(req.body.email,{
   s:'200',r:'pg',d:'mm'}),//拉取头像 如果没有在全球公认头像网站上注册的话将会生成一个默认的头像
               password:req.body.password
           })
           // 加密密码
           bcrypt.genSalt(10,(err,salt)=>{
   
            bcrypt.hash(newUser.password,salt,(err,hash)=>{
   
                   if(err) throw err;
                   newUser