- 博客(37)
- 收藏
- 关注
RSS订阅原创 async await和promise的区别
综上所述，Promise 和 async/await 各有优势，适用于不同的场景。Promise 在并发处理和链式调用方面更为灵活，而 async/await 则提供了更接近同步编程的语法风格，使得代码更加清晰和易于理解。async/await 和 Promise 的区别主要体现在语法、错误处理、并发处理能力、代码可读性等方面。这样的代码更易于阅读和维护，尤其是当你有多个异步操作需要顺序执行时。是处理异步操作的一种更简洁的方法，它本质上是。关键字定义的异步函数，它使用。在JavaScript中，
2024-04-03 12:13:10
1818
原创 uniapp开发微信小程序打包成h5部署
需要打包成功之后，会在unpackage页面生成的dist文件夹中多一个Build文件，里面包含h5页面。需要部署的话就把h5页面打包部署即可。需要自己uniapp的appId。此appid是uniapp的appid，非微信小程序给的appid。默认生成的打包链接，静态资源访问的路径是“/static/css”，项目要求前缀添加/mnapp。项目使用uniapp以vue2开发小程序，开发完成之后打包h5部署，包含修改静态资源路径。：打包方式(点击发行 -> 点击网站-PC)
2024-03-21 17:45:15
2514
原创 故事会 - 家务事
小婷在家排行最小，家里还有3位姐姐和1位哥哥。在她16岁的时候母亲因病去世，后来大姐就承担起了照顾她的日常生活，她和哥哥姐姐们的关系也都非常不错。小婷从小很聪明，在学校学习成绩也一直名列前茅，并且考进了省重点初中，父亲和家里人都很开心。但是在小婷的心里，她一直有一颗想外出闯一番天地的想法。因此，在上初一的某天她从学校偷偷跑去了已经结婚的大姐家里，担心父亲责备而在大姐家玩了好多天。在父亲知道她不上学之后，也无奈的默认了这件事儿。自此，小婷更加的放开手脚去做自己想做的事儿。她满脑子都是挣钱的事儿
2024-02-01 18:27:40
415
原创 微信小程序
有空介绍1、循环方法 wx:for="{{ searchList }}" v-for="(item, index) in searchList"2、最小量更新 wx:key="index" :key="index"3、点击事件 bindtap="handleSearch" @click="handleSearch"4、获取事件回调data-item="item"
2023-06-20 17:38:36
236
原创 记录使用element常用属性其用法
Vue中使用element-ui1、clearable在input、select框中选择选项，鼠标放到框中显示x清空选中项<el-input v-model="searchList.paperName" placeholder="请输入" clearable></el-input>2、disabled针对form表单的每一项设置disabled :disabled="变量名称"3、:index='count' table表格第一列序号.......
2022-03-10 11:15:46
1669
原创 记录Vue项目中使用element-ui上传图片组件
一、项目背景公司接手某车企问卷中台项目，涉及题库管理、问卷管理和个人中心三部分模块。题库管理模块包含创建试题（单选、多选、排序、矩阵单选、矩阵多选、填空、打分）七种选择，弹框内置试题样式以及预览样式。问卷管理模块属于创建问卷将试题内置进去的功能模块。在新增一个问卷的过程中，需要配置问卷的基础信息例如问卷名称、问卷描述、选择所属业务、选择问卷上传图片、设置发送方式默认为二维码。所选信息配置完成之后即可对问卷添加试题，添加方式有两种一是可以从题库中抽取试题，二是可以重新创建新题型进行增加。在新增试题
2022-02-23 19:33:21
311
原创 Vue3按需引入elementui遇到点小问题记录下
https://element-plus.gitee.io/zh-CN/guide/design.html适用vue3的elementui。本次项目需要按需引入elementui，跳出来原文的步骤1、安装element-plus依赖npm install element-plus --save2、因为需要按需引入，所以还要安装一些相关的插件npm install unplugin-vue-components3、安装完上面两个依赖以后，按照官网要求在webpack.
2021-11-04 11:12:27
1509
原创 Vuex可预测状态容器的使用记录
在项目中，将大部分可操作的变量存储进vuex中，这个时候对state、mutation、action就会有特别多的操作。在store文件夹下创建index.js文件作为vuex文件对外暴露的文件，将state、mutations、actions全部封装出别的js文件中...
2021-08-30 10:27:09
140
原创 实现自适应布局Element
一、简单说下背景。本次项目做的内容是某大型汽车品牌公司官网的一部分，对旧的内容板块做了新升级，整个模块功能不变ui样式全部大改。此次要求是两端同时进行，ui页面宽度以1200px为基准，大于1200px全部归属于pc端，小于1200px属于mobile端。二、本次项目使用vue3 + element-ui3进行页面布局，首次接触使用了Layout布局。该布局使用flex进行自适应，使用其规定的类名，便可达到对不同屏幕下使用不同宽度组件的目的实际项目中应用，在hidden-lg-and
2021-08-30 10:02:43
5478
原创 vue引入svg图片
一、很早之前做项目有使用到svg图片，一直没有记录，后来在百度发现没一个能用的，索性自己整理归纳一个二、步骤1、安装 svg-sprite-loader npm install --savesvg-sprite-loader2、在vue.config.js中加入配置chainWebpack: config => { const svgRule = config.module.rule("svg"); svgRule.uses.clea...
2021-06-07 21:56:06
8496
5
转载 理解WebSocket心跳及重连机制
在使用websocket的过程中，有时候会遇到网络断开的情况，但是在网络断开的时候服务器端并没有触发onclose的事件。这样会有：服务器会继续向客户端发送多余的链接，并且这些数据还会丢失。所以就需要一种机制来检测客户端和服务端是否处于正常的链接状态。因此就有了websocket的心跳了。还有心跳，说明还活着，没有心跳说明已经挂掉了。1. 为什么叫心跳包呢？它就像心跳一样每隔固定的时间发一次，来告诉服务器，我还活着。2. 心跳机制是？心跳机制是每隔一段时间会向服务器发送一个数据包，告诉服务器自.
2021-05-10 11:05:57
796
原创 首页/登录页背景固定，不随滑轮的滚动变大变小
首先，login页面一般下属于App.vue底下的子页面。本人在login页面使用了background-image加载背景图片1、在App.vue中，使页面的高度始终是100%的可视高度，那么页面的height应该设置为100vh。2、在子页面，即login页面中，使背景图的高度为height:100%;并且使用到backgroud-size: cover;background-attachment: fixed; 该属性的具体使用可以参照该文章https://www.cnblog
2021-03-04 22:34:50
512
1
原创 elementUITable表格-表头文字居中，列表文字居中
ElementUI-----Table标题文字集中<el-table v-loading="loading" element-loading-text="拼命加载中" :data="tableData" :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }" stripe style="width: 100%">滚动条样式
2021-02-03 16:01:13
1512
原创 pdf文件多页
后端返回整个pdf的字节流，前端获取以后进行解析，但是一开始只能解析一张图片，想要将多页pdf解析出来，需要别的方法，上图。1、初始化定义pdfurl和numPages为null2、接口返回二进制流数据以后，对二进制流数据进行解析。解析完二进制流以后会返回一个url，此时这个url已经可以放到上面的<pdf></pdf>里面用了，但是只能加载出来第一页，所以后面的步骤是进行分页操作的3、createLoadingTask（）这个方法是官方的，需要用这个方法对url
2021-01-20 10:01:18
314
原创 vue顶部导航栏小进度条实现
在自己做的中台项目里面需要添加这么个小需求。添加这个蓝色的线条！https://madewith.cn/23做法：安装nprogress小进度条插件npm install --save nprogress全局引入import NProgress from 'nprogress'import 'nprogress/nprogress.css'router.beforeEach((to, from, next) => { NProgress.start() nex
2020-12-15 15:44:39
442
原创 vue项目配置nginx页面跳转正常，接口报200，但是没数据
(We’re sorry but XXX doesn’t work properly without JavaScript enabled)很抱歉，如果没有启用JavaScript，XXX无法正常工作这个问题碰到过两次，还都挺麻烦的，也都是因为相同的原因造成的错误。一、描述下问题：nginx代理跳转页面都可以进去，接口返回报200，但是就是没数据，response返回(We’re sorry but XXX doesn’t work properly without JavaScript enabl
2020-11-23 09:22:49
5810
原创 vue引入cesimu地图
前言：很久前项目里面使用过cesium，但是用的是jquery，而且当时是别人给配置好自己使用的不了解具体内容，这次有时间自己摸索着配了一版vue的，很麻烦，踩过的坑是我成功道路上漂亮的伤疤~终于搞定了，脑子有点懵，我缓下......百度找了好多资源基本安装cesium有两种方式，一个是简单版本的，一个是复杂版本的配置。简单版本的不适合开发，主要在index.html中引入css文件和js文件，不推荐，也不着重记录，百度搜一大把，还是配置的比较有用。1.安装cesium依赖 npm ins..
2020-10-30 16:12:49
692
原创 前端vue点击下载功能，外加获取headers中的fileName
前言：项目实现点击下载功能，通过调一个接口，给后端传一个filePath的参数，后端返回fileName(这个fileName就是所要下载的文件名称)，response返回的数据就是下载的文件的内容。问题1、如下图：fileName是存储在headers里面的，不能在response里面获取，他是和内容分开的，怎么获取是个关键let fileNames = res.headers['content-disposition'] //获取到Content-Disposition;filenamele
2020-10-30 11:07:41
9420
3
原创 前端websocket和后端传输数据
前言：用户在页面添加内容以后，通过接口将数据存储在大数据工程师哪儿，大数据哪儿把文件处理以后传输给后端java工程师，java工程师将添加的该条信息需要及时传递给用户，让用户进行下载。websocket在整个流程中负责前后端数据的传递，及后端将数据传输给前端，前端进行展示，提示用户随时下载所需要下载的内容。图一、用户在此添加数据然后点击发布，数据存储进后端大数据数据存进系统大数据进行处理过后，后端和前端通过websocket实时传输前端需要做的创建websocket，其中可以给后端发送数据，
2020-10-30 10:49:21
6512
原创 vue请求拦截响应拦截
2020.10.28 早9.40。今天忙里偷闲记录下在vue里面封装axios以及请求拦截响应拦截器首先理解整个思路：1、将baseUrl提出来，这是访问服务端的地址。2、使用es6类的写法封装axios拦截器。3、封装之后在创建api文件夹在此文件夹里面引入封装后的axios，之后就可以创建各个接口。BaseUrl.jsexport const baseUrl = process.env.NODE_ENV === 'production' ? './' //生产环
2020-10-28 11:10:25
2249
转载 后端传的long数据类型，前端js解析后精度失准
前言：昨晚上和后端对接口，一个返回的json数组里面，有两条数据一直对不上号。他在postman里面测是一个数据，到了我这边拿到数据以后console.log，那个参数的数据值就变了。一直到不到原因这是前端打印以后的fileId，但是在后端测postman里面fileId一直是:587030786809663489,意味着后端传的数据和前端拿到的数据不同但是在前端response里面可以看到，后端传的数据是正确的，在Preview里面确不正确：2. 原因： js解析 json 数据时，对..
2020-10-28 09:36:00
667
原创 关于后端二进制数据流转换blob对象(转化成前端可识别的图片)
前言：今天记录一下昨天调接口遇到的小问题。新项目当前我一个人做，登录页面里面有验证码这个环节。初始化页面时候调取一个get接口，后台返回一个二进制流的图片格式，console.log输出如下：第一次碰到这种格式的数据，一时间还不太会处理，后来在技术群里面咨询了大佬，回答是，这是后端传回来的二进制流数据，需要转化成blob（中文意思:斑点）对象。项目使用的vue框架，百度搜了下具体可行的方法如下：1、在这个请求的接口里面需要添加 请求类型为blob类型2、在页面里面调用这个接口以后，.
2020-10-23 09:16:45
4945
3
原创 记录vue打包后配置nginx以后访问页面报405错误
前言：公司vue项目，完成度80%以后甲方拿来一台无网的笔记本需要前后端将代码部署上去，后端代码没问题，前端nginx配置没问题，但是访问nginx里面的前端路径以后跳转的页面没有数据，报405错误。同一个问题碰到过这是第二次，这次记录一下，以防止再犯。步骤一、nginx配置步骤二、重点两次出错的原因都在于vue页面里面vue.config.js配置的问题在该文件夹里面，文件会通过'/api'去寻找带有api开头的接口，而且target里面的地址后面也需要带上/api，再一个在每个封
2020-10-21 09:32:42
4056
原创 记录jq登录图片验证滑块加载
主要运用cancas图形来做三部分css部分.container { width: 310px; margin: 100px auto; } #msg { width: 100%; line-height: 40px; font-size: 14px; text-align: center; }
2020-07-17 15:15:49
188
原创 记录前端项目通过nginx部署windows服务器
背景:我们自己项目开发完成以后，老大让我把4-5个项目分别部署在不同的服务器上windows/linux都有部署。从一开始的啥都不会，到现在自己完全可以看明白自己配置nginx使用，前前后后一个多月经历了太多辛酸。废话不多说了，记录下吧。一、负责部署的项目：Vue、H5Vue项目需要的是最后build完之后的dist文件夹，其他源码不需要。H5整个项目源码都需要放在服务器上。二、部署到windows服务器部署前的准备：1、老大会给你个服务器包含IP地址和登录密码，进行登录。运行mstsc
2020-05-22 17:23:31
785
1
原创 Vuex配置使用
一、安装vuex依赖npm install --save vuex二、main.js引入import Vuex from 'vuex';Vue.use(Vuex);三、创建store文件夹gxtStore.jsexport default { namespace: 'gxtStore', state: { idx: 1, ...
2019-09-13 13:37:12
214
原创 Vue根组件和子组件之间传值
一、根组件向子组件传值1、一个根组件和三个子组件。根组件三步走（引入、注册、上树）。data的值传向子组件，根组件如果传的是引用类型的值，则子组件无法改变该值，如果传的是对象或者数组，那么子组件改变该值后，根组件也会随着改变。2、子组件通过props来接收根组件传过来的数据二、$emit()函数传参1.data直接传值、2、子组件props引入数据。通过$emi...
2019-09-11 19:58:03
1012
原创 ElementUI引入使用
一、安装Element ui官网https://element.eleme.cn/#/zh-CN/component/installationnpm install --save element-ui二、提取node_modules\element-ui\lib\theme-chalk三、html引入<link rel="stylesheet" href="st...
2019-09-09 14:24:49
441
原创 iview引入使用方法
引入网址：www.iviewui.com第一步：安装依赖npm install --save iview第二步：node_modules\iview\dist里面，将styles这个文件夹复制到项目根目录，复制到index.html旁边，不是app文件夹中第三步：改变index.html文件，增加一行link标签，引入刚刚拷贝出来的样式表<l...
2019-09-04 15:08:35
1179
原创 CSS中transition、animation和transform的用法案例
transitionCSS<style> *{ margin: 0; padding: 0; } body{ background-color: #000; } .sec{ width: 600px; height: 150px; bor...
2019-08-20 20:05:27
261
原创 jQuery实现无缝轮播图
jQuery实现无缝轮播图实现的主要功能，自动轮播，鼠标移动到图片轮播停止，离开继续轮播。用到的jq知识点：animate(json数据,毫秒数，回调函数)clone()克隆元素addclass()添加removeclass()移除appendTo()将一个元素添加到父元素中is() 根据选择器、元素或 jQuery 对象来检测匹配元素集合,如果这些元素中至少有一个...
2019-08-20 17:49:11
1011
原创 node中使用npm工具下载自定义的模块
一、node中运行npm工具https://www.npmjs.com/ npm社区使用npm下载外网别人做好的模块。第一步、新建文件夹内运行Node创建(身份证） 可以描述你的项目（项目名字、作者、本版号、依赖社区哪些自定义模块）命令：npm init 注意文件夹名称不能为中文，会出错。使用英文命名（最后一步输入y或者yes回车）第二步、使用命令添加np...
2019-08-18 15:38:59
437
3
原创 安装node工具简单运行js文件使用内置模块和创建自定义模块
一、傻瓜式安装node省略不重要部分附官网下载链接https://nodejs.org/en/ 英文官网http://nodejs.cn/中文官网解释安装过程中重要的一部分(node工具在你电脑上装了四样东西)1.可以解析js语法的解析器(runtime)2.npm工具(重点)3.在线学习手册4.环境变量(可以将某一个软件（应用程序）当中CMD窗口当中一个系统...
2019-08-18 14:09:46
302
原创 原生JS写贪吃蛇
原生js贪吃蛇游戏的练习重点在于对javascript的基础知识的串联，以及对逻辑思路的提升。在遇到相对比较大的项目或者任务时，本着大化小的思路，从局部开始着手写代码。本次贪吃蛇分三大部分（地图，蛇，食物），在展示实际页面以后会分解讲解各个步骤。思路分析：1、地图 2、蛇 3、食物1、用表格table创建地图，样式渲染页面，js负责整个蛇和食物在地图上的渲染和运动。2、蛇...
2019-08-17 23:15:05
565
转载 Cookie和Session的区别
Cookie和Session的区别一. 概念理解你可能有留意到当你浏览网页时，会有一些推送消息，大多数是你最近留意过的同类东西，比如你想买桌子，上淘宝搜了一下，结果连着几天会有各种各样的桌子的链接。这是因为你浏览某个网页的时候，WEB 服务器会先送一些资料放在你的计算机上，类似于你打的文字，选的一些东西什么的，Cookie 会帮你都纪录下来。当下次你再光临同一个网站，WEB服务器会先看看有...
2019-07-21 19:19:13
125
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人