react+nodejs前后端学习笔记

参考别人的简单笔记应用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(
              

                    {notes_items}
              
        )
    }
}

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的改变来实现