效果圖
細(xì)化接口
查詢分頁(yè)
傳入index值赏枚，從當(dāng)前頁(yè)找到指定條數(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));
}
});
});
然后添加一個(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字段份殿，有則直接更新膜钓，沒有則新增（需要自己手動(dòng)new一個(gè)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);
}
}
本地存儲(chǔ)
這個(gè)程序包含三種存儲(chǔ)類型拾枣，分別為state樹沃疮，本地存儲(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ù)俊啼，用來獲取本地的內(nèi)容：
getArticles().then((articles) => {
this.setState({
articles,
});
});
然后肺缕，在跳轉(zhuǎn)到detail路由上的方法中添加幾個(gè)參數(shù)：articles,index,updateArticle。articles是從本地獲取的數(shù)據(jù)授帕，index即為列表項(xiàng)的索引同木，我們用它來判斷是否為新增的條目，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,
});
}
然后我們?cè)?code>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組件時(shí)芥映，調(diào)用存儲(chǔ)函數(shù)：
componentDidUpdate() {
setArticles(this.state.articles).then((status) => {
console.log(status);
});
}
這里有一個(gè)關(guān)于AsyncStorage的坑洲尊，是在開發(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組件中來編寫以上步驟：
...
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)描述打包就行~也不是很麻煩厘擂，沒什么坑昆淡。最后別忘了把項(xiàng)目fork后再起下服務(wù)器
cd server
yarn start
剩下的小細(xì)節(jié)就不一一贅述了，直接看代碼就行了刽严。這個(gè)項(xiàng)目不復(fù)雜昂灵，剩下的功能我會(huì)在后面的版本中逐步迭代的~
有問題或疑問請(qǐng)?jiān)谠u(píng)論區(qū)指出~~
前兩篇地址：
使用react native 創(chuàng)建一個(gè)屬于你自己的云備忘錄app~（A。用node搭個(gè)服務(wù)舞萄，基礎(chǔ)篇）
