qianlingvip-CSDN博客

原创 node学习-5 跨域解决

十七、跨域原理跨域原因就是由于ajax同源策略，协议，主机（ip,域名），端口号三者保持一致。十八、解决跨域问题解决跨域就要保证协议，主机，端口号一致。因此，使用静态资源目录去访问别的东西就不存在跨域问题。解决跨域常用的方法：1、cors（前后端配合）在node服务中express提供了一个中间件，cors插件安装之后使用app.use(cors()),就完成了后端跨域的配置...

2020-04-27 11:29:06 299

原创 node学习系列-4

十三、api文档的生成生成api文档可以使用apidoc插件来完成npm install apidoc -g使用官方文档给的例子，使用官方示例的注释来完成。apidoc官方文档/** * @api {get} /user/:id Request User information * @apiName GetUser * @apiGroup User * * @apiP...

2020-04-27 11:27:16 133

原创 node学习系列-3

十一、promise异步对于node大部分都是异步函数，在处理异步函数的时候，为了顺序执行，需要在回调里嵌套回调，就会导致回调地狱，为了解决这个问题，可以使用promise来处理，async/await处理。删除文件使用promise简单实现：function delLink(){ const fs=require('fs'); return new Promise((res, ...

2020-04-27 11:25:48 147

原创解决IOS单选框点击一次无效的问题，配置FastClick也不行

遇到这样的问题，解决方法很简单，就是配置FastClick不正确导致的，解决方法就是按照如下方法进行配置即可：try { let versionNumber = navigator.userAgent.toLowerCase().match(/cpu iphone os (.*?) like mac os/)[1].replace(/_/g, '.') if (!(/iphone|i...

2020-04-16 17:01:19 672 2

原创 node学习系列--二（爬虫，express，中间件）

上边我们学习了node一些基础知识，相信对node有了一定的认知。下面继续学习node知识九、使用nodejs做一个简易的爬虫思路：1、获取目标网站 2、分析网站内容 3、获取有效信息，下载，存储操作1、使用http模块获取网站信息，由于内存空间有限，因此数据的存储通过分批次的从内容中存入硬盘，所以有了数据流的概念。let http=require('http');l...

2020-04-09 15:00:31 286

原创 vue使用bus兄弟组件之间传递参数，第一次获取不到值

$bus作为兄弟元素之间传参的工具，用起来比较的顺手，使用方法在这里就简单的介绍一下：A组件中使用this.bus.bus.bus.emit(‘随便起个名字’, 参数)，在B页面中使用this.bus.bus.bus.on(‘名字’)；就拿到传递过来的值了。记得生命周期结束的时候使用this.bus.bus.bus.off(‘名字’)注销掉。用法上做了简单的回顾，下面进入正题，第一个进来没有...

2020-04-08 13:59:25 2750 3

原创关于table设置宽度无效的解决方法

首先要知道table-layout属性值有哪些？| 值 | 描述 ||—|---||automatic| 默认。列宽度由单元格内容设定。||fixed |列宽由表格宽度和列宽度设定。||inherit| 规定应该从父元素继承 table-layout 属性的值。|当属性值为automatic时候，宽度通过设置样式不一定起作用的，它的宽度取决于单元格内容。当属性值为fixed时候，列...

2020-03-12 18:08:30 7187

原创 nodejs学习笔记系列--模块

nodejs学习笔记一、node特点：非阻塞I/O事件驱动chrom V8引擎二、优点：由于非阻塞 I/O造就了高并发的特点，高并发特别好，适用于网络请求比较大的场合。三、前端js和服务端js区别前端jsdom操作基本语法操作bom操作ajax不能修改文件基本语法服务端js 能修改文件能操作数据库不能操作dom 基本语...

2020-03-12 14:33:33 232

原创设置VSCode编辑器，编辑react的jsx语法自动补全

相信大家都有这样一个苦恼，在使用VSCode写react代码的时候，输入标签后按住table键不好使，没有出现我们想要的补全标签的效果，今天我就帮助大家解决这个问题。首先我们需要打开VSCode代码编辑器：点击左下角设置图标，选择设置之后，点击打开设置json之后在已有的设置基础上，新增如下代码："emmet.includeLanguages"...

2020-03-10 11:38:03 1145

原创 canvas刮刮乐

1、主要使用clearRect来实现清除表层内容2、在按下事件里边嵌套移动事件，将当前鼠标距离所在盒子水平距离和垂直方向距离分别作为clearRect的第一个和第二个参数。直接上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&gt...

2019-11-28 17:22:07 705

原创 dvajs学习总结

1、dvajs是一个轻量级的应用框架。2、新建dva项目，直接dva new 项目名称3、启动npm start4、dvajs的路由跳转，方式一：通过link跳转，首先引入Link，import{Link}from'dva/router'然后，在需要调转的地方使用<Linkto='/'>首页</Link>方式二：通过点击事件，...

2019-11-27 16:33:37 3154

原创 JavaScript滑块验证

效果图：简单粗暴，直接上代码，无需解释<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"/> <title>拖动验证</title> <style> @font-face { font-family: 'icon...

2019-11-27 16:18:23 382

原创打印局部div内容，带样式方法总结

接下来我要总结的打印局部div并且带样式方法有两种，分别都是在react项目中使用：第一种就是简单粗暴的方式：1、首先在项目中引入Print.js文件：/* * @Author: 张前领 * @Date: 2019-10-14 11:04:37 */ export default function Print (dom, options) { if (!(thi...

2019-10-14 14:24:09 1267

原创 js实现页面的局部打印

1、其原理就是通过给打印dom设置id值，通过新建iframe，将需要打印的dom结构塞进iframe中，这样不会跳转页面，也不会刷新页面，防止本页面内容还没有处理完逻辑，而发生不必要的跳转，导致逻辑被刷新。2、这要就会造成一个问题，引入外部样式出现问题，只能插入标签样式。代码如下：function prints(){ const el = document.getElem...

2019-10-12 22:32:57 453

原创 canvas画布--动态饼形图

代码清单：1、index.js文件：var c=document.getElementById("canvas6"); var ctx=c.getContext("2d"); //获取画布中心为圆心 var x=c.width/2; var y=c.height/2; //初始速度为2° var speed=2/360*2*Math.PI; var setArr=[...

2019-09-19 16:23:36 303

原创 canvas画布--随机动感小球

这两天学习canvas，把一些东西总结一下，比起枯燥的每一条的总结，直接上代码来的更直接。index.html文件<div class="box"> <div class="text"> <h2>欢迎来到canvs动画小球世界</h2> <canvas id="canvas3" width="1500" height=...

2019-09-19 13:54:54 560

原创今天推荐一个好用的前端时间格式处理工具

今天揭开这个时间格式处理工具的神秘面纱，这个工具名字就是moment。使用步骤：1、首先在react或者vue项目中引入它，npm installmoment --save-dev2、在需要处理时间的组件中引入它：//require 方式var moment=require('moment');//import 方式import moment from 'momen...

2019-09-18 13:18:03 645

原创使用axios提交数据到node本地服务，本地获取不到数据

首先，提交数据后，打开控制台，显示状态为200，点击数据也发送过去了，express服务怎么获取不到数据呢？原来是axios在内部自动帮我们转换json格式数据, 也就是说，我们的 Content-Type 变成了 application/json;charset=utf-8然后，因为我们的参数是 JSON 对象，axios 帮我们做了一个 stringify 的处理。而axios 使...

2019-09-06 20:40:17 651

原创 node服务配置，express配置引入vue项目中(前后端联调)

1、使用express插件快速搭建node服务，首先安装express插件npm install express --save通过express配置服务后，每次都需要node server.js显得有些繁琐，因此有了需求，能不能将自己配置的服务放在vue配置文件中，这样只需要启动vue项目，后台配置也就完成了，答案是可以的。先说总体过程，再说详细内容2、使用vue-cli3脚手架工...

2019-09-06 16:26:13 1413

原创 mongodb结合axios实现vue数据请求

当我们性高彩烈的使用mongodb建好数据库之后，像迫不及待的使用axios发起请求，把数据展示到自己的vue项目中来，但是每次都失败，现在解决方法来了。首先，在本地建的server.js文件，并使用nodemon server.js命令将服务跑起来，记得此处用的端口号，我的配置在8100端口。app.listen('8100',function(){ console.log("81...

2019-09-04 15:04:58 1810

原创使用vue创建项目，使用es6或者typescript语法报错Module not found... core-js/moudles/es6......

问题描述正如题目中所说，当使用vue-cli3脚手架工具搭建好项目之后，可以放心的撸代码了，笔者想使用自定义指令，封装一个随机变色指令，但是却报错了。解决办法简单点就是模块使用版本过于老旧，需要手动更新一下core-js就好了。先ctrl+c停止项目，之后输入：npm install core-js@2 回车，安装完成之后npm run serve(对于vu...

2019-08-30 14:56:44 2358

原创使用vue的v-model数据绑定之setinterval（）改变数据后不更新视图

造成这一现象的原因是由于this指向在setInterval间歇调用时发生了变化，注意v-model绑定数据是字符串值，如果要使用数值要进行相应的处理，先使用parseInt()等进行数据类型转换，由于定时时候this指向改变了，不再指向实例。所以在进入定时前进行保存。就可以正常工作了。new Vue({ el:"#app", data(){ return{ msg:0...

2019-06-13 17:27:25 4506

原创 vue路由守卫

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>路由守卫</title> <style> .main{ width: 100%; min-height: 600px; margin: 0 aut...

2019-05-31 11:42:36 156

原创关于引用百度Echarts的那些事--用当前页显示隐藏内容造成图标出不来

当遇到这个问题时，不妨打开控制台，观察一下引入Echarts都做了什么？在控制台多出哪些标签内容？笔者使用四div个盒子，放置echarts绘制图表，通过js控制相应的盒子显示与隐藏，首先把所有的放置图表的div都设置为display：none；点击对应个把对应个display设置为block，引入图表之前通过测试效果良好。于是我就迫不及待地引入图表，结果控制台没有报错，点击上边四个对应的...

2019-04-02 17:09:31 599

原创关于引用百度Echarts的那些事--天气情况不显示图标

遇到插入饼图天气时，没有出现天气图标，怎么解决？不要着急，我来告诉你怎么解决。var weatherIcons = { 'Sunny': './data/asset/img/weather/sunny_128.png', 'Cloudy': './data/asset/img/weather/cloudy_128.png', 'Showers': './data/...

2019-04-02 16:54:52 1727

原创 vue组件父子通信

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>组件之间通信</title> <script src="https://cdn.bootcss.com/vue/2.6.6/vue.j

2019-03-13 17:39:50 116

原创 vue自定义组件（局部和全局）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>组件</title> <script src="https://cdn.bootcss.com/vue/2.6.6/vue.js&qu

2019-03-13 17:29:22 793

原创封装事件绑定函数

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件绑定函数</title> <script> function aaa(){ alert("aaa&quo

2018-12-23 17:24:23 666

原创图片拖动与最近图片互换位置

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>互换位置</title> <style> *{ padding: 0; margin:0; } ul{

2018-12-19 17:14:10 2591 4

原创鼠标划过根据距离缩放

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>苹果导航菜单</title> <style> *{ padding: 0; margin:0; } di

2018-12-18 20:49:56 380

原创拖拽+碰撞+重力

1、鼠标可以自由移动盒子。2、鼠标释放盒子瞬间，根据其释放速度和方向继续运动，碰到边界碰撞后返回运动，碰撞后速度减小，直到最后停止运动。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>拖拽+碰撞+重力</titl

2018-11-29 17:00:00 306

原创碰撞运动

1、点击开始运动，盒子开始运动，碰到/超出可是区范围，盒子返回来运动。 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>碰撞运动</title> <style> #di

2018-11-29 16:52:04 398

原创图片中心放大-九宫格

html代码如下： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>九宫格中心放大</title> <style> *{ margin: 0; paddin

2018-11-28 10:15:43 1555

原创使用json同时设置多个属性值

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>使用json同时设置多个样式</title> <style> #div1{ width: 260px; heig

2018-11-27 21:31:50 4215

原创完美运动框架（支持不等宽高同时运动，支持透明度变化）

html代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>lianshi</title> <style> #div1{ width: 100px;

2018-11-27 20:59:27 167

原创图片切换

功能描述：1、进入页面后，自动切换图片。 2、鼠标滑过下面小图时，对应的opacity变成高亮状态，鼠标离开时除了当前大图对应的高亮显示外其余暗色显示。3、鼠标点击小图时，切换为对应的大图，并且该小图高亮居中显示。4、点击上一张和下一张时切换图片。5、鼠标放在大图或者小图片上时停止自动切换图片。<!DOCTYPE html><html lang="en...

2018-11-27 17:51:45 573

原创 JavaScript运动

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片淡出</title> <style> img{ display: block; width: 230px;

2018-10-25 16:56:23 185

原创 ajax从服务器读数据，本地网页不刷新

function ajax(url,fnSucc,fnFild){ //1.创建对象 var oAjax=null; if (window.XMLHttpRequest) { oAjax=new XMLHttpRequest(); }else{ oAjax=new ActiveXObject("Microsoft.XMLHTTP"); } //2.连接服务器 ...

2018-10-25 16:51:47 302

原创核心原声JavaScript添加DOM元素

1、document.createElement();用来添加元素，括号内属性为要添加元素标签名。2、appendChild(子节点);把一个元素插到父级上去，默认插到最后。3、insertBefore(子节点 ,位置);和appendChild()用法类似，但是可以选择位置。<!DOCTYPE html><html lang="en"><head...

2018-09-28 17:58:47 1096

原创 JavaScript二级菜单

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>二级菜单</title> <style> *{ margin:0; padding: 0; } .hea

2018-09-23 19:35:34 1974

空空如也

空空如也