热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

基于React、node的投票系统

1、开发前准备1.1技术选型1.2整体设计1.3构建开发背景:需要开发一个系统,让用户对角色进行投票,最后输出统计结果,投票采用两两对比,用户在喜爱的

 

1、开发前准备

1.1  技术选型

1.2  整体设计

1.3  构建开发

 

 

背景:

需要开发一个系统,让用户对角色进行投票,最后输出统计结果,投票采用两两对比,用户在喜爱的角色上点击即可进行投票,并且可以输出投票统计结果;用户可以查看角色信息详情,新增角色信息,并未对用户的权限作过多控制,所有用户可以新增角色和投票。

技术选型:

投票系统的后台逻辑比较简单,无非是增删改查操作,相比之下IO的使用比较多,需要和前端进行较多的交互,呈现出高IO低计算的需求,node及react成为适合的技术选型

整体设计:

采用node作web服务器,考虑这是小demo,mysql作数据服务器足够了,前端页面为了增加交互性和给用户更好的体验,采用SPA(单页面应用),前端采用react+react-router,react只是ui的框架,对于数据的处理可以配合alt(一种flux的实现),架构示意图:

 

构建开发:

react生态中,由于react框架本身完成的功能比较单一,需要配合其他很多的库或框架完成一套功能,而node具备的npm管理库的能力,这与react的开发需求正好匹配,在开发前需要将运行所依赖的库以及打包或开发所依赖的库加入package.json中去;

另外,一些纯前端的库文件,如bootstrap、jquery等,可以使用客户端的包管理软件bower进行管理,文件依赖在根目录下的bower.json中定义,下载路径默认是根目录下的bower_components,在具备git环境下执行bower install;

为了减小网络开销,js及css需要通过gulp工具各自合并,js文件通过gulp(browserify)构建,多个文件合并成一个,减小网络开销;browserify通过main.js为入口,将整个依赖树串起来,将整个业务js代码打包成bundle.js;css文件通过gulp(less)构建,在main.less中定义

gulp打包步骤:

1、将客户端的js库(通过bower工具管理)打成一个文件,gulp.src表示源文件路径,pipe表示流处理管道,最后合并到public/js/vendor.js

2、客户端依赖的第三方库(通过npm管理),打成一个文件

3、将业务文件打包,以main.js作为打包入口,去除所有第三方依赖,并且通过babel转换至ES5语法,打包至public/js/bundle.js

4、对业务代码的变化进行监控,当代码改变时,自动执行第三部的browserrify任务

5、对css文件打包,并且进行监控

 

 

 

技术点:

1、工程目录结构,采用node+react开发的模式,目录结构可以按下面进行设置

      root

           ---------app      前后端渲染采用同一套代码,组件代码都放在这个目录下

                      ---------components     组件定义

                      ---------actions             redux模式下的组件对应的action

                      ---------stores              redux模式下组件对应的store

                      ---------stylesheets      外部样式文件,react的样式还是需要单独定义

          ----------bower_components         客户端依赖的js库,通过bower管理

          ----------models                        数据库表模型定义文件

          ----------node_modules            通过npm管理的库文件目录

          ----------public                          客户端引用的资源文件目录,包括基于app目录打包生产的js,基于app/stylesheets下的less生成的css,图片

          ----------views                          客户端页面文件

          下面是文件

          -----------bower.json                bower工具配置文件,下载后的文件默认安装在项目根目录下的bower_components目录

          -----------config.js                    数据库连接信息配置文件

          -----------gulpfile.js                  gulp工具打包步骤配置文件

          -----------package.json            管理npm安装包

          -----------server.js                    node服务端运行文件

  

2、flux 数据单向流动模式,能同时运行在客户端及node端

      

 

      数据只能单向流动,最终view的改变只能由store的改变触发,而action可以在组件的代码里调用

      在alt框架下,每个组件拥有一个store及action文件,dispatcher不需过多关注

      action通常完成逻辑编排和调用,并根据调用结果产生相应的action,这些action能被配套的store监听.

  需要引入alt对象,通过generateActions方法定义action,addCharacter对外暴露

          

       store定义state的集合,监听action,根据不同action完成state的更新,store时单例对象,如果采用了服务端渲染,在node启动时,执行到import  XXstore时就会初始化,客户端在加载js时,执行到import  XXstore时,初始化

  需要引入alt对象及对应action,通过构造函数定义state,on+action名 构成的方法,监听action

    

  组件代码中,构造函数中一般要调用getState获取store初始状态,而store的监听与取消监听在生命周期的componentDidMount及componentWillUnmount阶段进行

        下面是自己的思考:服务端渲染的情况下,renderToString函数会执行组件的可视化阶段,即render之前(包括render),在浏览器端执行剩下的生命周期即可,为了保持store的一致,初始化阶段到render之间不应该有store的改变

   

 

