使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程(二)

本文涉及的产品
RDS AI 助手,专业版
RDS MySQL DuckDB 分析主实例,集群系列 4核8GB
RDS MySQL DuckDB 分析主实例,基础系列 4核8GB
简介:

这几篇都是我原来首发在 segmentfault 上的地址:https://segmentfault.com/a/1190000005040834 突然想起来我这个博客冷落了好多年了,也该更新一下,呵呵

前篇

使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程(一)

这篇主要讲一下waterline的初始化,原文用的是mongoose

原文第十二步

一下子就到十二步了,因为原文件中react部分的代码本来就是用ES6写的,没什么好改的,唯一遇到的坑还是拼写

import NavbarActions from '../actions/NavbarActions'';

抄成

import NavbarActions from '../Actions/NavbarActions';

眼睛不尖的小伙伴这两句的代码差别可以也要找好久,我整整一天没有找出来,

socket.on('onlineUsers', (data) => {
        NavbarActions.updateOnlineUsers(data);
      });

按道理应该会触发
NavbarStore中的 onUpdateOlineUsers 这个事件的,可是就因为我把actions敲成了Actions,页面执行没有任何错误提示,但是就是不执行onUpdateOlineUsers这个事件,通过chrome调试发现,我调用的是updateOnlineUsers1,这个玩意儿怎么来的,我把原文中的代码复制过来,运行就正常,用自己的怎么能不行,后来我把原文的代码另存一个文件通过diff两个文件的不同才发现这个错误的,还好在第二行,diff 很快发现了。

吐完槽,还是开始第十二部分的改动吧,这是开始涉及到数据库了,原文用mongodb,我用mysql,改动就比较大了。
原文中的models是这样的

var mongoose = require('mongoose');

var characterSchema = new mongoose.Schema({
  characterId: { type: String, unique: true, index: true },
  name: String,
  race: String,
  gender: String,
  bloodline: String,
  wins: { type: Number, default: 0 },
  losses: { type: Number, default: 0 },
  reports: { type: Number, default: 0 },
  random: { type: [Number], index: '2d' },
  voted: { type: Boolean, default: false }
});

module.exports = mongoose.model('Character', characterSchema);

改用waterline并用es6规范后

import Waterline from 'waterline';

export default Waterline.Collection.extend({
  identity: 'character',
  connection: 'myLocalMysql',
  schema: true,
  attributes: {
    characterId: {type:'string',primaryKey: true, unique: true,index: true},
    name: 'string',
    race: 'string',
    gender: 'string',
    bloodline: 'string',
    wins: {type: 'integer', defaultsTo: 0 },
    losses: {type: 'integer', defaultsTo: 0 },
    reports: {type: 'integer', defaultsTo: 0 },
    voted: {type: 'boolean', defaultsTo: false}
  }
});

注意:我这里去掉了random这个字段,原文中这个random字段就是用来随机获取数据库中的数据的,但同样的方法无法在mysql中用,所以我就去掉了,实现方法后文里会讲

waterline 的一些基础用法可以参见我的《使用 Express 和 waterline 创建简单 Restful API》这篇小文,或自行查看官方文档

在根目录下创建 config.js 针对waterline的配置文件,以便连接mysql

import mysqlAdapter from 'sails-mysql';

const wlconfig = {
  adapters: {
    'default':mysqlAdapter,
    mysql: mysqlAdapter
  },

  connections: {
    myLocalMysql: {
      adapter : 'mysql',
      host : 'localhost',
      port : 3306,
      user : 'root',
      password : '',
      database : 'test'
    }
  },

  defaults: {
    migrate: 'safe'
  }
};

export default wlconfig;

然后回到server.js中启用

...
//首先在头部引入相关库和配置文件
import Waterline from 'waterline';
...

import Config from './config';
....

let app = express();
//原来上面这一句后面加上这两行
let orm = new Waterline();
orm.loadCollection(Character);


//在最后面把
/**
  *原来的启动代码
  *
  *server.listen(app.get('port'),() => {
  *    console.log('Express server listening on port ' + app.get('port'));
  *  });
  */
//改成

