效果圖
細(xì)化接口
查詢分頁
傳入index值，從當(dāng)前頁找到指定條數(shù)的數(shù)據(jù)進(jìn)行返回。
這里使用limit()方法返回指定條數(shù)；skip()指定跳過的條數(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));
}
});
});
然后添加一個獲取所有文章列表分頁的接口
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)兩三個太復(fù)雜了，所以在server端我們細(xì)化下接口：
上傳
先看是否傳了id字段，有則直接更新，沒有則新增（需要自己手動new一個ObjectID，最后用來返回）。更改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ù)，用來執(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);
}
}
本地存儲
這個程序包含三種存儲類型，分別為state樹，本地存儲asyncStorage和遠(yuǎn)程數(shù)據(jù)。
我的第一個想法是，進(jìn)入主頁先從本地獲取數(shù)據(jù)放到state中，進(jìn)行各種操作，最后退出應(yīng)用時再存到本地。數(shù)據(jù)結(jié)構(gòu)為：
Articles:[{time,title,content},{..},{..}]
在列表頁添加getNewData函數(shù)，用來獲取本地的內(nèi)容：
getArticles().then((articles) => {
this.setState({
articles,
});
});
然后，在跳轉(zhuǎn)到detail路由上的方法中添加幾個參數(shù)：articles,index,updateArticle。articles是從本地獲取的數(shù)據(jù)，index即為列表項的索引，我們用它來判斷是否為新增的條目，updateArticle是用來更新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,
});
}
然后我們在Detail組件中調(diào)用傳過來的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組件時，調(diào)用存儲函數(shù)：
componentDidUpdate() {
setArticles(this.state.articles).then((status) => {
console.log(status);
});
}
這里有一個關(guān)于AsyncStorage的坑，是在開發(fā)時第一次啟動app調(diào)試模式時，asyncStorage不生效，需要殺掉程序，重新進(jìn)一下。本人因為這個坑折騰了兩天TAT~
空值處理
當(dāng)標(biāo)題和內(nèi)容均為空，不保存到本地；
當(dāng)只有標(biāo)題為空時，自動截取內(nèi)容前6個字符作為標(biāo)題進(jìn)行保存；
當(dāng)只有內(nèi)容為空時，直接保存。
我們在Detail組件中來編寫以上步驟：
...
componentWillUnmount() {
const { isDelete, title, content } = this.state;
/* eslint-disable no-unused-expressions */
!isDelete && this.updateArticle();
// 空值檢測
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)描述打包就行~也不是很麻煩，沒什么坑。最后別忘了把項目fork后再起下服務(wù)器
cd server
yarn start
剩下的小細(xì)節(jié)就不一一贅述了，直接看代碼就行了。這個項目不復(fù)雜，剩下的功能我會在后面的版本中逐步迭代的~
有問題或疑問請在評論區(qū)指出~~
前兩篇地址：
使用react native 創(chuàng)建一個屬于你自己的云備忘錄app~（A。用node搭個服務(wù)，基礎(chǔ)篇）