3、react-router  路由,能同时运行在客户端及node端

      单页应用的场景下需要使用react-router,浏览器拦截请求,基于react计算出需要重新渲染的dom,对变化的部分进行渲染,这个过程不会向服务端发出页面请求,跳转过程中变化的组件会mount与unmount,并且浏览器的前进后退按钮,也不会整个页面重新加载,路由过程组件的store不会销毁,只会解绑监听,所以当浏览器后退到之前页面时,store的状态能保持。

       以下是我自己的推测:react 在设计之初就考虑服务端与客户端同构,即可以使用同一套代码,服务端不单是传统意义的web请求分发处理了,加上了服务端渲染的概念,将很多浏览器端干的活抢去干了。基于此,后续的react插件都支持服务端与客户端的运行,服务端渲染一般在首页加载,为了提升用户体验而需要采用的技术,其他时候采用客户端单独渲染就够用了。             

      

      页面跳转使用react-router提供的标签:  组件文件头中import {Link} from 'react-router';     跳转的地方使用Hall of Shame,   使用Link标签能够实现变化的dom刷新

       典型代码模块:

       路由文件route.js,定义了url与组件的匹配关系,这里的App组件是整个应用的根组件,一般要将SPA的可变组件嵌套进去:

  

        根组件app.js,注意可变组件的写法:

        

        服务端与客户端使用的是同一套代码,但路由入口不一样,服务端在server.js中定义,考虑所有的页面请求,都需要通过路由来获得,

  以下是我的总结:对于SPA场景,需要使用react-router,服务端可斟酌使用router;而对于普通的应用,就不需要使用react-router了,可以针对不同的url请求设置node中间件,路由到不同的静态页面文件,服务端渲染也可选择是否使用。

  

  客户端路由入口,需要通过构建工具打包至bundle.js中:

  

 


推荐阅读
  • 本文介绍了JavaScript进化到TypeScript的历史和背景,解释了TypeScript相对于JavaScript的优势和特点。作者分享了自己对TypeScript的观察和认识,并提到了在项目开发中使用TypeScript的好处。最后,作者表示对TypeScript进行尝试和探索的态度。 ... [详细]
  • 本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤,包括在application.properties配置文件中添加thymeleaf的配置信息,引入thymeleaf的jar包,以及创建PageController并添加index方法。 ... [详细]
  • Node.js学习笔记(一)package.json及cnpm
    本文介绍了Node.js中包的概念,以及如何使用包来统一管理具有相互依赖关系的模块。同时还介绍了NPM(Node Package Manager)的基本介绍和使用方法,以及如何通过NPM下载第三方模块。 ... [详细]
  • 在package.json中有如下两个对象:husky:{hooks:{pre-commit:lint-staged}},lint-staged:{src** ... [详细]
  • loader资源模块加载器webpack资源模块加载webpack内部(内部loader)默认只会处理javascript文件,也就是说它会把打包过程中所有遇到的 ... [详细]
  • 必须先赞下国人npm库作品:node-images(https:github.comzhangyuanweinode-images),封装了跨平台的C++逻辑,形成nodejsAP ... [详细]
  • 本文介绍了C#中数据集DataSet对象的使用及相关方法详解,包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成,以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读,读者可以了解到DataSet对象在C#中的重要性和使用方法。 ... [详细]
  • 本文介绍了OC学习笔记中的@property和@synthesize,包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
  • Mac OS 升级到11.2.2 Eclipse打不开了,报错Failed to create the Java Virtual Machine
    本文介绍了在Mac OS升级到11.2.2版本后,使用Eclipse打开时出现报错Failed to create the Java Virtual Machine的问题,并提供了解决方法。 ... [详细]
  • 使用在线工具jsonschema2pojo根据json生成java对象
    本文介绍了使用在线工具jsonschema2pojo根据json生成java对象的方法。通过该工具,用户只需将json字符串复制到输入框中,即可自动将其转换成java对象。该工具还能解析列表式的json数据,并将嵌套在内层的对象也解析出来。本文以请求github的api为例,展示了使用该工具的步骤和效果。 ... [详细]
  • 本文介绍了高校天文共享平台的开发过程中的思考和规划。该平台旨在为高校学生提供天象预报、科普知识、观测活动、图片分享等功能。文章分析了项目的技术栈选择、网站前端布局、业务流程、数据库结构等方面,并总结了项目存在的问题,如前后端未分离、代码混乱等。作者表示希望通过记录和规划,能够理清思路,进一步完善该平台。 ... [详细]
  • Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • 本文讨论了在openwrt-17.01版本中,mt7628设备上初始化启动时eth0的mac地址总是随机生成的问题。每次随机生成的eth0的mac地址都会写到/sys/class/net/eth0/address目录下,而openwrt-17.01原版的SDK会根据随机生成的eth0的mac地址再生成eth0.1、eth0.2等,生成后的mac地址会保存在/etc/config/network下。 ... [详细]
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • npmrunbuild后dist文件夹下面直接浏览器打开index.html,css和js的路径都不正确。放到跟目录下就正常了,iis上同样只能在根目录下。我项目的目录如下: ... [详细]
author-avatar
吴国伟60942
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有