- 博客(31)
- 收藏
- 关注
RSS订阅原创 H5调用后端API向RabbitMQ发送消息以及H5通过WebSocket向RabbitMQ读取消息
H5调用后端API向RabbitMQ发送消息
2021-09-17 16:26:28
837
原创 vue使用videojs的坑
目前项目中需要使用videojs来播放视频流。代码如下：<video-player ref="videoPlayers" class="vjs-custom-skin videoPlayer" :playsinline="true" :options="videoPlayer" customEventName="customstatechangedeventname"></video-player>import { getVideoPatrolList } fro
2021-07-02 11:23:01
1667
转载 mock.js模拟数据
mock解决的问题开发时，后端还没完成数据输出，前端只好写静态模拟数据。数据太长了，将数据写在js文件里，完成后挨个改url。某些逻辑复杂的代码，加入或去除模拟数据时得小心翼翼。想要尽可能还原真实的数据，要么编写更多代码，要么手动修改模拟数据。特殊的格式，例如IP,随机数，图片，地址，需要去收集mock优点前后端分离让前端工程师独立于后端进行开发。增加测试的真实性通过随机数据，模拟各种场景。开发五侵入不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。用法简单符合直觉的接口
2021-01-29 10:49:53
306
原创 Vue页面跳转
vue跳转不同页面的多种方法目录router-link跳转编程式跳转router.js：import Foo from '@/components/foo'const routes = [ { path: '/Foo', component: Foo }]const router = new VueRouter({ routes // (缩写) 相当于 routes: routes})const app = new Vue({ router}).$mount('#app')
2021-01-28 16:43:31
113
转载 ES6基础——new Set()
Set对象存储的值总是唯一的Set对象方法方法描述add添加某个值，返回Set对象本身。clear删除所有的键/值对，没有返回值。delete删除某个键，返回true。如果删除失败，返回false。forEach对每个元素执行指定操作。has返回一个布尔值，表示某个键是否在当前Set对象之中。Set对象作用数组去重var arr = [1,2,3,3,1,4];[...new.Set(arr)]; // [1,2,3,4]Array
2021-01-28 11:02:41
595
转载 ES6的对象属性简写
在ES6中允许我们在设置一个对象的属性的时候不指定属性名。不使用ES6：const name='Ming', age='18', city='Shanghai';const student ={ name:name, age:age, city:city};console.log(student);使用ES6：const name='Ming', age='18', city='Shanghai';const student ={ name, age
2021-01-27 14:56:14
604
转载 es6中反引号（模板字符串）的使用
模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。// 字符串中嵌入变量var name = "Bob", time = "today";`Hello ${name}, how are you ${time}?` 如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。 var greeting = `\`Yo\` World!`;如果使用模板字符串表示多行字符串，所有的空格和缩.
2021-01-27 14:21:09
874
转载 Vue.js - 在项目中使用Sass、SCSS的方法（安装sass-loader）
默认情况下 Vue.js 是不支持 Sass、SCSS 的，如果想要使用它们，只需要一些简单的安装配置即可。1.安装依赖包（1）进入项目文件夹，执行如下两个命令安装相关的依赖包。npm install --save-dev sass-loadernpm install --save-dev node-sass（2）接着编辑 build 文件夹下的 webpack.base.conf.js 文件，在 rules 里面添加如下配置：{ test: /\.sass$/, loaders: [
2021-01-12 17:13:07
758
原创 vue如何获取dom
vue1.*版本中：标签中加上el=‘dom’，然后在代码中this.$els.dom这样就拿到了页面元素。<div class="box" v-el:myBox>你好</divthis.$els.my-box.style.color = 'red';vue2.*版本中：在标签中加上ref=‘dom’，然后在代码中this.$refs.dom这样就拿到了页面元素。<div class="box" ref="myBox">你好</divthis.$ref
2021-01-12 17:05:23
306
转载 vue项目使用keep-alive的作用
在vue项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态,但是我们想要的结果是返回时这个页面还是之前搜索的结果列表,这时候就需要用到vue的keep-alive技术了。keep-alive 简介keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。用法也很简单：<keep-alive> <component> <!-- 该组件将被
2021-01-12 16:59:11
179
转载 vue 登录拦截及权限管理
一.登录拦截用户登录成功后服务端返回token的值，然后前端使用axios中请求拦截器（service.interceptors.request.use）再每个的请求接口上加上Authorization:token的值，服务端通过这个Authorization来获取token的值，来进行判断token的值是否过期，如果过期则接口返回403,前端得到403的状态，则提示用户返回登录页。1.request.jsimport axios from 'axios';import { Message, Mes
2021-01-11 10:42:35
441
原创 Javascript学习总结
JavaScriptjs输出js关键字js数据类型js字符串方法js数值方法js数组数组方法：数组排序：数组迭代：日期日期获取方法：Math对象javscript 逻辑js输出JavaScript显示方案：-使用 window.alert() 写入警告框-使用 document.write() 写入HTML输出-使用 innerHTML 写入HTML元素-使用 console.log() 写入浏览器控制台js关键字关键字描述break终止switch或循环cont
2021-01-08 10:00:57
408
原创 Ajax总结
为什么学习Ajax局部更新网页的需求很多前后端分离式项目开发有助于理解网络通信、HTTP协议等HTTP协议-未完成GET：常用于向服务器查询某些信息。必要时，可以将查询字符串参数追加到URL末尾，以便将信息发送给服务器。POST：常用于向指定资源提交数据进行处理请求(例如提交表单或上传文件)。数据被包含在请求体中(body体)。请求可能会导致新的资源的建立或已有资源的修改。响应状态码：它以“清晰明确”的语言告诉客户端(浏览器)本次请求的处理结果，一般由3为数字代码组成。1XX：接收信
2020-12-11 01:03:05
214
转载 JS----Better Scroll的使用
我们在app中使用原生滚动框的时候会发生卡顿的问题，并且如果需要上拉加载、下拉刷新等功能的时候，需要我们自己监听js事件，很不方便，这个时候使用better-scroll就会很方便的实现这一系列的功能。下载js文件better-scroll定义滚动区域在使用滚动框的时候我们需要定义一个滚动区域，当内容小于滚动区域的时候，不会发生滚动，当内容大于滚动区域的时候就会发生滚动。注意：better-scroll 只处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略//
2020-12-11 00:11:00
460
原创 Koa搭建后端环境
Koa介绍基于Node.js平台的下一代web开发框架官网：https://www.koajs.com.cnKoa2环境搭建脚手架安装：npm i -g koa-generator创建考koa2应用(qqsports：项目名称)：koa2 qqsports安装项目依赖：npm i 运行代码：npm run devlocalhost:3000打开页面：...
2020-12-08 12:00:06
316
转载 腾讯云服务器运行web项目
一、服务器和域名的购买登陆腾讯云（网址自行百度）。在这里要注意的就是服务器的镜像选择，我的本地开发是用windows的，所以镜像我也选win了，而且Linux我也不太熟。不过还是推荐选择linux，不过你如果这是尝试的话，选什么无所谓。哪个系统用的熟练就选择哪一个。服务器和域名购买好之后呢，就要进行服务器的连接了。二、连接服务器在本机电脑上打开Microsoft Remote Desktop Beta远程桌面。三、环境搭建按照上一步成功之后，即可进入到云端服务器，如下图所示：接下来，我们
2020-10-21 10:55:24
409
转载 Vue.js中的 v-cloak 指令
可以使用 v-cloak 指令设置样式，这些样式会在Vue实例编译结束时，从绑定的HTML元素上被移除。当网络较慢，网页还在加载Vu e.js，而导致Vue来不及渲染，这时页面就会显示出Vue源代码。我们可以使用 v-cloak 指令来解决这一问题。html:<div id="app" v-cloak> {{context}}</div>css：[v-cloak]{ display: none}我们可以使用 v-cloak 指令来解决屏幕闪动的问题，在
2020-08-10 16:47:19
191
转载 前端三大框架的对比
AngularReactVue组织方式MVC模块化模块化数据绑定双向绑定单向绑定双向绑定模板能力强大自由自由自由度较小大较大路由静态路由动态路由动态路由组织方式Angular采用MVC的数据划分，而Vue和React采用模块化方案。模板指令Angular的模板是最强大的，除了自带的丰富的模板指令，还可以通过自定义的指令定义模板，调用的时候只需要一个指令名称就够了。React模板就是JSX，JSX语法相当于一个变量，相...
2020-07-22 10:25:29
384
原创 常用dos命令
常用的dos命令：cd：打开文件夹md：创建新文件夹dir：查看文件夹内容cd…：返回上一级文件夹type**：打开文本window命令行工具清屏：clsMac OS命令行工具清屏快捷键：CMD键+K
2020-07-08 15:33:51
110
原创 Vue获取元素高度
vue获取元素的高度主要是利用vue的ref属性<template> <div ref="picWrapper"></div></template>获取高度值：const height = this.$refs.picWrapper.offsetHeight;获取元素样式值：const height = window.getComputedStyle(this.$refs.picWrapper).height;获取元素内联样式值：con
2020-07-03 09:45:58
4517
原创 Vue常用eslint规则设置-待补充
module.exports = { root: true, parserOptions: { parser: 'babel-eslint' }, env: { browser: true, }, extends: [ 'plugin:vue/essential', 'standard' ], // required to lint *.vue files plugins: [ 'vue' ], rules: {
2020-06-18 16:22:34
355
1
原创 Vue 安装依赖-stylus
vue-cli构建的vue项目引入stylus文件安装stylus、stylus-loadery依赖npm install stylus stylus-loaderpackage.json文件配置上述命令并不会帮我们安装到配置文件，需要我们自己配置下，如下，添加上这两项配置"devDependencies": { ... "stylus": "^0.54.5", "stylus-loader": "^3.0.2", ... },别名配置配置别名
2020-06-18 16:10:28
544
原创 css盒模型
css盒模型Box Model基本概念css如何设置两种模型JS获取宽高两种模式下如何解决样式兼容问题基本概念盒模型的组成大家肯定都懂，由里向外content,padding,border,margin.盒模型是有两种标准的，一个是标准模型，一个是IE模型。不同部分的说明：1.Margin(外边距) - 清除边框外的区域，外边距是透明的。（margin的长度是允许出现负值的）注意：当...
2020-03-02 15:11:38
108
原创 const、let和var的区别
1.constconst声明的变量必须是初始化而且不允许二次赋值2.letlet是块级作用域，不能重复声明变量，函数内部使用let定义后，对外部无影响。3.varvar声明的变量要么是全局的，要么是函数级的，而无法是块级的。定义的变量可以修改，如果不初始化会输出undefined，不会报错。...
2020-03-02 15:10:50
76
原创 小程序app.onLaunch中获取参数，index.onLoad取不到值
1.app.js获取传参App({ globalData:{yydm:'',guid:''}, my.httpRequest({ url:com.getUrl+'action=ZFTS&configCode=All', data:{yydm:com.yydm}, header:{"Content-Type":"application/x-www-...
2020-03-02 15:10:07
2899
1
原创 css常用函数
1.rgb()rgb()：通过对红®、绿(G)、蓝(B)三个颜色通道的变化和它们相互之间的叠加来得到各式各样的颜色。2.计算calc()calc()：用于动态计算长度值这个函数可用在如，左右布局一边宽度固定，另一边撑开宽度的情景。语法： calc(数学表达式)， 如：width:calc(100% - 20px);<style> .bodyCont{font-si...
2020-03-02 15:08:24
162
原创 支付宝小程序的image图片显示
演示项目需要做一个功能介绍，需要用到<image><image/>标签,发现设置宽高之后，图片会压缩，百度了一下，发现image的mode属性可以解决这个问题,他有4种缩放模式，9种裁剪模式，如果想把图片完全显示出来，就用widthFix，宽度不变，高度自动变化，保持原图的比例不变：1.图片加上属性mode=‘widthFix’，然后给图片自己设置宽度:<view...
2019-09-05 16:10:26
7960
2
转载 微信小程序之圆形进度条
需求概要小程序中使用圆形倒计时，效果图：思路1.使用2个canvas 一个是背景圆环，一个是彩色圆环。2.使用setInterval 让彩色圆环逐步绘制。结构[ ]这里是引用List item一个盒子包裹2个canvas以及文字盒子；盒子使用相对定位作为父级，flex布局，设置居中；一个canvas，使用绝对定位作为背景，canvas-id=...
2019-07-01 10:13:28
1114
转载 前端开发问题之字符串日期转日期对象在微信内置浏览器中出现Invalid Date
问题描述：开发中需要获取两个日期之间的时间差，开始日期和结束日期的格式都是：2016-01-01 00:00:00，在前端中我们需要使用 new Date(“xxxx”)来将其转为date对象，在各个浏览器都没问题，但是微信内置浏览器中却出现了“Invalid Date”的异常信息，难缠的兼容性问题出现！解决：当时在IE、safari浏览器下，会遇到这种问题：new Date('2016-...
2019-06-27 16:41:12
866
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人