前端前行者-CSDN博客

原创 JS中的冒泡排序

JS中的冒泡排序冒泡排序是一种简单的排序算法。它重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。算法：示例代码：<script> // 冒泡排序 var arr = [4, 1, 3, 5, 2]; for (var i = 0; i <= arr.length - 1; i++) { // 外层循

2021-09-08 09:36:06 2659 1

原创 JS 数组去重（删除指定数组元素）

JS 数组去重（删除指定数组元素）将数组[2, 0, 6, 1, 77, 0, 52, 0, 25, 7]中的 0 去掉后，形成一个不包含 0 的新数组。 1、需要一个新数组用于存放筛选之后的数据。 2、遍历原来的数组，把不是 0 的数据添加到新数组里面(此时要注意采用数组名 + 索引的格式接收数据)。 3、新数组里面的个数，用 length 不断累加。

2021-09-08 09:02:37 3741

原创 JS筛选数组

JS 筛选数组将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组。 1、声明一个新的数组用于存放新数据newArr。 2、遍历原来的旧数组，找出大于等于 10 的元素。 3、依次追加给新数组 newArr。方法一：<script> var arr = [2, 0, 6, 1

2021-09-08 08:56:49 5670

原创 JS将数组转换为分隔字符串

JS将数组转换为分隔字符串将数组 [‘red’, ‘green’, ‘blue’, ‘pink’] 转换为字符串，并且用 | 或其他符号分割1.需要一个新变量用于存放转换完的字符串 str。2.遍历原来的数组，分别把里面数据取出来，加到字符串里面。代码示例：<script> var arr = ['red', 'green', 'blue', 'pink']; var str = ''; var sep = '|'; for (var i = 0; i < arr.l

2021-09-08 08:46:04 3539

原创 JS实现简易ATM功能

题目描述：里面现存有 100 块钱。如果存钱，就用输入钱数加上先存的钱数, 之后弹出显示余额提示框如果取钱，就减去取的钱数，之后弹出显示余额提示框如果显示余额，就输出余额如果退出，弹出退出信息提示框操作界面如下<script> var money = 0; // 初值为 0 var moneySum = 0; // 总金额为 0 var flag = true; while (flag) { var num = parseInt(prompt('请输入你要的操作

2021-09-07 21:09:05 1190 1

原创 JS求整数1～100的累加值，但要求跳过所有个位为3的数

求整数1～100的累加值，但要求跳过所有个位为3的数【用continue实现】思路：把循环得到的 i 值与 10 取余，得到个位数为3的数字 continue 跳过。<script> var sum = 0; for (var i = 1; i <= 100; i++) { if (i % 10 == 3) { continue; } sum += i; } console.log(sum);</script>...

2021-09-07 20:13:26 9372 9

原创 JS编写九九乘法表

九九乘法表九九乘法表一共有9行，但是每行的个数不一样，因此需要用到双重 for 循环外层的 for 循环控制行数 i ，循环9次，可以打印 9 行内层的 for 循环控制每行公式 j核心算法：每一行公式的个数正好和行数一致， j <= i;每行打印完毕，都需要重新换一行<script>var str = '';for (i = 1; i <= 9; i++) { for (j = 1; j <= i; j++) { str += j + 'x

2021-09-07 18:17:28 214

原创 JS中利用循环打印三角形

打印倒三角形☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆// 打印倒三角案例 j=ivar str = '';for (var i = 1; i <= 5; i++) { // 外层循环控制行数 for (var j = i; j <= 5; j++) { // 内层循环控制打印的个数不一样 j = i str += '☆'; } str += '\n';}console.log(str);打印正三角形☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆// 打印正三角 j &l

2021-09-07 18:07:09 980

原创 JS中for循环打印五角星

打印五行五列的星星var str = '';for (var i = 1; i <= 5; i++) { // 外层循环负责打印行 for (var j = 1; j <= 5; j++) { // 内层循环负责一行打印五个星星 str += '☆' } str += '\n';}console.log(str);打印n行n列星星var rows = prompt('请输入行数：');var cols = prompt('请输入列数：');var str = '';

2021-09-07 17:53:57 3535

原创 JS中利用switch语句编写成绩表判定成绩等级

题目描述：分数转换,给一个分数，判定等级。大于等于90 A，大于等于80小于90 B，大于等于70小于80 C ，大于等于60小于70 D，小于60 E <script> var score = parseInt(prompt('请输入分数：')); switch (true) { case score >= 90 && score <= 100: alert

2021-09-07 17:05:10 17043 4

原创解决级联选择超出屏幕问题

问题描述：在做Vue电商后台管理系统时，级联选择器超出屏幕，呈现如下图所示解决方法在 global.css 文件中，添加一则代码：/* 解决级联选择器超出屏幕 */.el-scrollbar__wrap { height: 200px;}欢迎补充 ~~...

2021-09-07 12:39:53 537 1

原创 JS 练习1

1 - 获取用户信息题目描述：依次询问并获取用户的姓名、年龄、性别，收集数据之后在控制台依次打印出来。代码显示：<script> var username = prompt('请输入您的姓名：'); var sex = prompt('请输入您的性别：'); var age = prompt('请输入您的年龄：'); console.log('用户的姓名：' + username); console.log('用户的性别：' + sex); console.log('用户的年

2021-09-07 09:33:53 1094

原创 babel-plugin-transform-remove-console 插件的使用

插件的作用：在项目 build 阶段把所有的 console 移除掉插件的使用：1、插件安装npm install babel-plugin-transform-remove-console --save-dev2、声明插件，打开项目中 babel.config.js 文件"plugins": [ "transform-remove-console"]3、重新运行 build...

2021-08-23 23:52:12 3245

原创 NProgress进度条

NProgress 进度条1、安装 nprogress 包npm install --save nprogress2、导入 NProgress 包对应的JS和CSSimport NProgress from 'nprogress'import 'nprogress/nprogress.css'3、在 request 和 response 拦截器中，展示进度条和隐藏进度条axios.interceptors.request.use(config => { // consol

2021-08-23 23:01:25 280

原创 Vue电商后台订单物流数据自模拟Data接口

近期写的一个Vue电商后台管理系统，在订单管理中的订单列表那块，调用物流信息接口报错，原来的那个接口使用不了Error:if(body.auto.length <= 0) return reject({ status: 501, msg: '无对应的物流公司' })TypeError: Cannot read property 'length' of undefined模拟 Data 数据：logisticsInfo: [ { "time": "2018-05-10 09:3.

2021-08-23 21:23:27 884

原创 Echarts图表报错：TypeError: Cannot read property ‘init‘ of undefined

Echarts图表报错：TypeError: Cannot read property ‘init’ of undefined解决用vue导入echarts图表报错，在这里使用两种方法解决将原来导入的import echarts from 'echarts'改为：import * as echarts from 'echarts'或者换种导入方式改为：let echarts = require('echarts')即可显示可视化图表，欢迎补充~...

2021-08-23 00:30:18 591

原创 element-ui中实现form表单内文字居中

element-ui中实现form表单内文字居中在 <el-table></el-table> 标签中添加属性:cell-style='cellStyle' :header-cell-style='rowClass'<el-table :data="userlist" border stripe :cell-style='cellStyle' :header-cell-style='rowClass'></el-table>然后在 script 标签

2021-08-18 23:10:28 3233 1

原创 git提交代码

git 代码提交到远程仓库并且把本地仓库和码云中的远程仓库同步打开终端，以我自己完成的项目登录功能 login 为例1、先查看一下当前项目中源代码的状态git statusChanges not staged for commit - 代表修改的代码Untracked files - 代表新增的代码2、把所有文件添加到暂存区git add .如果所有文件变成了绿色，代表已经被添加到暂存区3、把暂存区所有代码提交到本地仓库中git commit -m "完成了登录模块功能"4

2021-08-16 21:53:48 147

原创处理Vue CLI控制台语法警告问题

处理Vue CLI控制台语法警告问题在项目根目录下配置一个json格式的配置文件 .prettierrc{ "semi": false, // 格式化代码时不会额外加分号 "singleQuote": true // 单引号替换双引号}此外，在 .eslintrc.js 文件中，添加一段代码rules: { 'space-before-function-paren': 0 // 允许方法名与括号之间没有空格},...

2021-08-16 20:13:18 417

原创 express deprecated res.send(status): Use res.sendStatus(status) in app.js

node + express 在设置跨域时，报错：express deprecated res.send(status): Use res.sendStatus(status) in app.js解决办法：在这里修改为：// 设置跨域和相应数据格式app.all('/api/*', function(req, res, next) { res.header('Access-Control-Allow-Origin', '*') res.header('Access-Control-Allow-

2021-08-16 16:49:48 3653 2

原创 vue降低cli版本报错: ERROR ~/.vuerc may be outdated. Please delete it and re-run vue-cli in manual mode

vue降低@vue/cli版本启动 vue ui 报错: ERROR ~/.vuerc may be outdated. Please delete it and re-run vue-cli in manual mode~/.vuerc当项目创建时，被保存的preset会存在用户目录下名为 .vuerc 的文件中解决办法：所以只需要删除此文件即可，然后重新运行 vue ui...

2021-08-13 16:07:50 639

原创 git创建仓库执行git push -u origin master报错：fatal: Authentication failed for ‘xxxx‘

git简单的命令行入门教程：Git 全局设置:git config --global user.name "xxx"git config --global user.email "xxxx@xxx.com"创建 git 仓库:mkdir vue_shopcd vue_shopgit inittouch README.mdgit add README.mdgit commit -m "first commit"git remote add origin https://gitee.co

2021-08-13 00:43:06 635

原创 webpack中使用url-loader配置图片时出现问题：background:url([object Module])

webpack中使用url-loader配置图片时出现问题：background:url([object Module])解决：在配置文件 webpack.config.js 中，修改配置为：{ test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: [{ loader: 'url-loader', options: { limit: 16940, esModule: false } }]}重新运行 npm

2021-08-11 16:16:27 560

原创解决node-sass@4.11.0 postinstall:`node scripts/build.js`错误

这个bug真的是搞了很久才弄出来，一直以为是和webpack版本不匹配，原来和node版本也有关系首先贴上报错信息：webpack 打包处理 scss文件，需要npm下载安装 sass-loader 和 node-sass 。为了解决和webpack版本相匹配，选择安装 node-sass@4.11.0 时下载安装不了报错。查询很多资料，最终发现，也需要与 node 版本相匹配，这时我们需要查看一下自己node的版本号了：node -vhttps://www.npmjs.com/pack.

2021-08-09 22:21:43 25535 11

原创 HtmlWebpackPlugin打包报错：TypeError: Cannot read property ‘tap‘ of undefined

原因：html-webpack-plugin与webpack版本不匹配导致**解决办法：**下载安装指定版本的 html-webpack-plugin，使之两者版本相匹配npm i html-webpack-plugin@4.5.0 -D

2021-08-09 15:14:08 1020

原创 Error: Cannot find module ‘webpack-cli/bin/config-yargs‘

配置 webpack-dev-server 运行项目时报错：Error: Cannot find module ‘webpack-cli/bin/config-yargs’查了很多资料，都是说 webpack 和 webpack-dev-server 版本不兼容问题。然后重新下载安装webpack webpack-cli webpack-dev-server指定版本。npm i webpack@4.29.0 -Dnpm i webpack-cli@3.2.1 -Dnpm i webpac.

2021-08-09 13:50:26 114

原创 Error: Cannot find module ‘webpack-cli/package.json’

webpack自动打包报错Error: Cannot find module 'webpack-cli/package.json'Require stack:- C:\Users\ASUS\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js at Function.Module._resolveFilename (internal/modules/cjs/loader.js:885:15) at Function.resolv

2021-08-09 11:30:34 1322

原创 ‘webpack‘ 不是内部或外部命令，也不是可运行的程序或批处理文件。

问题描述：webpack打包项目运行时，报错'webpack' 不是内部或外部命令，也不是可运行的程序或批处理文件。个人解决方案：在终端重现安装一遍webpacknpm install webpack webpack-cli -D运行 npm run dev然后重新运行index.html文件。...

2021-08-08 21:03:30 854

原创 fetch和axios跨域报错问题

项目场景：在使用fetch或者axios时跨域报错问题描述：Access to XMLHttpRequest at 'http://localhost:3000/axios' from origin 'null' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response. axios.js:

2021-08-06 10:19:50 3274

hzw的博客