使用微信公众号开发模拟面试功能
<p>最近在整理我在大厂面试以及平时工作中遇到的问题，记录在 shfshanyue/Daily-Question 中，但觉得对于时时回顾，常常复习仍然做的不够。</p><p>于是在微信公众号中开发了随机生成模拟面试的功能，由于觉得比较简单且有趣，于是分享了出来</p>
<h2 id="需求">需求</h2>
<p>先来谈一谈需求点：</p>
<ol>
<li>在公众号中回复面试，随机生成 N 道大厂面试题</li>
<li>每道面试题指向一个超链接，可以查看答案</li>
</ol>
<p>需求很简单，如图下所示。你也可以去我的公众号 <code>全栈成长之路</code> 查看实现效果</p>
<p><img src="https://img2018.cnblogs.com/blog/689182/202001/689182-20200116085623821-1448632367.png"></p>
<h2 id="内容">内容</h2>
<p>在大部分行业中，内容是至为重要的，有内容才会有好的服务，而技术只是整合内容的一种手段。</p>
<p>在本次功能开发中也是如此：<strong>一个面试题库才是至关重要</strong>。</p>
<p>为此，我在 github 上新建了一个仓库，使用 <code>Issue</code> 来记录我在大厂面试中所遇到的面试题及答案</p>
<blockquote>
<p>每天一道面试题，有关前端，后端，devops以及软技能，促进职业成长，敲开大厂之门。</p>
</blockquote>
<p><strong>到此一步，我拥有了自己的内容，并且拥有了开箱即用的后台管理系统: github issues</strong></p>
<h2 id="数据">数据</h2>
<p>此时我们已经拥有了一个特殊的后台管理系统，但很遗憾，由于该管理系统的特殊性，我们并不是数据映射管理系统，而需要根据 Github Issues 来生成结构化的数据，好在我们可以使用 Github API。</p>
<p>Github API 现在已经全部变成了 <code>GraphQL</code> 接口，看来大家又需要学习一门新的技术了。关于 Github API 的文档可以在这里找到: Github API Explorer</p>
<p>以下 Query 就是我们所需要的数据</p>
<pre><code class="language-graphql">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
}
}
}
}
}
}
</code></pre>
<h2 id="微信开发">微信开发</h2>
<p>在微信开发中，定义一条路由，用来处理对关键字 <code>面试</code> 的回复</p>
<pre><code class="language-js">const routes = [{
default: true,
handle: handleDefault
}, {
text: /面试/,
handle: handleInterview,
}]
</code></pre>
<p>根据封装好的 Issue SDK 随机选取八个问题，更多代码可以前往 shfshanyue/wechat 中</p>
<pre><code class="language-js">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')
}
</code></pre>
<p>自此微信开发结束，开始部署项目</p>
<h2 id="部署">部署</h2>
<p>开发完成之后使用 <code>docker</code> 及 <code>docker-compose</code> 部署，<code>traefik</code> 做服务发现及负载均衡。</p>
<p>如果你对它们不够了解，可以查看我的系列文章 个人服务器运维指南 的案例篇，关于 <code>docker</code>，<code>compose</code> 及 <code>traefik</code> 等基础设施的搭建均在本系列中有所介绍。</p>
<p>在生产环境中，通过 <code>https://we.shanyue.tech</code> 暴露服务。</p>
<p>在测试环境中，需要监听文件重启。在测试环境通过挂载目录的方式在 <code>https://we.dev.shanyue.tech</code> 暴露服务。</p>
<p><code>Dockerfile</code> 较为简单，配置文件如下</p>
<pre><code class="language-dockerfile">FROM node:10-alpine
WORKDIR /code
ADD package.json /code
RUN npm install --production
ADD . /code
CMD npm start
</code></pre>
<p><code>docker-compose.yaml</code> 配置文件如下</p>
<pre><code class="language-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
</code></pre>
<h2 id="测试环境与生产环境">测试环境与生产环境</h2>
<p>当我们需要测试微信公众号时，直接使用自己的公众号不太合适，特别是当已有上线内容时。微信官方提供了测试公众号，我们可以重新填写 <code>域名</code> 以及 <code>token</code>。在测试环境使用域名 <code>https://we.dev.shanyue.tech</code></p>
<p>我们在 <code>docker-compose</code> 中使用 <code>service</code> 中的 <code>wechat</code> 代表生产环境，<code>wechat-dev</code> 代表测试环境</p>
<p><code>wechat-dev</code> 通过文件挂载提供服务，可以更新重启应用，便可以做到实时更新代码，并实时在测试公众号中看到效果。</p>
<p><code>docker-compose.yaml</code> 配置文件如下</p>
<pre><code class="language-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
</code></pre>
<p>关于后端代码，托管在 shfshanyue/wechat 中</p><br><br>
来源：https://www.cnblogs.com/xianwang/p/12199548.html
頁:
[1]