- 博客(44)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 前端通过js下载文件方式
1、纯前端操作，通过js操作a链接进行下载这种方式不需要后端协助，具体代码如下：// fileUrl为空不写时默认url就是前端目前打开页面的url// fileUrl 写了东西默认也是拼接在起服务的url后面，例如本地起的前端页面，fileUrl会自动填充http://localhost:8080/ + fileUrl// 要想fileUrl完全自己控制，就需要填写完整url，从http开始，例如：http://123.32.21.12:4688/ + 文件路径let fileUrl = ''
2021-12-01 16:58:15
2281
原创 vue中使用ts配置步骤
通过前端各个框架的发展，例如vue3.0，react和angular等框架的源码都是用ts（TypeScripe）进行编写的，因此我感觉未来的中大型项目的发展趋势也离不开ts。因此我根据一些入门教程利用vue结合ts编写了文档，适合入门。1、vue老项目引入TypeScripenpm install vue-class-component vue-property-decorator --savenpm install ts-loader typescript tslint tslint-loader
2021-11-27 10:53:57
6856
原创 npm安装时-D和-S的区别
例如npm i element-ui -S， i是install的缩写，安装插件时后缀有的是-D, 有的是-S，具体意思如下-S即 --save （保存）添加这个后缀安装的包名会被注册在package.json的dependencies中，在生产环境下这个包的依赖依然存在，如vue，react，element等-D即 --dev（生产）包名会被注册在package.json的devDependencies里面，仅在开发环境下存在的包用-D，如babel，sass-loader这些解析器-g
2021-11-26 15:30:31
1645
原创 谷歌浏览器打开页面访问接口跨域解决办法
以往做开发的时候本地进行联调总会遇到跨域问题，会导致页面无法访问，这是由于浏览器的安全机制，通过查找资料只要进行以下操作关闭浏览器的安全机制即可，仅支持高版本谷歌浏览器这样修改。个人观点，仅供参考，如有错误，欢迎指出。**1、**找到谷歌浏览器属性设置，一般情况下我都是在谷歌浏览器快捷方式右键进入属性的2、 在输入框后面加上--disable-web-security --user-data-dir=D:\chromeUserData，--user-data-dir后面跟的是创建一个空文件夹的路径，我
2021-10-26 10:43:14
3164
原创 vue-cli4最新版启动项目后自动打开浏览器配置
此配置可以有两种方法，具体如下：1.在package.json中添加–open2.在vue.config.js中添加open:truemodule.exports = { publicPath: './', // 设置打包后运行路径 devServer: { host: "localhost", // 设置启动项目网址 port: 8000, // 设置启动项目端口号 https: false, // 是否使用https协议
2020-09-12 13:34:00
2109
3
原创 mongodb和mysql的数据库查询语句对比
mongodb和mysql的数据库查询语句左边是mongodb的数据库查询语句，右边是mysql的数据库查询语句，用到的时候随时查看，很方便db是数据库名，一般小写，users是自己的字段名，find是mongodb的自带方法，有需要可以参考mongodb的模块中使用的方法db.users.find() select * from usersdb.users.findOne() select * from users where 条件 limit (1); # 只查询一个db.users.f
2020-07-10 20:46:09
743
原创 nodejs中利用axios爬取gbk网页乱码的解决办法
爬取gbk编码的网页数据解决中文乱码需要以下3步: 1.安装模块 2.封装代码 3.引用代码编写爬取数据的代码1.安装模块# i是install的缩写npm i axios # 用来发送请求 # cheerio是jquery核心功能的一个快速灵活而又简洁的实现,主要是为了用在服务器端需要对DOM进行操作的地方npm i cheerio # 当使用node获取GBK编码的数据时,nodejs只支持utf-8,node没有提供转换编码的原生支持.# 因此我们要利用这个模块i
2020-06-30 10:06:52
1748
2
原创 基于nodejs的express常用模块介绍及使用
常用模块安装基于express项目中需要另外引入的模块，其他的在我们创建项目时自动添加的我这里就没介绍# i是install的缩写，删除时可以使用un代替i，un既是uninstall的缩写npm i -g nodemon # 这个安装为全局，用来解决实时刷新页面，实现node服务器与数据库服务器的重启npm i multer # 安装编写上传文件接口需要的模块npm i bcryptjs # 安装密码加密需要的
2020-06-21 15:16:33
1139
原创 nodejs中利用cors解决跨域方法
在进行编程获取别的网站数据或者在同一局域网下向其他IP地址提交和获取数据时，都会发生跨域错误，在进行express框架进行服务器端编程，我常用以下方法解决跨域问题：首先下载模块# Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。使用 Express 可以快速地搭建一个完整功能的网站npm i express 或者 npm install express # 首先安装服务器模块 npm i cors
2020-06-18 19:26:52
7147
原创 413 (Payload Too Large)express框架上传文件大小受限的解决方法
在用nodejs中的express框架写后台时，可能经常遇到上传文件大小受限制，比较大的图片前端提交时，后台服务器就会返回大小受限的错误，拒绝接收，以下就是我的解决办法：首先安装第三方模块body-parserbody-parser是一个HTTP请求体解析的中间件，使用这个模块可以解析JSON、Raw、文本、URL-encoded格式的请求体,用这个模块可以改变express框架默认的上传文件大小1Mbnpm i body-parser 或者 npm install body-parser # 首先
2020-06-18 11:10:41
3288
2
原创 vue-cli4最新版中怎么引入jQuery
我们要在vue-cli4最新版中引入jquery主要有以下三个步骤 1.安装jquery 2. 添加vue.config.js文件 3. 引入jquery首先第一步先安装jQuerynpm install jquery --save 或者 npm i jquery --save第二步添加vue.config.js文件因为最新版的vue-cli脚手架创建的项目文件夹中没有build文件夹，同时也没有webpack.base.config.js配置文件，但是我们可以在项目根文件目录下创建一个v
2020-06-12 16:14:17
5549
7
原创 vue-cli4脚手架的简单小案例
小案例的效果如图：本案例是基于vue框架中的vue-cli脚手架建立项目文件夹，里面主要就是vue文件和一些配置文件，关键的就是路由的跳转。在这里我使用了本地存储存放注册的数据，登录时通过查询本地存储中账号密码是否对应，对应就登录成功，设置cookie，通过检测cookie是否存在，存在购物车页面和个人中心页面的内容才能被看到。首先就是通过npm install -g @vue-cli安装脚手架，然后通过vue create appname 创建项目文件夹，最后通过npm run serve运行文件
2020-06-06 17:59:20
669
原创 node.js中gulp简介与使用
1,node.js简介 本质是一种运行执行js程序代码的方式方法/环境 之前,我们只能在浏览器环境中运行js程序 现在我们可以在node环境汇总,运行js程序 node.js环境 是 基于 Chrome V8 引擎的环境,也就是以谷歌浏览器内核为环境,来运行js程序 引擎对js程序的作用就像汽油对汽车的作用，就是给动力，在这里指通过引擎运行js程序 js程序,在不同的环境下,有不同的功能 在浏览器环境下,受到浏览器的限制
2020-05-13 20:41:00
1074
原创 Git和Github的简介与使用
什么是git git 是一款 本地项目管理工具 作用:可以管理本地的项目代码 更重要的是,合作开发项目时,通过git来管理整个项目进度(项目经理的工作) git 在使用时必须严格遵守项目git规范和守则 否则会影响这个项目的进度和文件的整理保存 官网 https://git-scm.com/什么是github gitHub 是一款 类似于 百度云盘的软件 用来远程存储 git 管理项目生成的文件
2020-05-13 19:38:41
229
原创 jQuery的分页显示
今天分享下前两天写的小项目中的一部分效果，就是分页显示效果，这种对于获取后端数据进行分页显示的效果很常见，代码实现也不难，如何实现请听我慢慢道来。效果图如下开始之前我们要安装下jQuery封装的分页插件pagination.js文件，另外我们需要在html文件中引入两个文件,如下图：第一个是引入jQuery，第二个是引入jQuery的分页插件，之后就是js代码和后端php代码了。<...
2020-05-04 20:58:44
1313
原创 jQuery封装Ajax
今天五一，哈哈，正好分享点有质量的东西，欢迎有需要的朋友参看指导什么是jQuery jQuery是 一个前端的方法库 就是别人将JavaScript程序,定义成了各种函数方法,我们直接写直接用,就可以实现各种功能 学习中遇到不懂的可以参考的jQuery的网站 官网 : https://jquery.com/ 中文网站 : http://jquery.cu...
2020-05-01 16:36:19
1989
原创 Ajax代理服务器实现瀑布流
今天分享一下利用代理服务器实现跨域访问的案例。在这个案例中通过代理服务器我们动态获取到别的网络的响应体内容，从而实现自身页面的瀑布流效果所谓瀑布流效果就是懒加载，随着页面的滚动新的内容就加载出来了。效果图如下：此页面用到的图片文字内容都是从别的网址拿到的响应体内容，这样很方便，我们不用写那么多标签了，动态生成内容，也不用保存那么多图片进行添加，这些都可以通过代理服务器请求获得别的网址的响应体...
2020-04-25 17:00:14
260
原创 Ajax交互小案例
今天写的是登录注册到数据库的小案例，利用ajax技术实现分为几个文件，具体如下：首页内容页面(包括登录)此页面实现了登录一次就不能再点击登录，只有退出登录判断cookie不存在时才可以再次点击登录按钮同样登录成功才会设置cookie，并且只有存在cookie时才能跳转其他页面<!DOCTYPE html><html lang="en"><head&...
2020-04-23 21:15:45
584
原创 js面向对象之烟花效果
效果图如下:html代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti...
2020-04-14 20:55:51
216
原创 js面向对象之放大镜效果
效果图如下:html文件如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t...
2020-04-14 20:47:03
174
原创 js正则查找替换案例
效果图如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do...
2020-04-09 11:27:28
387
3
原创 js实现多功能轮播图
自动轮播的效果图如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&...
2020-04-04 12:53:42
423
原创 js实现旋转木马相册
鼠标拖拽效果图如下：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta ...
2020-04-02 09:08:33
515
2
原创 js表单事件及验证码案例
效果图如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do...
2020-03-31 18:23:35
252
原创 js实现表格数据的增删
效果图如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc...
2020-03-29 15:41:18
399
原创 js秒表制作
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...
2020-03-29 15:09:30
310
原创 js实现扫雷游戏
扫雷游戏实现过后的效果图如下：代码讲解如下：给出了具体思路，是我自己总结的，可能有人的看不懂，可以评论问我。因为代码太多，不太可能一一讲解，希望体谅。HTML和CSS代码如下：html比较简单就是照着样式写好布局，css样式比较多贴代码不显示，我就直接在最后上传了，有需要的可以下载。j基础的s代码如下这是我自己总结的具体js代码思路，可能不太准确，不懂尽管评论，我都会回答的。...
2020-03-22 10:52:24
286
原创 js数组去重
第一种去重方法，利用for循环嵌套，代码如下：此种去重方法自认为最常用，可以去掉{}第二种去重方法，利用方法indexOf()，代码如下：首先先进行容错判断输入的参数是不是数组，不是就返回。对于数组常用的遍历方法就是forEach(),因为它有三个参数，1是数组里的数据，2是数组的索引，3是数组。因为同时能够获取数组的索引和数据，所以最常用。然后就是遍历数组，判断新数组里的数据存在...
2020-03-21 10:50:08
328
原创 js数组常用方法和排序算法
数组调用方法数组中的索引有很多作用，下面是四种作用：1,通过索引下标,调用数组中,指定单元的数据 var arr = ['北京','上海','广州','重庆','天津']; arr[0] ---> 调用索引下标是 0 ,实际是第一个单元的数据 北京2,通过索引下标,来修改数组中,存储的单元的数据 对已存在的索引下标,进行赋值,进行的是重复赋值,会覆盖之前存储的...
2020-03-19 20:51:33
332
原创 js数组
数组概念 所谓的数组,就是数据的集合 基本数据类型 : 在变量中只能存储一个单元的数据; 数组,是数据的集合,可以存储多个单元的数据，所以它也属于复杂数据类型数组的创建方式数组的创建方法有两种： 1.字面量方式 var 变量 = [ 数据1 , 数据2 , 数据3 , ..... ]; 在 [] 中,定义多个数据单元,中间使用逗号间隔 数...
2020-03-18 20:24:40
210
原创 js变量作用域
变量的作用域什么叫变量的作用域? 所谓的变量的作用域,就是变量的使用范围 每一个变量都有自己的使用范围变量的作用域分为两种1,定义在函数之内的变量包括函数的参数,定义在函数内部的变量,都称为局部作用域变量 / 局部变量只能在函数内容部使用,如果外部想要直接调用,是不行的此时函数中定义的变量,参数a和变量b,都是局部作用域变量，只能在函数内部被调用使用；函数外部不能直接使用调用...
2020-03-17 19:49:23
110
原创 js函数
函数介绍1. 什么是函数:实现固定功能的代码块函数是工具,是实现功能的工具函数是通过其中的代码,来实现所谓的功能2. 函数的特点:封装: 将需要的代码,写入到函数中重复: 一个函数可以反复调用调用: 可以在任意需要位置上调用执行代码3.函数定义封装所谓的封装,就是将程序,放在 函数的 { } 中,就是函数程序的封装 function 函数名称(函数的参数){ ...
2020-03-16 21:22:30
111
原创 Js的NaN解说
NaN是什么？NaN （Not a Number）属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。 可以把 Number 对象设置为该值，来指示其不是数字值。NaN也是属于数值类型的。例如：一般情况下只要有非数值转换为数值，结果都会为NaN。把一个不是数值的字符串强转为数值时，就会出现如图第一行代码。由于自动转换，在进行运算时都会先转换为数值进行运算，不能转换为数值的计算...
2020-03-15 09:08:36
753
原创 js简单实现大风车
今天分享下大风车的制作，效果图如下，其实看着挺好看的，哈哈…HTML和CSS上述代码主要就是搭建一个风车的形状和按钮的初始状态。先给个容器包括四个扇叶，设置形状背景和相对定位，因为四个扇叶要定位到上面。风车四个边，固定宽高，加上绝对定位，改变左上的形状，使其变成尖角。同时改变旋转基点，其他三个扇叶依次旋转90度倍数就可以了。改变按钮的位置，加上背景。value是按钮上要显示的初始值，...
2020-03-08 12:32:03
1101
原创 js实现点击轮播图
效果图今天讲下如何利用js做个点击操作的轮播图，效果图如下，因为无法传视频，只能截图了，代码在下面讲解，需要可以自己打出来运行。HTML和CSS首先第一步先写好HTML和需要的CSS样式，html和css相对比较简单，上述代码就是先给个容器，用来做定位，在给图片一个容器用来存放图片，同时加个列表做点击的小圆点。然后给外围容器加一张图片的宽高，再加上相对定位 ，至于margin的设置只...
2020-03-07 11:25:29
2649
原创 cavans五子棋游戏
第一步写样式：利用cavans画布写游戏，首先要在html写上如下：这几行代码就是先给画布标签属性设置宽高，然后转成块，，让画布距离浏览器边缘一段距离，添加个背景颜色，否则下棋时白棋看不到。第二步写JavaScript(js):写之前我们应该先考虑好写游戏需要的过程，这样我们就可以根据过程一步一步实现。我的具体想法如下：1.绘制棋盘 1.1 绘制表格的操作2.绘制棋子 ...
2020-03-05 13:38:27
3206
原创 前端3D详解
transition 过渡transition-property : 规定设置过渡效果的CSS属性的名称。transition-duration : 规定完成过渡效果需要多少秒或毫秒。transition-delay : 定义过渡效果何时开始。 ( 延迟(数值为正数)，也可以提前(数值为负数) )transition-timing-function : linear|eas...
2020-03-05 10:16:20
2548
原创 H5新增知识点
HTML5新语义化标签 ( 很重要的 )新旧对比： width height background -> css2.1 transform border-radius -> css3 div span h1 img -> html4.01 header footer main -> html5注：很多新的HTML5语义化标签，跟div类似。1.新...
2020-03-03 20:40:39
496
原创 移动端rem布局
rem布局（等比缩放布局）rem布局好处： 不同设备下看起来比较协调。 坏处： 显示的内容并不会在大屏幕展示的内容多。 em : 是一个相对单位，1em等于当前元素或父元素的font-size值。 1em == 1个font-size的大小 rem : 是一个相对单位，1rem等于根元素的font-size值。 1rem =...
2020-02-29 10:49:24
321
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人