Day5&Day6 React+Node评论系统实现-单页面应用

小姐姐这两天把各种环境,软件装好了,什么Apache端口反向代理,iterm2等,顺便学完了React.js入门文档。内部的资料还是很不错的。入门文档中需要做一个新闻评论系统。tnpm安装和运行的速度令人发指的快。敲方便。开始有点喜欢这里了呢。慢慢变得聒噪起来~~

遇到一些问题

搭建过程

【学习文档参考】https://www.jianshu.com/p/794d573d2c53

往两个文件打包,一个是webpack.config.js,这是目标build,另外一个是webpack.production.config.js,目标dist.通过这个配置,对main.js进行打包,webpack-dev-server是一个小型的node.js Express服务器,为webpack打包生成的资源文件提供Web服务。大概端口在这个地方配置么??默认情况下,它将在当前文件夹下启动一个websocket服务,端口号为8080

*****果然跑的端口在这里配置。webpack.config.js加入

注意,在package.json里面需要加入这段话。才能生效。

配置好之后,在main.js里面随便写点东西,然后运行

然后,额。。报错了

需要安装 webpack-cli,webpack4把这个拆开了。参考文档【https://webpack.toobug.net/zh-cn/chapter3/cli-api.html】

【https://segmentfault.com/q/1010000013395159/a-1020000013396648】

Command Line Interface,顾名思义,也就是命令行用户界面。—mode production回退老版本也可以。

然后页面应该跑起来了,但是没有任何东西,由于在webpack.config.js设置了将app文件夹的main.js打包到bundle.js中,所以,现在需要在main.js中写入一些内容。大致的内容,我写的是react里面的路由。这样能够通过对应的路由访问到相应的component文件夹里面的组件。

学了个快捷键 cmd + 左右,光标跳到行首和行尾很实用。【https://my.oschina.net/u/1433048/blog/489580】

main.js里面的内容

这里id=app的dom在index.html里面。

emmmmm, 遇到了各种问题,心烦意乱,然鹅一想到梅西出线了,学习遇到困难就不能放弃,毕竟除了国足大家都在看世界杯,梅西大大压力还是很大的。猪队友带都带不动,只能靠自己。【日常吐槽】

学习了react-router的使用方法。【http://www.ruanyifeng.com/blog/2016/05/react_router.html】阮大神的文档写的很好。勤耕不辍。

webpack3到4的坑真是不少,配置文件中的loader需要改成rules。

package.json,scripts指定了运行脚本命令的npm命令行缩写and 各种依赖包,在tnpm init的时候会加载依赖,比如start指定了运行npm run start时,所要执行的命令.

把之前写的demo都跑起来了,emmmmmmm.敲开心,哈哈哈哈哈~~~~

包括显示Hello world,状态按钮变化等。props,refs使用

Node做接口供前台访问

打开IDE的时候,发现左下角的version control不见了。然后问了赋苏小哥哥,顶部的VCS需要enable版本控制。大神就是,在解决你问题的时候,同时会告诉你为啥这样做。灰常666。 想提交一个版本,但是git status的时候发现很多xml文件和node modules文件也在里面,所以使用了以下的指令进行忽略。

也就是即将需要使用的MVC框架。我才知道这个叫MVC框架。

网上的文章真是一言难尽,难得碰到写的好的。

大概也就是想做个简单功能

【https://itbilu.com/javascript/react/E1n52IsAg.html】这篇文章介绍了ssr渲染的具体做法

但是我现在想采用的是web端渲染。所以没采用。

参考的文章是这一篇【https://www.cnblogs.com/nzbin/p/5860219.html】确认过眼神,就是这篇了。认真的研究了一下下。

将服务器的数据渲染到web页面上

在一个真实的应用中,我们可能会使用 API 来获取应用所需的数据。我们先把数据保存在一个js文件中。

然后写CmmentsApplication组件

在目录app下的建立src/views/index.ejs

接着开始写服务端代码了,hahhahahahah

小姐姐放在了service/mainTest.js目录下

首先介绍一下ReactDOMServer.renderToString()。这个方法能在服务端口将虚拟DOM生成一个HTML字符串。需要用到。

用户comments提交+渲染在页面上

用户在页面填写的form表单提交到服务器端。下次访问还能显示。

参考文献

【http://www.cnblogs.com/QLeelulu/archive/2011/01/28/nodejs_into_and_n2mvc.html】

【https://segmentfault.com/a/1190000006166385】

【http://www.alloyteam.com/2017/01/react-from-scratch-server-render/】

【http://www.aliued.com/?p=4139】

前端的优秀团队【http://www.alloyteam.com/nav/】

大牛博客【https://blog.gaoqixhb.com/p/55c98c1811ab29df6ec4a065】

【日常美食鉴赏,跟着司勤有肉吃】

德国昨天不知道踢了什么鬼

发现个很可爱的美食

好吃的麻辣香锅

我爱的羽毛球

接下来继续搬砖跳舞打球

~~

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180628G1X3JJ00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券