使用react,express和mongoDB实现简单的数据传递。

1.创建React项目

npx create-react-app my-app my-app是项目名称，可以修改。项目创建完成之后，npm start启动项目。

2.创建express脚手架项目

express.js

通过$ npx express-generator直接生成express脚手架项目

$ DEBUG=myapp:* npm start 启动项目。这个命令是macOS的。Windows，linux在官网上有对应的命令。

如果需要express项目能够热更新，npm install --save-dev nodemon 来安装nodemon，然后使用nodemon ./bin/www命令启动项目

3. 使用axios插件，连接react和express项目

axios-react参考

• npm install axios从npm库中安装axios插件。

• 创建一个axios实例，

const axiosInstance = axios.create({
  baseURL: "http://192.168.77.85:3000/",
  timeout: 2000,
  headers: { 'Content-type': "application/json" }
})

baseURL是后端项目的部署的地址。不要使用localhost，会报错CORS。因为CORS只支持http等其他类型的协议，localhost的地址名不支持。

在render()渲染代码中放入Get组件和渲染代码，传入axios实例

<Get instance={axiosInstance} url="users">
        {(error, response, isLoading, onReload) => {
          if (error) {
            console.log(error)
            return (<div>Something bad happened: {error.message} <button onClick={() => onReload({ params: { reload: true } })}>Retry</button></div>)
          }
          else if (isLoading) {
            return (<div>Loading...</div>)
          }
          else if (response !== null) {
            console.log(response)
            return (<div>{response.data} <button onClick={() => onReload({ params: { refresh: true } })}>Refresh</button></div>)
          }
          return (<div>Default message before request is made.</div>)
        }}
      </Get>

Get组件的url属性是express框架的路由路径。

• 在express脚手架中，router文件中的users.js文件，添加代码
  

  router.get('/', function(req, res, next) {
    res.send('从express来的数据');
  });
  

  然后刷新react页面，在网页中就能够看见从express传过来的数据
  

4.express操作mongoDB

mongoose是一个用来在js中操作mongoDB非常不错的插件

mongoose中文文档

还是在user.js文件中先对一些基础的变量进行定义

var mongoose = require("mongoose")
var url = "mongodb://localhost:27017/appDemo";

mongoose.connect(url)
mongoose.connection.on('connected', function () { console.log('连接成功') })

这些变量的定义都非常简单。

需要注意的是，在定义url也就是数据库的地址时，需要在端口后指明需要连接的数据库名字，否则会默认设置到test数据库中。

const User = mongoose.model('users', new mongoose.Schema({
  name: { type: String, require: true },
  age: { type: Number, require: true }
}))
const docs = [
  {
    name: 'jhh',
    age: 24
  }, {
    name: 'ssx',
    age: 21
  },
  {
    name: "msg",
    age: 44
  }
]
User.create(docs).then(() => { console.log('created') }).catch((err) => { console.log(err) })
router.get('/', function (req, res, next) {
  User.find({}, function (err, doc) {
    res.json(doc)
  })
});

然后分别定义schema类型并转换为model（不知道这是什么的话建议先看一下mongoose的文档），需要写入的数据和数据库写入语句。

文件执行后，数据库中就会多出刚刚创建进入数据库的语句。

在刚刚的react项目中，控制台的网络请求也能查看到从express传入到react项目的数据。