开发环境

  • windows 10 专业版 1709
  • react: v16.2.0
  • node: v9.6.1
  • mongoose: v5.0.7
  • mongodb: v3.6.3
  • express: v4.16.2
  • redux: v3.7.2
  • antd-mobile: v2.1.6
动图

一、 创建React项目骨架模板

1
create-react-app projectName

二、 运行React项目，并修改

1
npm run start

三、 后端-Express

  1. 安装express

    1
    npm i express --save

  2. 建立server文件夹及server.js文件
    引入express并运行

  3. 安装nodemon (修改node文件自动重启服务)

    1
    npm i nodemon -g

  4. 运行node项目
    进入server文件夹运行 nodemon server 修改server文件查看效果

四、 数据库-mongodb

  1. 下载Mongodb

  2. 运行 Mongodb(要保持运行状态 否则无法连接)

    进入mongodb安装目录的etc目录运行下列命令

    指定数据的存放目录并启动 需手动建立

    1
    .\mongod --dbpath "H:\mongodb\data\db"

  3. 测试连接-继续在etc目录执行

    1
    .\mongo

五、 数据库驱动

  1. 安装mongoose

    1
    npm i mongoose --save

  2. 引入并连接数据库

    1
    2
    3
    4
    5
    6
    7
    8
    const mongoose = require('mongoose')
    // 连接mongo
    const DB_URL = "mongodb://localhost:27017"
    mongoose.connect(DB_URL)
    mongoose.connection.on('connected', ()=> {
        console.log("****************mongo connect success**************")
    })

  3. 建立数据模型 model

    1
    2
    3
    4
    const User = mongoose.model('user', new mongoose.Schema({
        user: {type: String, require: true},
        age: {type: Number, require: true}
    }))

  4. 增删改查

    增

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    app.get("/create", (req, res)=> {
        User.create({
            user: "sjt",
            age: 21
        }, (err, doc)=> {
            if(!err) {
                console.log(doc)
            }else {
                console.log(err)
            }
        })
    })

    删

    1
    2
    3
    4
    5
    app.get("/remove", (req, res)=> {
        User.remove({age:21}, (err, doc)=> {
            res.send(doc)
        })
    })

    改

    1
    2
    3
    4
    5
    app.get("/update",(req, res)=> {
        User.update({"user": "sjt"},{"$set": {age: 18}}, (err, doc)=> {
            res.send(doc)
        })
    })

    查

    1
    2
    3
    4
    5
    app.get("/find", (req, res)=> {
        User.find({}, (err,doc)=> {
            res.json(doc)
        })
    })

建议：

建议更换npm的源为淘宝的源

1
npm config set registry https://registry.npm.taobao.org

验证是否成功

1
npm config get registry