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

戎泰
2023-12-01
如果没有看前两篇的童鞋,可以看看前两篇文章的内容,虽然写的一般,但是起码也是一个重无到有的过程。
直接进主题
  • 到这里,其实我们的前端页面布局,后台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/

 类似资料: