React + MobX 入門及實例（二）

Eidesen 發布于2019-08-22 11:15 / 2018人閱讀

摘要：在上一章入門及實例一應用實例的基礎上增加優化界面增加后臺框架，操作。刪除選中項時，一定要在刪除成功后將置空，否則在下次選擇時會選中已刪除的項，雖然沒有元素但可能會影響其他一些操作。中設置跨域訪問實際是對進行匹配。

在上一章 React + MobX 入門及實例（一）應用實例TodoList的基礎上

增加ant-design優化界面

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

增加mobx異步操作fetch后臺數據。

步驟 Ⅰ. ant-design

安裝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";

Ⅱ. express, mongodb

前提：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

GPU云服務器云服務器 database詳解及實例阿里云云計算及云服務器入門 Mobx python入門實例

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92037.html

React + MobX 入門及實例（一）

摘要：前言現在最熱門的前端框架，毫無疑問是。對于小型應用，引入狀態管理庫是奢侈的。但對于復雜的中大型應用，引入狀態管理庫是必要的。現在熱門的狀態管理解決方案，相繼進入開發者的視野。獲得計算得到的新并返回。前言現在最熱門的前端框架，毫無疑問是React。 React是一個狀態機，由開始的初始狀態，通過與用戶的互動，導致狀態變化，從而重新渲染UI。對于小型應用，引入狀態管理庫是奢侈的。但...

simon_chen 2019-08-21 17:56 評論0 收藏0
Mobx4.X狀態管理入門

摘要：前言原本說接下來會專注學但是最新工作又學習了一些有意思的庫於是就再寫下來做個簡單的入門之前我寫過一篇文章這個也算是作為一個補充吧這次無非就是類似筆記把認為的一些關鍵點記下來有些地方還沒用到就衹是描述一下代碼有些自己寫的有些文檔寫的很好就搬下前言原本說接下來會專注學nodejs,但是最新工作又學習了一些有意思的庫,於是就再寫下來做個簡單的入門,之前我寫過一篇文章,這個也算是作為一個補...

CKJOKER 2019-08-26 10:36 評論0 收藏0
MobX入門TodoList

摘要：用于簡單可擴展的狀態管理，相比有更高的靈活性，文檔參考中文文檔，本文作為入門，介紹一個簡單的項目。任務已完成下一個任務修復谷歌瀏覽器頁面顯示問題提交意見反饋代碼創建在中引入主入口文件設置參考入門學習總結 MobX用于簡單、可擴展的React狀態管理，相比Redux有更高的靈活性，文檔參考：MobX中文文檔，本文作為入門，介紹一個簡單的TodoList項目。 1. 預期效果 showIm...

csRyan 2019-08-26 10:26 評論0 收藏0
利用Dawn工程化工具實踐MobX數據流管理方案

摘要：新的項目目錄設計如下放置靜態文件業務組件入口文件數據模型定義數據定義工具函數其中數據流實踐的核心概念就是數據模型和數據儲存。最后再吃我一發安利是阿里云業務運營事業部前端團隊開源的前端構建和工程化工具。本文首發于阿里云前端dawn團隊專欄。項目在最初應用 MobX 時，對較為復雜的多人協作項目的數據流管理方案沒有一個優雅的解決方案，通過對MobX官方文檔中針對大型可維護項目最佳實踐的...

0x584a 2019-08-21 17:19 評論0 收藏0
react+mobx+thrift學習demo

摘要：安裝等相關依賴。通過啟動項目，進行后續操作。自定義執行狀態的改變。任何不在使用狀態的計算值將不會更新，直到需要它進行副作用操作時。強烈建議始終拋出錯誤，以便保留原始堆棧跟蹤。 2018-08-14 learning about work begin：2018-08-13 step 1 熟悉react 寫法 step 2 mobx 了解&使用 step 3 thrift接口調用過程 Re...

xcc3641 2019-08-23 11:44 評論0 收藏0