Eva_伊娃-优快云博客

原创 vue+axios上传excel功能实现

1、upload组件代码<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 2545 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 1251

原创查找字符串中出现最多的字符和个数

例: 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 1924

原创微信小程序商城原生实现

微信小程序商城项目介绍该小程序功能正逐步完善中，且长期维护。项目所用组件：接口 SDKapi工厂Vant已完成功能：框架搭建登录项目实现注册小程序账号https://mp.weixin.qq.com/api工厂使用注册开通后台管理系统账号https://admin.it120.cc/免费开通后，在左侧菜单 “工厂设置” --> “数据克隆” --> “将别人的数据克隆给我”对方商户ID填写 951点击 “立即克隆”，克隆成功后，F5 刷新一下后台ps

2020-10-17 23:26:54 986

原创用uni-app进行小程序的开发

一、注册网址：微信注册，根据指引填写信息二、登录设置登录后找到设置模块，在这里你可以设置一些小程序的主题信息，比较重要的就是这个AppID(小程序ID)，唯一的，相当于微信小程序的敲门砖三、选框架，安装开发工具工具安装：微信开发者工具HBuilderX工具安装好开始进入正式开发。四、项目开发1、新建一个uni-app项目![](https://img-blog.csdnimg.cn/img_convert/0197a6e940cc5a3e6908e9ef12c550dd.png![

2020-10-10 20:10:10 13652 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 343

原创 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 6773 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 1867

原创 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 192

原创 Flex弹性布局

布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。Flex布局可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。 Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的f...

2020-03-04 16:15:04 488

原创 PS基本应用

PhotoShop是一款图形设计软件，推荐一款在线PS工具在线PS。这款软件和本地下载的功能基本相同，部分功能缺失，像切片工具，存储为WEB所用格式功能没有。下面介绍一下PS的基本功能：一、基本操作调整图像大小选择“图像”--“图像大小”，或者使用快捷键Alt+Ctrl+I 可修改长宽 2．裁剪图像点击工具栏...

2019-10-29 13:54:56 1034

原创 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 1581

原创 Tinymce编辑器从word中粘贴内容，如何对内容进行样式修改？

当从word中粘贴含多个表格的内容时，格式不正确的问题，在网上寻找了很多方法，都没有找到正确的解决方式。效果显示如下图：粘贴功能是用的tinymce的paste插件实现的。在tinymce的官方文档中查看了paste的所有属性也无果。查看编辑器中内容的样式发现，div还有table的样式设置一下就好了。于是就用content_style属性中设置了一下，代码如下： window.ti...

2019-10-24 10:28:53 3560

原创 2019年前端开发工作总结

本人自2018年6月入职公司以来，在**公司技术部担任前端开发的职务，主要负责**微信公众号，及CMS后台管理系统前端开发的工作。具体工作包括公众号需求迭代、日常维护、Bug修改；以及CMS系统前端的框架搭建，根据原型图效果图实现界面及功能的开发任务，测试提出的bug修改及配合后端的开发工作等。在领导及同事的指导协作下，基本保证了按时按质的完成了各项工作安排。...

2019-10-11 15:30:01 13805 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 891

转载 vue如何控制浏览器前进后退操作

公司cms后台系统，导航功能比较复杂，点击浏览器后退按钮，发现路由改变，顶部还有左侧导航未改变，导航如下图，经查阅先找到一种可行的方法，问题已解决。在default.vue中加入如下代码：具体操作如下：1.挂载完成后，判断浏览器是否支持popstatemounted(){ if (window.history && window.history...

2019-09-10 16:27:14 7468 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 4679

原创 Vue相关问题总结

近期公司选用Vue实现了一个CMS的后台管理系统，从零基础搭建到项目完成，遇到了不少问题，同时也成长了很多，下面是自己在平时学习使用过程中总结的一些问题。vue不仅仅是一个模板引擎，它可以构建数据驱动的web界面，而它的一个框架NUXT主要是做服务器渲染的，便于SEO优化。vue所适用的场景：1、存在复杂表单的应用；2、不需要考虑seo的单页应用；3、内部系统；4、不需要支...

2019-08-26 16:14:58 441

原创在vue中实现表单验证

本篇主要讲述如何基于NUXT的validate 方法实现表单的验证。将验证方法封装后，使用的时候只需像:rules="filter_rules({required:true,type:'mobile'})"这么一行代码便可在页面中实现验证了。首先看一下实现效果一、...

2019-07-19 10:31:21 947

原创用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 3849

原创什么是互联网？

一、什么是互联网互联网：凡是能彼此通信的设备组成的网络就叫互联网。(1)内部结构：互联网指的是通过TCP/IP协议族相互连接在一起的计算机的网络。TCP是Transmission Control Protocol，传输控制协议；IP是Internet Protocol，网际协议。TCP/IP协议族是一个网络通讯模型，是当前互联网通讯的基础架构。IP用来去识别网络上的一台计算机。计算...

2019-06-13 15:38:11 13370

原创如何在Tinymce中为选中文本添加自定义链接功能

一，首先在Tinymce标题栏自定义添加链接的按钮如图为新加的按钮方法：1.在富文本页面定义按钮，以组件形式引入代码为： <editorLink color="#1890ff" class="editor-upload-btn"/></div>2.组件这样定义，直接付代码，页面为editorLink.vue <div class="l...

2019-06-13 14:37:23 4602 5

原创 Vue+Nuxt如何实现后台管理系统的权限控制

页面权限控制分为两种：菜单中的页面是否能被访问页面中的按钮（增、删、改）的权限控制是否显示大致的页面访问权限的流程：详细实现过程：1、创建路由表左侧菜单的列表，我放在vuex中的一个模块js中直接贴代码routerPermission.js：state中的permission为模拟的从接口中获取的权限表，slideMenu为左侧导航菜单的列表。ROUTER_MATCH为路由与权限...

2019-05-28 13:54:19 3554

原创如何解決刷新页面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 2104 2

原创网易考拉海购产品分析报告

1.产品概述1.1体验环境1.2产品简介网易考拉是网易旗下以跨境业务为主的综合型电商，诞生于2015年初,背靠网易这棵大树，拥有优质的流量资源，网易考拉以100%正品，天天低价，7天无忧退货，快捷配送服务，提供消费者海量海外商品购买渠道，希望帮助用户“用更少的钱过更好的生活”，助推消费和生活的双重升级。主打自营直采的理念，直接从原产地采购，在海关和国检的监控下，储存在保税区仓库。网易考拉...

2019-05-12 15:54:03 4987

伊娃的博客