- 博客(36)
- 收藏
- 关注
RSS订阅原创 工具函数map、reduce、filter
场景：模拟Api实现的原理 map 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, initial-sc.
2022-04-19 20:28:43
224
原创 vue项目package.json配置
场景：菜狗配置Jenkins运行测试项目命令‘npm run build’项目显示为正式环境 问题：运行命令配置错误导致项目环境错误 解决思路：根据不同的环境配置不同的运行脚本命令 本地：npm run serve 测试：npm run stage 正式：npm run build 配置环境（与src同级目录） .env.development NODE_ENV='development' # must start with VUE_APP_ VUE_APP_ENV = 'development' .
2022-04-19 20:21:12
2524
原创 防抖截流分析应用
应用场景： 防抖：滚动 截流：点击、输入 防抖 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
219
原创 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-id 1、后端返回oss的配置信息.
2021-12-20 19:52:38
427
原创 定义工具-根据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
836
原创 下一代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 --dev 2、创建目录+文件 $ mkdir src/mocks $ touch src/mocks/handlers.js 3、src/mocks/handlers.js // src/mocks/handlers.js import {.
2021-11-11 18:57:15
981
原创 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
1778
1
原创 jenkins部署
需求：jenkins已经配置好了，需要新建任务后部署服务 注意：这个只是针对自己的工作中的记录不具备参考性 jenkins创建任务 创建 编辑 《1》源码管理： 勾选git关联git项目，输入git中项目的远程地址 指定需要部署的分支 《2》构建 执行shell #!/bin/bash cd /var/lib/jenkins/workspace/当前创建的任务名称 sudo npm install sudo 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
5813
原创 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
524
原创 brew安装mongodb详细教程
需求： mongodb服务正常运行，但是连接被拒绝报错，所以重新安装了一下，mac系统brew安装配置mongodb 问题： brew安装报错 mongod路径的全局配置 资料： 参考资料 菜鸟教程相关资料 一、安装步骤： 1、安装 //命令：`brew install mongodb` 安装失败，mongodb 在 brew 核心库里面删除了，安装失败(命令：`brew search mongodb`，验证没有核心包) brew tap mongodb/brew brew in.
2021-09-01 13:10:55
3947
7
原创 nuxt前端部署
需求：部署测试环境 工具：阿里云安全规则开启端口（后端20001）、transmit(连接器) 参考：针对vue项目-连接器使用参考（所有的文件都压缩为zip放在服务目录下） 准备：先运行本地项目，查看项目本身是否可以启动 服务上的项目 项目中所有文件打包压缩一个zip，放在你自己在服务下新建的目录文件夹下 命令解压：unzip 文件名称 （要进入该服务目录下再进行该命令解压） 初始化项目：npm install (安装项目插件) 运行项目：npm start (启动服务上的项目) nuxt项目配置.
2021-07-29 12:52:14
1102
原创 前端部署服务
需求：将项目部署到服务上 工具： transmit(服务连接器【我的是mac】) 服务ip+账号+密码 下载安装：（下载链接在????） 下载好后打开如下：（填写服务信息） 连接好后 输入服务的密码 点击右侧ip进入服务端的根目录 运行脚本 更改为如图所示，更改文件【简介信息】 的打开方式为终端，然后双击运行就打开了服务 脚本如下：（双击文件后打开服务输入服务的密码） #!/usr/bin/expect set PORT 22 set HOST 121.196.1
2021-07-27 12:11:33
237
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
137
原创 小程序symbol引入阿里云图标
需求：链接引入有颜色的图标 方法：阿里云symbol引入图标 资料：阿里云图标 步骤： （阿里云图标加入和复制symbol链接忽略不写了） 初始化生成配置文件package.json npm init -y 安装iconfont插件生成node_modules(不会被上传) npm install mini-program-iconfont-cli --save-dev iconfont 初始化会出现help提示 npx iconfont init //生成iconfont.json.
2021-07-07 13:04:49
281
原创 小程序真机调试内网穿透
问题：真机无法显示接口返回的图片 解决：内网穿透（同一个局域网是不行的） 参考资料：natapp内网穿透，调试免费版本的就可以 步骤 更改请求域名 更改为如上面的的地址 移动端（避免与局域网冲突可以只开流量关闭wifi，直接真机调试就可） ...
2021-07-06 17:40:57
784
原创 小程序授权弹出框
需求：小程序授权的弹出框不显示 原因：参考资料 解决：wx.getUserProfile(Object object）参考资料 代码如下： index.wxml <view > <button bindtap="getUserProfile">授权登录</button> </view> index.js getUserProfile:(e) =>{ // 推荐使用wx.getUserProfile获取用户信息，开发者每次通.
2021-06-30 19:10:29
845
原创 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
3046
原创 echarts的环形图内部显示多行信息
需求： 1、样式：没有数据显示全灰色环 2、信息：环内部显示多行数据 方法： 利用graphic数组，设置多个对象，分别设置left和top进行定位 效果： 代码如下： graphic:[ { type:'text', left:'center',//定位 top:'35%',//定位 style:{ t.
2021-06-29 18:57:55
1832
原创 echarts封装组件-解决界面不显示数据问题
需求：首页显示多种类型的统计图（封装多个组件方便后续使用） 问题：数据获取后无法渲染到界面（ vue axios属于异步加载数据） 解决：利用watch，监控数据变化，根据变化调用渲染echarts的方法 参考： 按需引入： 一、创建组件(components/charts/lineArea.vue) // echarts按需引入 <template> <div ref="dom"></div> </template> <script&g.
2021-06-20 14:53:49
1360
原创 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
1631
原创 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
1527
原创 下载功能实现:get请求为数组
前序 问题： 1、get请求中参数为数组：根据后端的要求转化为一定的格式 2、下载的文件名称在相应头中：需要后端更改后前端在请求头中获取 数组需转换 格式要求：数组 a=[“b”,“c”] 要求格式为a=b&a=c //安装qs npm inistall qs --save //引入qs(我是在请求拦截配置中更改的) important qs from 'qs' /** * 请求拦截器(拦截get处理后可直接传递数组参数) */ instance.interceptors.reque
2021-06-07 14:16:44
318
原创 echarts折线图上的圆点显示与隐藏
echarts折线图上的圆点显示与隐藏 参考资料：https://echarts.apache.org/zh/option.html#series-line.showSymbol showSymbol:false 鼠标上移：显示圆点 问题：在series的对象中设置了showSymbol:false未显示鼠标上移的圆点 解决：在toplip对象中添加trigger: ‘axis’, option中的代码如下 option1:{ tool
2021-06-01 11:26:29
27620
原创 vuecli2.9.6升级失败
vuecli2.9.6升级失败 新手遇到的问题：记录一下，欢迎更正 卸载node sudo npm uninstall npm -g sudo 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/.npm sudo rm /usr/local/bin/node sudo rm /usr/
2021-05-21 18:54:50
151
原创 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
150
原创 解决路由缓存问题
监控获取当前路由 使用路由缓存切换路由导致当前路为上一个路由对象 提示：小白菜遇到的问题仅供参考 代码如下（示例）： watch: { // //当前路由的变化 '$route.path': { immediate: true, handler: function (newPath) { let url = newPath //当前路由的path }
2021-05-18 23:10:50
177
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人