
前端
文章平均质量分 89
F3nGaoXS
这个作者很懒,什么都没留下…
展开
-
第一个gRPC-web项目
第一个gRPC-web项目1、什么是gRPC-web?简单来说,gRPC-web就是gRPC的JavaScript版本的client实现2、gRPC-web工作流程由于浏览器的特性,gRPC-web其实没办法直接向gRPC-server发送HTTP/2请求的,只有通过envoy代理,将来自gRPC-web的HTTP/1的请求转换为gRPC-server能够接收的HTTP/2请求3、安装gRPC-web相关依赖在使用下列命令前确保开发环境已经安装node全局安装protoc-gen-grpc-原创 2021-12-23 10:37:59 · 2747 阅读 · 1 评论 -
前后端使用利用WebSocket进行通信
前后端使用利用WebSocket进行通信1、前后端如何连接服务端利用SpringBoot启动一个WebSocket服务,同时暴露出该服务的应用路径,客户端则利用该应用路径进行连接。需要注意的是,在服务端只需要启动一个WebSocket服务,而每一个客户端就是一个WebSocket应用。就有点像:服务端是古老的电话接线员,而客户端就是打电话的人。假如用户A想要给用户B打电话就需要先打电话到接线员那,然后接线员再接通用户B。不过WebSocket可以实现广播和私聊。2、前端初始化WebSocket对原创 2021-06-02 17:53:01 · 37721 阅读 · 11 评论 -
Vue实例的生命周期
Vue实例的生命周期1、生命周期图示来自于Vue官网:生命周期图示[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HH2a2VJ4-1622541299561)(md_img/lifecycle.png)]由来自官网的图示我们可以看到,vue实例在整个生命周期中会有很多个钩子函数(在达到某事件时会调用的函数)有:beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestroyde原创 2021-06-01 17:59:14 · 704 阅读 · 10 评论 -
JWT认证原理,并整合SpringBoot
JWT认证原理,并整合SpringBoot1、JWT是什么?JWT是Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准((RFC 7519).该token被设计为紧凑且安全的,特别适用于分布式站点的单点登录(SSO)场景。JWT的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息,以便于从资源服务器获取资源,也可以增加一些额外的其它业务逻辑所必须的声明信息,该token也可直接被用于认证,也可被加密。2、JWT的结构JWT由三部原创 2020-12-25 15:36:27 · 413 阅读 · 1 评论 -
vue三大重点之vue-router
vue三大重点之vue-router1、什么是vue中的前端路由思想?所谓后端路由就是用户在浏览器地址请求url然后后端的controller就会跳转到对应的这个url请求的页面。前端路由则是用户在浏览器地址请求url的时候服务器就会一次性把所有的静态资源都给请求下来了(html+css+js),然后在前端里通过js里写一些判断逻辑然后将对应的html页面加载出来。甚至单页面富应用的话就只请求一个html页面,但是后续切换页面的时候则会直接利用js生成新的html代码从而加载到页面上。2、浏览器不改原创 2020-11-23 13:28:25 · 189 阅读 · 0 评论 -
vue三大重点之vue cli
vue三大重点之vue-cli1、什么是vue-cli?vue-cli(vue脚手架)就是vue官方的基于webpack的用于快速初始化构建vue项目的工具。就像建房子最开始的骨架需要用到的脚手架一样,它是一个能提高开发者工作效率的工具。能够辅助开发者快速地搭建好vue项目所需要地项目目录以及架构。因为vue-cli是基于webpack的,所以它有许多webpack的影子,但是却简化了webpack的相关配置。相当于vue-cli是webpack用于vue的个性化定制版,并且官方简化了许多配置。2、原创 2020-11-23 13:27:23 · 205 阅读 · 0 评论 -
Vue.js初学
Vue.js从零开始1、简单认识Vue.jsVue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。2、Vue.js安装CDN引入直接下载然后引入,script方式引用npm方式安装注意开发环境版本(vue.js)和生产环境版原创 2020-11-19 16:57:49 · 8814 阅读 · 14 评论 -
ES6处理异步的方式promise
ES6处理异步的方式promise1、promise初使用大多数情况我们发起网络请求的时候都是利用Ajax异步请求。所以这个时候Ajax在没有得到请求的结果时是线程是异步的。在ES6的新语法中就有了promise这样一个类来更加优美地处理异步和异步的嵌套。假如我们想要发起一个请求一,然后利用请求一得到的结果再发起请求二,再利用请求二的结果发起请求三,嵌套下去,我们的代码就会像这样: $.ajax({// 请求1 success(res) { $.ajax({// 请求2原创 2020-11-11 18:43:43 · 173 阅读 · 0 评论 -
利用vue封装TabBer导航栏
利用vue封装TabBer导航栏1、利用vue-cli2构建项目需要在构建项目的时候安装vue-router2、搭建项目文件路径asset里存放图片和css,同时创建一个img文件夹存放图片,再建立一个tabbar子文件夹存放tabbar需要的图片。分别是导航栏未被选中和被选中的图片。components里就存放公共的组件,比如轮播、导航栏等。router里就存放router路由组件了。views就具体存放页面的组件,比如主页(home)、分类(category)、购物车(shopcart)原创 2020-11-10 18:26:59 · 592 阅读 · 1 评论 -
webpack简单入门
webpack1、关于webpack什么是webpack?webpack可以看做是将模块自动打包的工具,它会自动分析项目结构,然后将一些浏览器不能直接运行的扩展语言(TypeScript等)打包为合适的结构以便用户的浏览器能够进行解析。为什么要用webpack?因为在Vue中可能会用到大量的文件以及文件依赖以及项目结构,所以就推荐使用webpack来辅助打包。怎么使用webpack因为webpack的运行环境依赖node.js,所以需要先自行安装node.js。装好node.js原创 2020-10-19 18:30:01 · 223 阅读 · 0 评论 -
ECharts简单上手使用
ECharts简单上手使用并且整合SpringBoot1、什么是ECharts商业级数据图表,它是一个纯JavaScript的图标库,兼容绝大部分的浏览器,底层依赖轻量级的canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。简单点来讲就是纯前端的绘制简单的图表。官网地址:https://echarts.apache.org/2、ECharts能画什么图折线图(区原创 2020-08-28 11:29:31 · 485 阅读 · 1 评论 -
JavaScript小技巧
JavaScript小技巧1、严格检查格式在js的代码头加上这个就开启严格检查模式(ES6新语法),前提是浏览器支持ES6语法'use strict';开启之后在js代码块里就必须严格使用规范来书写代码,比如代码行使用分号。2、字符串2.1多行字符串利用键盘tab上的`` `(反引号)包裹起来可以输出多行字符串'use strict';let msg= ` 测试 多行 字符 `;console.log(msg);2.2字符串模板在字符串里利原创 2020-08-08 17:49:47 · 360 阅读 · 0 评论