orm.initialize(Config, (err,models) => {
  if(err) throw err;
  app.models = models.collections;
  //app.set('models',models.collections);
  app.connections = models.connections;

  server.listen(app.get('port'),() => {
    console.log('Express server listening on port ' + app.get('port'));
  });
});

注意:config.js中的 migrate 属性 一开始的时候可以把它设为 'alter' 这样可以省了你自己创建数据库的过程,但写入数据以后一定要改为'safe' 不然重启服务会清空清数据的。

后篇

使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程(三)




    本文转自无心之柳.NET博客园博客,原文链接:http://www.cnblogs.com/9527/p/6144637.html,如需转载请自行联系原作者


相关文章
|
6月前
|
编解码 前端开发 JavaScript
js react antd 实现页面低分变率和高分变率下字体大小自适用,主要是配置antd
在React中结合Ant Design与媒体查询,通过less变量和响应式断点动态调整`@font-size-base`,实现多分辨率下字体自适应,提升跨设备体验。
309 2
|
前端开发 JavaScript API
React开发需要了解的10个库
本文首发于微信公众号“前端徐徐”,介绍了React及其常用库。React是由Meta开发的JavaScript库,用于构建动态用户界面,广泛应用于Facebook、Instagram等知名网站。文章详细讲解了Axios、Formik、React Helmet、React-Redux、React Router DOM、Dotenv、ESLint、Storybook、Framer Motion和React Bootstrap等库的使用方法和应用场景,帮助开发者提升开发效率和代码质量。
571 4
React开发需要了解的10个库
|
缓存 前端开发 JavaScript
学习React的最佳实践有哪些?
学习React的最佳实践有哪些?
361 86
|
前端开发 JavaScript
React学习之——条件渲染
【10月更文挑战第16天】React 中没有像Vue中v-if这种指令。React 中的条件渲染和 JavaScript 中的一样,使用 JavaScript 运算符 if 或者条件运算符去创建元素来表现当前的状态,然后让 React 根据它们来更新 UI。
|
10月前
|
运维 前端开发 数据可视化
【CodeBuddy】挑战一句话开发一个完整项目之:React表单验证系统
本文分享了一个基于React 19构建的用户注册表单系统,采用模块化CSS和状态驱动视图更新,实现实时校验、错误提示与提交反馈等功能。核心亮点包括验证规则引擎(如密码复杂度校验)、交互反馈体系(输入框警示、按钮禁用)及加载动画优化。通过函数式更新确保状态同步,正则表达式实现多条件验证,CSS伪元素打造流畅体验。代码结构清晰,可扩展性强,适合作为React表单开发模板。文末附CodeBuddy免费下载链接,助力高效开发!
264 1
【CodeBuddy】挑战一句话开发一个完整项目之:React表单验证系统
|
11月前
|
前端开发 JavaScript NoSQL
使用 Node.js、Express 和 React 构建强大的 API
本文详细介绍如何使用 Node.js、Express 和 React 构建强大且动态的 API。从开发环境搭建到集成 React 前端,再到利用 APIPost 高效测试 API,适合各水平开发者。内容涵盖 Node.js 运行时、Express 框架与 React 库的基础知识及协同工作方式,还涉及数据库连接和前后端数据交互。通过实际代码示例,助你快速上手并优化应用性能。
|
前端开发 JavaScript API
如何快速学习React?
如何快速学习React?
368 1
|
存储 NoSQL JavaScript
Node.js导入MongoDB具体操作指南
通过本文,您已经学会了如何在Node.js中导入MongoDB并执行基本的CRUD操作。Node.js与MongoDB的结合使得构建高效、可扩展的后端服务变得更加容易。通过遵循本文的步骤,您可以快速设置并运行一个强大的数据存储和处理系统。希望这篇指南能为您的开发工作提供实用的帮助。
378 13
|
前端开发 JavaScript 测试技术
React 中集成 Chart.js 图表库
本文介绍了如何在 React 项目中集成 Chart.js 创建动态图表,涵盖基础概念、安装步骤、代码示例及常见问题解决方法,帮助开发者轻松实现数据可视化。
464 11
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
873 10

推荐镜像

更多