Lucio_cn-CSDN博客

原创 8分钟完成NodeJs爬虫，把JRS小姐姐全部看个遍

本文讲的是利用nodejs以及相关库，爬取JRS爆照区内的爆照贴，并保存相关数据到本地。依赖选择const superagent = require('superagent'); //nodejs里一个非常方便的客户端请求代理模块const cheerio = require('cheerio'); //Node.js 版的jQueryconst async = r...

2019-07-31 17:50:02 92746 14

原创 React - 快速入门

目录一.构建项目– 使用 create-react-app 创建一个React应用– JSX 混合使用了 HTML 和 JavaScript 在 React 组件的方法中定义它的输出（html + js混编）– React 中，组件、示例和元素是不同的概念– ReactDOM.render() 是 React 应用连接 DOM 的入口方法– JavaScript 内建...

2018-03-28 13:33:16 75277 3

原创基于nodejs + websocket 搭建即时通讯应用

如果说AJAX是像手机发短信一样，发送信息，获取信息，那么websocket技术则是打电话这样。Web领域的实时推送技术，也被称作Realtime技术。这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新。在以前你可能会使用AJAX进行轮询，这造成了服务器的多重压力，使用websocket，既可实现一次连接，保持通话的作用。而它有着广泛的应用场景，比如在线聊天室、在线客服系统、评论系统、...

2018-03-08 10:46:10 106873 12

原创 ThreeJS从实战到源码 - 鼠标操控3D场景

