React入门记事本小项目(一)

学习React之后，断断续续用了几天的时间写了一个React入门的记事本小项目，写前端页面时使用了bootstrap，使用的IDE为InteeliJ IDEA。功能实现了使用React编写App.js文件构建整个前端的页面，并且在React中使用Ajax与后台数据库交互，完成整个记事本记录的CURD，在后台使用了Hibernate进行数据库的操作，并使用阿里巴巴的fastjson进行数据json数据的解析等操作。具体效果图如下：

按照React官网所给的Thinking in React部分所写，按照五个步骤分别依次进行整个项目的编写工作，按官方文档所述五个步骤分别是：
1. 把UI拆分到组件的层级
2. 用React创建一个静态版本
3. 确定最小（但完备）的 UI state 表达
4. 确定你的 state 应该存在于哪里
5. 添加反向数据流
项目Github地址：https://github.com/GuiJu/AjaxService

一、准备工作

项目构建
使用ItelliJ IDEA中的maven工程，选择apache官方提供的webapp模板创建此项目，完成后目录结构建立成如下所示：

其中pom.xml依赖如下所示：

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">  <modelVersion>4.0.0</modelVersion>  <groupId>AjaxService</groupId>  <artifactId>AjaxService</artifactId>  <packaging>war</packaging>  <version>1.0-SNAPSHOT</version>  <name>AjaxService Maven Webapp</name>  <url>http://maven.apache.org</url>  <dependencies>    <dependency>      <groupId>junit</groupId>      <artifactId>junit</artifactId>      <version>3.8.1</version>      <scope>test</scope>    </dependency>    <dependency>      <groupId>org.hibernate</groupId>      <artifactId>hibernate-core</artifactId>      <version>4.2.2.Final</version>    </dependency>    <!-- for JPA, use hibernate-entitymanager instead of hibernate-core -->    <dependency>      <groupId>org.hibernate</groupId>      <artifactId>hibernate-entitymanager</artifactId>      <version>4.2.2.Final</version>    </dependency>    <dependency>      <groupId>junit</groupId>      <artifactId>junit</artifactId>      <version>4.12</version>    </dependency>    <!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->    <dependency>      <groupId>mysql</groupId>      <artifactId>mysql-connector-java</artifactId>      <version>5.1.6</version>    </dependency>    <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->    <dependency>      <groupId>javax.servlet</groupId>      <artifactId>javax.servlet-api</artifactId>      <version>3.1.0</version>    </dependency>    <!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->    <dependency>      <groupId>com.alibaba</groupId>      <artifactId>fastjson</artifactId>      <version>1.2.7</version>    </dependency>  </dependencies>  <build>    <finalName>AjaxService</finalName>  </build></project>

建立数据库
其中，数据库的建表语句如下，导出自mysql：

CREATE DATABASE  IF NOT EXISTS `Summary` /*!40100 DEFAULT CHARACTER SET latin1 */;USE `Summary`;-- MySQL dump 10.13  Distrib 5.5.50, for debian-linux-gnu (x86_64)---- Host: 127.0.0.1    Database: Summary-- -------------------------------------------------------- Server version   5.5.50-0ubuntu0.14.04.1/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;/*!40101 SET NAMES utf8 */;/*!40103 SET @OLD_TIME_ZONE=@@TIME_ZONE */;/*!40103 SET TIME_ZONE='+00:00' */;/*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;---- Table structure for table `summary`--DROP TABLE IF EXISTS `summary`;/*!40101 SET @saved_cs_client     = @@character_set_client */;/*!40101 SET character_set_client = utf8 */;CREATE TABLE `summary` (  `id` int(10) NOT NULL AUTO_INCREMENT,  `date` date DEFAULT NULL,  `content` text,  PRIMARY KEY (`id`)) ENGINE=InnoDB AUTO_INCREMENT=43 DEFAULT CHARSET=utf8;/*!40101 SET character_set_client = @saved_cs_client */;---- Dumping data for table `summary`--LOCK TABLES `summary` WRITE;/*!40000 ALTER TABLE `summary` DISABLE KEYS */;INSERT INTO `summary` VALUES (1,'2016-11-14','1.今天编写及测试最新表格中334-346号的渠道，经测试仅有4个渠道可以正常使用爬虫进行apk的下载，爬虫程序已编写完毕'),(39,'2016-11-18','1.完成所有新13个爬虫程序的编写，测试尚未完成2.完成ReactDemo数据提交到数据库的部分3.完成React的记录的删除部分功能'),(42,'2016-11-22','1.完成两个之前写的爬虫程序的修正    2.开始继续写全爬程序   3.开始用机械键盘了！');/*!40000 ALTER TABLE `summary` ENABLE KEYS */;UNLOCK TABLES;/*!40103 SET TIME_ZONE=@OLD_TIME_ZONE */;/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;/*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */;/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;-- Dump completed on 2016-11-22 20:28:30

在从数据库中获取数据时使用JSON进行数据的传输，数据传输时使用类似下面的格式，React的数据流也是从JSON数据中获取，其中的id、date、content分别对应着数据库中的三列：

var INFOS = [ {id: '1', date: '2016-11-8', content: 'content1'}, {id: '2', date: '2016-11-9', content: 'content2'} ];

index.jsp代码如下，日中引入了react及bootstrap所需的js文件：

<!DOCTYPE html><html lang="en"><head>    <link rel="icon" type="image/png" href=images/icon.png>    <meta charset="UTF-8">    <title>ReactSummary</title>    <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script>    <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script>    <script src="http://static.runoob.com/assets/react/browser.min.js"></script>    <!-- 新 Bootstrap 核心 CSS 文件 -->    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body><div id="app">    <script type="text/babel" src="/js/App.js"/></div></body></html>

完成项目的基本构建之后，下面开始按照React的思想构建记事本项目。

二、将UI拆分到组件层级

主要使用到的bootstrap组件有导航条、模态框和面板，具体拆分如下图所示：整体为App(橙色区域)，所有面板合在一起构成PanelList(蓝色区域)，而PanelList中又包含着各个单个的面板Panel(红色区域)，上方为导航条NavBar(咖色区域)。而输入内容时要用到模态框AddModal，输入更改信息时使用了模态框EditModal划分层级之后如下：
- App包含了NavBar、PanelList、AddModal
- NavBar包含了NavBarHeader、NavBarCollapse
- PanelList中包含了Panel
- 每个Panel中包含了其EditModal

-App --NavBar   ---NavBarHeader   ---NavBarCollapse --PanelList   ---Panel      ----EditModal --AddModal

对组件进行划分后，就可以继续进行接下来每个组件的编码，下一节开始进行React静态代码部分的完成。