剧场模式
首页前后端分离React & Redux & React-Router & Nodejs 实战 crud 项目

React & Redux & React-Router & Node.js 实战 crud 项目 #6 连接数据库 MongoDB

下载源码hfpp2012发布于React3669 次点击播放时长:06:53
1

http://www.runoob.com/mongodb/mongodb-window-install.html

http://www.runoob.com/nodejs/nodejs-mongodb.html

https://github.com/mongodb/node-mongodb-native

https://mongodb.github.io/node-mongodb-native/

backend/server.js

import express from 'express';
import mongodb from 'mongodb';

const app = express();
const dbUrl = "mongodb://localhost";

mongodb.MongoClient.connect(dbUrl, (err, client) => {
  if (err) throw err;

  const db = client.db('crud');

  app.get('/api/games', (req, res) => {
    db.collection('games').find({}).toArray((err, games) => {
      res.json({ games });
    });
  });

  app.listen(8080, () => console.log('Server is running on localhost:8080'));
});

src/actions/index.js

import { SET_GAMES } from '../constants';

export const setGames = (games) => {
  return {
    type: SET_GAMES,
    games
  }
};

export const fetchGames = () => {
  return dispatch => {
    fetch('/api/games')
      .then(res => res.json())
      .then(data => dispatch(setGames(data.games)))
  }
};

src/reducers/games.js

import { SET_GAMES } from '../constants';

const games = (state = [], action = {}) => {
  switch(action.type) {
    case SET_GAMES:
      return action.games;
    default: return state;
  }
}

export default games;

src/constants/index.js

export const SET_GAMES = 'SET_GAMES';
46 条回复
  • Messi-Q #1

    加载图片的url,在乌班图系统中识别不了本地的图片地址

  • Messi-Q #2

    想请教一下,这里用mongodb存储,把改成mysql会不会出现问题,看了后面登陆注册所用到的knex与bookshelf框架,将这里的mongodb改成kenx与bookshelf的形式,会有冲突吗

  • hfpp2012 #3
    Messi-Q #10 回复

    会有问题,要改代码的,毕竟是不同的数据库,不同的库

  • Messi-Q #4
    hfpp2012 #10 回复

    想请问一下mongodb中的findone和findOneAndUpdate的方法换成bookshelf里的mysql时要怎么解决,点击edit时一直不能显示数据,不知道能否帮忙解答

  • hfpp2012 #5
    Messi-Q #10 回复
  • Messi-Q #6

    改用mysql时,进行edit操作时,不能够将数据在页面上显示出来,在控制台看到能够获取文件的内容信息,路由跳转也是正确的,但是数据就是没有在修改页面上显示,然后填写数据时可以提交,又在数据库中添加了一条数据,但是并没有修改原有数据,没有报错,按照教程来的,使用mongodb就可以,不知道什么原因。

  • Messi-Q #7

    mongodb: resource: state.resources.find(item => item._id === match.params._id)
    mysql: resource: state.resources.find(item => item.id === match.params.id)
    用mysql定义后获取到的resource是undefined,然后componentWillReceiveProps未被调用,找到的原因是这个,不知道能否解决

  • Messi-Q #8

    resource: state.resources.find(item => item.id === match.params.id) //这里错了,返回值是undefined,reducer里面的findIndex返回值是对的

  • Messi-Q #9

    的确是resource: state.resources.find(item => item.id === match.params.id)错了,mysql的id是int类型,我将===修改成==就可以出现了,但是会出现警告,写成item.id.value === match.params.id.value的话也可以出现,但总是第一个item,算是找出原因可以解决了

  • Messi-Q #10

    state.resources.find(item => item.id.toString() === match.params.id.toString())最终修改成这样算是可以了,刚刚学习react,经过这几天的调试和代码的阅读算是入门了

  • hfpp2012 #11
    Messi-Q #10 回复

    多打印日志,多摸索,从基础学起呀,学全点,僻免走些弯路

  • hfpp2012 #12
    fmheart #10 回复

    要么你这样在 package.json 文件中 把 proxy 那行移到 scripts 的前面来

  • fmheart #13

    还是一样的

  • fmheart #14

    为什么我按照这个步骤做下来的还是报警呢。

  • fmheart #15

  • hfpp2012 #16
    fmheart #10 回复

    你看下,是不是后端服务挂了

  • fmheart #17

    那这种还有解决的办法吗?感觉一步跟不上后面整个课程都跟不上了。

  • hfpp2012 #18
    fmheart #10 回复

    你贴下后端的代码,或把我的代码贴过去,试试

  • hfpp2012 #19
    fmheart #10 回复

    把后端的服务器报错贴出来,前端浏览器的调试工具响应图片贴出来

  • fmheart #20

    我是把你的代码贴上去的,就说报这个错。

  • hfpp2012 #21
    fmheart #10 回复

    把后端的服务器报错贴出来,前端浏览器的调试工具响应图片贴出来。

    你应该是哪里错了,代码之类的,我录的时候也是一步步来的,之前学员也是跑通过的

  • fmheart #22

  • hfpp2012 #23
    fmheart #10 回复

    proxy 是如何写的,你是不是后端没跑起来呀,把后端终端的截图发一下,前端也要重启下

  • fmheart #24

  • hfpp2012 #25
    fmheart #10 回复

    8080端口的后端服务跑起来了吗

  • fmheart #26

  • fmheart #27

  • hfpp2012 #28
    fmheart #10 回复

    不是这个,我说的是服务器终端,后端的终端, 类似 npm start 启动的那个服务吧

  • fmheart #29

    我是一步一步按照你的教程写的,Proxy写在了src下面的json文件

  • hfpp2012 #30
    fmheart #10 回复

    backend 那个目录的服务器启动,你试下 在浏览器 http://localhost:8080

  • fmheart #31

    不好意思,请问这个在哪里操作啊,我一般启动就是在编辑器里面npm start,在终端启动编辑器也还没学到,见笑了。😄

  • hfpp2012 #32
    fmheart #10 回复

    cd backend 然后 npm start

  • hfpp2012 #33
    fmheart #10 回复

    这一集的上一集有说,你可以看看

  • fmheart #34

  • hfpp2012 #35
    fmheart #10 回复

    嗯,再试试

  • fmheart #36

    现在这个启动了,但是网页重新刷新就变灰了,我再重新npm start 就又是那个报错

  • fmheart #37

    现在我在编辑器的终端这个页面,怎么重新启动网页刷新啊,一关掉这个重新启动还是报那个错

  • hfpp2012 #38
    fmheart #10 回复

    你在浏览器下先访问下后端 比如 http://localhost:8080

  • fmheart #39

  • fmheart #41

  • fmheart #42

  • fmheart #43

  • fmheart #44

    我的mongodb 这样有问题吗?

  • fmheart #45

    可以了,我总结了一下,就是一开始你说的后端服务器没启动的原因,后面启动了后端服务器没有同时启动项目,多谢,又可以继续了。哈哈哈哈😄

  • hfpp2012 #46
    fmheart #10 回复

    能用就行,应该没啥问题

