react学习笔记三----练习项目完成
2018-08-18 本文已影响0人
sanguing
如果没有看前两篇的童鞋，可以看看前两篇文章的内容，虽然写的一般，但是起码也是一个重无到有的过程。
直接进主题
- 到这里，其实我们的前端页面布局，后台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/nodeApi
react：https://github.com/522011796/react-demo
demo演示地址
react: http://www.rickycloud.cn/（已经重新替换为vuejs版）
vuejs: https://www.rickycloud.cn/
