前端面经-项目相关

一、个人博客

如何让前后端进行通信

主要解决端口跨域问题:

  • 在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 INSERTUPDATEDELETE

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的比较结果决定显隐。
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值