<h2 align="center">剑指题解</h2>
<div align="center">
<img width="200" height="70" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-c7e81452-9d28-4486-bedc-5dbf7c8386a5/5623bee6-39a4-4f4b-9fab-e31d245f214e.png"></img>
</div>
<p align="center">互联网人题解神器，神器在手，offer我有
<br>
随手刷题 | 无广告绿色免费 | 个性推荐 | 每日自动推送 | 多维度丰富领域知识
</p>
<div align="center">
<img src="https://img.shields.io/github/issues/swordCodePractice/InternetQuestionBank"></img>
<img src="https://img.shields.io/github/forks/swordCodePractice/InternetQuestionBank"></img>
<img src="https://img.shields.io/github/stars/swordCodePractice/InternetQuestionBank"></img>
<img src="https://img.shields.io/github/license/swordCodePractice/InternetQuestionBank"></img>
</div>

项目的起源是一个 github 仓库，名为前端知识每日 3+1，正是这个优秀的题库项目才有了我们团队开发聚合题库的想法。在我们国内程序员圈子，大多数小伙伴为了更好的技术发展和 offer，都通过训练题来提高自己的眼界，其中不乏包括算法/业务/软技能的题目，但是因为我们的环境和侧重点不一样，所以我们接触的项目和题目都不一样，而市面上很少有一个项目能做到，涵盖不同圈子的聚合题库。 《剑指题解》项目就是一个优秀的互联网行业聚合题库神器。

<img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-c7e81452-9d28-4486-bedc-5dbf7c8386a5/c1746d60-2e22-4161-b23d-38b910b73c91.jpg" width="15%"><img style="margin-left: 40px;" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-c7e81452-9d28-4486-bedc-5dbf7c8386a5/e4395033-d45f-4e3e-a930-78ff91c8db54.png" width="40%">

开源免费不易，请关注我们的公众号以及开源仓库

<br/>
Github点star, 拉取代码时请选择最新分支<br/>
Dcloud插件市场支持我们

目录

• 特点
• 技术栈
• UML
  • 类图
  • 拉取任务
• 设计概览
• API
• 贡献者
• 核心维护者
• 相关开源物料
• 题库合作伙伴
• 联系我们
• 许可

特点

1. 汇聚优秀的开源题目，以技术社区为主线展开的刷题 APP
2. 根据用户的喜好，去推送相关的最新题目，不会再刷到 “牛头不对马嘴”无用的题目
3. 我们绑定了微信服务号，每日定时推送给用户最新的题目，让你能在每天清晨就开启活力新一天
4. 刷题 APP 无广告，无硬性推广，一切盈利皆在赞助/官网流量
5. 我们还有很多有意思的待开发 feature，比如大佬带萌新模式，还将开启校园/企业的通道，让每一个学生/员工都能每时每刻提高自己
6. 剑指题解开源项目，从原型图到小程序，UI 图，UML，API 文档，第三方 API 对接说明书，使用说明都将免费开源，欢迎各位同僚二开，让这个行业变得更好，我们将用心地辅助你们解决在技术上的难题。

技术栈

• uniapp
• unicloud
• unicloud前端网页托管服务
• vue3
• typescript

关于技术栈的选型可以参考我们的语雀文档
周边物料的开源，还需要感谢 mockPlus 以及语雀:

<div>
<a href="https://www.mockplus.cn/">
<img class="imgIcon" src="http://static.yinzhuoei.com/typecho/2021/01/17/69752764374919.png" width="10%">
</a>
<a href="https://www.yuque.com/">
<img class="imgIcon" src="http://static.yinzhuoei.com/typecho/2021/01/17/697832282748067.jpg" width="20%"></img>
</a>
</div>

UML

由于此部分在开发新 feature 的工作中可能会进行变更或者本就有实质性的错误，欢迎向我们反馈错误，我们将感激不尽。

类图

<img src="https://github.com/swordCodePractice/InternetQuestionBank/blob/v1.0.0-dev/out/doc/db/core/core.png?raw=true"></img>

拉取任务

<div align=center>
<img src="https://github.com/swordCodePractice/InternetQuestionBank/blob/v1.0.0-dev/out/doc/db/pull/pull.png?raw=true"></img>
</div>

更多

更多相关资料请移步
out/doc或者语雀-UML

设计概览

<div>
<img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-c7e81452-9d28-4486-bedc-5dbf7c8386a5/634202cd-6b93-4712-9cfc-4141b535a8aa.png" width="25%"></img>
<img src="http://static.yinzhuoei.com/typecho/2021/01/17/721852972570223.png" width="30%"></img>
<img src="http://static.yinzhuoei.com/typecho/2021/01/17/72195918714747.png" width="30%"></img>
</div>

