React demo:express、react-redux、react-router、react-roter-redux、redux-thunk(一)
近期终于把之前留下的坑填上了(说了好久的要网站重写,总算是写完了),不过最后的在线添加文章,功能虽然做了,后台没把接口加上,实在是没精力去折腾了,公司又有事要忙,现在把从0开始到完成的一个思路来写一下(不一定对,可以给需要的童鞋做个参考)。
开始写笔记之前,可以先看一下这个【ver 1.0】,这个是1.0版本的(【源码】),后续的什么【ver 2.0】(只有源码,没有线上版本,上线两周后被黑了,密码被凑出来,东西全部清空)、【ver 3.0】,都是在【ver 1.0】的基础之上进行改造的,所以,为了方便说明,可以先看一下【ver 1.0】,进行对比说明。
【ver 3.0】就是最新的用react重写的源码,至于线上版本,还未放上去,后续有空了租了服务器配置好了再把链接放上。
【后台部分】
这部分主要就是express的,其实有点纠结要不要把这个放上来,因为主要是想说react,把后台部分的放上来好像有点不太好,不过为了全栈,还是放上来吧。
源码什么的就不说了(说了还有可能被笑话,可能文件目录组织有点不伦不类吧。。。)。
上一下文件目录,还有关键的几个文件说明还是说一下吧。
PS:后台部分的文件目录组织,参考了MVC(?不知道我的MVC是否用的对,然后接口部分参考了RESTFUL),总之,有点四不像的。。。
①目录结构
图中箭头指向的就是几个主要的后台部分的文件(现在想想,我应该吧react部分的那些文件全都放在static里面的,和后台部分的文件放在同一目录,有点不太合适)
②server部分
主要就是用了express这个框架,然后监听前端的get请求(我的个人理解,就是地址栏里面的url,然后放在router里面去处理),对于获取数据,统一用post方法,然后放在controller里面去处理(我个人比较喜欢用“分发”这个词,然后对应各种请求,在controller里面进行分发,具体的处理方法,也就是sql语句获取数据,放在models里面)。
具体的,router和 controller以及models,参考后面的内容。
③router部分(不知道这样命名是否合适)
说是router,其实就是定义了一个列表,哪些链接可以访问,哪些链接不可访问(send回文件404.html),因为是SPA(单页web应用,所以就只有一个页面了,前端也做了路由)
④models部分(不知道这样命名是否合适)
主要就是从数据库获取数据(好像现在只有获取),还有一个sqlOption的配置文件
其中的一个model文件,主要是里面的sql语句,注意关键词之间的空格。
⑤controller部分(不知道这样命名是否合适)
说是controller,其实就是一个列表(和router类似),根据前端请求的postName,然后调相应的model方法(获取数据),具体可以看截图。
⑥关于sql配置
sql的setting属性,可以详见models部分。
第一部分暂时先扯这么多吧,把有点不(乱)太(七)相(八)关(糟)的后台扯一下,然后,主要还是没时间扯了,今天这个扯完已经快十一点了,下一篇开始正式聊react部分。
React demo:express、react-redux、react-router、react-roter-redux、redux-thunk(一)的更多相关文章
- react,react-router,redux+react-redux 构建一个React Demo
创建初始化应用 加速我们的npm. npm install -g cnpm --registry=https://registry.npm.taobao.org 利用create-react-app ...
- [Redux] Navigating with React Router <Link>
We will learn how to change the address bar using a component from React Router. In Root.js: We need ...
- 如何使用npm构建一个react demo项目
方法一: 1) 安装node.js环境 点我进入nodejs官网 1.1) 下载LTS(Long term support)版本,安装 1.2) 在cmd中使用以下命令查看node是否安装成功 no ...
- 真刀实战地搭建React+Webpack+Express搭建一个简易聊天室
一.前面bb两句 因为自惭(自残)webpack配置还不够熟悉,想折腾着做一个小实例熟悉.想着七夕快到了,做一个聊天室自己和自己聊天吧哈哈.好了,可以停止bb了,说一下干货. 二. 这个项目能学到啥? ...
- react + node + express + ant + mongodb 的简洁兼时尚的博客网站
前言 此项目是用于构建博客网站的,由三部分组成,包含前台展示.管理后台和后端. 此项目是基于 react + node + express + ant + mongodb 的,项目已经开源,项目地址在 ...
- GraphQL + React Apollo + React Hook + Express + Mongodb 大型前后端分离项目实战之后端(19 个视频)
GraphQL + React Apollo + React Hook + Express + Mongodb 大型前后端分离项目实战之后端(19 个视频) GraphQL + React Apoll ...
- Redux:with React(一)
作者数次强调,redux和React没有关系(明明当初就是为了管理react的state才弄出来的吧),它可以和其他插件如 Angular, Ember, jQuery一起使用.好啦好啦知道啦.Red ...
- 使用 Yarn workspace,TypeScript,esbuild,React 和 Express 构建 K8S 云原生应用(一)
本文将指导您使用 K8S ,Docker,Yarn workspace ,TypeScript,esbuild,Express 和 React 来设置构建一个基本的云原生 Web 应用程序. 在本教程 ...
- React前端有钱途吗?《React+Redux前端开发实战》学起来
再不学React就真的跟不上大前端的形式了,目前几乎所有前端的招聘条件都是精通React者优先,看看拉勾网的React薪资,都是15K-20K,这个暑假,必须动起来了. 如果你熟悉JavaScript ...
- react+redux教程(七)自定义redux中间件
今天,我们要讲解的是自定义redux中间件这个知识点.本节内容非常抽象,特别是中间件的定义原理,那多层的函数嵌套和串联,需要极强逻辑思维能力才能完全消化吸收.不过我会多罗嗦几句,所以不用担心. 例子 ...
随机推荐
- C#超级实用的一种类型—匿名类型
顾名思义 匿名类型就是没有名字的类型.当一个新的匿名对象定义与前面已经存在的类型定义的内部变量类型相同时,编译器就会只生成一个类定义,而不是各一个.匿名类型对象中仍然可以再包含匿名对象. 在C#3.0 ...
- Java导出防止小数显示不全工具类
1.说明 在做项目的过程中,发现导出功能中的数据显示不全,如"0.4",会显示成".4":"-0.8"会显示成"-.8" ...
- 第一次C语言实验报告
一.实验题目,设计思路,实现方法 实验四4-2-9三个数由小到大输出,要求比较三数大小并按顺序输出.运用穷举法列举所有可能性再对应输出.运用多分支结构. 实验四4-2-4 三天打鱼两天晒网,运用循环结 ...
- JavaWeb中jdbcproperties配置文件
开发中使用properties配置文件,方便后期维护. 文件位置: 任意,建议src下 文件名称:任意,扩展名为properties 文件内容:一行一组数据,格式“key=value” key 命名自 ...
- chrono--高精度计时
在C++中使用chrono标准库进行高精度计时.示例如下: #include<iostream> #include<ctime> #include<ratio> # ...
- 在TextBox中敲击回车执行ASP.NET后台事件
1.在TextBox中敲击回车执行ASP.NET后台事件 0.说明 页面中有一个用于搜索的TextBox,希望能在输入内容后直接回车开始搜索,而不是手动去点击它旁边的搜索按钮 但因为该TextBo ...
- 【BZOJ2809】【APIO2012】Dispatching(左偏树)
题面 Description 在一个忍者的帮派里,一些忍者们被选中派遣给顾客,然后依据自己的工作获取报偿.在这个帮派里,有一名忍者被称之为 Master.除了 Master以外,每名忍者都有且仅有一个 ...
- HiHocoder1415 : 后缀数组三·重复旋律3 & Poj2774:Long Long Message
题面 HiHocoder1415 Poj2774 Sol 都是求最长公共子串,\(hihocoder\)上讲的很清楚 把两个串拼在一起,中间用一个特殊字符隔开 那么答案就是排序后相邻两个不同串的后缀的 ...
- Django Middleware简介
1 前言 Django使用非常熟练了,各种API接口不在话下,全都搞定.为方便定位问题在每个API接口的的开始和返回的地方都加上了log打印,记录入参和返回值. 但是这样有一个问题,需要每个 ...
- eclipse 中启动Tomcat超时了错误
修改E:\eclipse\eclipse\workspace\.metadata\.plugins\org.eclipse.wst.server.core\servers.xml 将 start-ti ...