一歩ずつ、Vue.js+Vuexを使って、WeChat公式アカウントを収集するアプリを作成するように教えます.

見てもいいですか?それとも所蔵だけしてもいいですか?痴漢です.学校から出ないでください.兄を呼んで片付けます.
プロジェクトの住所:https://github.com/jrainlau/wechat-subscriptor
ダウンロード&実行

git clone [email protected]:jrainlau/wechat-subscriptor.git
cd wechat-subscriptor && npm install

npm run dev   // run in dev mode
cd backend-server && node crawler.js   // turn on the crawler server

open `localhost:8080` in your broswer and enjoy it.

プロジェクト紹介
WeChatでは多くの公衆番号に注目しています.中身をよく見ています.しかし、往々にして私が文章を読む時、いつも各種の微信のニュースに中断されて、切って行かなければならなくて、返事のニュース、それからいっしょに公衆号に帰って、再び文章を開けて、繰り返して、煩にたえません.その後、WeChatは犬の捜索と協力して、犬を探して直接公衆番号を検索することができますが、なぜこの資源を利用しないで公衆番号を専門に収集するアプリケーションをしますか?このアプリは公衆番号を簡単に検索して収集できます.見たい時はそのまま開けて見ることができます.はい、実は難しくないです.アーキテクチャから発想します.
全体構造
国際慣例は、まずアーキテクチャ図を見ます.
次に技術の選択です.

は、検索犬のAPIを利用して公衆番号を照会するインターフェース

とする.

クロスドメインの問題があるので、node爬虫類使用インターフェース

を通して

はvueを用いて開発し、vuexは状態管理

とする.

は、muiをUIフレームとして使用し、後で携帯アプリ

に包装するのに便利である.

は、vue-cliを用いてプロジェクトを初期化し、webpackを介して構築する

.
まず、赤圏のvuex部分を分析する.APP全体の核心であり、すべてのデータの処理センターでもあります.
クライアントのすべてのコンポーネントは、actionにおいて、非同期要求などの流入データに対する処理を完了し、actionをトリガするmutationによってstateによってstateによってgetterを介して各コンポーネントに配信され、「単一のデータストリーム」の特徴を満たすとともに、公式に推奨されるやり方にも合致する.
最も重要なvuexを理解してから、他の部分も無事に章になりました.矢印はデータの流れを表しています.LocalStorageはお気に入りの内容を保存しています.次のアプリケーションを開く時に内容が失われないようにしてください.nodeサーバはキーワードに基づいて検索犬APIから提供されたデータを収集しています.
簡単ですか?codingを始めましょう.
初期化項目npm install vue-cli -gは最新版のvue-cliをインストールし、vue init webpack wechat-subscriptorは提示の通りに一ステップずつ設置して依存パッケージをインストールした後、プロジェクトのディレクトリに入り、少し変更します.最終ディレクトリ構造は以下の通りです.
具体的な内容は直接プロジェクトをご覧ください.
サーバ&爬虫類/backend-serverフォルダに入り、crawler-server.jsという名前のファイルを新たに作成します.コードは以下の通りです.

/*** crawler-server.js ***/

'use strict'
const http = require('http')
const url = require('url')
const util = require('util')
const superagent = require('superagent')
const cheerio = require('cheerio')

const onRequest = (req, res) => {
    // CORS options
    res.writeHead(200, {'Content-Type': 'text/plain', 'Access-Control-Allow-Origin': '*'})
    let keyWord = encodeURI(url.parse(req.url, true).query.query)
    // recieve keyword from the client side and use it to make requests
    if (keyWord) {
        let resultArr = []
        superagent.get('http://weixin.sogou.com/weixin?type=1&query=' + keyWord + '&ie=utf8&_sug_=n&_sug_type_=').end((err, response) => {
            if (err) console.log(err)
            let $ = cheerio.load(response.text)

            $('.mt7 .wx-rb').each((index, item) => {
                // define an object and update it
                // then push to the result array
                let resultObj = {
                    title: '',
                    wxNum: '',
                    link: '',
                    pic: '',
                }

                resultObj.title = $(item).find('h3').text()
                resultObj.wxNum = $(item).find('label').text()
                resultObj.link = $(item).attr('href')
                resultObj.pic = $(item).find('img').attr('src')
                resultArr.push(resultObj)
            })
            
            res.write(JSON.stringify(resultArr))
            res.end()
        })
    }
}

http.createServer(onRequest).listen(process.env.PORT || 8090)
console.log('Server Start!')