设计源文件请移步：点击查看-为了您的体验，请务必下载最新版本的设计图

API

《剑指题解》团队在 API 层面，开源的内容非常有限制，因为涉及到多位合作伙伴的题库授权，所以如果您要使用聚合题库 API 请联系我们商议，如果您是学习者，那么在语雀中的 API 文档会帮助到您，在这里我们将简单介绍。

uniapp 的云函数开发，我们是第一次接触，所以在此之前我们做了很多调研，在下文也提到了关于 explain.js 这个框架的作用，我们也是非常感谢 uniapp 开源社区有这样创作质量的第一批的 unicloud 框架开发者，在咨询了官方人员之后，我们了解到如果要使用 ts 来开发，需要把 ts 编译成 js 来放在云函数目录，所以我们选择了以下的技术栈，开发者可以很爽的使用 ts 来开发 unicloud 云函数：

• esbuild-node-tsc
• nodemon

esbuild-node-tsc 这个工具是基于 esbuild 的，利用其特性，我们可以比 ts 官方提出的 tsc 编译工具更快，快几十倍到上百倍，这也是得益于 esbuild 的使用 go 语言直接编译的特性。

nodemon 可以帮助我们监听目录文件，一旦改变就执行打包 ts 命令直接将编译好的 js 放在指定目录
所以我们把 explain.js 的配置也相应的改变，我们在 services 目录中存储的是我们 ts 文件，在 dist 中存储的是我们编译好的 js 文件，而 dist 目录就是 explain 需要的：

config.init({  
  baseDir: __dirname,  
  serviceDir: "/dist/",  
});

需要注意的事情是：
由于云函数大小限制，我们需要把相关依赖全部安装到全局，包括 typescript

读写职责分离

读写职责分离模式（CQRS）是一种把查询(Queries) 数据和和更新(Commands) 数据通过使用各自独立的接口分开的模式。
Uniapp 的 Unicloud 很好，其中的 jql 也是大开眼界，确实统一了前端开发操作数据库的体验，让我们前端开发操作数据库非常友好，但是我们使用 CQRS 将这些原本封装的很好的 API 不予以使用。

• 前端使用 jql 去读取想要的数据
• 写入操作就交给云函数去执行

如图，前端读取一个列表数据

const db = uniCloud.database();  
const databaseName = "testInit";  
// 获取测试数据列表  
export function getTestList() {  
  return new Promise((resolve) => {  
    db.collection(databaseName)  
      .get()  
      .then((res) => {  
        // res 为数据库查询结果  
        resolve(res);  
      })  
      .catch((err) => {  
        // err.message 错误信息  
        // err.code 错误码  
      });  
  });  
}

我们将这样的文件抽出了一个一个查询模块，每一个模块对应了一个数据表（这里是 testInit）封装在了 API 这个文件夹中。

<img src="https://cdn.nlark.com/yuque/0/2020/png/710380/1604849161872-36fc9bd2-1988-430c-9f75-d8b989782737.png?x-oss-process=image%2Fresize%2Cw_513"></img>

Vue 页面将这样去调用，这样我们在 API 查询层将做好数据的处理，确保 Vue 拿到的是可以直接渲染的干净数据。

import { getTestList } from "../../api/test";  
const data = getTestList();

我们写入操作将通过云函数直接调用，唯一设计不同的地方在于，我们将云函数这个概念改变了，应该是模块化，我们把一个一个函数变成了模块。

在我们的初步技术调研过程中，由于 Uni 官方并没有提供给用户云函数开发框架，但是我们在插件市场中找到了一款名为 explain 的开发框架，它可以迅速的帮助我们实现 restapi 风格的单路由云函数，这款框架我们不多做介绍，文档在这里：explain.js 快速开发 uni 云函数的框架

// 注册用户根据手机号  
  addUserByPhone() {  
    return handleMustRequireParam(  
        [{  
            key: "username",  
            value: "用户名",  
          },  
          {  
            key: "password",  
            value: "密码",  
          },  
        ],  
        this.event.params  
      )  
      .then(async () => {  
        const {  
          username,  
          password  
        } = this.event.params;  
        if (!/^1[3456789]\d{9}$/.test(username)) {  
          return appErrorMessage("用户名格式不正确");  
        } else if (password === "" || password.length < 6) {  
          return appErrorMessage("密码格式不正确");  
        } else {  
          // 校验手机号  
          return await uniID.register({  
            username,  
            password,  
          });  
        }  
      })  
      .catch((err) => {  
        return err;  
      });  
  }

那么我们如果要调用 testPrint 这个模块中的增加操作

uniCloud.callFunction({  
  name: "application",  
  data: {  
    route: "api/user",  
    method: "POST",  
    params: {  
      username: "18291563764",  
      password: "sas",  
    },  
  },  
});

