Github StackChat 学习回顾 React和Electron结合 TypeError: fs.existsSync is not a function 在React组件里引入electron时候就会报这个错,主要原因是在React里不能引入Node.js的模块 解决方法 Webpack target属性 先展开Create-React-App所有配置 npm run eject 在webpack.config.js下添加配置 // other configs... module.ex…
Github StackChat 技术栈 写这个软件StackChat的主要目的是巩固练习Node和对React的实践,也是为了学习东西,所以选用了这些自己还没在项目里使用过的技术,边学变写 Electron React Material-UI React-Router Redux Express Socket.io MongoDB 现在已完成前端大部分界面的构建(无状态),所以记录一下 环境搭建 Create-React-App 利用React脚手架Create-React-App,再写入依赖…
Github StackChat 学习回顾 Socket.io 结合Express创建Socket.io服务器 const app = require('express')() const http = require('http').createServer(app) const io = require('socket.io')(http) 客户端进行连接 const url = `http://localhost:8008` const socket = io(url) url传参 //客…
Github StackChat 用到的React-Router React-Router是React路由的解决方案之一,也可以使用别的库 安装 npm install react-router --save-dev 路由配置 react-router主要提供了几个组件来进行路由之间结构的组织 Router 所有路由组件的根 Route 路由组件 path属性 匹配路径 component属性 匹配路径渲染的组件 IndexRoute 配置默认页面 component 渲染的组件 React.r…
Github StackChat Redux学习回顾 Redux的主要功能就是管理复杂交错的State,比如需要讲state提升到顶层组件的场景中,使用Redux就很合适 Redux主要提供三个东西来进行状态管理 1. Action 表达要进行的动作,也就是通过view层触发,来进行派发来改变全局state action创建函数 也就是只返回一个action的函数 export const SignUpEmailChange = (value) => ({ type: 'SIGNUP_EMAIL…
<script> (function () { var navUA = navigator.userAgent; var defIncludeStr = "iPhone|Android|iPod|BlackBerry|"; var defExcludeStr = ""; var redirectUrl = ""; var metas = document.getElementsByTagName("meta");…
客户端JavaScript中没有对二进制数据提供很好的支持.但是在处理TCP流或文件流时,必须要处理二进制数据.Node.js定义了一个Buffer类,用来创建一个专门存放二进制数据的缓存区. Buffer中存的数据默认为16进制. 1.创建Buffer对象 在Node.js中,Buffer类是一个可以在任何模块中不使用的全局类,不要单独加载.可以使用New关键字来创建该类的实例对象. Buffer类有三种形式的构造函数: 第一种:将缓存区大小(以字节为单位)作为构造函数的参数 var size…
Node.js之使用Buffer类处理二进制数据 Buffer类可以在处理TCP流或文件流时处理二进制数据,该类用来创建一个专门存放二进制数据的缓存区. 1. 创建Buffer对象 1.1 直接创建: bur = new BUffer(123) //123 为bur缓存区长度 1.2 初始化缓存区内容可以用fill属性: bur.fill(value,[offset],[end]) //value:为必填参数,数值为需要写入的数值 第二个参数为数据写入的起始位置,默认为0 第三个参数为数据写入的…
一.项目介绍 基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+nodejs等技术混合开发的仿微信web端聊天室reactWebChat项目,实现了聊天记录右键菜单.发送消息.表情(动图),图片.视频预览,浏览器截图粘贴发送等功能. 二.技术选型 MVVM框架:react / react-dom 状态管理:redux / react-redux 页面路由:react-router-dom 弹窗插件:wcPop 打包工具…
这段时间进了一个新的项目组,项目是用Appcan来做一个跨平台的移动运维系统,其中前台和后台之间本来是打算用WebSocket来实现的,但写好了示例后发现android不支持WebSocket,大为受挫.后在园子里看到用socket.io可以代替WebSocket,然而对于我这样JS都没学全的来说有多了一块要啃的砖头了,没奈何还是要硬着头皮上.下面是我用node.js和socket.io做的一个简易的Web聊天室,不过只支持局域网.由于也是刚学这些所以做的不好就请见谅了. 以下是服务端代码ind…
小伙伴们,你们是否已经发觉,曾经爱过的姑娘在不知不觉中已变了模样,曾经鲜艳的红领巾也不再飘荡于前胸,而曾经最熟悉的QQ电脑 UI,竟在不知不觉中改头换面了. 没关系,少年,还不晚,今天,让我们携起手来,坐在高高的谷堆上,听我来数一数,这十五年来我们追过的 UI. 1999 的那个秋,天还是蓝的,水还是绿的,丈母娘嫁女儿是不图你房的.1999 年,QQ 还被我们亲切的称呼:OICQ,将自己定义为中文网络传呼机.99 年 a 版没有对话框,取而代之的是网络传呼机,公共聊天室和文件传输工具. b 版则…
一:前期微信支付扫盲知识 前提条件是已经有申请了微信支付功能的公众号,然后我们需要得到公众号APPID和微信商户号,这个分别在微信公众号和微信支付商家平台上面可以发现.其实在你申请成功支付功能之后,微信会通过邮件把Mail转给你的,有了这些信息之后,我们就可以去微信支付服务支持页面:https://pay.weixin.qq.com/service_provider/index.shtml 打开这个页面,点击右上方的链接[开发文档]会进入到API文档说明页面,看起来如下 选择红色圆圈的扫码支付就…
需求分析:用户通过扫描我们网页的二维码,如果已经绑定我们平台的账户,即成功进入首页,否则提示先绑定个人微信账号. 1.绑定微信账号:是通过关注微信公众号实现绑定个人微信账号.首先通过后台接口获取到ticket值,生成二维码. $("#erweima-bind").attr('src','https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=' + data.ticket); 2.扫描二维码登录https://developers.weix…
一.PC端跳转到移动端 html页面: <script>var webroot="/",catid="{$catid}",murl="m/{$catdir}.html";</script> <script src="{JS_PATH}ql/mobile.js"></script> mobile.js文件: if((navigator.userAgent.toLowerCase()…
官方文档链接 第一步:获取AppID  AppSecret (微信开发平台申请PC端微信登陆)   第二步:生成扫描二维码,获取code https://open.weixin.qq.com/connect/qrconnect?appid=AppID&redirect_uri=http://www.baidu.com&response_type=code&scope=snsapi_login&state=2014#wechat_redirect 第三步:通过code获取ac…
我在写官网的时候做了pc和移动端两个,在通过网上查找了这样的代码,看着完全没问题,等放进去页面中后,PC端页面一直刷新,根本停不下来,找了类似js还是同样的问题.通过不断尝试后才发现,问题就是多了一行代码: 原代码例子: <script type="text/javascript"> //平台.设备和操作系统 var system = { win: false, mac: false, xll: false, ipad:false }; //检测平台 var p = nav…
在网上看到很多这样类似的代码,但是有的很复杂,或者有的没有判断完全,上次经理去见完客户回来讲,使用苹果浏览打开pc端(pc已经做了识别跳转)会自动跳转到移动端的网页去,后来经测试才发现 document.writeln(" 是否为移动终端: "+browser.versions.mobile+"</br>"); //打印出来 true 所以在完整版的代码中 第一层if 判断一直是true 以上的原因是因为,网上流传的判断为:   mobile: !! u…
上一篇文章“e2e 自动化集成测试 架构 京东 商品搜索 实例 WebStorm Node.js Mocha WebDriverIO Selenium Step by step 二 图片验证码的识别”, 下面讲一下Node.js中如何访问数据库, 在做自动化测试过程中, 经常可能遇到需要到数据库取值,或是更新值.来验证页面上的数据正确性. 之前,在google, baidu.com上找了非常多的文章关于Node.js如何访问Sql Server的文章, 都是不行的, 我想是因为, Node.js…
界面高仿网易严选商城(主要是2016年wap版) 测试数据采集自网易严选商城 功能和数据库参考ecshop 服务端api基于Node.js+ThinkJS+MySQL 计划添加基于Vue.js的后台管理系统.PC版.Wap版 GitHub:https://github.com/tumobi/nideshop-mini-program 如您觉得不错,请您star一下 项目截图 首页 专题 分类 商品列表 商品详情 购物车 订单中心 功能列表 首页 分类首页.分类商品.新品首发.人气推荐商品页面 商…
声明:教程来自<Node即学即用>.源代码案例均出自此书.博文仅为个人学习笔记. 第一步:创建一个聊天server. 首先,我们先来写一个Server: var net = require('net') var chatServer = net.createServer() chatServer.on('connection',function(client){ client.write('connection~~~\n') client.end() }) chatServer.listen(…
在做移动端网站时,有时因技术问题或其他原因无法制作响应式版面,而移动端页面只能放到子目录下,但是手机端通过搜索引擎进入网站电脑端子页面,无法匹配到移动端页面,使得用户体验很不好,即影响排名也影响转化.这里有一个js代码可以实现用户使用手机访问电脑端,自动跳转到对应手机页面.举例:一个pc页面https://www.800xiaos.com/2/2795/,对应移动url为https://m.800xiaos.com/2/2795/,使用手机端访问pc页面https://www.800xiaos.…
等了好久,微信官方终于发布了.net的demo. 主要代码: /** * 生成直接支付url,支付url有效期为2小时,模式二 * @param productId 商品ID * @return 模式二URL */ public string GetPayUrl(string productId, string body, string attach, int total_fee, string goods_tag) { Log.Info(this.GetType().ToString(), "…
var wzw={ //浏览器相关信息 //android webview 需要app进行支持,Android web view初始化时,在navigator中添加标识 browser:{ versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; return { trident: u.indexOf('Trident') > -1, //IE内核 presto: u.indexOf('Presto…
最近做了一个小需求,结果坑特别多..... 需求是这样的,要给公司内部做一个微信公众号广告投票系统,整个项目就不多赘述了,有个小功能,要求是这样的: 点击某条记录后的“投票”按钮,在当前页面弹出弹窗显示文章内容(读取文章url,需要正确展示文字.图片.排版等),保持3分钟,这期间在当前页面上不可进行任何操作,不可投票也不可关闭文章.3分钟后,文章下方的投票区域可用,点击“提交”按钮时,校验所有项目是否都已选择,如果没有,则弹窗提示.提交完成后,状态更改为“已投票”(只是针对该用户,不针对该公众号…
二维码 首先,二维码在编制上巧妙地利用构成计算机内部逻辑基础的“0”.“1”比特流的概念,使用若干个与二进制相对应的几何形体来表示文字数值信息,通过图象输入设备或光电扫描设备自动识读以实现信息自动处理.简单来说 ,每一个二维码图像都含有一些特定的信息,人们利用数字图像处理技术使计算机能够对图像进行运算和处理,二维码(如右图)图像上的像素矩阵在计算机中处理时,有黑点的标记为“1”,空白的标记为“0”,当二维码被输入设备(扫描仪,摄像头)读取到计算机时成为一串类似“10101000011101111…
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <!--<script type="text/javascrip…
 <script type="text/javascript">            (function(){                var ua = navigator.userAgent.toLowerCase();                var bIsIpad = ua.match(/ipad/i) == "ipad";                var bIsIphoneOs = ua.match(/iphone os/i)…
function goPAGE() { if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) { // alert("请使用电脑体验") document.write("&l…
function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]; var flag = true; for (var v = 0; v < Agents.length;…
三.后台架构 1.在根目录下(和 views 文件夹同级)创建 lib 文件夹 以后所有后端内容 都是在这里写,分别创建三个文件夹 到 lib 目录下: mongo  放的是数据的存储 module 放的是逻辑的处理 util    就是工具类文件 lib下  会有pageXxxx.js,这个是业务的处理 2.下面 把 总路由 拿过来,并改名 router.js 删除原先的 路由文件夹,修改 app.js 的路由指向: 3.接下来在 router.js 添加几个方法,如图: 分别是查看全部.创建…