用戶在本地搜索、訂閱了公眾號以后，可以方便地上傳訂閱列表到服務器上。也可以在另一地方下載訂閱列表到本地
完成圖：點擊上傳、下載圖標就行
第5篇完成圖
步驟：
- 后端Flask models更新
- api支持訂閱列表上傳、下載
- 前端vue.js ajax上傳、下載訂閱列表
1. 后端Flask models更新
Mp模型，添加to_json、from_json方法，分別對應ajax下載、上傳來返回數據庫查詢。
注意from_json，用戶上傳是一個訂閱列表，json里面包含多個mp，所以返回的是一個Mp模型的數組
/app/models.py
# 公眾號
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) # 臨時主頁
subscribeDate = db.Column(db.DateTime())
# 如果加了dynamic, Flask-Admin里會顯示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參數
- api取得email參數，來查詢User已經訂閱的Mps。
- Mp.from_json()把json.mps，轉換成Mp模型列表
- 如果不存在這個訂閱號，則添加到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()
# 如果不存在這個訂閱號，則添加到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。服務器拿到email后，通過SQLAlchemy過濾器和聯結查詢，返回subscribed_mps
# 帶 /mps/ 斜杠的，必須放在 /mps POST后面，不然默認會選擇以下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
上傳函數uploadSubscription()，ajax POST請求頭：注意Authentication-Token，Content-Type參數
POST header.png
json參數帶上email, mps
POST body.png
服務器響應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) => {
// 響應成功回調
var data = response.body,
mp;
alert('成功上傳訂閱號：\n' + JSON.stringify(data))
}, (response) => {
// 響應錯誤回調
alert('同步出錯了！ ' + JSON.stringify(response))
if (response.status == 401) {
alert('登錄超時，請重新登錄');
this.is_login = false;
this.password = '';
window.localStorage.removeItem("user")
}
});
},
下載函數getSubscription()，GET url編碼為：http://localhost:5000/api/v1.0/mps/?email=admin。
對于服務器返回的json，是一個數組：
server response.png
Vue先要清空當前本地訂閱列表，然后逐個訂閱從服務器取回的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) => {
// 響應成功回調
var data = response.body,
mp, found_tag = false;
alert('訂閱號 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) => {
// 響應錯誤回調
alert('同步出錯了！ ' + JSON.stringify(response))
if (response.status == 401) {
alert('登錄超時，請重新登錄');
this.is_login = false;
this.password = '';
window.localStorage.removeItem("user")
}
});
}
OK，試試吧：
Demo：http://vue2.heroku.com
源碼：https://github.com/kevinqqnj/vue-tutorial
請使用新的template: https://github.com/kevinqqnj/flask-template-advanced
