- 博客(32)
- 收藏
- 关注
RSS订阅原创 基本Docker和Nginx的前端SPA应用私有化部署
前言近期，业务上有涉及到关于nginx+docker部署的应用场景，虽然docker+nginx的部署模式，在前端领域已经流行有一段时间，但由于自身的一些技术储备不足，在这上面花费了较多的时间和精力，过程很艰难，所幸在一些先行者所留存的资料中得到帮助，最终成功实现所涉及的技术项目基于vue-cli搭建，主要涉及的一些技术有vue、element、nginx、docker，nginx和docker是本文的主角，nginx主要用于非dev环境的接口请求代理，docker主要用于部署应用部署St
2022-01-24 17:01:13
2297
原创 如何通过shell脚本实现git代码提交及发布分支代码的同步更新
#! /bin/bashdirection_branch=""all_branchs=()function get_branchs(){ index=1 for branch in $(git branch -a) do branch_simple_name=`echo $branch | grep '/' | cut -d '/' -f 3`; if [[ "$branch_simple_name" != "" && "$branch_simple_na
2021-11-15 14:40:44
837
原创 如何在Vue2.x项目中基于EsLint集成Prettier， 提高代码质量，保证代码风格的统一
前言可能会有小伙伴有疑问，Eslint和Prettier任何一个都无疑是非常优秀的代码质量工具，为什么需要融合在一起使用？我个人的理解是Eslint和Prettier在某些方面确实有重叠，但术业有专攻，两者之间也存在着一些侧重。EsLint在代码质量的把控方面具有着非凡的意义，它的主要工作是检查代码质量并给出提示。但在语法风格方面，以及能够支持的文件类型方面有着一定的不足。Prettier正好弥补了这弊端，两种工具在前端工程项目中的配合使用，就具有啦价值。这篇文章主要记录在Vue2.x前端项目中如何集成
2021-11-04 17:53:59
413
原创 git rebase流程
git add .git commit -m "message"git rebasetips: 如果有conflict，先解决confict，之后再git add . git rebase --continuegit push
2021-10-13 17:33:35
250
转载 Leetcode 189.旋转数组
/*给定一个数组，将数组中的元素向右移动 k 个位置，其中 k 是非负数。进阶：尽可能想出更多的解决方案，至少有三种不同的方法可以解决这个问题。你可以使用空间复杂度为 O(1) 的 原地 算法解决这个问题吗？ 示例 1:输入: nums = [1,2,3,4,5,6,7], k = 3输出: [5,6,7,1,2,3,4]解释:向右旋转 1 步: [7,1,2,3,4,5,6]向右旋转 2 步: [6,7,1,2,3,4,5]向右旋转 3 步: [5,6,7,1,2,3,4]示
2021-07-29 19:21:58
64
原创 Leetcode 977.有序数组的平方
/*给你一个按 非递减顺序 排序的整数数组 nums，返回 每个数字的平方 组成的新数组，要求也按 非递减顺序 排序。示例 1：输入：nums = [-4,-1,0,3,10]输出：[0,1,9,16,100]解释：平方后，数组变为 [16,1,0,9,100]排序后，数组变为 [0,1,9,16,100]示例 2：输入：nums = [-7,-3,2,3,11]输出：[4,9,9,49,121] 提示：1 <= nums.length <= 104-104 &
2021-07-29 16:44:21
275
原创 Leetcode 875.爱吃香蕉的珂珂
/* 珂珂喜欢吃香蕉。这里有 N 堆香蕉，第 i 堆中有 piles[i] 根香蕉。警卫已经离开了，将在 H 小时后回来。珂珂可以决定她吃香蕉的速度 K （单位：根/小时）。每个小时，她将会选择一堆香蕉，从中吃掉 K 根。如果这堆香蕉少于 K 根，她将吃掉这堆的所有香蕉，然后这一小时内不会再吃更多的香蕉。 珂珂喜欢慢慢吃，但仍然想在警卫回来前吃掉所有的香蕉。返回她可以在 H 小时内吃掉所有香蕉的最小速度 K（K 为整数）。示例 1：输入: piles = [3,6,7,11], H
2021-07-28 20:15:49
93
原创 Leetcode 35.搜索插入位置
/*给定一个排序数组和一个目标值，在数组中找到目标值，并返回其索引。如果目标值不存在于数组中，返回它将会被按顺序插入的位置。请必须使用时间复杂度为 O(log n) 的算法。示例 1:输入: nums = [1,3,5,6], target = 5输出: 2示例 2:输入: nums = [1,3,5,6], target = 2输出: 1示例 3:输入: nums = [1,3,5,6], target = 7输出: 4示例 4:输入: nums = [1,3,5,6],
2021-07-28 17:50:06
67
原创 Leetcode 278.第一个错误的版本
/*你是产品经理，目前正在带领一个团队开发新的产品。不幸的是，你的产品的最新版本没有通过质量检测。由于每个版本都是基于之前的版本开发的，所以错误的版本之后的所有版本都是错的。假设你有 n 个版本 [1, 2, ..., n]，你想找出导致之后所有版本出错的第一个错误的版本。你可以通过调用 bool isBadVersion(version) 接口来判断版本号 version 是否在单元测试中出错。实现一个函数来查找第一个错误的版本。你应该尽量减少对调用 API 的次数。 示例 1：输入：n
2021-07-23 18:31:11
126
原创 Leetcode 704.二分查找
/**给定一个 n 个元素有序的（升序）整型数组 nums 和一个目标值 target ，写一个函数搜索 nums 中的 target，如果目标值存在返回下标，否则返回 -1。示例 1:输入: nums = [-1,0,3,5,9,12], target = 9输出: 4解释: 9 出现在 nums 中并且下标为 4示例 2:输入: nums = [-1,0,3,5,9,12], target = 2输出: -1解释: 2 不存在 nums 中因此返回 -1提示：你可以假设 nums
2021-07-23 16:59:50
87
原创 浏览器复制文本
const copy = (copyText: string)=>{ const element = document.createElement('span'); element.textContent = copyText; document.body.appendChild(element); const range = document.createRange && document.createRange(); const selection = window.ge
2021-05-17 17:47:08
317
原创 在JavaScript中如何对两个对象进行深度比较
function recursiveComparison(objA, objB, flag) { for (let key in objA) { // 如果objA的key不存在objB中,比较结果为false if (!objB.hasOwnProperty(key)) flag = false; // 递归调用compareDeeply,进行比较 ...
2020-04-03 11:39:08
1825
原创 Canvas_圆环进度条
1. 源代码import React from 'react';export default class Index extends React.Component { componentDidMount() { let x = 45; // 动态变动的进度值 let ctx = this.refs.canvas.getContext('2d'); // 最外层圆环...
2019-10-22 11:10:53
185
转载 git 常用操作命令
git专用名词Workspace // 工作区Index / Stage // 暂存区Repository // 仓库区（本地仓库）Remote // 远程仓库新建代码库git init // 在当前目录新建一个Git代码库git init project_name // 新建一个project_name目录,并将其初始化为一个Git代码库git clone url //...
2019-09-10 09:52:46
118
原创 React-router-dom使用入门
路由组件React-router-dom中提供的路由组件BrowserRouter // history模式路由组件HashRouter // hash模式路由组件NavLink // 声明式跳转组件，可以通过activeClassName(string)和activeStyle(Object)设置激活样式，to：string/ObjectLink // 声明式跳转组件； to: s...
2019-09-10 09:48:33
330
原创 vue-router入门
路由配置Vue Router 是Vue官方的路由管理器。在使用时，需要通过实例化VueRouter，并传入routes配置，该配置是一个数组，数组的每一个成员代表着一条路由信息，每一条路由信息由path和comonent组成，path用来定义需要匹配的路由路径，component用来定义该路径对应的组件。然后需要在实例化Vue时，将路由对象通过router键注入路由器；在任何组件内都可以通过...
2019-09-10 09:46:51
131
原创 如何解决跨域请求
jsonpjsonp是通过动态创建 < script > 元素来实现的，利用src属性发起的请求不会被浏览器视为跨域请求的特性，为script标签的src属性指定一个url地址。通过将前端方法作为参数传递到服务器端，然后由服务器端注入参数之后再返回，实现服务器端向客户端通信，由于使用script标签的src属性，因此只支持get请求 function jsonp(url,callb...
2019-09-10 09:44:49
152
原创 Grid布局
Grid布局也叫网格布局，它将一个容器或者网页划分成一个个网格，通过对网格的任意组合，可以做出各种各样的布局，当一个容器被设为网格布局之后，容器子元素的float、display ：inline-block；、display：table-cell；、vertical-align和column-*等设置都将失效。Grid布局于Flex布局有一定的相似性，都可以制定容器内部多个项目的位置。但...
2019-09-10 09:40:26
256
原创 C3之flex布局
flex布局，也叫作伸缩布局盒模型，是一种更加有效的制定、调整和分布一个容器里的项目布局的方式，即使它们的大小是未知的或者是动态的，当一个容器被设置为flex布局以后，子元素的float、clear和vertical-align属性都将失效。采用flex布局的元素，成为Flex容器，它的所有直系子元素自动成为容器成员，称为flex项目，容器默认存在两根轴，水平的主轴和垂直的交叉轴在...
2019-09-10 09:39:30
604
原创 React项目中蚂蚁金服antd-mobile按需加载的配置
1.暴露配置文件yarn eject运行结束后会自动生成config和scripts两个目录2. 安装bable-plugin-import插件yarn add babel-plugin-import --save3.修改package.json文件中的babel配置项"babel": { "presets": [ "react-app" ], ...
2019-08-24 10:42:02
366
原创 React APP中使用SASS
一、前言Sass是对CSS的扩展，它允许开发者使用变量、嵌套、mixins、导入等众多功能，并且完全兼容CSS语法，并且有助于保持大型样式表的结构良好，同时也能够快速开发小型项目。那么，如何在React APP项目中使用Sass呢？二、依赖包安装安装：node-sass// npm 、yarn、bower都可以安装yarn add node-sass --save**tips:*...
2019-08-16 17:56:56
487
原创 自从有了json-server和mockJS，再也不用手写json啦...
一、前言在进行web网站开发时，需要使用的数据接口通常由后端的同志提供，但是后端同志准备接口也是需要时间的，那在此期间，前端同志一般会使用假数据进行模拟，最简单的办法就是手写json数据啦，可谓是满满的泪…通过使用json-server+mockJS编写的数据模拟器，可以解决数据接口模拟的痛点，可谓是真舒服…二、准备工作step1：目录规划 |- mock |- confi...
2019-08-16 11:49:28
1481
原创 如何禁用 IDEA 集成开发工具 shift + shift快捷键
使用IDEA连续按两次shift shift会出现全局搜索功能，但有时会下意识的两次按下shift，但并非是想使用全局搜索功能，对于这部分朋友，可以使用以下方法将其禁用掉。1. 首先关闭IDEA，打开IDEA安装路径。进入lib文件夹2. 找到resouces.jar3. 使用压缩工具打开，无需解压4. 进入idea文件夹5. 找打 PlatformActions.xml 文件，使...
2019-08-13 15:39:51
1227
原创 Vue中使用normalize.css重置标签样式的正确姿势
step1: 安装normalize.cssnpm i normalize.css -Sstep2:安装css-loader 和 style-loadernpm install css-loader style-loader -Sstep3:在main.js中全局引入normalize.cssimport "normalize.css";...
2019-07-30 17:09:01
2291
原创 git clone错误之" RPC failed; curl 18 transfer closed with outstanding read data remaining"
报错详细信息error: RPC failed; curl 18 transfer closed with outstanding read data remainingfatal: The remote end hung up unexpectedlyfatal: early EOFfatal: index-pack failed解决办法git config --global ht...
2019-07-29 17:11:01
921
转载 git clone错误之"error: RPC failed; curl 56 OpenSSL SSL_read: SSL_ERROR_SYSCALL, errno 10054"
当我们使用git clone指令从github 上download其它优秀的代码时，如果报如下错误RPC failed; curl 56 OpenSSL SSL_read: SSL_ERROR_SYSCALL, errno 10054这是因为服务器的SSL证书没有经过第三方机构的签署，所以才报错。解决方案如下：第一步，克隆远程仓库时，用env命令设置GIT_SSL_NO_VERIFY环境变...
2019-07-25 12:18:30
11294
1
转载 基于express库的node服务器环境搭建
1. 基于express库的node服务器环境搭建// 安装express模块// npm instal express -S// 引入express模块let express = require('express');// 开启服务server = express();// 配置静态页面托管位置// express.static('./')// 安装静态资源托管配置到serve...
2019-07-16 20:30:32
211
转载 基于nodejs的第三方模块（包）安装、版本约定及commonjs模块化介绍
1. 基于nodejs的第三方模块（包）的安装安装工具npm安装：npm install ....卸载：npm uninstall ...bower安装：bower install ...卸载：bower uninstall ...yarn安装：yarn add ...卸载：yarn remove ...安装到全局环境（即在计算机的任何目录下都可以使...
2019-07-16 19:47:52
601
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人