效果圖

demo

app下載地址(android only)

項(xiàng)目地址

細(xì)化接口

查詢分頁(yè)

傳入index值，從當(dāng)前頁(yè)找到指定條數(shù)的數(shù)據(jù)進(jìn)行返回。

這里使用limit()方法返回指定條數(shù)；skip()指定跳過(guò)的條數(shù)。

修改findDocuments方法：

// methods/find.js
const findDocuments = (
  db, data = {}, skipNum = 0, limit = 10,
  collectionName = articleCollection,
) =>
  new Promise((resolve, reject) => {
    const collection = db.collection(collectionName);
    collection.find(data).skip(skipNum).limit(limit).toArray((err, docs) => {
      if (err) {
        reject(createError(errors.HANDLE_DB_FAILED));
      } else {
        resolve(createResult(docs));
      }
    });
  });

然后添加一個(gè)獲取所有文章列表分頁(yè)的接口

function getArticles(req, res) {
  const { pageNum, listNum } = req.body;

  connectDB
    .then(db => findDocuments(db, {}, pageNum, listNum))
    .then(data => res.json(data))
    .catch((err) => { unknowError(err, res); });
}

上一篇文章的出的接口都很基礎(chǔ)，但在業(yè)務(wù)上一次調(diào)兩三個(gè)太復(fù)雜了，所以在server端我們細(xì)化下接口：

上傳

先看是否傳了id字段，有則直接更新，沒(méi)有則新增（需要自己手動(dòng)new一個(gè)ObjectID，最后用來(lái)返回）。更改upload接口：

if (id && id.length > 0) {
    connectDB
      .then(db => updateDocument(db, { _id: new ObjectID(id) }, { content, title }))
      .then(data => res.json(data))
      .catch((err) => { unknowError(err, res); });
  } else {
    const newId = new ObjectID();
    connectDB
      .then(db => insertDocuments(db, { content, title, _id: newId }))
      .then((data) => {
        const backData = Object.assign(data);
        backData.body.id = newId;
        return res.json(backData);
      })
      .catch((err) => { unknowError(err, res); });
  }

回到Detail組件，新增uploadData函數(shù)，用來(lái)執(zhí)行上傳操作

 async uploadData() {
    const { content, title } = this.state;
    try {
      const result = await request('/upload', { content, title });
      console.log('result', result);
      // 上傳成功
      Toast.show('上傳成功', Toast.SHORT);
    } catch (e) {
      Toast.show('上傳失敗', Toast.SHORT);
    }
  }

本地存儲(chǔ)

這個(gè)程序包含三種存儲(chǔ)類型，分別為state樹(shù)，本地存儲(chǔ)asyncStorage和遠(yuǎn)程數(shù)據(jù)。

我的第一個(gè)想法是，進(jìn)入主頁(yè)先從本地獲取數(shù)據(jù)放到state中，進(jìn)行各種操作，最后退出應(yīng)用時(shí)再存到本地。數(shù)據(jù)結(jié)構(gòu)為：

Articles:[{time,title,content},{..},{..}]

在列表頁(yè)添加getNewData函數(shù)，用來(lái)獲取本地的內(nèi)容：

getArticles().then((articles) => {
      this.setState({
        articles,
      });
    });

然后，在跳轉(zhuǎn)到detail路由上的方法中添加幾個(gè)參數(shù)：articles,index,updateArticle。articles是從本地獲取的數(shù)據(jù)，index即為列表項(xiàng)的索引，我們用它來(lái)判斷是否為新增的條目，updateArticle是用來(lái)更新state tree的。

updateArticle(title, content, index) {
    const { articles } = this.state;
    const newArticle = [].concat(articles); // 注意不要直接修改state??！
    const date = new Date();
    const newData = { time: date.getTime(), title, content };
    if (index) {
      newArticle[index] = newData;
    } else {
      newArticle.push(newData);
    }
    this.setState({
      articles: newArticle,
    });
  }

然后我們?cè)?code>Detail組件中調(diào)用傳過(guò)來(lái)的updateArticle函數(shù)

updateArticle(title, content, index) {
    const { articles } = this.state;
    const newArticle = [].concat(articles);
    const date = new Date();
    const newData = { time: date.getTime(), title, content };
    if (index !== undefined) {
      newArticle[index] = newData;
    } else {
      newArticle.push(newData);
    }
    this.setState({
      articles: newArticle,
    });
  }

在跳回List組件時(shí)，調(diào)用存儲(chǔ)函數(shù)：

componentDidUpdate() {
    setArticles(this.state.articles).then((status) => {
      console.log(status);
    });
  }

這里有一個(gè)關(guān)于AsyncStorage的坑，是在開(kāi)發(fā)時(shí)第一次啟動(dòng)app調(diào)試模式時(shí)，asyncStorage不生效，需要?dú)⒌舫绦颍匦逻M(jìn)一下。本人因?yàn)檫@個(gè)坑折騰了兩天TAT~

空值處理

當(dāng)標(biāo)題和內(nèi)容均為空，不保存到本地；
當(dāng)只有標(biāo)題為空時(shí)，自動(dòng)截取內(nèi)容前6個(gè)字符作為標(biāo)題進(jìn)行保存；
當(dāng)只有內(nèi)容為空時(shí)，直接保存。

我們?cè)贒etail組件中來(lái)編寫(xiě)以上步驟：

...
  componentWillUnmount() {
    const { isDelete, title, content } = this.state;
    /* eslint-disable no-unused-expressions */
    !isDelete && this.updateArticle();
    // 空值檢測(cè)
    if (title.length > 0 || content.length > 0) {
      this.updateArticlesToStateTreeAndLocal(this.newArticles);
    }
    this.deEmitter.remove();
    this.deleteEmitter.remove();
  }
  ...
    updateArticle() {
    const { title, content, id } = this.state;
    const newData = { title, content, id };
    if (title.length === 0) {
      newData.title = content.slice(0, 6);
    }
    if (this.index !== undefined) {
      this.newArticles[this.index] = newData;
    } else {
      this.newArticles.push(newData);
    }
  }
  ...

打包

按照官網(wǎng)描述打包就行~也不是很麻煩，沒(méi)什么坑。最后別忘了把項(xiàng)目fork后再起下服務(wù)器

cd server
yarn start

剩下的小細(xì)節(jié)就不一一贅述了，直接看代碼就行了。這個(gè)項(xiàng)目不復(fù)雜，剩下的功能我會(huì)在后面的版本中逐步迭代的~

有問(wèn)題或疑問(wèn)請(qǐng)?jiān)谠u(píng)論區(qū)指出~~

前兩篇地址：

使用react native 創(chuàng)建一個(gè)屬于你自己的云備忘錄app~（A。用node搭個(gè)服務(wù)，基礎(chǔ)篇）

使用react native 創(chuàng)建一個(gè)屬于你自己的云備忘錄app~（B.編寫(xiě)app端）