參考別人的簡單筆記應用demo思考：

https://www.cnblogs.com/tianheila/p/5176556.html

思想：

1.前端寫頁面動作邏輯，請求資料採用ajax請求回撥.

應用場景：form表單的onsubmit事件處理函式程式碼裡面

ajax請求形式：

$.ajax({
    url:"url",
    tyoe:"post",
    dataType:"json",
    data:JSON.stringify(),//反序列化    
    cache:"false",
    success:function(res){
        //列印日誌
        //對返回結果進行預處理
        //重新得到所有新的資料
        //this.state更新
    }.bind(this),
    error:function(){
        //列印日誌
    }
})
 

2.後端寫業務邏輯

路由到get ‘/’，get ‘/init’, post '/addNote'等應用層邏輯

var express = require('express');
var router = express.Router();

/*GET home page.*/
router.get('/'.function(req,res,next){
    res.render('index',{title:'react-note'});
})

/*初始化*/
router.get('/init',function(req,res,next){
    //得到資料
    res.json(data);
})

router.post('addNote',function(req,res,next){
    var postdata = req.body;
    //呼叫consul新增資料
    //獲取更新後的所有的data
    res.json(data)
})
 

module.exports = router;

3.前端用react寫，思想是每個模組都是一個元件，單獨的js檔案

比如Note_list模組

//Note_list.js
import React from "react"
//因為Note_list模組要用到Note_item模組
import Notes_item from "./Notes_item.js"

class Notes_list extends React.Component{
    render(){
        //獲取父元件資料
        //採用map方法構建Note_items元件
        return(
              <div>
                    {notes_items}
              </div>
        )
    }
}

export default Notes_list;
 

4.react思想：

1. 頁面由元件模組構成，元件通過屬性拿到資料，返回渲染後的對應html
2. 標籤通過標籤動作屬性繫結事件函式this.handleFunction
3. handleFunction通過對this.setState或者this.ref屬性修改，來動態展示頁面
4. 元件初始化時有一個this.state變數可以賦初始值
5. 元件mount之後可以通過一個componentDidMount函式進行this.setState修改狀態
6. 動態頁面的實現就是通過事件動作處理函式this.setState改變this.state以及react底層自動檢測state的改變來實現