React + MobX 入门及实例（二）

摘要：在上一章入门及实例一应用实例的基础上增加优化界面增加后台框架，操作。删除选中项时，一定要在删除成功后将置空，否则在下次选择时会选中已删除的项，虽然没有元素但可能会影响其他一些操作。中设置跨域访问实际是对进行匹配。

在上一章 React + MobX 入门及实例（一） 应用实例TodoList的基础上

增加ant-design优化界面

增加后台express框架，mongoose操作。

增加mobx异步操作fetch后台数据。

安装antd包

npm install antd --save

安装antd按需加载依赖

npm install babel-plugin-import --save-dev

更改.babelrc 配置为

{
  "presets": ["react-native-stage-0/decorator-support"],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": true
      }
    ]
  ],
  "sourceMaps": true
}

引入antd控件使用

import { Button } from "antd";

前提：mongodb的安装与配置

安装express、mongodb、mongoose

npm install --save express mongodb mongoose

项目根目录创建server.js，撰写后台服务

引入body-parser中间件，作用是对post请求的请求体进行解析，转换为我们需要的格式。
引入Promise异步，将多查询分为单个Promise，用Promise.all连接，待查询完成后才会发送查询后的信息，如果不使用异步操作，查询不会及时响应，前端请求的可能是上一次的数据，这不是我们想要的结果。

//express
const express = require("express");
const app = express();
//中间件
const bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({extended: false}));// for parsing application/json
app.use(bodyParser.json()); // for parsing application/x-www-form-urlencoded

//mongoose
const mongoose = require("mongoose");
mongoose.connect("mongodb://localhost/todolist",{useMongoClient:true});
mongoose.Promise = global.Promise;
const db = mongoose.connection;

db.on("error", console.error.bind(console, "connection error:"));
db.once("open", function () {
    console.log("connect db.")
});

//模型
const todos = mongoose.model("todos",{
    key: Number,
    todo: String
});

//发送json: 数据+数量
let sendjson = {
    data:[],
    count:0
};

//设置跨域访问
app.all("*", function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By"," 3.2.1");
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});

//api/todos
app.post("/api/todos", function(req, res){
    const p1 = todos.find({})
        .exec((err, result) => {
            if (err) console.log(err);
            else {
                sendjson["data"] = result;
            }
        });

    const p2 = todos.count((err,result) => {
        if(err) console.log(err);
        else {
            sendjson["count"] = result;
        }
    }).exec();

    Promise.all([p1,p2])
        .then(function (result) {
            console.log(result);
            res.send(JSON.stringify(sendjson));
        });
});

//api/todos/add
app.post("/api/todos/add", function(req, res){
    todos.create(req.body, function (err) {
        res.send(JSON.stringify({status: err? 0 : 1}));
    })
});

//api/todos/remove
app.post("/api/todos/remove", function(req, res){
    todos.remove(req.body, function (err) {
        res.send(JSON.stringify({status: err? 0 : 1}));
    })
});

//设置监听80端口
app.listen(80, function () {
    console.log("listen *:80");
});

package.json -- scripts添加服务server启动项

"scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js --env=jsdom",
    "server": "node server.js"
  },

Ⅲ. Fetch后台数据
前后端交互使用fetch，也同样写在store里，由action触发。与后台api一一对应，主要包含这三个部分：

    @action fetchTodos(){
        fetch("http://localhost/api/todos",{
            method:"POST",
            headers: {
                "Content-type":"application/json"
            },
            body: JSON.stringify({
                current: this.current,
                pageSize: this.pageSize
            })
        })
            .then((response) => {
                // console.log(response);
                response.json().then(function(data){
                    console.log(data);
                    this.total = data.count;
                    this._key = data.data.length===0 ? 0: data.data[data.data.length-1].key;
                    this.todos = data.data;
                    this.loading = false;
                }.bind(this));
            })
            .catch((err) => {
                console.log(err);
            })
    }

    @action fetchTodoAdd(){
        fetch("http://localhost/api/todos/add",{
            method:"POST",
            headers: {
                "Content-type":"application/json"
            },
            body: JSON.stringify({
                key: this._key,
                todo: this.newtodo,
            })
        })
            .then((response) => {
                // console.log(response);
                response.json().then(function(data){
                    console.log(data);
                    /*成功添加 总数加1 添加失败 最大_key恢复原有*/
                    if(data.status){
                        this.total += 1;
                        this.todos.push({
                            key: this._key,
                            todo: this.newtodo,
                        });
                        message.success("添加成功！");
                    }else{
                        this._key -= 1;
                        message.error("添加失败！");
                    }
                }.bind(this));
            })
            .catch((err) => {
                console.log(err);
            })
    }

    @action fetchTodoRemove(keyArr){
        fetch("http://localhost/api/todos/remove",{
            method:"POST",
            headers: {
                "Content-type":"application/json"
            },
            body: JSON.stringify({
                key: keyArr
            })
        })
            .then((response) => {
                console.log(response);
                response.json().then(function(data){
                    // console.log(data);
                    if(data.status){
                        if(keyArr.length > 1) {
                            this.todos = this.todos.filter(item => this.selectedRowKeys.indexOf(item.key) === -1);
                            this.selectedRowKeys = [];
                        }else{
                            this.todos = this.todos.filter(item => item.key !== keyArr[0]);
                        }
                        this.total -= keyArr.length;
                        message.success("删除成功！");
                    }else{
                        message.error("删除失败！");
                    }
                }.bind(this));
            })
            .catch((err) => {
                console.log(err);
            })
    }

antd Table控件绑定的DataSource是普通数组形式，而经过Mobx修饰器修饰的数组是observableArray，所以要通过observable.toJS()转换成普通数组。

antd Table控件数据源需包含key，一些对行的操作都依赖key。

删除选中项时，一定要在删除成功后将selectedRowKeys置空，否则在下次选择时会选中已删除的项，虽然没有DOM元素但可能会影响其他一些操作。

使用Mobx过程中，如果this无法代表本身，而是指向其他，这时候函数不会执行，也不像React会报错：this is undefined，这时候需要手动添加bind(this)，如果在View试图中调用时需要绑定，写为：bind(store)；

跨域处理JSONP是一种方法，但是最根本的方法是操作header。server.js中设置跨域访问实际是对header进行匹配。

如果将mongoose查询写为异步，每个查询最后都需要添加.exec()，这样返回的才是Promise对象。mongoose易错。

Github