react学习笔记三----练习项目完成
如果没有看前两篇的童鞋,可以看看前两篇文章的内容,虽然写的一般,但是起码也是一个重无到有的过程。
1、显示文章列表
2、添加文章,当然就包括:格式、图片、链接啦
3、简单的登录控制(这个超级简单,只是做了一个管理员账号的登录)
直接进主题
- 到这里,其实我们的前端页面布局,后台nodejs服务程序已经有了,现在就是写页面和调用后台服务程序去处理数据了。
1、显示文章列表
2、添加文章,当然就包括:格式、图片、链接啦
3、简单的登录控制(这个超级简单,只是做了一个管理员账号的登录)
说明
文章列表(只说重点部分,其他看源码吧)
1、查询数据库(废话,不查数据库难道写成静态的呀,哈哈) 2、显示列表: 2.1、marked:解析makedown格式 2.2、highlight:高亮代码 2.3、以上两个组件是重点部分,一下代码重点为怎么使用: import marked from 'marked'; import hljs from 'highlight.js'; import 'highlight.js/styles/arta.css'; --------------------------------这里放在页面渲染中------------------------------------- marked(“这里是数据中的内容数据”); ----------------------------这里放在页面加载完成后的生命周期中----------------- //显示代码高亮 marked.setOptions({ highlight: code => hljs.highlightAuto(code).value, });
添加文章
1、react-simplemde-editor:makdown组件 import SimpleMDE from 'react-simplemde-editor'; import "simplemde/dist/simplemde.min.css"; --------------------------------这里放在页面渲染中------------------------------------- <SimpleMDE id="your-custom-id" label="" options={{ autofocus: true, spellChecker: false, gfm: true, pedantic: false, sanitize: false, tables: true, breaks: true, smartLists: true, smartypants: true, }} value={this.state.textValue} onChange={this.handleChange} /> 参数请查看官方文档
简单的登录控制
1、因为是练习版本,这里直接将管理账号手动添加到了mysql 2、nodejs通过查询验证对应的账号数据,将数据保存在cookie中 这里不做详细说明,不清楚请自行nodejs学习
总结
- 虽然该项目只是作为学习react一个初级阶段的项目,并没有采用高深的组件和技术,但是感觉作为一个练习项目还是可以用的。并且很多react其他好用的组件其实只会在需要的时候才会去用到。什么时候用,在做项目 的时候其实自然就知道了。
- 其实该3个章节不算教程,仅仅是一个学习笔记而已。
结尾语
- react是个好东西,后期也会继续学习和了解,还有很多东西没了解清楚
- 因为公司项目原因,其实最终项目中会使用vuejs,毕竟项目不算特别大,需要快速开发完成。
该系列的代码链接
nodejs:https://github.com/522011796/...
react:https://github.com/522011796/...
demo演示地址
react: http://www.rickycloud.cn/
vuejs: https://www.rickycloud.cn/
相关推荐
游走的豚鼠君 2020-11-10
81417707 2020-10-30
ctg 2020-10-14
小飞侠V 2020-09-25
PncLogon 2020-09-24
jipengx 2020-09-10
颤抖吧腿子 2020-09-04
wwzaqw 2020-09-04
maple00 2020-09-02
青蓝 2020-08-26
罗忠浩 2020-08-16
liduote 2020-08-13
不知道该写啥QAQ 2020-08-02
pengruiyu 2020-08-01
wmd看海 2020-07-27
孝平 2020-07-18
Eduenth 2020-07-05
iftrueIloveit 2020-07-04