- 博客(36)
- 收藏
- 关注
原创 工具函数map、reduce、filter
场景:模拟Api实现的原理mapindex.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sc.
2022-04-19 20:28:43
180
原创 vue项目package.json配置
场景:菜狗配置Jenkins运行测试项目命令‘npm run build’项目显示为正式环境问题:运行命令配置错误导致项目环境错误解决思路:根据不同的环境配置不同的运行脚本命令本地:npm run serve测试:npm run stage正式:npm run build配置环境(与src同级目录).env.developmentNODE_ENV='development'# must start with VUE_APP_VUE_APP_ENV = 'development'.
2022-04-19 20:21:12
2440
原创 防抖截流分析应用
应用场景:防抖:滚动截流:点击、输入防抖index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, init.
2022-04-18 10:32:08
158
原创 vue+elementUi+oss上传
一、 需求:oss子账号上传图片二、前提:《1》配置Bucket (很重要,不设置的话会出现跨域问题)将allowed origins(来源)设置成 *将allowed methods(允许methods)设置成 PUT, GET, POST, DELETE, HEAD将allowed headers(允许headers)设置成 *将expose headers(暴露headers)设置成 ETag (这里需要换行) x-oss-request-id1、后端返回oss的配置信息.
2021-12-20 19:52:38
360
原创 定义工具-根据url获取参数的
需求:根据请求的url,获取对象中key:vue的参数function param2Obj(){ const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g,'') if(!search){ return{} } const obj ={} const searchArr = search.split('&') searchArr.forEach(v=>{ const i.
2021-11-12 16:10:45
775
原创 下一代mock api工具 -- Mock Service Worker
官网:https://mswjs.io/examples前提:-vue create my-project(vue3默认,没用ts的模版)使用步骤1、下载$ npm install msw --save-dev# or$ yarn add msw --dev2、创建目录+文件$ mkdir src/mocks$ touch src/mocks/handlers.js3、src/mocks/handlers.js// src/mocks/handlers.jsimport {.
2021-11-11 18:57:15
805
原创 vue2.9.6版本更新到最新版本
需求:创建vue3项目问题:1、vue-cli4.4.6版本创建项目,没有vue3的选项(vue-cli4.5.x才会有)2、卸载vue-cli4.4.6版本后安装版本为2.9.6版本3、vue-cli2.9.6版本一直卸载失败npm uninstall :《1》4.4.6版本时npm卸载报错,《2》2.9.6版本时卸载一直显示已经更新完成小知识《1》mac:shift+command+. 显示出隐藏文件(文件前有.的文件)《2》mac:shift+command+g 显示出文.
2021-11-11 14:30:58
1659
1
原创 jenkins部署
需求:jenkins已经配置好了,需要新建任务后部署服务注意:这个只是针对自己的工作中的记录不具备参考性jenkins创建任务创建编辑《1》源码管理:勾选git关联git项目,输入git中项目的远程地址指定需要部署的分支《2》构建执行shell#!/bin/bashcd /var/lib/jenkins/workspace/当前创建的任务名称sudo npm installsudo npm run build问题:1、action必填项2、token失效3、请求两次解决如下:<template> <div> <el-form label-width="80px"> <el-form-item label="资源上传:"> <el-upload class="upload-demo" ref="upload" :acti.
2021-09-22 15:47:48
5679
原创 mongo连接报错
需求:db.shutdownServer关闭后再monbo启动报错备注:我不知道是什么原因导致的这个问题,只作为笔记记录一下,亲测有效操作步骤1、找到存储数据的文件(可以在mongod.conf中查看到路径位置)2、手动删除3、进入下载的mongodb包文件,在该目录下运行如下命令,生成mongod.lock文件(注意这个命令执行后不要关闭)sudo ./bin/mongod --dbpath=/usr/local/var/mongodb/// 就是你mongod.conf文件中的.
2021-09-02 16:44:26
456
原创 brew安装mongodb详细教程
需求:mongodb服务正常运行,但是连接被拒绝报错,所以重新安装了一下,mac系统brew安装配置mongodb问题:brew安装报错mongod路径的全局配置资料:参考资料菜鸟教程相关资料一、安装步骤:1、安装//命令:`brew install mongodb` 安装失败,mongodb 在 brew 核心库里面删除了,安装失败(命令:`brew search mongodb`,验证没有核心包)brew tap mongodb/brewbrew in.
2021-09-01 13:10:55
3703
7
原创 nuxt前端部署
需求:部署测试环境工具:阿里云安全规则开启端口(后端20001)、transmit(连接器)参考:针对vue项目-连接器使用参考(所有的文件都压缩为zip放在服务目录下)准备:先运行本地项目,查看项目本身是否可以启动服务上的项目项目中所有文件打包压缩一个zip,放在你自己在服务下新建的目录文件夹下命令解压:unzip 文件名称 (要进入该服务目录下再进行该命令解压)初始化项目:npm install (安装项目插件)运行项目:npm start (启动服务上的项目)nuxt项目配置.
2021-07-29 12:52:14
979
原创 前端部署服务
需求:将项目部署到服务上工具:transmit(服务连接器【我的是mac】)服务ip+账号+密码下载安装:(下载链接在????)下载好后打开如下:(填写服务信息)连接好后输入服务的密码点击右侧ip进入服务端的根目录运行脚本更改为如图所示,更改文件【简介信息】 的打开方式为终端,然后双击运行就打开了服务脚本如下:(双击文件后打开服务输入服务的密码)#!/usr/bin/expectset PORT 22set HOST 121.196.1
2021-07-27 12:11:33
173
2
原创 子元素居中
需求:模块居中方法一: top:0; left:0; bottom:0; right:0; margin:auto;方法二: left: 50%; top: 50%; transform: translateX(-50%) transformY(-50%);
2021-07-21 11:24:55
104
原创 小程序symbol引入阿里云图标
需求:链接引入有颜色的图标方法:阿里云symbol引入图标资料:阿里云图标步骤:(阿里云图标加入和复制symbol链接忽略不写了)初始化生成配置文件package.jsonnpm init -y安装iconfont插件生成node_modules(不会被上传)npm install mini-program-iconfont-cli --save-deviconfont 初始化会出现help提示npx iconfont init//生成iconfont.json.
2021-07-07 13:04:49
217
原创 小程序真机调试内网穿透
问题:真机无法显示接口返回的图片解决:内网穿透(同一个局域网是不行的)参考资料:natapp内网穿透,调试免费版本的就可以步骤更改请求域名更改为如上面的的地址移动端(避免与局域网冲突可以只开流量关闭wifi,直接真机调试就可)...
2021-07-06 17:40:57
694
原创 小程序授权弹出框
需求:小程序授权的弹出框不显示原因:参考资料解决:wx.getUserProfile(Object object)参考资料代码如下:index.wxml<view > <button bindtap="getUserProfile">授权登录</button></view>index.jsgetUserProfile:(e) =>{ // 推荐使用wx.getUserProfile获取用户信息,开发者每次通.
2021-06-30 19:10:29
784
原创 echarts折线图中的tooltip显示多行数据
需求:有xy轴的折线图,显示除了xy轴信息之外后端给的其他信息tooltip方法:利用tooltip中的formatter进行数据拼接//u 折线(区域)图、柱状(条形)图、K线图: {a}(系列名称),{b}(类目值),{c}(数值), {d}(无) tooltip: { trigger:'item', padding:[20,10,20,10], formatter:'{a} </br>{b}:{c}%' }seri.
2021-06-29 19:25:01
2785
原创 echarts的环形图内部显示多行信息
需求:1、样式:没有数据显示全灰色环2、信息:环内部显示多行数据方法:利用graphic数组,设置多个对象,分别设置left和top进行定位效果:代码如下: graphic:[ { type:'text', left:'center',//定位 top:'35%',//定位 style:{ t.
2021-06-29 18:57:55
1616
原创 echarts封装组件-解决界面不显示数据问题
需求:首页显示多种类型的统计图(封装多个组件方便后续使用)问题:数据获取后无法渲染到界面( vue axios属于异步加载数据)解决:利用watch,监控数据变化,根据变化调用渲染echarts的方法参考:按需引入:一、创建组件(components/charts/lineArea.vue)// echarts按需引入<template> <div ref="dom"></div></template><script&g.
2021-06-20 14:53:49
1303
原创 vue根据断网状态显示断网的信息界面
需求:断网状态显示断网的信息界面(noNetwork.vue)注意:只能监控到wifi断开时的状态,如果wifi连接无网络无法显示一、路由配置(routes/index.js)注意:不可以使用路由懒加载的方式 { name: 'noNetwork', path: 'noNetwork', component:require('@/components/errorStatus/noNetwork.vue').default },二、全局中设置(App.vue.
2021-06-17 21:42:56
1499
原创 vue根据http响应状态渲染显示404、500界面
需求:响应错误时,渲染显示出有错误信息的界面准备:在compontent中创建错误信息界面400.vue、500.vue注意:注意查看错误界面需要放在路由的哪一级别(我是children下)一、创建路由(routes/index.js) export default { mode: 'history', routes: [ // 动态路径参数 以冒号开头 { name:'index', path: '.
2021-06-17 19:58:15
1425
原创 下载功能实现:get请求为数组
前序问题:1、get请求中参数为数组:根据后端的要求转化为一定的格式2、下载的文件名称在相应头中:需要后端更改后前端在请求头中获取数组需转换格式要求:数组 a=[“b”,“c”] 要求格式为a=b&a=c//安装qsnpm inistall qs --save//引入qs(我是在请求拦截配置中更改的)important qs from 'qs'/** * 请求拦截器(拦截get处理后可直接传递数组参数) */instance.interceptors.reque
2021-06-07 14:16:44
247
原创 echarts折线图上的圆点显示与隐藏
echarts折线图上的圆点显示与隐藏参考资料:https://echarts.apache.org/zh/option.html#series-line.showSymbolshowSymbol:false鼠标上移:显示圆点问题:在series的对象中设置了showSymbol:false未显示鼠标上移的圆点解决:在toplip对象中添加trigger: ‘axis’,option中的代码如下 option1:{ tool
2021-06-01 11:26:29
26563
原创 vuecli2.9.6升级失败
vuecli2.9.6升级失败新手遇到的问题:记录一下,欢迎更正卸载nodesudo npm uninstall npm -gsudo rm -rf /usr/local/lib/node /usr/local/lib/node_modules /var/db/receipts/org.nodejs.*sudo rm -rf /usr/local/include/node /Users/$USER/.npmsudo rm /usr/local/bin/nodesudo rm /usr/
2021-05-21 18:54:50
110
原创 eCharts的基本使用
eCharts的基本使用参考资料:https://echarts.apache.org/zh/步骤下载npm install echarts --save ·引用(main.js)import * as echarts from 'echarts'Vue.prototype.$echarts = echarts;使用(XXX.vue)<template><div> <div id="main" style="width: 600p
2021-05-20 13:07:09
122
原创 解决路由缓存问题
监控获取当前路由使用路由缓存切换路由导致当前路为上一个路由对象提示:小白菜遇到的问题仅供参考代码如下(示例): watch: { // //当前路由的变化 '$route.path': { immediate: true, handler: function (newPath) { let url = newPath //当前路由的path }
2021-05-18 23:10:50
134
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人