react学习笔记三----练习项目完成

2024年1月28日 100次阅读 来源: ricky

如果没有看前两篇的童鞋，可以看看前两篇文章的内容，虽然写的一般，但是起码也是一个重无到有的过程。

直接进主题
  • 到这里，其实我们的前端页面布局，后台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/

    原文作者：ricky
    原文地址: https://segmentfault.com/a/1190000016075016
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