使用微信公衆號開發前端模擬面試

時間 2020-01-17

標籤使用微信公衆號開發前端模擬面試欄目快樂工作简体版

原文原文鏈接

最近在整理我在大廠面試以及平時工做中遇到的問題，記錄在 shfshanyue/Daily-Question 中，但以爲對於時時回顧，經常複習仍然作的不夠。前端

因而在微信公衆號中開發了隨機生成模擬面試的功能，因爲以爲比較簡單且有趣，因而分享了出來node

需求

先來談一談需求點：react

在公衆號中回覆面試，隨機生成 N 道大廠面試題
每道面試題指向一個超連接，能夠查看答案

需求很簡單，如圖下所示。你也能夠去個人公衆號 全棧成長之路 查看實現效果git

內容

在大部分行業中，內容是至爲重要的，有內容纔會有好的服務，而技術只是整合內容的一種手段。github

在本次功能開發中也是如此：一個面試題庫纔是相當重要。面試

爲此，我在 github 上新建了一個倉庫，使用 Issue 來記錄我在大廠面試中所遇到的面試題及答案docker

天天一道面試題，有關前端，後端，devops以及軟技能，促進職業成長，敲開大廠之門。npm

到此一步，我擁有了本身的內容，而且擁有了開箱即用的後臺管理系統: github issuesjson

數據

此時咱們已經擁有了一個特殊的後臺管理系統，但很遺憾，因爲該管理系統的特殊性，咱們並非數據映射管理系統，而須要根據 Github Issues 來生成結構化的數據，好在咱們可使用 Github API。後端

Github API 如今已經所有變成了 GraphQL 接口，看來你們又須要學習一門新的技術了。關於 Github API 的文檔能夠在這裏找到: Github API Explorer

如下 Query 就是咱們所須要的數據

query ISSUES ($after: String) { 
  repository (name: "Daily-Question", owner: "shfshanyue") {
    id
    issues (first: 100, after: $after, states: OPEN) {
      pageInfo {
        hasNextPage
        endCursor
      }
      nodes {
        id
        number
        title
        body
        comments (first: 10) {
          nodes {
            id
            body
            star: reactions (content: THUMBS_UP) {
              totalCount
            }
            author {
              login
              url
            }
          }
        }
        labels (first: 5) {
          nodes {
            id
            name
          }
        }
      }
    }
  }
}
複製代碼

微信開發

在微信開發中，定義一條路由，用來處理對關鍵字 面試 的回覆

const routes = [{
  default: true,
  handle: handleDefault
}, {
  text: /面試/,
  handle: handleInterview,
}]
複製代碼

根據封裝好的 Issue SDK 隨機選取八個問題，更多代碼能夠前往 shfshanyue/wechat 中

function handleInterview () {
  return issue.randomIssues(8).map((issue, i) =>
    `<a href="https://github.com/shfshanyue/Daily-Question/issues/${issue.number}">${i+1}. ${issue.title.slice(6)}</a>`
  ).join('\n\n')
}
複製代碼

自此微信開發結束，開始部署項目

部署

開發完成以後使用 docker 及 docker-compose 部署，traefik 作服務發現及負載均衡。

若是你對它們不夠了解，能夠查看個人系列文章我的服務器運維指南的案例篇，關於 docker，compose 及 traefik 等基礎設施的搭建均在本系列中有所介紹。

在生產環境中，經過 https://we.shanyue.tech 暴露服務。

在測試環境中，須要監聽文件重啓。在測試環境經過掛載目錄的方式在 https://we.dev.shanyue.tech 暴露服務。

Dockerfile 較爲簡單，配置文件以下

FROM node:10-alpine

WORKDIR /code 
ADD package.json /code RUN npm install --production 
ADD . /code 
CMD npm start 複製代碼

docker-compose.yaml 配置文件以下

version: '3'

services:
 wechat:
 build: .
 restart: always
 labels:
 - traefik.http.routers.wechat.rule=Host(`we.shanyue.tech`)
 - traefik.http.routers.wechat.tls=true
 - traefik.http.routers.wechat.tls.certresolver=le
 expose:
 - 3000

networks:
 default:
 external:
 name: traefik_default
複製代碼

測試環境與生產環境

當咱們須要測試微信公衆號時，直接使用本身的公衆號不太合適，特別是當已有上線內容時。微信官方提供了測試公衆號，咱們能夠從新填寫 域名 以及 token。在測試環境使用域名 https://we.dev.shanyue.tech

咱們在 docker-compose 中使用 service 中的 wechat 表明生產環境，wechat-dev 表明測試環境

wechat-dev 經過文件掛載提供服務，能夠更新重啓應用，即可以作到實時更新代碼，並實時在測試公衆號中看到效果。

docker-compose.yaml 配置文件以下

version: '3'

services:
 wechat:
 build: .
 restart: always
 labels:
 - traefik.http.routers.wechat.rule=Host(`we.shanyue.tech`)
 - traefik.http.routers.wechat.tls=true
 - traefik.http.routers.wechat.tls.certresolver=le
 expose:
 - 3000

 wechat-dev:
 image: 'node:10-alpine'
 restart: always
 volumes:
 - .:/code
 working_dir: /code
 command: npm run dev
 labels:
 - traefik.http.routers.wechat-dev.rule=Host(`we.dev.shanyue.tech`)
 - traefik.http.routers.wechat-dev.tls=true
 - traefik.http.routers.wechat-dev.tls.certresolver=le
 expose:
 - 3000

networks:
 default:
 external:
 name: traefik_default
複製代碼