先实现一个实现代码function render() { renderer.render(scene,camera);//执行渲染操作}render();var controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控件对象controls.addEventListener('change', render);//监听鼠标、键盘事件代码解析OrbitControls.js控件支持鼠标左中右键操作和键

2021-09-10 15:42:23 6697

原创 ThreeJS从实战到源码 - 创建场景

1

2021-09-10 15:22:41 15342

转载 [转]Three.js THREE.Raycaster 射线拾取详解（解决射线无法射到object3,group里的children）

简介由于浏览器是一个2d视口，而在里面显示three.js的内容是3d场景，所以，现在有一个问题就是如何将2d视口的x和y坐标转换成three.js场景中的3d坐标。好在three.js已经有了解决相关问题的方案，那就是THREE.Raycaster射线，用于鼠标拾取（计算出鼠标移过的三维空间中的对象）等等。THREE.Raycaster构造函数和对象方法new Raycaster( origin, direction, near, far );origin— 光线投射的起点向量。di..

2020-09-22 11:28:52 2150 1

转载实现各浏览器全屏

现代浏览器包括ie11，可以直接用h5的全屏api实现低版本的IE需要通过ActiveX插件实现；//直接上代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head...

2020-04-28 18:07:16 325

转载可靠React组件设计的7个准则之SRP

原文的篇幅非常长，不过内容太过于吸引我，还是忍不住要翻译出来。此篇文章对编写可重用和可维护的React组件非常有帮助。但因为篇幅实在太长，我不得不进行了分割，本篇文章重点阐述SRP，即单一职责原则。————————我是一条分割线——————我喜欢React组件式开发方式。你可以将复杂的用户界面分割为一个个组件，利用组件的可重用性和抽象的DOM操作。基于组件的开发是高效的：一个复...

2019-08-08 09:18:41 189

原创 Ionic - 热更新

Ionic3开发时，经常会遇到需要频繁改动打包，如果这时候可以热更新整个APP的变动文件，那么就像web应用一样，在APP热更新。本文是使用了Cordova-hot-code-push插件去进行对一个打包编译后的静态文件进行加工，部署到服务器的一个过程。进入正题一、热更新流程1. 编译应用成功后，热更新插件对每一个变动的文件生成hashcode2.将生成后的...

2019-04-16 09:52:19 6144

原创 Ionic - 组件化开发之自定义组件

万物皆组件思想,组件化开发,优化项目,省时省力 1,使用命令创建一个表单componentionic g component select-table//其他指令ionic g page YourPageName //创建新页面ionic g directive YourPageName //创建指令ionic g component YourComponentName //...

2019-01-28 16:22:48 7061

原创项目管理 - 版本

1. 软件版本阶段* Alpha版: 此版本表示该软件在此阶段主要是以实现软件功能为主，通常只在软件开发者内部交流，一般而言，该版本软件的Bug较多，需要继续修改。* Beta版: 该版本相对于α版已有了很大的改进，消除了严重的错误，但还是存在着一些缺陷，需要经过多次测试来进一步消除，此版本主要的修改对像是软件的UI。* RC版: 该版本已经相当成熟了，基本上不存在导致错误的BUG，与即将...

2018-10-29 15:31:10 924

原创 Typescript - 指北(1)

使用TypeScript已经有了一段时间，这的确是一个好东西，虽说在使用的过程中也发现了一些bug，不过都是些小问题，所以整体体验还是很不错的。TypeScript之所以叫Type，和它的强类型是分不开的，这也是区别于JavaScript最关键的一点，类型的声明可以直接写在代码中，也可以单独写一个用来表示类型的描述文件*.d.ts。常用方式首先在d.ts中是不会存在有一些简单的基本类型...

2018-10-26 14:46:20 1629

原创 Ionic - 更改项目名，图标、包名及安装、删除、修改插件，配置config.xml

说在前面，config配置文件中各标签含义widget：id填写app所有人的域名，version填写app的版本号name：app名称description：app描述，会在app stroe里显示author：app作者相关信息，会在app stroe里显示content：指定app开始指向页面access：指定app可进行通信的域名，*为所有preference：偏好设置，可...

2018-10-17 11:28:27 2940

原创微信小程序封装好的picker日期组件（即拿即用）

微信小程序中使用picker组件，但基本只有几种格式，这里分享一下封装好的日期组件。选择后格式类似于：2018-09-19 17:30:55 wxml<picker class='alarm_picker' mode="multiSelector" value="{{dateTime}}" bindchange="changeDateTime" bindcolumnch...

2018-09-19 17:48:47 33683 24

原创 Ionic - 使用原生组件开发提示震动+音效

官网震动插件地址：https://ionicframework.com/docs/native/vibration/安装震动插件ionic cordova plugin add cordova-plugin-vibrationnpm install --save @ionic-native/vibration app.module.tsimport { Vibratio...

2018-08-24 15:13:14 1907 5

原创 Ionic - WebSocket在Ionic里的使用

因为需要使用WebSocket做TCP的长连接，网上搜了socket.io没找到合适的解决方案。就用原生的了。贴代码：先写一个工具类import { Injectable } from '@angular/core';import { Observable } from "rxjs/Observable";import {observable} from "rxjs/sym...

2018-08-23 19:19:07 4520

原创 Ionic - 踩坑记录 #持续更新#

坑1: 未在 app.module.ts 中导入 HttpClientModuleionic g provider movies 命令执行后并未在 app.module.ts 中自动导入 HttpClientModule。坑2: Chrome 调试时 CORS 问题最简单的办法就是Chrome 安装 Allow-Control-Allow-Origin 插件了，链接 ==>...

2018-08-21 14:36:04 1831

翻译前端微服务整合之‘‘插拔式架构’‘实现方案

背景随着互联网云的兴起，一种将多个不同的服务集中在一个大平台上统一对外开放的概念逐渐为人熟知，越来越多与云相关或不相关的中后台管理系统或企业级信息系统曾经或开始采用了这种「统一平台」的形式。同时，前端领域保持着高速发展，早期的 jQuery+Backbone+Bootstrap 的 MVC 解决方案支撑起了业务相当长的一段时间；后来，Angular、Ember 等 MVVM 框架开始崭露头角，...

2018-08-20 11:24:18 30619 9

原创 Ionic - CrossWalk 之兼容android4.3及以下版本

Ionic Framework不支持Android4.2.2 cordova-plugin-crosswalk-webview，这个插件的意思是将webview整个都打包到应用中去也在网上找到了安装的方法：http://jingyan.baidu.com/article/f7ff0bfc1bbe372e27bb1341.html 安装命令ionic plugin add ...

2018-08-15 18:02:37 2738

转载前端er怎样操作剪切复制以及禁止复制+破解等

前言有时候我们经常会碰到这些场景：玩掘金、知乎的时候复制一段文字，总是会在内容后面加上一些版权信息，以及像小说网站等都有禁止选中，禁止复制这种功能，还有点击自动复制账号的功能。我也经常遇到这些场景，有时候会去想这后面到底是怎么做，周末趁着有空去研究了一下，然后发现这些都跟操作剪贴板有关系，并且都不难，了解一下基本都知道怎么做了，整理分享一波给大家。个人博客了解一下：obkoro1.c...

2018-08-09 10:14:37 2239

原创 Ionic - 3.x 键盘遮挡等问题

iOS 端毫无 bug，Android 端却出现了问题。当软键盘弹出后，Android 端的 tabs 移到了软键盘的上面，再仔细一看，整个界面都被压扁了，输入框也不知道去哪儿了。于是去翻 Ionic Native - Keyboard 文档，并未发现有能解决该问题的方法。于是又想到是不是 android:windowSoftInputMode 属性出了问题，打开 AndroidManifes...

2018-07-31 09:31:46 2116

原创 Ionic - 图标 iconfont的使用（阿里图标库）

iconfont在ionic中的使用：1.进入iconfont官方网址后2.搜索你想要的图标，添加到购物车（前提：是已经登录，这里可以使用github注册登录）3.点击购物车创建项目并下载到本地4.下载之后的文件5，在index.html引入  <link rel="...

2018-06-28 18:11:26 3204

原创 Ionic - 笔记之 Tab

Ionic2 组件之Tab学了Tabs更少不了Tab组件，Tab组件写作<ion-tab>,必须要放置在Tabs组件内，是NavController的一种。基本用法Tab有以下几个基本属性和事件:Attr Type Desc [root] Page 指定tab希望加载的页面 tabTitle string tab上显示的标题...

2018-06-19 12:08:41 1327

原创 Ionic - 开始项目

一、目录结构分析 hooks:编译 cordova 时自定义的脚本命令，方便整合到我们的编译系统和版本控制系统中node_modules :node 各类依赖包resources :android/ios 资源(更换图标和启动动画)src:开发工作目录，页面、样式、脚本和图片都放在这个目录下www:静态文件platforms:生成 android 或者 ios 安装包路径( pla...

2018-06-12 16:17:06 262

原创 Ionic - API

放在前面：ionic3中文api1.操作表：ActionSheetController2:格（1）垂直对齐：a.通过向行row中添加不同的属性，可以将所有列垂直对齐align-items-start/align-items-center/align-items-center/<ion-row align-items-start>...<ion-col...

2018-06-12 15:56:59 1890

原创谈一下React组件的互相通信

在使用 React 中，经常需要组件间进行消息传递（通信），组件间通信大体有下面几种情况：父组件向子组件通信子组件向父组件通信跨级组件之间通信非嵌套组件间通信父组件向子组件通信父组件通过向子组件传递 props，子组件得到 props 后进行相应的处理。父组件 App.js：import React,{ Component } from "react";import Child from "./...

2018-04-20 14:10:44 39876

原创 Reacr-Router 4的问题

[email protected]：React Router被拆分成三个包：react-router,react-router-dom和react-router-native，目前网站搭建只需要引入react-router-dom即可；路由器组件无法接受两个及以上的子元素；npm安装react-router-domnpm install react-router-dom用法：index.jsimp...

2018-04-09 15:21:56 42177 1

转载常用的JavaScript设计模式

什么是设计模式百度百科：　　设计模式（Design pattern）是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。　　使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。毫无疑问，设计模式于己于他人于系统都是多赢的；设计模式使代码编制真正工程化；设计模式是软件工程的基石脉络，如同大厦的结构一样。实际情况：　　设计模式绝对不是纸上谈兵的知识，光看书就以为...

2018-03-24 11:39:58 67286

原创 NodeJs操作mongoDB（增删查改）

准备1.通过npm命令安装mongodb2.安装mongodb数据库1.增加var MongoClient = require("mongodb").MongoClient;var DB_URL = "mongodb://localhost:27017/chm"; function insertData(db){ var devices = db.collection('vip');...

2018-03-23 17:56:02 65685

原创 IPHONE X前端适配

屏幕尺寸垂直方向上，iPhone X的显示宽度与iPhone 6，iPhone 7 和 iPhone 8 的 4.7 英寸一样，但是比4.7英寸的显示屏高145pt。安全区域安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响viewport-fit通过对meta标签viewport的扩展，...

2018-03-19 15:59:18 66779

原创 Fetch与Promise

本文不是 Fetch API 科普贴，其实是讲异步处理和 Promise 的。Fetch API 很简单，看文档很快就学会了。推荐 MDN Fetch 教程和万能的 WHATWG Fetch 规范由于 Fetch API 是基于 Promise 设计，有必要先学习一下 Promise，推荐阅读 MDN Promise 教程。旧浏览器不支持 Promise，需要使用 polyfilles6-p...

2018-03-16 17:31:48 72502

原创 WEB页面内容禁止选择、复制、右键等实现

1.禁止右键：在<body>后面加入以下代码：<body leftmargin=0 topmargin=0oncontextmenu='return false' ondragstart='return false' onselectstart ='return false' onselect='document.selection.empty()' oncopy='docu...

2018-03-05 15:38:29 68495

转载禁止页面滚动方法

禁止页面滚动有三种方法1，依靠css 将页面[javascript] view plain copydocument.documentElement.style.overflow='hidden'; document.body.style.overflow='hidden';//手机版设置这个。 overflow:auto //回滚用这个如果设置了如上，页面的滚动条将会消失，此...

2018-02-03 11:38:57 71471

原创函数式编程详解

函数式编程中函数有三种不同的解读方式，分别为纯函数、高阶函数和一等函数。本文分别对这三者的概念、应用和联系进行详解。纯函数定义：1. 相同的输入必定产生相同的输出2. 在计算的过程中，不会产生副作用满足上述两个条件，我们就说该函数是纯函数。纯函数也即数学意义上的函数，表达的是数据之间的转换（映射）关系，而非计算步骤的详述。数学函数的定义：函数通常由定义域 X 、值域 Y，以及定义域到值域的映射 f...

2018-01-10 14:20:36 66685

原创 web开发API合集

一、节点1.1 节点属性Node.nodeName //返回节点名称，只读Node.nodeType //返回节点类型的常数值，只读Node.nodeValue //返回Text或Comment节点的文本值，只读Node.textContent //返回当前节点和它的所有后代节点的文本内容，可读写Node.baseURI //返回当前网页的绝对路径 Node.ownerDocum...

2018-01-10 14:15:08 66247

原创 web开发工具

软件火狐：http://www.firefox.com.cn/download/Chrome：http://www.google.cn/chrome/browser/desktop/index.htmlTeemViewer：https://www.teamviewer.com/zhcn/download/windows/Ps cs6：http://www.33lc.com/soft/15126.h...

2018-01-10 14:13:56 66252

转载最详细的Vuex教程

什么是Vuex？vuex是一个专门为vue.js设计的集中式状态管理架构。状态？我把它理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。引入Vuex（前提是已经用Vue脚手架工具构建好项目）1、利用npm包管理工具，进行安装 vuex。在控制命令行中输入下边的命令就可以了。 npm install vuex --save1要注意的是...

2018-01-10 13:51:58 54042

转载 2018前端值得关注的技术

1.前言2017悄然过去，2018已经来到。人在进步，技术在发展。2018年前端有哪些领域，技术值得关注，哪些技术会兴起，哪些技术会没落。下面就我个人的判断进行一个预测判断，希望能对大家起到一个参考作用！下面提及的技术，只是建议大家关注，也不是建议大家全部的都要学，而是建议大家按需学，自己觉得哪些需要学，对哪些有兴趣就学哪些！如果大家有什么工具，框架，库觉得可以推荐的，欢迎在评论区提点，让大家相互...

2018-01-10 10:12:28 68574

转载 Vue开发看这里就够了

Vue -渐进式JavaScript框架介绍vue 中文网vue githubVue.js 是一套构建用户界面(UI)的渐进式JavaScript框架库和框架的区别我们所说的前端框架与库的区别？Library库，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者代表：jQueryjQuery这个库的核心：DOM操作，即：封装DOM操作，简化DOM操作Framework...

2018-01-10 10:09:45 66314 1

转载前端程序员的一些有学习借鉴作用的网站

01. vue-google-maphttps://github.com/GuillaumeL...这个网址陪伴了我一个月左右的时间啊，工作以来，第一块难啃的骨头。原因大概是：之前没有接触过vue.js加上全英文..算是翻山越岭的一次learning。最后老大来了一句：“everything should be English” ... that TRUE ！所以啊，英语很关键~02. Vue.j...

2018-01-10 10:03:06 66636

allow-control-allow-origin chrome插件

基于JQ悬浮导航CSS联动变化特效

c++MP3播放器源码+文件

空空如也