首页
更多应用
Search
1
修改iview的标签为i-的形式而不是驼峰的形式
2,733 阅读
2
PHP微信和企业微信签名
2,423 阅读
3
在VUE中怎么全局引入sass文件
2,176 阅读
4
vscode硬件占用较高解决方案
1,910 阅读
5
解决Macos下storm系列IDE卡顿的问题
1,859 阅读
默认分类
JS
VUE
CSS
mac使用技巧
React
fastmock
登录
/
注册
Search
标签搜索
react
js
vue
nodejs
vscode
项目
代码
webpack
工具
nginx
小程序
css
fastmock
http
vue-cli3
eslint
git
浏览器
const
true
fastmock技术社区
累计撰写
95
篇文章
累计收到
9
条评论
首页
栏目
默认分类
JS
VUE
CSS
mac使用技巧
React
fastmock
页面
更多应用
搜索到
52
篇与
的结果
2023-02-22
windows系统下npm全局命令无法执行解决办法
如题,一般我们刚安装的windows操作系统,前往nodejs官网下载nodejs安装包后,windows下默认没有node和npm指令。这是因为我们的windows系统还没有添加nodejs环境变量,所以找不到路径。这时候需要将nodejs的安装路径添加到环境变量的 Path 变量中。如我的路径C:\Program Files\nodejs这时候,再回到cmd或者powershell,命令行就可以执行 node 命令了。但是还不能执行使用npm安装的全局包的命令。如 cnpm,nvm,nrm 等,解决办法如下1、使用 npm config get prefix 找到npm全局包的安装路径,如我的电脑输出路径为C:\Users\Administrator\AppData\Roaming\npm将这个路径也添加到环境变量 Path 中,重启cmd或powershell命令行工具就可以了。如果进行了上面的配置还是不行,并且控制台打印如下内容[](//upload-images.jianshu.io/upload_images/24769119-157c81028621d8b8.png?imageMogr2/auto-orient/strip|imageView2/2/w/979/format/webp)这是因为windows的安全策略禁用了当前目录下的命令解决方案如下1、在系统中 搜索框 输入 PowerShell 或者 右击任务栏的电脑图标,找到 Windows PowerShell(管理员);2、点击“管理员身份运行”;3、输入 set-ExecutionPolicy RemoteSigned 回车;4、根据提示内容,输入A跳过后面的步骤确认,回车等待执行结束;5、重启控制台 输入 cnpm --version 执行就可以成功了。
2023年02月22日
289 阅读
0 评论
0 点赞
2022-12-07
GitHub 代码库收藏
地址:https://github.com/drawdb-io/drawdb在线数据库设计,可罗拉拽设计数据表的字段,索引,关联关系等地址:https://github.com/trekhleb/javascript-algorithms算法和数据结构是软件开发的支柱。顾名思义,这个代码库中包含许多流行算法和数据结构的 JavaScript 示例。每个算法和数据结构都有单独的 README 文件,其中包含相关的说明以及进一步的参考资料。这个代码库的 Star 数超过 15.5 万个,也是 GitHub 上 Star 数最多的代码库之一。地址:https://github.com/airbnb/javascript这个代码库来自 Airbnb。编程是一门艺术,而开发人员是艺术家,没有艺术家想把作品搞得一塌糊涂。这个代码库中提供了你可以在编程过程中遵循的最佳实践,GitHub 上的 Star 数超过 12.9 万个。地址:https://github.com/ryanmcdermott/clean-code-javascript" 代码的整洁性 " 是 Robert C. Martin 的著作《代码整洁之道》(Clean-code) 中提出的最著名的软件工程原则之一。这个代码库是 JavaScript 版的《代码整洁之道》,是使用 JavaScript 编写可读、可重用和可重构软件的指南,GitHub 上的 Star 数为 7.5 万个。地址:https://github.com/lydiahallie/javascript-questions这个代码库包含大量(高级)JavaScript 问题及其说明。你可以通过这个代码库测试一下自己的 JavaScript 水平,复习一下 JavaScript 知识,或者为编程面试做准备。GitHub 上的 Star 数为 4.95 万个。地址:https://github.com/leonardomso/33-js-concepts这个代码库旨在帮助开发人员掌握 JavaScript 中的概念。虽然学习这些概念不是必须的,但对未来的学习有很多裨益。这个代码库在 GitHub 上 Star 数为 5.3 万。地址:https://github.com/elsewhencode/project-guidelines虽然开发新项目令人激动万分,但对维护人员来说是一个潜在的噩梦。这个代码库包含一系列 JavaScript 项目的最佳实践。这个代码库在 GitHub 上有 2.75 万个 Star。地址:https://github.com/30-seconds/30-seconds-of-code这个代码库收集了各种 ES6 辅助函数的 JavaScript 片段,包含有关如何处理原语、数组和对象的说明,以及算法、DOM 操作函数和 Node.js 实用程序。GitHub 上的 Star 数为 10.5 万个。
2022年12月07日
420 阅读
0 评论
0 点赞
2022-11-23
webpack5.x+React18搭建移动端项目
webpack5.x+React18搭建移动端项目项目仓库地址 https://github.com/MarvenGong/webpack5-react18-ts-basic在项目开发中,每开始一个新项目我都是使用现有的脚手架,这非常便于快速地启动一个新项目,而且通用的脚手架通常考虑地更加全面,也有利于项目的稳定开发;不过对于一个小项目,根据需求自己搭建可能会更好,一方面小项目不需要脚手架那么丰富的功能,另一方面可以提高对项目的掌控度以方便后期的扩展本项目基于公司内一个移动端项目搭建,旨在搭建一个快速,高效,灵活的前端开发环境。项目中使用了最新版本的webpack构建工具,最新版本的react前段框架和react-router6.x特性搭建,通过本项目,可以可以熟悉和巩固以下基础技能webpack5构建原理和基本配置,以及打包性能的提升和使用方法react18的feature,如,根组件的创建方式等const root = createRoot(document.getElementById('root') as Element); root.render(<RouterProvider router={router} />);react-router6 的新特性和单文件路由的使用方式wecpack5 中配置移动端响应式方案 rem布局的方法其他webpack插件和loader的使用项目仓库地址 https://github.com/MarvenGong/webpack5-react18-ts-basic接下来,详细说明项目中的各个配置环境webpack5的一个重要特性,会根据配置的mode属性是develop还是production来判断是否需要开启构建优化,这个优化过程是指对构建产品的优化,如js uglify,压缩,tree-shaking 等等,所以,我们的开发环境,是可以不用用到那些优化操作的,那么就需要把mode指定成 develop 这样可以在我们保存代码后,获得更快的热更新速度,我这里为了简单,直接在npm script中制定env,在webpack.js中使用package.json 中的scripts"scripts": { "serve": "cross-env NODE_ENV=development webpack serve --config webpack.config.js", "dev": "npm run serve", },PS: 切忌在NODE_ENV=development顺手写上&&写上了就设置不上了webpack.config.js 中使用环境变量const isDev = process.env.NODE_ENV === 'development'; mode: isDev ? 'development' : 'production',基础配置1、entry入口,配置webpack构建的入口文件我这里使用了package.json 中的name属性的值作为主文件的名称entry: { [packageJson?.name]: path.resolve(__dirname, './src/app.tsx'), },2、output 制定输出文件路径和文件名output: { // 开发环境不使用hash文件名 filename: isDev ? '[name].js' : '[name].[hash].js', path: path.resolve(__dirname, './dist'), publicPath: '/', clean: true, // 输出文件前会先清空目标目录的文件 },3、stats 指定webpack在控制台的输出内容stats: { all: false, assets: true, errors: true, assetsSort: '!size', // 按照文件大小倒序 entrypoints: true, modules: false, assetsSpace: 1000, preset: 'minimal', },4、devServer 配置本地开发服务器,如端口,代理等,此处不做详细说明,5、devtool 制定sourcemap文件生成方式devtool: isDev ? 'inline-source-map' : 'source-map', // 开发环境直接打包到js文件中,现网环境打包到独立文件,我的处理方式是在自动化部署工具中将sourcemap文件保存到特定地方,线上排查的时候使用6、resolve 配置6-1 extensions 指定webpack需要处理的文件扩展名类型6-2 alias 路径别名,注意要去 tsconfig 中相应配置,否则代码中会报ts错误项目使用的loader处理module说明ts-loader 处理typescript 语法以及es6特性(包含了babel-loader)style-loader 处理样式资源到html中,开发环境使用MiniCssExtractPlugin.loader 处理样式资源到单独的样式文件中,生产环境使用css-loader 让我们可以在js(x)或者ts(x)中使用import语句导入样式文件 如 import ‘./style.less’postcss-loader 对css进行编译处理,本项目主要用来处理 px2rem 将我们的样式中的px转为rem(只能针对import导入的样式文件,行内样式不生效)less-loader less编译为cssurl-loader 处理图片和字体等资源,小于limit则编码,大于则处理路径,包含了 file-loader(file-loader 主要作用是使我们可以在js(x)或者ts(x)中使用import语句导入静态资源文件 import ‘./xxx.png’)使用到的plugins做打包后处理说明copy-webpack-plugin 拷贝 public下的静态资源到 dist 目录clean-webpack-plugin 清理打包目标目录,防止重复文件WebpackBar 美化打包进度显示的插件HtmlWebpackPlugin 处理我们的构建产物到指定的html中,重中之重MiniCssExtractPlugin 压缩我们的css文件,只在生产环境使用好了,有了上面的介绍,就可以直接看我们的webpack配置文件了主webpack.config.js// @ts-nocheck const path = require('path'); const tsImportPluginFactory = require('ts-import-plugin'); const SpeedMeasurePlugin = require('speed-measure-webpack-plugin'); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const smp = new SpeedMeasurePlugin(); const fs = require('fs'); const packageJson = require('./package.json'); const optimization = require('./webpack-configs/optimization'); const config = require('./webpack-configs/config'); const plugins = require('./webpack-configs/plugins'); const isDev = process.env.NODE_ENV === 'development'; const SMP_SWICTH = false; console.log('-------当前环境-------', process.env.NODE_ENV); const wrapConfig = (isDev && SMP_SWICTH) ? smp.wrap : (config) => config; module.exports = wrapConfig({ target: 'web', mode: isDev ? 'development' : 'production', entry: { [packageJson?.name]: path.resolve(__dirname, './src/app.tsx'), }, output: { filename: isDev ? '[name].js' : '[name].[hash].js', path: path.resolve(__dirname, './dist'), publicPath: '/', clean: true, }, // infrastructureLogging: { // level: 'error' // }, stats: { all: false, assets: true, errors: true, assetsSort: '!size', entrypoints: true, modules: false, assetsSpace: 1000, preset: 'minimal', }, devServer: { ...config.dev, historyApiFallback: true, // static: { // directory: path.join(__dirname, './public'), // }, watchFiles: './src/**/*', }, devtool: isDev ? 'inline-source-map' : 'source-map', resolve: { alias: { '@src': path.resolve(__dirname, './src'), '@tea/app': path.resolve(__dirname, './app'), }, extensions: ['.ts', '.tsx', '.js', 'less'], }, module: { rules: [ { test: /\.(jsx|tsx|js|ts)$/, loader: 'ts-loader', options: { transpileOnly: true, getCustomTransformers: () => ({ before: [ tsImportPluginFactory([ { style: false, libraryName: 'lodash', libraryDirectory: null, camel2DashComponentName: false, }, { style: true }, ]), ], }), compilerOptions: { module: 'esnext', }, }, exclude: /node_modules/, }, { test: /\.(le|c)ss$/, use: [ isDev ? 'style-loader' : MiniCssExtractPlugin.loader, // 现网环境才提取css到一个文件中 { loader: 'css-loader', // 使用import语句导入样式 }, { loader: "postcss-loader", options: { postcssOptions: { config: './postcss.config.js', }, sourceMap: true, } }, { loader: 'less-loader', // 转less为css options: { lessOptions: { modifyVars: { '@body-background': '#f5f5f5', }, javascriptEnabled: true, }, }, }, // { // loader: 'style-resources-loader', // options: { // patterns: path.resolve(__dirname, './src/styles/common.less'), // 全局引入公共的scss 文件 // }, // }, ], }, { test: /\.(png|jp(e)?g|gif|woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/, use: [ { loader: 'url-loader', // 处理图片和字体等资源,小于limit则编码,大于则处理路径,包含了 file-loader options: { limit: 8192, }, }, ], }, ], }, watchOptions: { // 设置不监听的⽂件或⽂件夹,默认为空 ignored: /node_modules/, // ⽂件改变不会⽴即执⾏,⽽是会等待300ms之后再去执⾏ aggregateTimeout: 300, // 原理是轮询系统⽂件有⽆变化再去更新的,默认1秒钟轮询1000次 poll: 1000, }, plugins, optimization: !isDev ? optimization : {}, }); 在根目录下的wenpack-configs 目录中的下面三个拆出来的jswebpack 插件配置 plugins.jsconst path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const WebpackBar = require('webpackbar'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const chalk = require('chalk'); const webpack = require('webpack'); const isDev = process.env.NODE_ENV === 'development'; const config = require('./config'); module.exports = [ new CopyWebpackPlugin({ patterns: [ { from: path.resolve(__dirname, '../public/px2rem-hike.js') } ], }), new CleanWebpackPlugin({ dry: false, // 是否打印删除的内容 }), // 热更新替换 new webpack.HotModuleReplacementPlugin(), // @ts-ignore new WebpackBar({ name: '能碳工场移动端h5', color: '#0049b0', // 默认green,进度条颜色支持HEX basic: true, // 默认true,启用一个简单的日志报告器 reporter: { change() { console.log(chalk.blue.bold('文件修改,重新编译...')); }, afterAllDone(context) { console.log(chalk.bgBlue.white(' 能碳工场移动端 ') + chalk.green(' 编译完成')); isDev && console.log(chalk.bgBlue.white(' 能碳工场移动端 ') + chalk.green(' 开发预览地址:http://127.0.0.1:' + config.dev.port)) }, }, }), new HtmlWebpackPlugin({ minify: false, chunks: 'all', template: path.resolve(__dirname, '../public/index.html'), filename: 'index.html' }), new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn|ja|ko/), ].concat(isDev ? [] : [new MiniCssExtractPlugin({ filename: '[name].[hash].css', })])webpack优化配置 optimization.jsconst CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); module.exports = { minimize: true, minimizer: [ new CssMinimizerPlugin(), '...' // 压缩css 和 js ], splitChunks: { chunks: 'async', cacheGroups: { defaultVendors: { test: /[\\/]node_modules[\\/]/, priority: -10, reuseExistingChunk: true, }, default: { minChunks: 2, priority: -20, reuseExistingChunk: true, }, }, }, }; 其他常用需要修改配置 config.jsmodule.exports = { dev: { host: '0.0.0.0', port: 10010, hot: true, open: false, client: { overlay: { errors: true, warnings: false, }, }, proxy: { '/api': { // logLevel: 'debug', changeOrigin: true, pathRewrite: { '^/api': '' }, target: 'http://30.168.123.79', }, }, } };
2022年11月23日
364 阅读
0 评论
1 点赞
2022-06-29
vscode配置备份
{ "editor.fontFamily": "'Courier New', Menlo, Monaco, monospace", "editor.tabSize": 2, "editor.fontSize": 14, "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.validate": ["javascript", "javascriptreact", "html", "vue", "typescript", "typescriptreact"], "explorer.compactFolders": false, "workbench.tree.indent": 12, "workbench.editor.enablePreview": false, "sync.gist": "ac382393a32ea171d130f70b8ed60f4b", "typescript.updateImportsOnFileMove.enabled": "always", "javascript.updateImportsOnFileMove.enabled": "always", "prettier.eslintIntegration": true, "window.zoomLevel": 1, "workbench.iconTheme": "material-icon-theme" }
2022年06月29日
396 阅读
0 评论
0 点赞
2022-03-31
使用docker搭建一个简单的nginx服务
操作步骤1、在任意目录位置创建Dockerfile 文件,输入如下内容FROM ubuntu/nginx COPY ./index.html /var/www/html/index.html CMD ["nginx", "-g", "deamon off;"]2、 在当前目录新建一个html文件作为静态页面3、 在当前目录执行 docker build -t test:v0.1 . 等待构建完成4、 执行docker images 查看镜像是否构建成功5、 执行docker run -d -p 8082:80 test:v0.16、 在浏览器访问 127.0.0.1:8082 验证是否能访问到上面新建的那个html内容涉及到的内容解释1、 Dockerfile 文件中a、 FROM 指定构建的基础镜像 b、 COPY 将当前空间(Dockerfile所在目录)的文件拷贝到镜像内容中,此处拷贝的是nginx的默认的静态页面地址 c、 CMD 指定执行docker run 指令时默认执行的命令,这里启动nginx2、 Docker 命令a、 docker build -t 指定镜像的tag信息,后续使用镜像的时候讲作为name使用 b、 docker run -d 表示在后台运行docker c、 docker run -p 指定端口映射,这里表示外部端口 8082 映射到当前启动后的容器(container)的80 端口(也就是上面启动的nginx)
2022年03月31日
362 阅读
0 评论
0 点赞
2022-03-19
js复制和粘贴内容
复制-将指定内容添加到粘贴板/** * copyToClip * @param content * @param callback */ export const copyToClip = (content: string, callback?: () => void) => { var aux = document?.createElement?.('input'); aux?.setAttribute?.('value', content); document?.body?.appendChild?.(aux); aux?.select(); document?.execCommand('copy'); document?.body?.removeChild?.(aux); return callback?.(); };粘贴 js不能直接读取粘贴板内容,下面的代码在多数环境下不生效const text = await navigator?.clipboard?.readText?.();我们采取变通的方案来处理。1、在页面中添加一个input输入框,将其绝对定位到页面中不可见的位置<input type='text' id='text-all' key='text-all' onPaste={(e) => handlePaste(e)} style={{ position: 'absolute', top: -10000, zIndex: 10000 }} />监听到ctrl-v事件时,先让上面的input获得焦点,再手动触发他的paste事件,这时input会填充粘贴板中的内容const hideInput: HTMLInputElement = document.getElementById('text-all') as any; hideInput?.focus(); hideInput?.dispatchEvent(new Event('paste', { bubbles: true }));给这个input添加onPaste事件,在事件处理函数中获取input的内容,或者获取粘贴板的内容const clipboardData = e?.clipboardData || e.originalEvent?.clipboardData;
2022年03月19日
428 阅读
0 评论
0 点赞
2021-08-11
Nginx限制IP访问频率
最近网站经常出现假死的状态,重启nginx可恢复,但是短时间后又出现,经过排查日志发现,有一个 IP 存在过度频繁请求的情况,十分钟左右的时间请求了12000次左右,导致了服务器资源无法释放,所以产生了假死现象。应急处理:在服务器安全组策略里禁止这个 ip 地址入站一开始想通过程序控制访问频率,但是发现不能从根本解决问题,因为程序还是得要响应用户请求,所以想到了通过nginx来控制,于是在网上找到了如下解决方案。主要用到了nginx的ngx_http_limit_conn_module和ngx_http_limit_req_module两个配置:ngx_http_limit_conn_module:限制并发连接数;ngx_http_limit_req_module:限制一段时间内同一IP的访问频率;首先,我们为了防止别人来攻击,或者访问量异常过高导致服务器崩掉,就需限制访问量,如果是一瞬间的并发访问,那么我们就需要限制一秒之内的并发连接数,此时就需要用到第一个配置http { limit_conn_zone $binary_remote_addr zone=addr:10m; #定义一个名为addr的limit_req_zone用来存储session,大小是10M内存, #以$binary_remote_addr 为key #nginx 1.18以后用limit_conn_zone替换了limit_conn, #且只能放在http{}代码段. ... server { ... location / { limit_conn addr 10; #连接数限制 #设置给定键值的共享内存区域和允许的最大连接数。超出此限制时,服务器将返回503(服务临时不可用)错误. #如果区域存储空间不足,服务器将返回503(服务临时不可用)错误 } } }上面的配置能达到的效果就是,一瞬间访问的时候,只会有10个IP能得到响应,后面的IP直接就返回503状态。其次,如果一个IP能访问到服务器,那么它如果疯狂的调用接口,如:页面上写个for循环一直刷请求,且不说数据会错乱,最后可能导致将服务器的带宽耗尽,从而导致服务器假死崩溃,此时就需要用到第二个配置http{ # ...其他配置 #定义一个名为allips的limit_req_zone用来存储session,大小是10M内存, #以$binary_remote_addr 为key,限制平均每秒的请求为20个, #1M能存储16000个状态,rete的值必须为整数, #如果限制两秒钟一个请求,可以设置成30r/m limit_req_zone $binary_remote_addr zone=allips:10m rate=20r/s; ... server{ ... location / { ... #限制每ip每秒不超过20个请求,漏桶数burst为5 #brust的意思就是,如果第1秒、2,3,4秒请求为19个, #第5秒的请求为25个是被允许的。 #但是如果你第1秒就25个请求,第2秒超过20的请求返回503错误。 #nodelay,如果不设置该选项,严格使用平均速率限制请求数, #第1秒25个请求时,5个请求放到第2秒执行, #设置nodelay,25个请求将在第1秒执行。 limit_req zone=allips burst=5 nodelay; ... } ... } ... }此时能达到的效果,同一个ip在一秒钟只能获得20个访问,超过20个请求,后面的也是直接返回503。上面的两个配置加在一起就可以做到:一秒只有10个连接,每个连接只能发送20个请求。注意:对request的访问限制,大家一定要注意数量的配置,否则一不小心就会 503(ERR_ABORTED 503 (Service Temporarily Unavailable))
2021年08月11日
497 阅读
0 评论
0 点赞
2021-08-11
Nginx 配置按日期单独生成日志文件
1、http 配置增加下面代码定义当前日期的变量# ... http { # ... map $time_iso8601 $logdate { '~^(?<ymd>\d{4}-\d{2}-\d{2})' $ymd; default 'date-not-found'; } }2、对应站点的server里增加日志文件位置配置server { # ... location / { proxy_pass http://127.0.0.1:3000; limit_req zone=allips burst=20 nodelay; #limit_conn one 40; #连接数限制 #带宽限制,对单个连接限数,如果一个ip两个连接,就是500x2k limit_rate 500k; } access_log /usr/lcoal/nginx/logs/xxx.com/access-$logdate.log; error_log /usr/lcoal/nginx/logs/xxx.com/error.log; }注:日志文件目录一定要有读写权限
2021年08月11日
401 阅读
0 评论
0 点赞
2021-08-02
使用ES6模板字符串时怎么不带换行符换行代码避免eslint报max-len错误
在现代前端开发中,es6的模板字符串可以说是除了let const之外我们使用得最多的es6新特性了。然而,我们经常会遇到一个问题就是代码换行问题,以前写字符串换行时,我们都是通过 + 拼接字符串的,这样最后的拼接结果也是正常的字符串,例如var str = 'hello' + ' world' consle.log(str); // 结果为 hello world当我们使用模板字符串时,如果我们这样写const str = `hello world`; consle.log(str);那上面的打印结果会是helloworld这显然不是我们希望的结果。解决方案如下const str = `hello \ world`; consle.log(str);官方文档说明 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Template_literals这也是unix shell脚本的历史性解决方案)是使用转义字符 \ 来转义回车
2021年08月02日
358 阅读
0 评论
0 点赞
2021-07-11
fastmock 新增功能-从我的其他项目导入接口
很多用户反馈,有时候新建的项目,很多接口和之前的项目的接口是重复的或者url是相同的,希望支持从现有项目导入接口的功能,现在,这个功能已经开发好并上线从其他项目导入接口 1、在项目接口管理页面点击”从其他项目导入“ 2、在弹出层中切换到有接口的项目然后选择要导入到当前项目的接口 3、点击右下角的”确认导入“按钮即可完成导入注意只能从自己创建或者已经加入的项目导入选择的接口url和method在当前项目已经存在,则不会导入这个接口导入的接口是独立存在的,修改和删除都不影响原接口
2021年07月11日
532 阅读
1 评论
0 点赞
1
2
3
...
6