web技术栈
文章平均质量分 51
追逐ぢ
这个作者很懒,什么都没留下…
展开
-
微信小程序实现身份证识别-ocr
由于我们的业务是自定义上传图片识别出身份信息后进行对应的业务操作,所以采用自定义调用ocr api能力的方式来进行开发。项目中有一个识别身份证的需求,经过调研,最后决定使用微信小程序orc插件进行开发。利用van-uploader上传身份证图片后拿到file对象,调用api进行识别。这种方式可以进行扫描,并且可以支持上传身份证图片进行扫描。3:添加完后,需要领取免费额度,100次/天。ocr识别有两种方式,一种是按照官方文档。注意:如果没购买的话,调用会报错。2:在业务组件中引入插件。2:添加ocr插件。原创 2022-12-29 17:49:40 · 8420 阅读 · 7 评论 -
主流跨域方式解析!
实现原理和nginx差不多,只不过这个代理服务器是我们自己编写实现自定义端口为8082的代理服务器,设置跨域cors响应头,请求转发给端口为80的无跨域处理服务器 ↓。原创 2022-09-01 17:51:33 · 747 阅读 · 0 评论 -
手摸手带你用宝塔部署前端项目。
宝塔Linux面板是提升运维效率的服务器管理软件,支持一键LAMP/LNMP/集群/监控/网站/FTP/数据库/JAVA等100多项服务器管理功能。有30个人的专业团队研发及维护,经过200多个版本的迭代,功能全,少出错且足够安全,已获得全球百万用户认可安装。运维要高效,装宝塔。本文使用阿里云服务器,其他服务器部署流程也大同小异。一:首先购买一台云服务器。这里操作系统我选择的是CentOS 7.5 ,此处需要注意,CentOs8+下载宝塔会有问题。并且进行重置服务器密码操...原创 2022-02-24 17:54:46 · 4629 阅读 · 2 评论 -
vue3.0+启动报错Error: Cannot find module ‘vue-loader-v16/package.json‘
最近在开发vue3项目中npm run serve 报错: 原因是npm安装依赖的时候vue-loader-v16有部分资源需要科学上网才能下载下来,所以我们只需要使用国内镜像下载一次即可正常启动。cnpm i vue-loader-v16原创 2021-09-26 14:14:38 · 377 阅读 · 0 评论 -
从零到一带你使用nginx部署vue项目到阿里云服务器
一:注册购买阿里云服务器。操作系统根据需要选择,我选择的是CentOs。二:下载xshell和xftp使用xshell连接服务器连接服务器成功三:安装nginxNginx是C语言开发,建议在 Linux 上运行,当然,也可以安装 Windows 版本,本篇则使用CentOS 7 作为安装环境。1:gcc 安装安装 nginx 需要先将官网下载的源码进行编译,编译依赖 gcc 环境,如果没有 gcc 环境,则需要安装:yum install gcc-c++2:PCRE pcre原创 2020-12-07 18:11:30 · 1311 阅读 · 1 评论 -
js文件下载兼容主流浏览器+ie10+标准版!
最近项目中有需求兼容到ie10,其中涉及到文件下载,奉上代码给大家分享一下 。如有不对之处,请多指教。之前是采用a.click方式来执行下载,但是在windows7 - ie10上下载无反应,后面才写的以下方式。download.js 如下import util from "@/js/util";function download(url, filename, responseBlod) { // responseBlod 没有文件名情况下传入"bold"自动读取response响应头数原创 2020-10-14 15:38:50 · 698 阅读 · 2 评论 -
antv/f2开发仪表盘!
最近开发了一款类似于支付宝财富的h5项目,内嵌App中,项目使用的是react+hook+typescript , 需求中基金详情页面需要仪表盘类型的效果,前期经过调研最终选择antv/f2,奉上链接:https://f2.antv.vision/zh先放上效果图,给大家分享一下思路。需求分解1:首先需要最外层刻度270度半圆弧2:其次需要270度内圆渐变半圆弧最开始的想法是在f2生态圈中找找类似的效果因为f2生态资源不是很丰富,所以后面就自己从0开始了。1:首先循环出最...原创 2020-05-14 16:40:50 · 1555 阅读 · 0 评论 -
redux-persist管理redux, 解决刷新react-redux数据丢失!
在我们实际开发react项目中可能有某些需求需要持久化报错redux里面的数据,比如登录状态,这时候就可以用到redux-persist 这款插件解决这个问题,它的原理是使用sessionstorage来持久化数据。1:安装redux-persist这款插件npm install redux-persist --save//yarn add redux-persist...原创 2019-12-25 13:39:17 · 3613 阅读 · 2 评论 -
使用create-react-app搭建项目运行start启动报错解决办法!
开发过程中运行项目报以下错误,当前webpack版本超前。There might be a problem with the project dependency tree.It is likely not a bug in Create React App, but something you need to fix locally.The react-scripts pac...原创 2019-12-09 15:12:33 · 1017 阅读 · 1 评论 -
TypeScript类型怎么写?
* 1.1 ts 如何声明一个boolean, number, string类型的值 */// 在js中,定义 isFlag 为true, 但是后面还可以重新给它赋值为字符串,而ts中就不行,同理,声明number, string 也一样let bool: boolean = true;// 会报错:不能将类型“"str"”分配给类型“boolean”。// isFlag = "st...原创 2019-11-04 15:33:00 · 1619 阅读 · 0 评论 -
手摸手!带你搭建react移动端项目环境。
最近有需求,需要开发一套react的webapp项目。所以自己搭建一套环境。具体如下一:react项目构建使用脚手架:create-react-app 执行以下命令搭建项目npm install -g create-react-appcreate-react-app my-appcd my-appnpm start创建后的结构如下。此处注意!...原创 2019-07-17 14:10:11 · 3315 阅读 · 1 评论 -
window安装mongodb后利用bat文件启动mongodb
实在太方便了 给各位分享一波一:首先页面新建文本文档二:输入内容 路径自行更改三:点击另存为桌面mongo.bat文件四:双击bat文件即可打开mongodb...原创 2019-07-24 10:26:42 · 874 阅读 · 0 评论 -
echarts图表如何友好的展示在移动端中!
最近接到新的需求 要把现有的后台管理系统驾驶舱,挑出关键性的数据展示在移动端设备中在开发过程中遇到的一些问题给大家分享一下。1:如下图所示 当X轴的文字块数量较多的时候在移动端就会出现显示不完全的问题 给用户不好的体验。我的思路是当内容过多 我只显示第一个和最后一个文字块。这三个属性就是控制显示最大数和最小数 其中interval是控制间距的但这样又会出现上上图的...原创 2019-07-16 11:10:18 · 2755 阅读 · 0 评论 -
程序员必备网站!
MDN开发者文档:https://developer.mozilla.org/zh-CN/菜鸟教程:https://www.runoob.com/W3CSchool:http://www.w3school.com.cn/JavaScript教程网:https://zh.javascript.info/一行代码搞定bug监控:https://www.fundebug.com/?tdsourc...转载 2019-07-09 10:16:36 · 319 阅读 · 0 评论 -
vscode vue settings.json 代码格式化配置!
{ // 換行 "editor.wordWrap": "on", // 代码缩进修改成2个空格 "editor.tabSize": 4, // 不檢查縮進,保存后統一按設置項來設置 "editor.detectIndentation": false, //保存的时候自动格式化 "editor.formatOnSave": true,...原创 2019-08-27 09:45:17 · 2386 阅读 · 0 评论 -
element表格 内嵌进度条实现
<template> <div class="table-demo"> <el-table :data="tableData" :header-cell-style="{background:'#DCDFE6'}" border style="width: 100%" > <...原创 2019-06-18 11:23:05 · 6993 阅读 · 1 评论 -
js实现点击下划线跟随的效果!
闲来无事,写了一个小demo,练一练许久没写的原生js,具体实现上代码<template> <div class="container"> <div class="content manpower"> <ul class="react-sticky" id="oul"> ...原创 2019-07-23 10:27:06 · 1462 阅读 · 1 评论 -
javascript 使用小技巧!
1. 短路求值使用三元运算符可以很快地写出条件语句,例如:let res = 100 == '100' ? 'yes' : 'no' // 'yes'let res = 100 === '100' ? 'yes' : 'no' // 'no'但有时候三元运算符仍然很复杂,我们可以使用逻辑运算符 && 和 || 来替代,让代码更简洁一些。这种技巧通常被称为“...原创 2019-07-23 14:25:29 · 99 阅读 · 0 评论 -
css+js实现文字向上无缝轮播!
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...原创 2019-07-23 15:32:04 · 497 阅读 · 0 评论 -
递归组件实现Element树形Menu菜单
分享一波动态生成侧边栏 并且着重分享一个大坑!1:模拟菜单数据(开发情况下获取后台数据)const menuList = [ { title: '首页', key: '/home', icon: 'el-icon-s-home' }, { title: '表单', key: '/for...原创 2019-08-08 13:35:02 · 4595 阅读 · 3 评论 -
React-Redux实现计数器案列!
首先复习一下redux和vuex的区别Redux,本身就是一个单纯的状态管理者,我们不追溯它的历史,从使用角度来说:它提供一个全局的对象store,store中包含state对象用以包含所有应用数据,并且store提供了一些reducer方法。这些方法可以自定义,使用调用者得以改变state的值。state的值仅为只读,如果需要更改则必须只能通过reducer。VUEX,吸收了Redux的...原创 2019-08-06 15:09:45 · 268 阅读 · 0 评论 -
vue-cli3.0项目与安卓ios交互。
由于公司项目需要,所以使用vue开发了一款内嵌原生app的H5项目。接下来把开发之中的坑给大家分享一下。H5页面整体就不细述,着重于与原生端的交互上。业务逻辑: 基本逻辑就是H5项目内嵌原生app 原生端通过点击入口按钮进去H5页面 > H5页面调用原生方法拉取用户登录信息,如果用户未登录,调用原生login方法跳转登录页面,原生端登录完...原创 2019-09-12 15:14:47 · 1383 阅读 · 0 评论 -
js排序算法集合
一:快速排序1:先从数列中取出一个数作为“基准”。2:分区过程:将比这个“基准”大的数全放到“基准”的右边,小于或等于“基准”的数全放到“基准”的左边。3:再对左右区间重复第二步,直到各区间只有一个数。var quickSort = function(arr) { //快速排序 if (arr.length <= 1) { return arr; } var pi...原创 2019-09-20 10:47:20 · 417 阅读 · 1 评论 -
vue-cli3项目使用lib-flexible结合px2rem移动端适配......
1:执行npm命令 npm install postcss-pxtorem --save-dev 或者: npm install postcss-px2rem --save-dev2 postcss-px2rem会将px转换为rem,rem单位用于适配不同宽度的屏幕,根据<html>标签的font-size值来计算出结果,1rem=html标签的font...原创 2019-02-21 10:13:09 · 1262 阅读 · 0 评论 -
vue 实现 echarts 日历坐标系
前段时间有需求做echarts 图表的日历坐标系,于是就基于日历坐标系来探讨一下。1:npm install echarts //安装echarts这里说到一点 官方很多echarts图表实例不全 直接拷贝下来会发现无法使用且日历坐标系与其他的echarts图表有所不同 运用到vue中涉及很多this指向的问题2:mian.js挂载到全局上import echarts ...原创 2019-06-18 08:58:27 · 2072 阅读 · 2 评论 -
无痕刷新
最近遇到一个需求,需要刷新当前页面来更新数据,网上找了很多方法,在这里做个总结。这里主要记录三种方法,分别是:强制刷新、伪造刷新、无痕刷新。强制刷新window.location.reload(),原生 js 提供的方法;this.$router.go(0),vue 路由里面的一种方法;这两种方法都可以达到页面刷新的目的,简单粗暴,但是用户体验不好,相当于按 F5 刷新页面,页...原创 2019-04-08 08:25:31 · 1166 阅读 · 0 评论 -
vue-3.0配置webpack-bundle-analyzer模块分析器
这是基于vue-cli3.0配置webpack-bundle-analyzer,使用交互式可缩放树形图可视化webpack输出文件的大小,具体实现方法如下。。。1:npm intall webpack-bundle-analyzer –save-dev //安装插件2:vue.config.js配置3:运行页面npm run serve4:更改访问localhost:8888...原创 2019-03-28 10:46:26 · 1846 阅读 · 2 评论 -
React 5大核心概念......
1:1、组件 2、JSX 3、Props & State 4、组件API 5、组件类型概念一:React组件的作用React组件能够像原生的HTML标签一样输出特定的界面元素,并且也能包括一些元素相关逻辑功能的代码。现在我们一般会用ES6的Class语法来声明一个React组件,它包含一个能够返回HTML的render方法。class MyComponent extend...原创 2019-03-13 15:14:51 · 137 阅读 · 0 评论 -
div匀速移动动画与变速移动动画.....
1.匀速移动代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>title</title> <style> * { margin: 0;翻译 2019-02-27 08:32:01 · 744 阅读 · 0 评论 -
ui库大全
ui框架element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 mint-ui- Vue 2的移动UI元素 iview- 基于 Vuejs 的开源 UI 组件库 Keen-UI- 轻量级的基本UI组件合集 vue-material- 通过Vue Material和Vue 2建立精美的app应用 muse-ui- 三端样式一...原创 2019-03-02 17:21:31 · 432 阅读 · 0 评论 -
vue-cli3+adminlte快速搭建后台管理模板...
应下个项目的需求需要做一个后台管理系统,如果不想写繁琐的css样式以及自适应的话,可以考虑adminlte ,之前有使用或adminlte结合node.js ,ejs模板搭建过后台管理系统,可是应用到vue这种基于mvvm单页面应用的话,区别还是很大的。 搭建过程中遇到很多意想不到的BUG 还好最后都被一一解决了 ,下面给大家介绍搭建adminlte模板,个人认为是结合vue是非常...原创 2019-03-02 13:45:31 · 8088 阅读 · 0 评论 -
vue-cli3项目使用mint-ui 利用popup结合picker实现省市联动封装组件......
最近项目上线部署完毕闲着没事, 感觉mint-ui里面的picker组件和自己的需求有冲突,所以就基于它自己封装了一个省市联动组件!1:父组件调用子组件的地方注册组件什么的就不说了 <mt-button type="primary" size="small" @click="getcode()">选择地址</mt-button> ...原创 2019-02-22 14:40:42 · 843 阅读 · 0 评论 -
实现购物车全选反选.....
<template> <div> <table border="1"> <tr> <td> <input type="checkbox" @click="Allselect" v-model="Allchecked"原创 2019-01-15 10:37:29 · 166 阅读 · 0 评论 -
关于使用H5 download 实现连续下载.......
download() { //本地下载函数 var arr = this.changelist; var brr = []; var arrk = 0; for (var i = 0; i < arr.length; i++) { var url = this.url + "/case_manage/v1/man_...原创 2019-01-15 10:31:05 · 2825 阅读 · 0 评论 -
项目中使用axios拦截器实现异地登陆下线跳转登陆页面!
第一步:创建uilt文件夹/axios.js (名字随你取)import axios from 'axios'import router from '@/router/index.js'import {Loading, Message} from 'element-ui'const service = axios.create({ baseURL: process.env.BA...原创 2019-01-18 10:32:18 · 1372 阅读 · 2 评论 -
记vue中如何使用better-scroll滚动插件
这款插件是基于iscroll插件做的重新封装,改善了一些bug,增加了一些拓展功能,有兴趣的小伙伴们可以自行下载体验体验。很多人已经用过 better-scroll,我收到反馈最多的问题是:better-scroll 初始化了, 但是没法滚动。不能滚动是现象,我们得搞清楚这其中的根本原因。在这之前,我们先来看一下浏览器的滚动原理: 浏览器的滚动条大家都会遇到,当页面内容的高度超过视...原创 2019-04-11 16:03:21 · 806 阅读 · 0 评论 -
手撸数据双向绑定!
一:通过Object.defineProperty实现效果也就是Vue的数据双向绑定原理<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input ...原创 2019-05-31 14:14:45 · 224 阅读 · 0 评论 -
不为人知的Javascript.........................
当我开始学习JavaScript时,我把我在别人的代码、code challenge网站以及我使用的教程之外的任何地方发现的每一个节省时间的技巧都列了一个清单。在这篇文章中,我将分享11条我认为特别有用的技巧。这篇文章是为初学者准备的,但我希望即使是中级JavaScript开发人员也能在这个列表中找到一些新的东西。1..过滤唯一值Set对象类型是在ES6中引入的,配合展开操作...一起...原创 2019-05-24 08:43:00 · 397 阅读 · 0 评论 -
记vue生成二维码
纯纯的Javascript版,不依赖任何第三方包,就可以轻松地生成二维码了,支持各种自定义,可以通过自定义颜色生成各种漂亮的、有个性的二维码。1:npm安装$ npm install qrcanvas2. 在用的页面引入import { qrcanvas } from 'qrcanvas';3:html (tepmlate)<div id="qrcode" >...原创 2019-05-24 13:55:50 · 3097 阅读 · 2 评论 -
移动端常见兼容性问题集合
参考:https://www.open-open.com/lib/view/open1449325854077.html随着手机的普及,移动端的开发也成了一个重要的方向,但由于设备的不统一会造成一些兼容性问题,1、安卓浏览器看背景图片,有些设备会模糊。用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢?经过研究,是devicePixelRatio作怪,因为手机分辨率太...转载 2019-04-19 08:26:23 · 1579 阅读 · 0 评论