vue
yuanyi正
前端
展开
-
图片上传例子-前后端
图片上传例子-前后端图片上传,并不简单会后台的,不知道前端怎么上传图片会前端的,不知道后台怎么保存图片这个文章,一次性把前后端都展示了前后端源码地址https://gitee.com/618859/picture-upload-node效果安装依赖1.安装node环境:去node官网下载node安装即可2.安装依赖 npm i3.运行 node server.js4.去浏览器访问 http://localhost:7070/我微信号 yizheng369 不懂可以问我..原创 2022-01-01 00:09:15 · 1670 阅读 · 0 评论 -
node上传图片-vue前端+express后台
上传图片是很常见的功能但是这个功能有点挑战要处理好:1.前端图片上传,2.后台接收图片,3.后台保存图片,4.将保存地址返回给前端,前端回显图片。有不懂的同学可以咨询我微信号yizheng369另外一份html+node参考源码:https://gitee.com/618859/picture-upload-node效果将电脑选择的文件图片预览:URL.createObjectURL(file.raw)vue前端代码注意:前端此处用了element-ui框架sureFun() {.原创 2022-05-08 15:45:24 · 1309 阅读 · 6 评论 -
uniapp在hbuilder上真机运行iphone6的解决方案
用hbuilder开发一个uniapp软件,想用ios真机调试,试了网上非常多方法,什么下载iTunes,下载爱思修复驱动,都没法解决,最后发现iTunes库目录下少了一个文件夹 (Apple Application Support)首先:你要先按官方的文档检查一遍:https://ask.dcloud.net.cn/article/97然后:在确认数据线没有问题,iTunes也能连上手机,并且重启hbuilder都无效的情况下,查看C:\Program Files (x86)\Common F.原创 2021-12-31 10:53:54 · 1817 阅读 · 1 评论 -
karma mocha 对vue组件单元测试不生效,是@vue/cli-service版本变化导致的
注意当前时间节点 2021.12.30注意对比学习:注意看package.json里面的"@vue/cli-service"包版本号我的版本是"@vue/cli-service": "~4.5.0"会出问题如果版本是"@vue/cli-service": "~3.0.0",则不会出现问题原因是@vue/cli-service的版本变化,导致webpack的配置变化而造成问题的假设1:"@vue/cli-service": "~4.5.0"解决办法:karma.conf.js文件写法如下原创 2021-12-30 19:32:24 · 1281 阅读 · 0 评论 -
nwjs打包的app.exe自动化测试python2.7 selenium,和解决报错cannot find Chrome binary
自动化测试nwjs打包的软件因为公司开发的软件要测试,那我们就采用自动化测试,多省事呢,哈哈python2.7 自动测试nwjs打包的app.exe 软件 效果展示 参考官方例子https://nwjs.org.cn/doc/user/Advanced/Test-with-ChromeDriver.html全程自动,无需人参与如果过程中有什么错误,一定不要放弃,加我微信号yizheng369问我开始首先你要先安装python2.7谨记,一定是python2.7否则后果自负pytho原创 2021-12-16 12:46:05 · 1618 阅读 · 0 评论 -
jest vue unit 单元测试在测试多个test.js spec.js文件时,控制台都能输出详细每一条信息
jest unit test原创 2021-12-06 18:59:02 · 722 阅读 · 0 评论 -
<van-field 失去焦点后,就自动清空输入框了,大bug
vant的van-field输入框自动清空bug原创 2021-12-04 17:24:44 · 7170 阅读 · 12 评论 -
前端开发一些技巧
熟悉使用一些技巧和插件,对开发简直如虎添翼喔1.程序运行时,设置环境变量"scripts": { "dev": "cross-env AA=我就是一个环境变量 myName=yizheng node app.js", "test": "echo \"Error: no test specified\" && exit 1" },app.js文件console.log('env', process.env);控制台打印效果:env { AA: '我就.原创 2021-11-29 17:51:11 · 422 阅读 · 0 评论 -
视频加背景音乐
用格式工厂:视频混流1.选择视频混流2.选择视频3.选择音乐4.确定背景音乐下载可以通过酷我音乐客户端下载一些免费的背景音乐,酷我音乐客户端下载地址:http://www.kuwo.cn/down好一点的也要收钱的,好像一个月就2.8元,也不贵,可以考虑...原创 2021-11-17 09:33:59 · 454 阅读 · 0 评论 -
前端的数据分类-来自后台的json数组数据
将后台返回的数组,按照父子结构分类,并展示需求:后台返回数据前端要展示的效果实现代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" cont.原创 2021-11-15 18:53:11 · 842 阅读 · 0 评论 -
开发npm包,vue插件形式发布
熟悉vue2.0开发的网友,只需要看看这个源码,运行起来,然后直接发布即可,其他插件的发布道理一样。如果你还不熟悉vue2.0的开发,建议先不要看这个。npm包vue插件源码源码下载好后,依次运行下面语句即可npm i // 安装依赖npm run build // 打包npm publish // 发布到npm平台上如有不懂,可留言评论私信。...原创 2021-11-15 09:25:04 · 749 阅读 · 0 评论 -
vue 单元测试
vue 单元测试vue unit_testjest参考官网说明 https://vue-test-utils.vuejs.org/zh/installation/1.浏览器环境npm install --save-dev jsdom jsdom-global// 在测试的设置 / 入口中 (这一句是错的,不用管他)require('jsdom-global')()2.我们要做的第一件事就是安装 Jest 和 Vue Test Utils: npm install --save-d原创 2021-11-05 17:18:47 · 1115 阅读 · 0 评论 -
Meteor中集成Vue注意事项
intro场景1:如果你发现有一个旧的meteor项目的版本是1.8.1的,是在2019年5月前创建的你现在2021年10月,还想创建一个1.8.1的meteor项目,可以通过指定版本号来创建项目,如下:meteor create vue-meteor-app --release 1.8.1然后:但是当你创建好项目,想通过在命令行输入meteor来运行时,发现报错了。Uncaught Error: jQuery not found他说你缺少jquery这个包,而且你不能通过npm i jq原创 2021-10-27 12:10:31 · 521 阅读 · 0 评论 -
meteor add 指定版本安装插件 meteor create指定版本创建项目
meteor add akryum:vue-component@=0.14.3D:\yiz\work\Meteor_test\new_meteor_vue_pro_1.8.1>meteor add --helpUsage: meteor add <package> [package..]Adds packages to your Meteor project. You can add multiplepackages with one command. To query for原创 2021-10-27 11:32:56 · 328 阅读 · 0 评论 -
前端开发我的优势
前端开发优势1.精通vue开发1.vue的MVVM响应式原理和自我实现https://github.com/banana618859/my_vue_MVVM2.vue全家桶熟练使用(vue-router\vuex\watch\computer\mixin\props\emit)3.vue+Element-ui熟练使用,2年工作使用经验2.扎实的html+css功底1.6年前端网页开发经验,能根据各种场景,自主开发对应的功能组件和插件2.网页还原率在95%以上3.拥有各种终端自适应方案(p原创 2021-10-05 21:56:23 · 9057 阅读 · 2 评论 -
nwjs监听右上角关闭事件close,提示是否关闭
效果如下:代码如下:这里用到了vue + element-ui的弹出框,如果自己写一个弹出框也行的,mounted(){ // 监听软件右上角关闭点击 nw.Window.get().on('close',async function(){ console.log('this-win',this) // 如果点击确定就关闭 let rel = await that.answerFun('确定关闭?') console.log('结果:',rel)原创 2021-10-01 14:05:42 · 861 阅读 · 2 评论 -
exceljs中单元格cell的font color修改导致污染的解决办法 exceljs cell font color
用exceljs通过指定excel模板替换部分内容exceljs中单元格的font修改导致污染的解决办法**场景:**有一个公司的excel模板,根据每次的不同结果,在模板的基础上替换某些单元格的内容。如下:如果第8行的结果为失败FAIL,那就应该为红色字体的。但是结果却为绿色。明显不对原因在下图:上面: 经过选中要处理的单元格,鼠标右键-清除内容-格式。就可以切断单元格之间的联系了,就可以任意设置单元格的样式了。效果如下:不懂的可以微信我号 yizheng369更多接口知识:http原创 2021-09-23 18:25:56 · 563 阅读 · 0 评论 -
Node-Webkit:nw.js 父子窗口间通信 Child window to call parent window
Node-Webkit:nw.js 父子窗口间通信 Child window to call parent window感谢网友分享参考文章http://www.360doc.com/content/16/0125/15/597197_530455358.shtml父页面代码:index.html<!DOCTYPE html><html lang="en"> <head> <title>Hello World!</tit原创 2021-08-17 15:29:09 · 687 阅读 · 0 评论 -
实现Element-ui表格点击可以编辑
实现Element-ui表格点击可以编辑直接复值代码就可以运行了:有不懂,可评论!<template> <div> <!-- <input type="file" id="people-export" ref="inputer" @change="fileUpload" /> --> <p style="font-size:26px; text-align: center; padding: 30px;">实现Eleme原创 2021-06-18 16:15:06 · 1786 阅读 · 2 评论 -
vue unit test 单元测试 jest element-ui国际化i18n报错解决 Cannot read property ‘_t‘ of undefined Unknown custom
报错点:1.Cannot read property ‘_t’ of undefined2. Unknown custom element: - did you register the component correctly?解决方法:直接看下面代码就好了// 1导入:vue测试工具类// import Vue from 'vue';import {shallowMount, mount, createLocalVue } from '@vue/test-utils';const loc原创 2021-05-17 15:15:07 · 2856 阅读 · 0 评论 -
Meteor服务端调用client客户端的方法
一、客户端:可以在main.js中注册Deps.autorun(function() { Meteor.ClientCall.setClientId('123id')});然后:在页面中声明监听方法,等待服务器调用created() { Meteor.ClientCall.methods({ 'FunctionName': function (username, message) { console.log('FunctionName12原创 2021-04-12 21:13:50 · 1170 阅读 · 0 评论 -
jQuery not found meteor
jQuery not found meteor最近通过meteor创建项目发现提示这个错误jQuery not found meteor然后,运行meteor add jquery安装jquery就可以了原创 2021-02-24 15:49:14 · 328 阅读 · 0 评论 -
那些vue的坑,哈哈
1.表单内只有一个输入框时,el-form按enter会刷新看看element-ui官网的表单模块下有说明喔W3C 标准中有如下规定:When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.即:当一个 form 元素中只有一个输入框时,在该输入框中按下回车应提交该表单。原创 2021-01-11 15:25:56 · 264 阅读 · 0 评论 -
记一次Meteor打包meteor build后,表的发布和订阅变慢
记一次Meteor打包meteor build后,表的发布和订阅变慢特殊点:由于这个项目要和python通信,python直接在我的mongodb数据库表插入一条数据,我通过他插入的数据做相应的响应。在开发环境挺好的,但打包后,表的发布和订阅突然变慢了大概7秒左右。(开发环境本来python插入数据马上就能订阅到的,但打包之后python插入数据要等7秒才会订阅到变化)查了很多问题都没解决,好苦,后来领导发来了几个参数,配上去就解决了,太厉害了,感谢!控制meteor表的发布和订阅频率参数polling原创 2020-12-14 22:57:01 · 300 阅读 · 0 评论 -
insert failed: Method Meteor框架
你应该在客户端client和服务器端server都要引入你的表,否则就报错如下:insert failed: Method解决办法假如你有一张表,/imports/collections/message.jsmessage = new Mongo.Collection('message')if(Meteor.isServer){ Meteor.publish('message', function () { return message.find(); });}else{原创 2020-12-03 10:51:52 · 337 阅读 · 0 评论 -
nodejs写入json文件,格式化输出json的方法
将 JSON 对象写入文件。使用 fs.writeFile(),模板字面量 和 JSON.stringify() 将 json 对象写入到 .json 文件中。写入json文件后,都会出现很恶心的一行式Vanilla JS的JSON.stringify()是可以让输出实现漂亮直观的json的。第一段代码可以这样写,第三个参数设置为"\t"(第二个参数一定要补,可以写成"",也可以为null):let str = JSON.stringify(data,"","\t")或者let str =原创 2020-11-09 16:58:51 · 3053 阅读 · 2 评论 -
el-radio如何分行排版element-ui,每一项占一行用 display: block;
原来的组件效果处理后的效果使用的代码<style scoped> /deep/ .el-radio{ display: block; line-height: 23px; white-space: normal; margin-right: 0; }</style>原创 2020-09-18 08:55:04 · 9235 阅读 · 3 评论 -
vue样式穿透
vue样式穿透在vue开发过程中,可能会遇到修改element ui组件样式的时候,无效的问题,在网页检查页面元素的时候发现自己写的样式不生效,原因是因为中scoped的问题导致,所以我们需要用到样式穿透:1、stylus的样式穿透 使用:(>>>)外层类 >>> 想要修改的类名 {要修改的样式}例:.wrapper >>> .el-card__header {border-bottom: none}2、sass和less的样式穿透原创 2020-08-03 21:17:26 · 327 阅读 · 0 评论 -
vxe-table 动态列 tree-node功能
vxe-table 动态列 和tree-node功能官网参考资料https://xuliangzhan_admin.gitee.io/vxe-table/#/table/grid/tree组件<vxe-table :data="tableData" :columns="tableColumn" // 动态列 :tree-config="{children: 'children'}"> </vxe-table>动态原创 2020-06-28 20:34:11 · 4770 阅读 · 0 评论 -
vue双向数据绑定实现原理(简单版)
vue双向数据绑定原理利用了Object.defineProperty(obj,‘name’,{})重新定义了对象,并对对象里面的所有属性的赋值和取值进行了监听实现代码:运行一下就知道了。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial原创 2020-06-22 09:13:31 · 516 阅读 · 0 评论 -
vue input每次输入一个字符后自动失去焦点-与绑定值:key有关
vue input每次输入一个字符后自动失去焦点代码如下,遇到的问题就是:我在输入框输入的时候,每输入一次,输入框就自动失去焦点了。ps:实现的功能是,每点击一次添加按钮,然后就会为list对象的name数组添加一个对象,这个时候就会生成一个新的input,在这个input输入就会遇到如上问题 <div class="addTags" v-for="(item,index) in...原创 2020-05-06 11:51:02 · 7782 阅读 · 1 评论 -
组件封装的原则
1.业务与功能脱离2.用户可自定义(不可自定义,不算组件)原创 2020-04-30 10:51:31 · 2215 阅读 · 1 评论 -
vue+element-ui+sortable.js实现表格行和列的拖拽
vue+element-ui+sortable.js实现表格行和列的拖拽真的 行和列都可以拖拽源码在这里:(自己去下载看看哈)https://github.com/banana618859/vue_table_drag效果图一:图二:两种效果,两种实现方式希望对您有帮助。...原创 2020-04-28 20:11:14 · 1496 阅读 · 0 评论 -
vue组件从一个项目转移到另一个项目可能出现的bug
有些莫名奇妙的bug组件在不同项目间的转移注意点:1.package.json的对比(仔细看所有插件的版本对比)可以使用在线代码对比工具查看不同http://www.matools.com/compare2020-04-28发现vue和vue-template-compiler版本的不同,导致的bug“vue”: “^2.5.2”,“vue-template-compiler”...原创 2020-04-28 14:53:13 · 877 阅读 · 0 评论 -
学习vue看这篇文章就够了
学习vue看这篇文章就够了1.最快入门vue开发安装nodejs(node中包含了npm)http://nodejs.cn/download/用npm安装vue-cli到电脑npm install @vue/cli -g通过vue-cli生成vue基础项目vue create vueapp开始你的编码2.完善自己的vue项目1.vue组件化2.vue组件化通...原创 2020-03-17 10:13:49 · 463 阅读 · 0 评论 -
vue数据劫持和双向绑定原理
主要是用了Object.defineProperty重新定义了一下属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale...原创 2020-03-12 10:31:54 · 533 阅读 · 0 评论 -
我的犯错历史-vue数据没有同步变化
1.vue的数据无法实现响应式和监听变化原因我今天又栽倒在这里花了2个小时,太惨烈了。比如对象user{name: ‘tom’,age:10}中没有money这个属性的,后来想添加money,就出现了数据没有即时更新的情况。简单的赋值:this.user.money = 0(这样添加,数据不会被监听。)原因:1.页面加载完毕后,原来的数据结构中没有该属性。故无监听2.在代码中动态...原创 2020-02-25 16:53:25 · 400 阅读 · 0 评论 -
如何修改ElementUI源码
如何修改ElementUI源码参考官方文档1.拷贝官方源码-安装首先将ElementUI的官方源码库clone下来https://github.com/ElemeFE/element.gitcd elementnpm install2.修改源码后-重新打包-替换安装完依赖后运行打包命令npm run dist执行完成后可以发现根目录下多了lib文件夹,这个文件夹中的文件就是打包...原创 2020-02-10 10:07:20 · 2411 阅读 · 0 评论 -
Collapse div折叠面板功能 vue+jquery完美实现!
Collapse div折叠面板功能 vue+jquery完美实现!代码:(直接复制-即可运行-实现简单,高效)<!-- * @Descripttion: * @Author: yizheng.yuan * @Date: 2020-01-07 17:26:35 * @LastEditors : yizheng.yuan * @LastEditTime : 2020-01-...原创 2020-01-08 18:59:40 · 1469 阅读 · 0 评论 -
Uncaught TypeError: _Vue.component is not a function meteor1.8.3 vue
Meteor1.8.3 vue升级到meteor1.8.3之后,在浏览器打开时发现了报错Uncaught TypeError: _Vue.component is not a function一、先给出我的解决办法在根目录新建一个imports的文件夹,只要将所有的vue文件从client里面剪切到imports文件夹里面即可。估计是meteor官方又改变了文件的存放目录而引起的。如下图...原创 2019-12-24 09:25:59 · 5507 阅读 · 2 评论