贡献者

感谢为《剑指题解》这个优秀项目贡献自己一份力的小伙伴们:

<table><tbody>
<tr><td><a target="_blank" href="https://github.com/1018715564"><img width="60px" src="https://avatars1.githubusercontent.com/u/35763284?s=460&u=018d91407ac17ac3b6abbd16cdca5b080b385b32&v=4"></a></td>
<td><a target="_blank" href="https://github.com/maruichao52"><img width="60px" src="https://avatars0.githubusercontent.com/u/41415464?s=460&u=4e8e3f255ba143921d7eb3489cdb1be0ee4cbf4c&v=4"></a></td>
<td><a target="_blank" href="https://github.com/githubbfw"><img width="60px" src="https://avatars3.githubusercontent.com/u/20768069?s=460&u=2b274b4c5c123e727cad136e52ed116507e1c8f7&v=4"></a></td>
</tr></tbody></table>

如果您想加入到我们的贡献者队列中，请联系我们，这里还有相关贡献者的介绍，希望对您有帮助

核心维护者

• @Seho: 负责前端和后端的开发，产品设计，以及产品的市场调研还有相关社区维护宣传
• @maruichao52：负责后端开发工作以及后端分析工作以及社区维护宣传
• @Maria ^敏：APPUI，以及相关宣传物料等设计工作，设计相关合作请加微信：P309033661 备注：剑指题解

相关开源物料

• 语雀
• 摹客产品设计-联系@seho获取原型图

题库合作伙伴

• 前端面试 3+1 开源题库
• Guide哥的JAVA题库

联系我们

<img width="30%" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-c7e81452-9d28-4486-bedc-5dbf7c8386a5/309debe7-7f2a-47ae-a415-875e5b1f4922.jpg"></img>

许可

Apache License © 剑指题解
如果您在其他有关我们的文档见到了与之不符合的协议内容，请联系我们，这可能是我们的历史遗留的代码问题。

　　each()

　　哥斯拉大战金刚高清版迅雷下载地址：duan.kim

　　each既是一个类方法，同时也是一个对象方法，两个方法适用场景不同；换言之，你可以使用mui.each()去遍历数组或json对象，也可以使用mui(selector).each()去遍历DOM结构。

　　第一种：

　　语法：

　　mui.each(obj,handler);

　　obj

　　Type:Array||JSONObj

　　需遍历的对象或数组；若为对象，仅遍历对象根节点下的key

　　handler

　　Type:Function(Integer||String index,Anything element)

　　为每个元素执行的回调函数；其中，index表示当前元素的下标或key，element表示当前匹配元素

　　example:

　　输出当前数组中每个元素的平方

　　var array=[1,2,3]

　　mui.each(array,function(index,item){

　　console.log(item*item);

　　});

　　第二种：

　　语法：

　　mui（selector）.each（handler）；

　　handler

　　Type:Function(Integer index,Element element)

　　为每个匹配元素执行的回调函数；其中，index表示当前元素在匹配元素中的位置（下标，从0开始），element表示当前匹配元素，可用this关键字代替

　　example：

　　当前页面中有三个字段，如下：

　　&lt;div class="mui-input-group"&gt;

　　&lt;div class="mui-input-row"&gt;

　　&lt;label&gt;字段1：&lt;/label&gt;

　　&lt;input type="text"class="mui-input-clear"id="col1"placeholder="请输入"&gt;

　　&lt;/div&gt;

　　&lt;div class="mui-input-row"&gt;

　　&lt;label&gt;字段2：&lt;/label&gt;

　　&lt;input type="text"class="mui-input-clear"id="col2"placeholder="请输入"&gt;

　　&lt;/div&gt;

　　&lt;div class="mui-input-row"&gt;

　　&lt;label&gt;字段3：&lt;/label&gt;

　　&lt;input type="text"class="mui-input-clear"id="col3"placeholder="请输入"&gt;

　　&lt;/div&gt;

　　&lt;/div&gt;

　　提交时校验三个字段均不能为空，若为空则提醒并终止业务逻辑运行，使用each()方法循环校验，如下：

　　var check=true;

　　mui(".mui-input-group input").each(function(){

　　//若当前input为空，则alert提醒

　　if(!this.value||trim(this.value)==""){

　　var label=this.previousElementSibling;

　　mui.alert(label.innerText+"不允许为空");

　　check=false;

　　return false;

　　}

　　});

　　//校验通过，继续执行业务逻辑

　　if(check){

　　//.....

　　}

利用uniapp+tailwindcss+uview搭建的一套基础模板内置了

1. tailwindcss以及flex布局的css工具拓展
2. 基本的列表和表单demo
3. 统一的request api请求处理，枚举与正则校验

