前端面经-项目相关

一、个人博客

如何让前后端进行通信

主要解决端口跨域问题：

• 在config目录下index.js添加proxytable代理（请求地址，是否跨域，替换重写)
  -确保请求url正常

二、渔乐圈i

项目简介

这个项目主要想打造一个智能化的渔场，其服务的主要对象时鱼塘主。只要想解决鱼塘主的两个问题。

• 第一个痛点是报名方式，传统的是在微信群里用文字形式发布活动，然后渔友（客户）转正，又或者直接到现场报名。这个时候就有两个问题：
  1）一个是鱼塘主的账单记录比较麻烦 2）第二个是渔友到现场后可能没有位置了。

• 第二个痛点是鱼塘主乘鱼的时候，由于他们有种叫黑坑的玩法，也就是回鱼，就是根据渔友钓鱼的斤数返回对应的现金，比如一斤鱼4元。那么就会按照这个比例返现，由于他们还在采用手动记账，然后微信转账的方式，效率比较低和麻烦。我们实现了一个智能秤。就是在鱼塘主乘鱼的时候，将鱼放在称上面，通过MQTT和socket，小程序能够直接显示鱼的斤数，然后鱼塘主的确认之后，经过对应规则的结算，即可将对应金额返回给渔友。渔友主要功能为常见的支付购买，活 动查询，收益结算等。

项目主逻辑

用户认证（授权登录）-》鱼塘主活动发布（表单、转发和海报功能）-》渔友报名支付（微信支付和订单功能）-》渔友摇号（redis）-》活动提醒（语音播报以及socket）-》渔友确认参加-》鱼塘主称鱼结算（企业支付，前端计算，socket连接，智能秤）-》鱼塘主打印发票-》活动结束（定时任务

1）授权登录：

是否有缓存，有的话直接读取，判断是否授权，授权后去拿code，先判断缓存里面是否有code，根据code去换取用户信息，然后再将拿到的用户信息去请求登录接口，换取token。

用promise封装reqeust请求。

vuex存储token、uid、userInfo等信息，然后mutations封装了LOGIN，LOGOUT等方法，actions和getters的作用。

2）海报功能： canvas，drawImage将图片绘制上去，setFontSize、fillText、setFillStyle绘制文字 save、arc、restore、clip

3）微信支付，就是去请求后台创建订单的接口，然后后台会去请求微信的服务器，然后返回微信支付所需要的jsConfig相关参数，然后调用微信的函数（因为是在微信环境内，小程序直接调用requestPayment），然后弹出支付框，支付和成功执行对应的回调函数。

4）摇号redis，没有重复

5）活动提醒，进入详情页面，就会建立webSocket，会将该用户的uid发送给后端。自己将uni-app的socket相关api对应的方法封装成了一个类。然后再将监听到服务器收到的消息封装成一个函数，因为有很多种状态，会根据不同的状态执行不同的功能，比如说语音播报，以及称鱼。语音播报这里设计了一个队列，因为类似于网吧呼叫网管那种功能，先将从socket接受的音频地址放入队列，然后逐条取出播放，值到为空，才退出。播放也是调用uni-app的音频api动态生成的。

称重就比较简单了，会接收到斤数数据，然后显示到用户的输入框，点击确认后请求对应接口，给对应的用户返回金额。这里使用computed计算对应相关的金额和总斤数，涉及到精度问题。

遇到的问题

1）解决数据模块与秤的通信，然后配置阿里云服务器的环境
2）websocket问题

websocket概述

服务器可以主动向客户端推送消息，客户端也可以主动向服务端发送消息，是真正的双向平等对话，属于服务器推送技术的一种。

特点

（1）建立在tcp协议之上，服务端的实现比较容易
（2）与http有良好的兼容性，默认端口也是80和443，并且握手阶段采用http协议，因此握手时候不容易被屏蔽，能通过http各种代理服务器
（3）数据格式比较轻量，性能开销小，通信高效。
（4）可以发送文本，也可以发送二进制数据
（5）没有同源限制，客户端可以与任意服务器通信
（6）协议标识符是ws（如果加密，则为wss），服务器网址就是url

心态机制

心跳机制是每个一段时间会向服务器发送一个数据包，告诉服务器自己还活着，同时客户端也会确认服务端是否还活着，如果还活着的话，就会回传一个数据包给客户端来确定服务端也还活着，否者的话，有可能是网络断开连接了。

负责内容

负责页面的编写，小程序的前端页面编写主要是我。

详情页，很多交互功能，比如说鱼塘主活动详情页面，设计许多逻辑的交互。比如说，渔友报名参加活动之后，列表会出现该用户，通过socket进行实现，

表单页。表单的校验，提示框和详细框，

列表页。有数据和无数据，上拉加载，下拉刷新（通过三方组件），数据的筛选，

1、完成产品设计页面的编写及渲染，交互及业务功能的实现
2、使用promise封装了登录模块，以及使用了vuex存储相关信息
3、建立socket通信，用于接收智能秤传输过来的数据
4、分销海报的canvas绘制，订单板块支付相关的前端逻辑

三、怎么设计秒杀

Redis，之前不是说单机的Redis顶不住嘛，那简单多找几个兄弟啊，秒杀本来就是读多写少，那你们是不是瞬间想起来我之前跟你们提到过的，Redis集群，主从同步、读写分离，我们还搞点哨兵，开启持久化直接无敌高可用！

Nginx大家想必都不陌生了吧，这玩意是高性能的web服务器，并发也随便顶几万不是梦，但是我们的Tomcat只能顶几百的并发呀，那简单呀负载均衡嘛，一台服务几百，那就多搞点，在秒杀的时候多租点流量机。