播放列表目录

1FreeReact & Redux & React-Router & Node.js 实战 crud 项目 #1 项目搭建

2FreeReact & Redux & React-Router & Node.js 实战 crud 项目 #2 Semantic Ui 和 React-Router

3FreeReact & Redux & React-Router & Node.js 实战 crud 项目 #3 Redux connect

4FreeReact & Redux & React-Router & Node.js 实战 crud 项目 #4 发送 ajax 请求

5FreeReact & Redux & React-Router & Node.js 实战 crud 项目 #5 用 es6 语法来写服务器代码

FreeReact & Redux & React-Router & Node.js 实战 crud 项目 #6 连接数据库 MongoDB

7ProReact & Redux & React-Router & Node.js 实战 crud 项目 #7 路由与表单

8ProReact & Redux & React-Router & Node.js 实战 crud 项目 #8 客户端验证

9ProReact & Redux & React-Router & Node.js 实战 crud 项目 #9 客户端发送创建记录的请求

10ProReact & Redux & React-Router & Node.js 实战 crud 项目 #10 前端和后端对错误路由的处理

11ProReact & Redux & React-Router & Node.js 实战 crud 项目 #11 后端创建数据和前端路由跳转

12ProReact & Redux & React-Router & Node.js 实战 crud 项目 #12 列表页面

13ProReact & Redux & React-Router & Node.js 实战 crud 项目 #13 新增记录时列表页延迟加载的问题

14ProReact & Redux & React-Router & Node.js 实战 crud 项目 #14 修改记录表单和路由参数

15ProReact & Redux & React-Router & Node.js 实战 crud 项目 #15 修改记录填充表单数据

16ProReact & Redux & React-Router & Node.js 实战 crud 项目 #16 修改记录提交数据

17ProReact & Redux & React-Router & Node.js 实战 crud 项目 #17 重构表单代码

18ProReact & Redux & React-Router & Node.js 实战 crud 项目 #18 删除记录(完结)

支付宝付款
订阅或购买扫码加我微信

加我微信:15014006126

友情提示
   官方 QQ 1 群 697272886(500/2000)
   官方 QQ 2 群 856141852

© Rails365 | 隐私条款 | 服务条款 | 粤ICP备15004902号 | 在线学员:21

Top