背景：之前用uniapp+uview开发了一大一小两个小程序，css方案用的原子风格的，发现用的还是挺爽的，就在想能不能用上tailwindcss，研究之后发现用Hbuilder创建的自由度比较低，于是选择了用Vue-cli4搭建了一套。

要求：
1. Node.js > 12

项目地址

插件市场

github

预览

https://i0.hdslb.com/bfs/album/0eabcc1cbdead3a5a98662ef2757760af6280bc5.png

this.liveContext = uni.createLivePusherContext('livePusher', this); 直接是没有此方法,用的nvue

<template>

<view>

<live-pusher

id="livePusher"

ref="livePusher"

class="livePusher"

url="livePushUrl" mode="SD"

muted="true"

enable-camera="true"

auto-focus="true"

beauty="1" whiteness="2"
aspect="9:16"
@statechange="statechange"
@netstatus="netstatus"
@error="error"
></live-pusher>
<button class="btn" @click="start">开始推流</button>
<button class="btn" @click="pause">暂停推流</button>
<button class="btn" @click="resume">resume</button>
<button class="btn" @click="stop">停止推流</button>
<button class="btn" @click="snapshot">快照</button>
<button class="btn" @click="startPreview">开启摄像头预览</button>
<button class="btn" @click="stopPreview">关闭摄像头预览</button>
<button class="btn" @click="switchCamera">切换摄像头</button>

        <view>  
            <video :src="livePushUrl" style="width: 100%;height: 400rpx;" :autoplay="true" controls></video>  
        </view>  

</view>
</template>

大家在设计网页时为了达到更好的显示效果，一般都会使用css3的属性来进行div标签分栏设计，一些新上手的小伙伴还不清楚具体的操作步骤，下面就跟着小编一起来看看实现方法吧。

你好李焕英下载地址：duan.kim

HBuilderX实现div标签分栏显示方法

第一步，打开 HBuilderX 工具，创建web项目，然后新建文件

第二步，在标签中，插入三个 div标签 ，分别设置不同的内容

第三步，利用 one和two ID选择器 ，设置对应的样式属性

第四步， 保存代码并运行页面文件 ，打开浏览器，查看界面效果

第五步，再次添加设置第三个div标签的样式，分别添加 background-color属性

第六步，再次保存代码并刷新浏览器，可以看到界面出现了 分栏

我们在打包中，显示XXXX队列中。是无法取消的！！

有时候 我们发现 点错了/需求更改了/不想打包了

都没有办法 取消 这个是一个超级弊端 浪费资源不说 还麻烦

• [HBuilder] 14:52:06.798 项目 aw [UNI7608817]的打包状态：
  [HBuilder] 14:52:06.798 时间: 2021-04-03 14:38:14 类型: iOS越狱包 队列中

[HBuilder] 14:53:06.560 项目 aw [UNI7608817]的打包状态：
[HBuilder] 14:53:06.560 时间: 2021-04-03 14:38:21 类型: Android自有证书 队列中

• 是无法取消的！！

独立APP后台，对接苹果CMS。
完整度高，列举如下一下主要功能：

1. 苹果CMS系统（系统自带了采集）
2. 独立的APP对接系统，对接APP和苹果CMS网站
3. 视频专题滚动
4. m3u8流媒体文件缓存和播放
5. 视频播放换源线路
6. 一键投屏
7. 追剧
8. 弹幕+评论
   。。。

QQ：2701309467

由于公司运营需求，需要给代码埋点，而埋点并不是一个和业务强相关的代码，各个页面的埋点工作量也非常的大，一直琢磨能不能自动埋点呢，于是就有了下面的探索

公司通过uni-app开发的主要是微信小程序，所以本文主要是以开发微信小程序的自动化埋点为主

诸如市面上各种统计代码，需要上报埋点事件时，以百度移动统计为例
getApp().mtj.trackEvent(event, args);就可以上报事件和参数

代码虽然很简单，但每个页面统计的点少的三四个，多的上十个，各个地方的统计代码加起来，数量比较大，而且不方便统一管理。
于是，我想到了方案一

1. 在main.js中加入方法

2.在每一个page和component最外层的<view>标签中加入click方法,此时点击页面中的所有任意元素，都会有事件传输到elementTracker方法中，通过判断clickInfo.target是不是目标统计元素，从而决定是否上报，数据也可以从dataset中取到

但这个方法有个不好的地方就是

有没有更好的解决方案呢，答案是有的，利用的是微信的wx.createSelectorQuery,通过点击时计算点击的x，y计算是否落在需要统计的元素上，于是就产生了下面这段代码

这时，我们的统计代码合元素可以写到一个统一的配置文件里

参考项目 https://github.com/zhengguorong/xbosstrack-wechat