AwesoLynn

前置条件

获得一张组件设计图和后台返回的JSON数据。

1
2
3
4
5
6
7
8

[
  {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
  {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
  {category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
  {category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
  {category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
  {category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
];

状态提升

React应用中，任何可变的数据应只有一个唯一数据源，此时state首先添加到需要渲染的组件中。但当多个组件需要共用反映同样的变化数据时，即其他组件也需要这个state时，需要将state提升到这些组件的共同父组件中。通过自顶向下的数据源，更新唯一的数据源state。

在子组件中使用this.props.xxx代替this.state。在共同父组件中使用state更新子组件中的值。

列表

使用{}在JSX构建一个元素集合。
使用JS的map()方法遍历数组，将数组中的元素变成<li>标签。

1
2
3
4
5
6
7
8

const number = [1,2,3,4,5];
const listitems = numbers.map((number) => 
    <li>{number}</li>
);
ReactDOM.render(
    <ul>{listItems}</ul>,
document.getElementById('root')
);

事件处理

为了与传统HTML区别开，React事件命名采用小驼峰（camelCase）形式。
使用JSX语法时需要传入函数作为事件处理函数

1
2
3

<button onClick={function}>
Function
</button>

注意点

1. 阻止默认行为必须显式的使用preventDefault

   阅读更多...

React

React是一个声明式，高效且灵活的用于构建用户界面的JavaScript库。使用React可以将一些简短、独立的代码片段组合成复杂的UI界面，这些代码片段称为“组件”。

JSX

JSX是JavaScript的语法拓展，可以生成React“元素”。React认为渲染逻辑与其他UI逻辑内在耦合，故其没有采用将标记和逻辑分离在不同文件的方式，而是将他们共同存入“组件”的松散耦合单元中。

1
2
3
4

//JSX语法
<div />
//等同于
React.createElement('div')

在JSX中可以任意使用JavaScript表达式，只需要用大括号{}括起来。

前后端分离

一些概念理解

• 前端：在浏览器端运行的内容为前端。通常是用HTML+CSS+JS来实现的，如APP、小程序、H5等。
• 后端：在服务器端运行的内容为后端。如Java、C、Python、PHP等
• 静态页面：网页中没有程序代码，仅HTML。一般静态页面一旦生成，内容就不会被改变。
• 动态页面：网页文件除了HTML还包括一些程序代码使浏览器可以与服务器交互，随用户交互的不同请求动态的生成网页内容。
• 网页的静态化：将动态数据都提前生成为静态的html页面，避免从数据库取数的时间。
• DOM：文档对象模型（Document Object Model），一种将HTML/XML文档组织成对象模型（DOM树）的建模过程。
• 虚拟DOM：DOM树结构在内存里的映射

正则表达式定义了字符串的模式，可以用来搜索、编辑、处理文本。用//包围一个正则表达式

功能

• 测试字符串内模式（数据验证）
• 替换文本
• 基于模式匹配提取子字符串

语法

正则表达式由普通字符以及特殊字符（元字符）组成。

BootStrap

BootStrap是一个前端组件库，包括一系列CSS和jQuery实现的组件，非常流行。

• 通过Reboot清理统一了各个浏览器的样式
• 通过Layout提供了一个支持复杂布局的网格结构
• 通过Component提供了一系列常用的增强组件
• 通过其生态提供了大量风格各异的主题

优化网站样式

选择网站主题

在BootStrap网站主题页面选择主题，在选择主题的download下拉按钮下，右键点击bootstrap.min.css选择复制链接。

数据库

分类

关系数据库： MySQL、PostgreSQL

文档数据库： mongoDB、CouchDB

区别在于schema：

• 关系数据库在插入数居前，需要先建立表结构，预先制定好字段和类型，即schema。一张表里的字段结构是一致的，一条数据，就是一个记录

• 文档数据库按文档组织数据，数据格式无需提前声明，各个文档内也无关联。

  阅读更多...

在学习Node.js的过程中需要使用Mongoose，故安装MongeDB进行使用。但过程中踩了不少坑。以下安装步骤是多次踩坑后可以正常运行的版本。

安装环境：Mac OS 10.15.3

安装包下载

方法1:使用官网安装包

官网安装包下载链接