四、小程序和H5的区别

• 运行环境方面
• 运行机制方面
• 系统权限方面
• 开发语言方面
• 开发成本方面
• 更新机制方面
• 渲染机制方面：H5就是 web 渲染，浏览器渲染，小程序的渲染层和逻辑层分别由2个线程管理。

渲染层：界面渲染相关的任务全都在 WebView 线程里执行，一个小程序存在多个界面，所以渲染层存在多个 WebView线程

逻辑层：一个单独的线程执行 JavaScript，在这个环境下执行的都是有关小程序业务逻辑的代码，就是通过 JsCore 线程来运行 JS 脚本

这两个线程都会经过微信客户端( Native )中的 WeixinJsBridage 进行中转通信，逻辑层把数据变化通知到视图层，触发视图层页面更新，视图层把触发的事件通知到逻辑层进行业务处理

五、说一下登录登出以及用户拦截?

第一步：路由拦截
首先在定义路由的时候就需要多添加一个自定义字段requireAuth，用于判断该路由的访问是否需要登录。如果用户已经登录，则顺利进入路由， 否则就进入登录页面。
第二步：拦截器
要想统一处理所有http请求和响应，就得用上 axios 的拦截器。通过配置http response inteceptor，当后端接口返回401 Unauthorized（未授权），让用户重新登录。
通过上面这两步，就可以在前端实现登录拦截了。登出功能也就很简单，只需要把当前token清除，再跳转到首页即可

六、数据库触发器语法

CREATE TRIGGER 触发器名称

ON 表名

FOR INSERT、UPDATE 或 DELETE

AS T-SQL 语句

七、你是怎么封装微信小程序的数据请求的？

• 在根目录下创建utils目录及api.js文件和apiConfig.js文件；
• 在apiConfig.js 封装基础的get, post 和 put， upload等请求方法，设置请求体，带上token和异常处理等；
• 在api中引入apiConfig.js封装好的请求方法，根据页面数据请求的urls, 设置对应的方法并导出；
• 在具体的页面中导入；

八、Vue 打包部署上线

Vue 打包部署上线
1、npm run build

需要注意的是，当打包完毕后，需要将入口的index.html的项目dist路径改成相对路径

2、建立要部署上线的前端文件夹，放入dist、src(static)、index 三个文件
3、登录centos系统，运行 chmod 755 /root/video_vue 对项目文件授权

修改nginx 配置文件 vim /etc/nginx/conf.d/default.conf 增加下面的配置，这里前端服务默认监听80端口
需要注意的是端口不能重复监听，所以之前的django服务需要让出80端口，改成监听8000，而uwsgi服务也需要让出8000端口改成在8001端口运行服务

4、mypro_wsgi.ini配置文件改端口（后台项目根目录下建立此文件）
5、重启nginx服务

systemctl restart nginx.service

九、项目性能问题怎么排查

我觉得第一步很简单，就是要判断是前端慢还是后端慢。（前提是系统是Web的，也就是BS端的，如果是CS的那前台的性能影响会比较小）

判断方法很简单，F12的network页签 看它的加载全过程。
如果是前端渲染慢，那就优化前端代码，优化加载顺序，异步加载，防止重复加载。
如果是js、css、html、字体文件、图片、多媒体等文件过大，网速低造成下载速度慢，那就精简这些文件的体积。
如果是接口返回的时间过长，那就是后台的问题，我们再往下继续分析。

十、轮询怎么做

在 JS 中实现轮询其实主要的应用场景就是：我们需要从服务器端获取一些未来一小段时间内可以确定的事情。比如最经典的场景就是：想象一个用户在网页端通过扫码进行支付，我们怎么判断用户支付的状态。
其实在 JS 中实现最简单的轮询就是使用 clearInterval()，还是说我们开头的应用场景，用户的支付状态：

const timeId = setInterval(() => {
if (paying == 'success') {
  clearInterval(this.timeId)
};checkPaymentDone();},3000)

在 setInterval 里面，我们每隔三秒就去调用 checkPaymentDone() 方法，如果在某种情况下 paying == ‘success’ 成立，我们就清除这个轮询。所以再看 checkPaymentDone()的实现：

axios.post('/payment/check', {    
  // 如果需要传数据，从这里传
}).then(response => {
 if (response.data.finished) {
 paying = 'success';
}
})

那么从这个代码可以知道，也就是相当于我们每隔三秒就去请求 /payment/check，然后再根据服务器返回的数据判断如何更新 paying 这个值。

十一、口述elementUI tooltip组件实现

elementUI中的Tooltip组件是用于展示鼠标 hover 时的提示信息，类似于原生html的title属性。我们实际开发中一般还会在此基础上提几个需求：（1）.自定义显示文本行数 （2）.文本超出行数，以省略号代替，并在鼠标 hover 出现提示信息 (3).文本过长时省略后，提供相应的快捷复制功能。基于这些原因，在此对elementUI之Tooltip组件进行了简单定制化。

实现原理简述

1. 同时布局三个文本内容div展示区
2. 第一个文本内容区，即div1，仅用于计算要盛放的文本宽度，自身不呈现，此处采用绝对定位不占位隐藏；
3. 第二个文本内容区，即div2，是一个比较媒介，实际呈现，当由div1得出的文本宽度超出div2宽度时，div2隐藏，div3显示，否则一直呈现div2；
4. 第三个文本内容区，即div3，是一个具体含有el-tooltip组件的候选区，由div1与div2的比较结果决定显隐。