Vue 2.0 起步 (5) 订阅列表上传和下载 - 微信公众号 RSS

阅读 478
收藏 26
2017-03-02
原文链接:www.jianshu.com

上一篇:Vue 2.0 起步(4)第二版 轻量级后端Flask用户认证 - 微信公众号RSS

用户在本地搜索、订阅了公众号以后,可以方便地上传订阅列表到服务器上。也可以在另一地方下载订阅列表到本地

完成图:点击上传、下载图标就行


第5篇完成图

步骤:

  1. 后端Flask models更新
  2. api支持订阅列表上传、下载
  3. 前端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参数

  1. api取得email参数,来查询User已经订阅的Mps。
  2. Mp.from_json()把json.mps,转换成Mp模型列表
  3. 如果不存在这个订阅号,则添加到Mp,并订阅
  4. 如果用户没有订阅,则订阅

/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:vue2.heroku.com
源码:code.csdn.net/Kevin_QQ/vu…

下一篇:Vue 2.0 起步(6) 后台管理Flask-Admin - 微信公众号RSS


本文对你有帮助?欢迎扫码加入前端学习小组微信群:

评论