簡単な爬虫類は、クライアントから提供されたキーワードを通じて検索犬に要求を送り、cheerioを用いて分析して鍵となる情報を得る.ここには検索犬の公式サイトが貼ってあります.自分で試してみてもいいです.http://weixin.sogou.com/
サーバがオープンしたら、パラメータ要求localhost:8090を持ってコンテンツを取得することができます.
状態管理にVuexを使用する.
まずvuex公式文書を貼り付けます.http://vuex.vuejs.org/en/index.html私を信じてください.中国語版を見ないでください.でないと、英語版で十分です.
上記のアーキテクチャ図から分かるように、すべてのデータ流通はvuexによって行われ、上記の文書によってvuexの使用法を理解した後、/vuexフォルダに入り、コアstore.jsコードを構築する.

/*** store.js ***/

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
  collectItems: [],
  searchResult: {}
}

localStorage.getItem("collectItems")?
 state.collectItems = localStorage.getItem("collectItems").split(','):
  false

const mutations = {
  SET_RESULT (state, result) {
    state.searchResult = result
  },
  COLLECT_IT (state, name) {
    state.collectItems.push(name)
    localStorage.setItem("collectItems", state.collectItems)
  },
  DELETE_COLLECTION (state, name) {
    state.collectItems.splice(state.collectItems.indexOf(name), 1)
    localStorage.setItem("collectItems", state.collectItems)
  }
}

export default new Vuex.Store({
  state,
  mutations
})

中のコードについて重点的に分析します.
まず、stateオブジェクトを定義しました.中の2つの属性はお気に入りの内容に対応しています.言い換えれば、APP全体のデータはstateオブジェクトに保存されています.
次に、mutationsオブジェクトをもう一つ定義します.mutationsを「stateの状態を変更するための一連の方法」と理解することができる.vuexの概念では、stateだけでmutationによって修正できるという利点は、アプリケーションの状態をより直感的に明確に管理することができることであり、データをどこに捨ててもいいということではない.
コードを通して、三つのmutationの役割はそれぞれ:

SET_RESULT:検索結果をstate

に保存する.

COLLECT_IT:お気に入り操作(localstorageを含む)に追加する

DELETE_IT:お気に入りからの取り外し操作(localstorageを含む)

コンポーネントデータ処理
私たちのAPPには全部で二つのコンポーネントがあります.SearchBar.vueとSearchResult.vueはそれぞれ検索部分のコンポーネントと結果部分のコンポーネントに対応しています.検索部分にはお気に入り部分が含まれていますので、三つの部分があるとも理解できます.
検索コンポーネントSearchBar.vue

/*** SearchBar.vue ***/


vuex: {
  getters: {
    collectItem(state) {
      return state.collectItems
    }
  },
  actions: {
    deleteCollection: ({ dispatch }, name) => {
      dispatch('DELETE_COLLECTION', name)
    },
    searchFun: ({ dispatch }, keyword) => {
      $.get('http://localhost:8090', { query: keyword }, (data) => {
        dispatch('SET_RESULT', JSON.parse(data))
      })
    }
  }
}

コードが長いです.ここではvuex部分だけを重点的に紹介します.完全コードはプロジェクトを参照できます.

gettersは、storeの中のデータを取得して、サブアセンブリとして

を使用する.

actionsの2つの方法は、storeのためにmutationを使用するためにデータを

に配信する責任がある.
公式の例を見ると、コンポーネント中のactionへの参照は複雑であるようだが、実際にはmethodsを介してパラメータを処理することができ、トリガactionsと同時にパラメータを送ることができる.
結果、コンポーネントの一部SearchResult.vue

/*** SearchResult.vue ***/

vuex: {
  getters: {
    wordValue(state) {
      return state.keyword
    },
    collectItems(state) {
      return state.collectItems
    },
    searchResult(state) {
      return state.searchResult
    }
  },
  actions: {
    collectIt: ({ dispatch }, name, collectArr) => {
      for(let item of collectArr) {
        if(item == name) return false
      }
      dispatch('COLLECT_IT', name)
    }
  }
}

結果の一部は主に展示にあり、actionをトリガーする必要があるところはお気に入りに追加するだけである.注意すべき点は、重複した追加を避けるべきであるため、for...ofサイクルが使用され、配列中に現在の要素がある場合は追加されなくなる.
終わりに
肝心なロジック部分のコードの分析が終わりました.このアプリはこのようなことになります.UI部分は詳しく言わなくて、プロジェクトのソースコードを見てみます.パッケージがAPPになると、まずHBuiderをダウンロードして直接包装すればいいです.セットでmuiを使ってもっといい効果を体験できます.なぜこんなに多くの人が黒いのですか?
検索犬が提供しているAPIはとても強いですが、注意してください.あまり頻繁に操作しないでください.そうしないとIPは封鎖されます.私のは封鎖されました.Weexはもう出てきました.Nativeアプリケーションを構築することができます.考えてみると興奮します.気が向いたら本論文のプロジェクトをWeexバージョンにして遊びます.
最後の最後に、読んでくれてありがとうございます.私の文章がいいと思ったら、私のコラムに注目してください.またお会いしましょう.