- 博客(25)
- 收藏
- 关注
原创 vue+axios上传excel功能实现
1、upload组件代码<!-- excel文件上传 --><template> <el-dialog title="导入excel" :visible.sync="dialogShow" :before-close="handleClose" width="22%" > <div class="elUploadBox"> <el-upload drag
2022-03-24 13:36:19
2483
1
原创 html2canvas将html内容生成canvas图片实现方式
所实现功能:图片、文字合成一张图,并在H5中下载所生成图片。实现方式借用html2canvas.js实现,开发环境:uniapp实现的H5移动项目界面部分<-- html --><view class="resultBox"> <view id="resUploadBox" class="resUploadBox"> <view class="imgBox"> <img src="../static/image..
2021-07-26 16:20:05
1183
原创 查找字符串中出现最多的字符和个数
例: abbcccddddd -> 字符最多的是d,出现了5次方法一、 var str = "abcabcabcbbccccc"; var strObj = {} // 存放不重复字符及个数 var max = 0; // 存储出现最多的字符个数 var keyVal = 0; // 键值 var strObjKey = '' var strSort = str.split('').sort() //输出为["a", "a", "a", "b", "b
2021-04-21 19:08:37
1860
原创 微信小程序商城原生实现
微信小程序商城项目介绍该小程序功能正逐步完善中,且长期维护。项目所用组件:接口 SDKapi工厂Vant已完成功能:框架搭建登录项目实现注册小程序账号https://mp.weixin.qq.com/api工厂使用注册开通后台管理系统账号https://admin.it120.cc/免费开通后,在左侧菜单 “工厂设置” --> “数据克隆” --> “将别人的数据克隆给我”对方商户ID填写 951点击 “立即克隆”,克隆成功后,F5 刷新一下后台ps
2020-10-17 23:26:54
940
原创 用uni-app进行小程序的开发
一、注册网址: 微信注册,根据指引填写信息二、登录设置登录后找到设置模块,在这里你可以设置一些小程序的主题信息,比较重要的就是这个AppID(小程序ID),唯一的,相当于微信小程序的敲门砖三、选框架,安装开发工具工具安装:微信开发者工具HBuilderX工具安装好开始进入正式开发。四、项目开发1、新建一个uni-app项目![](https://img-blog.csdnimg.cn/img_convert/0197a6e940cc5a3e6908e9ef12c550dd.png![
2020-10-10 20:10:10
13481
3
原创 编写高质量代码 | 笔记
目录一、开发中待解决问题二、高质量的HTML1.标签的语义化2.如何确定标签是否语义良好3.常见模块你真的了解吗三、高质量的CSS1.怪异模式和DTD2.如何组织CSS3.推荐的base.css4.模块化CSS——在CSS中引入面向对象编程思想5.低权重原则——避免滥用子选择器6.CSS sprite7.CSS的常见问题五、高质量的JS1.养成良好的编程习惯2.JS的分层概念和JS库3.编程实用技巧4.面向对象编程5.其他一、开
2020-07-15 15:44:59
298
原创 Vue+Nuxt项目如何实现首页优化?
首页打开的时候,一共12个请求,4.5M,打开时间大概为7.64s,在打开之前会有很长一段时间的空白,要如何优化首页的加载时间呢?首页打开的情况如图:一、分析打包情况:Nuxt.js使用webpack-bundle-analyzer来使您可视化包以及如何优化它们。nuxt.config.js中analyze的配置如下:build: { /* ** You ca...
2020-06-12 15:00:13
6693
6
原创 webpack使用过程中所遇到的相关问题
1.webpack runoob1.js -o bundle.js2.webpack搭建出现的问题webpack4.0.1安装问题1、Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema....
2020-03-20 14:46:06
1816
原创 React项目搭建
安装bower:npm install -g bower安装react:bower install reactMixin的目的是让不同的组件公用一些逻辑实战项目:1.新建文件夹:mkdir reactQa && cd reactQa2.安装需要的组件:npm initnpm install react --savenpm install -g gulp...
2020-03-20 14:43:16
165
原创 Flex弹性布局
布局的传统解决方案,基于盒状模型,依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。Flex布局可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持。 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。设为Flex布局以后,子元素的f...
2020-03-04 16:15:04
461
原创 PS基本应用
PhotoShop是一款图形设计软件,推荐一款在线PS工具 在线PS。这款软件和本地下载的功能基本相同,部分功能缺失,像切片工具,存储为WEB所用格式功能没有。 下面介绍一下PS的基本功能: 一、基本操作调整图像大小 选择“图像”--“图像大小”,或者使用快捷键Alt+Ctrl+I 可修改长宽 2.裁剪图像 点击工具栏...
2019-10-29 13:54:56
993
原创 vue项目中的Tinymce富文本编辑器如何从word中粘贴图片上传到七牛云?
Tinymce富文本编辑器粘贴图片时需要上传到自己的空间中才能被打开。一、首先需要安装引入七牛云npm install qiniu-jsvar qiniu = require('qiniu-js')// orimport * as qiniu from 'qiniu-js'二、同时引入客户端生成的tokenimport {qiniuTokenCreate} from ...
2019-10-25 17:15:08
1514
原创 Tinymce编辑器从word中粘贴内容,如何对内容进行样式修改?
当从word中粘贴含多个表格的内容时,格式不正确的问题,在网上寻找了很多方法,都没有找到正确的解决方式。效果显示如下图:粘贴功能是用的tinymce的paste插件实现的。在tinymce的官方文档中查看了paste的所有属性也无果。查看编辑器中内容的样式发现,div还有table的样式设置一下就好了。于是就用content_style属性中设置了一下,代码如下: window.ti...
2019-10-24 10:28:53
3356
原创 2019年前端开发工作总结
本人自2018年6月入职公司以来,在**公司技术部担任前端开发的职务,主要负责**微信公众号,及CMS后台管理系统前端开发的工作。具体工作包括公众号需求迭代、日常维护、Bug修改;以及CMS系统前端的框架搭建,根据原型图效果图实现界面及功能的开发任务,测试提出的bug修改及配合后端的开发工作等。在领导及同事的指导协作下,基本保证了按时按质的完成了各项工作安排。...
2019-10-11 15:30:01
13685
2
原创 Vue中使用axios拦截器拦截账号退出
使用过程中,当登录账号异常退出的时候,页面请求接口数据会报401,这时候页面需要退出重新登录,我的实现方式是:import axios from 'axios'import { MessageBox } from 'element-ui'import { getToken } from '@/utils/auth'// create an axios instanceconst s...
2019-09-19 17:10:49
836
转载 vue如何控制浏览器前进后退操作
公司cms后台系统,导航功能比较复杂,点击浏览器后退按钮,发现路由改变,顶部还有左侧导航未改变,导航如下图,经查阅先找到一种可行的方法,问题已解决。在default.vue中加入如下代码:具体操作如下:1.挂载完成后,判断浏览器是否支持popstatemounted(){ if (window.history && window.history...
2019-09-10 16:27:14
7374
1
原创 如何用CSS实现div元素高度相对于整个屏幕100%
通常情况下,我们要实现左侧导航相对于右侧内容区域,高度能够充满整个屏幕。下面介绍一种用CSS实现的方法,如图:实现方法很简单,直接上代码:<div style="position: absolute;top: 0;left: 0;bottom: 0;border:solid 1px #333;"> <div style="float: left;height:10...
2019-09-02 17:25:27
4633
原创 Vue相关问题总结
近期公司选用Vue实现了一个CMS的后台管理系统,从零基础搭建到项目完成,遇到了不少问题,同时也成长了很多,下面是自己在平时学习使用过程中总结的一些问题。vue不仅仅是一个模板引擎,它可以构建数据驱动的web界面,而它的一个框架NUXT主要是做服务器渲染的,便于SEO优化。vue所适用的场景:1、存在复杂表单的应用;2、不需要考虑seo的单页应用;3、内部系统;4、不需要支...
2019-08-26 16:14:58
399
原创 在vue中实现表单验证
本篇主要讲述如何基于NUXT的validate 方法实现表单的验证。将验证方法封装后,使用的时候只需像:rules="filter_rules({required:true,type:'mobile'})"这么一行代码便可在页面中实现验证了。首先看一下实现效果 一、...
2019-07-19 10:31:21
912
原创 用vue的element-ui的upload实现上传头像图片资源到七牛云
通过element-ui的upload实现上传资源到七牛云功能的时候遇到了很多问题,现在和大家分享出来。一、上传头像组件com_user_head_upload.vue:<template><div><el-uploadclass="avatar-uploader":action="qiniu.actionPath":show-file-l...
2019-07-09 17:17:42
3798
原创 什么是互联网?
一、什么是互联网互联网:凡是能彼此通信的设备组成的网络就叫互联网。(1)内部结构:互联网指的是通过TCP/IP协议族相互连接在一起的计算机的网络。TCP是Transmission Control Protocol,传输控制协议;IP是Internet Protocol,网际协议。TCP/IP协议族是一个网络通讯模型,是当前互联网通讯的基础架构。IP用来去识别网络上的一台计算机。计算...
2019-06-13 15:38:11
12784
原创 如何在Tinymce中为选中文本添加自定义链接功能
一,首先在Tinymce标题栏自定义添加链接的按钮如图为新加的按钮方法:1.在富文本页面定义按钮,以组件形式引入代码为: <editorLink color="#1890ff" class="editor-upload-btn"/></div>2.组件这样定义,直接付代码,页面为editorLink.vue <div class="l...
2019-06-13 14:37:23
4430
5
原创 Vue+Nuxt如何实现后台管理系统的权限控制
页面权限控制分为两种:菜单中的页面是否能被访问页面中的按钮(增、删、改)的权限控制是否显示大致的页面访问权限的流程:详细实现过程:1、创建路由表左侧菜单的列表,我放在vuex中的一个模块js中直接贴代码routerPermission.js:state中的permission为模拟的从接口中获取的权限表,slideMenu为左侧导航菜单的列表。ROUTER_MATCH为路由与权限...
2019-05-28 13:54:19
3396
原创 如何解決刷新页面vuex中数据清空问题
在将一些数据放入vuex中的时候,会经常碰到页面刷新后数据清空的问题,我一般的实现方式是借用缓存,放入cookie,storage中。一、放入cookie中的方法:1.首先在组件或js文件中引入:import Cookies from ‘js-cookie’2.存入cookie:Cookies.set(‘userId’, user.id)3.从cookie中读取let userId=...
2019-05-28 13:53:10
2050
2
原创 网易考拉海购产品分析报告
1.产品概述1.1体验环境1.2产品简介网易考拉是网易旗下以跨境业务为主的综合型电商,诞生于2015年初,背靠网易这棵大树,拥有优质的流量资源,网易考拉以100%正品,天天低价,7天无忧退货,快捷配送服务,提供消费者海量海外商品购买渠道,希望帮助用户“用更少的钱 过更好的生活”,助推消费和生活的双重升级。主打自营直采的理念,直接从原产地采购,在海关和国检的监控下,储存在保税区仓库。网易考拉...
2019-05-12 15:54:03
4833
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人