上一篇：Vue 2.0 起步(4)第二版 輕量級(jí)后端Flask用戶認(rèn)證 - 微信公眾號(hào)RSS
用戶在本地搜索、訂閱了公眾號(hào)以后，可以方便地上傳訂閱列表到服務(wù)器上。也可以在另一地方下載訂閱列表到本地
完成圖：點(diǎn)擊上傳、下載圖標(biāo)就行
第5篇完成圖
步驟：
- 后端Flask models更新
- api支持訂閱列表上傳、下載
- 前端vue.js ajax上傳、下載訂閱列表
1. 后端Flask models更新
Mp模型，添加to_json、from_json方法，分別對(duì)應(yīng)ajax下載、上傳來返回?cái)?shù)據(jù)庫(kù)查詢。
注意from_json，用戶上傳是一個(gè)訂閱列表，json里面包含多個(gè)mp，所以返回的是一個(gè)Mp模型的數(shù)組
/app/models.py
# 公眾號(hào)
class Mp(db.Model):
__tablename__ = 'mps'
id = db.Column(db.Integer, primary_key=True)
weixinhao = db.Column(db.Text)
image = db.Column(db.Text)
summary = db.Column(db.Text)
sync_time = db.Column(db.DateTime, index=True, default=datetime.utcnow) # Search.vue: date
mpName = db.Column(db.Text)
encGzhUrl = db.Column(db.Text) # 臨時(shí)主頁(yè)
subscribeDate = db.Column(db.DateTime())
# 如果加了dynamic, Flask-Admin里會(huì)顯示raw SQL
articles = db.relationship('Article', backref='mp', lazy='dynamic')
subscribers = db.relationship('Subscription',
foreign_keys=[Subscription.mp_id],
backref=db.backref('mp', lazy='joined'),
lazy='dynamic',
cascade='all, delete-orphan')
def to_json(self):
json_mp = {
'weixinhao': self.weixinhao,
'mpName': self.mpName,
'image': self.image,
'summary': self.summary,
'subscribeDate': self.subscribeDate,
'articles_count': self.articles.count()
}
return json_mp
@staticmethod
def from_json(json_post):
mps = json_post.get('mps')
print mps
if mps is None or mps == '':
raise ('POST does not have mps')
Mps = []
for mp in mps:
# print mp
Mps.append( Mp(mpName=mp['mpName'], image=mp['image'], weixinhao=mp['weixinhao'] ) )
return Mps
2. api支持訂閱列表上傳、下載
用戶使用POST上傳列表，帶email、mps參數(shù)
- api取得email參數(shù)，來查詢User已經(jīng)訂閱的Mps。
- Mp.from_json()把json.mps，轉(zhuǎn)換成Mp模型列表
- 如果不存在這個(gè)訂閱號(hào)，則添加到Mp，并訂閱
- 如果用戶沒有訂閱，則訂閱
/app/api_1_0/mps.py
from flask_security import auth_token_required
@api.route('/mps', methods=['POST'])
@auth_token_required
def new_mps():
email = request.get_json()['email']
user = User.query.filter_by(email=email).first()
Mps = Mp.from_json(request.json)
subscribed_mps_weixinhao = [i.weixinhao for i in user.subscribed_mps]
rsp = []
for mp in Mps:
mp_sql = Mp.query.filter_by(weixinhao=mp.weixinhao).first()
# 如果不存在這個(gè)訂閱號(hào)，則添加到Mp，并訂閱
if mp_sql is None:
db.session.add(mp)
user.subscribe(mp)
rsp.append(mp.to_json())
db.session.commit()
# 如果用戶沒有訂閱，則訂閱
elif not mp.weixinhao in subscribed_mps_weixinhao:
user.subscribe(mp_sql)
rsp.append(mp.to_json())
db.session.commit()
return jsonify(rsp), 201, \
{'Location': url_for('api.get_mps', id=mp.id, _external=True)}
用戶下載訂閱列表，使用GET。服務(wù)器拿到email后，通過SQLAlchemy過濾器和聯(lián)結(jié)查詢，返回subscribed_mps
# 帶 /mps/ 斜杠的，必須放在 /mps POST后面，不然默認(rèn)會(huì)選擇以下GET
@api.route('/mps/')
@auth_token_required
def get_mps():
# request.args.items().__str__()
email = request.args.get('email')
print email
mps = User.query.filter_by(email=email).first().subscribed_mps
mps_list = [ mp.to_json() for mp in mps ]
print mps_list
return jsonify(mps_list)
3. 前端vue.js ajax上傳、下載
/src/components/Siderbar.vue
上傳函數(shù)uploadSubscription()，ajax POST請(qǐng)求頭：注意Authentication-Token，Content-Type參數(shù)
POST header.png
json參數(shù)帶上email, mps
POST body.png
服務(wù)器響應(yīng)201，以及新添加的mps
new added Mp.png
uploadSubscription() {
if (this.subscribeList.length === 0) return false;
this.$http.post('/api/v1.0/mps',
//body
{
email: this.username,
mps: this.subscribeList
},
//options
{
headers: {
'Content-Type': 'application/json; charset=UTF-8',
'Authentication-Token': this.token
}
}).then((response) => {
// 響應(yīng)成功回調(diào)
var data = response.body,
mp;
alert('成功上傳訂閱號(hào)：\n' + JSON.stringify(data))
}, (response) => {
// 響應(yīng)錯(cuò)誤回調(diào)
alert('同步出錯(cuò)了！ ' + JSON.stringify(response))
if (response.status == 401) {
alert('登錄超時(shí)，請(qǐng)重新登錄');
this.is_login = false;
this.password = '';
window.localStorage.removeItem("user")
}
});
},
下載函數(shù)getSubscription()，GET url編碼為：http://localhost:5000/api/v1.0/mps/?email=admin。
對(duì)于服務(wù)器返回的json，是一個(gè)數(shù)組：
server response.png
Vue先要清空當(dāng)前本地訂閱列表，然后逐個(gè)訂閱從服務(wù)器取回的Mp
getSubscription() {
this.$http.get('/api/v1.0/mps', {
params: {
email: this.username
},
headers: {
'Content-Type': 'application/json; charset=UTF-8',
'Authentication-Token': this.token
}
}).then((response) => {
// 響應(yīng)成功回調(diào)
var data = response.body,
mp, found_tag = false;
alert('訂閱號(hào) from server：\n' + JSON.stringify(data));
for (let item of this.subscribeList) {
this.$store.dispatch('unsubscribeMp', item.weixinhao);
}
this.$store.dispatch('clearSubscription', 'get sublist from Server');
for (let mp of data) {
mp['showRemoveBtn'] = false;
this.$store.dispatch('subscribeMp', mp);
}
}, (response) => {
// 響應(yīng)錯(cuò)誤回調(diào)
alert('同步出錯(cuò)了！ ' + JSON.stringify(response))
if (response.status == 401) {
alert('登錄超時(shí)，請(qǐng)重新登錄');
this.is_login = false;
this.password = '';
window.localStorage.removeItem("user")
}
});
}
OK，試試吧：
Demo：http://vue2.heroku.com
源碼：https://github.com/kevinqqnj/vue-tutorial
請(qǐng)使用新的template: https://github.com/kevinqqnj/flask-template-advanced
