一、在webpack-dev-conf.js文件中：1、在const portfinder = require(‘portfinder)后添加如下内容 const express = require(express) const app = express() //请求server var appData = require(../mock/goods.json) //加载本地数据文件 var apiRoutes = express.Router() app.use(apiRoutes) //通过路由请求数据2、找到devServer,在里面加上before（）方法 devServer: {clientLogLevel: warning,historyApiFallback: {rewrites:...
前言笔者最近在学习使用react，提到react就绕不过去redux。redux是一个状态管理架构，被广泛用于react项目中，但是redux并不是专为react而生，两者还需要react-redux建立一座桥梁。同时，redux架构规定只能发送同步action，要想发送异步action就需要结合中间件如redux-thunk、redux-saga等，所以说要想搞定redux还真是不容易啊，光名词就这么多。笔者以前也接触过一点vuex，vuex对笔者这样的菜鸡相对友好，但是vuex是和vue配套的，...
一、Node中socket.io基础1、是什么Socket.IO类库，是在服务器和浏览器之间提供一个共享接口，其可以用于实现以下几种通信方式： HTML5中的WebSocket通信Flash中使用的WebSocket通信XHR轮询JSONP轮询Forever Iframe在通信时，客户端与服务器端可以使用相同的API2、怎么用原理：创建Scoket.IO服务器，该服务器依赖于一个已经创建的HTTP服务器 服务器端引入 var http=require(http) var sio=require(socket.io) var server=http.crea...
效果类似一条视频的小程序，就是视频列表，然后每个视频上覆盖一张视频的封面图，点击封面图的播放按钮视频播放，点击别的视频的时候，停止播放当前视频，播放点击的视频。差不多是这样：一条视频 首先上代码：wxml <block wx:for="{{videoList}}"><view class=video-item><view class=wrapper><video class=video-video wx:if={{index==videoIndex}} id=video{{index}} autoplay={{true}} show-center-play-btn="{{false}}" src={...
老是不通过，没办法，只能是重新发布了，反正我就是杠上了，大大小小写过很多前端特效，当然也经常在网上copy或者修改人家的代码，我觉得也挺好的，为什么？！因为我想这样，你能怎么办，打我？少废话，直接上代码，JS代码 function fullScreen(el) {var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,wscript;if(typeof rfs != "undefined" && rfs) {rfs.call...
一个vue+express 构建的后台管理系统 说明： vue+express 构建的后台管理系统,包括登录、注册、表格的增删改查 github 在线 搭建vue项目： 1.安装vue-cli脚手架 npm install -g vue-cli2.创建基于webpack模版的项目 vue init webpack my-express3.安装包依赖并运行 cd my-express npm install npm run devvue项目基于iview-admin改造的 通过应用生成器工具 express创建一个应用的骨架： 1.连接数据库 在config创建db.js var mysql ...
表单，将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交。 当点击<form/>表单中 formType 为 submit 的<button/>组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。属性名类型说明report-submitBoolean是否返回formId用于发送模板消息bindsubmitEventHandle携带form中的数据触发submit事件，event.detail = { value : {"name":"value"} , formId:"" }bind...
一个微信小程序图片剪裁组件，可以通过手势控制旋转缩放移动，也可以点击旋转进行90度旋转，先看下效果（视屏不知道为啥用不了，上个压缩过度的GIF先）：图片剪裁毫无疑问用的是canvas，但是开发过小程序的同学应该了解小程序canvas的一些坑。比如小程序canvas的设定了画布的大小后不能像web的canvas那样通过css样式来调整画布在手机上显示的大小、还有canvas不能设置太大因为可能会在某些安卓机上导致小程序崩溃、canvas绘制过大的...
之前用jquery实现还很简单，然后用vue就一直不行，然后在网上找了很多，又仔细看了vue官网 的过渡&动画，发现其实很简单 (可以多看vue官网 过渡&动画 实现更多效果) 1、实际效果2、代码<!--css--> .box{height:200px;width: 200px;background-color:black; } .draw-enter-active, .draw-leave-active {transition: all 1s ease; } .draw-enter, .draw-leave-to /* .fade-leave-active below version 2.1.8 */ {height: 0; }<div id...
在使用vue实现聊天页面的时候，聊天数据动态加到页面中，需要实现滚动条也自动滚动到底部。这时我找到网上有个插件 vue-chat-scroll https://www.npmjs.com/package/vue-chat-scroll 但是安装后发现是用不了的，报错信息如下：VM14383:27 [Vue warn]: Failed to resolve directive: chat-scroll (found in <Hello>)这个一直找不到原因，可能是我vue的版本是2.2不支持吧。。。后来找到一个解决办法： 添加watch方法，监听数据变量的...
前言本文介绍了如何用Node开发web程序，并通过一个todo list练习来介绍如何创建符合RESTful风格的API接口。 创建HTTP服务器用Node创建HTTP服务器是非常方便的。创建HTTP服务器要调用http.createServer()函数，它只有一个参数，是个回调函数，服务器每次收到HTTP请求后都会调用这个回调函数。这个回调会收到两个参数，请求和响应对象，通常简写为req和res： var http = require(http) var server = http.createServer(function(req,...
Redux是一种解决数据共享的方案import {createStore} from redux; import React from react; import ReactDOM from react-dom; import {connect, createProvider} from react-redux// data let allNum = {num :1000}// 创建reducer, 名字的默认值为 function reducer(state, action) {let tmp = {}if (action.type == "decrease"){allNum.num = allNum.num - action.value;tmp = Object.assign({}, state, {num: allNum.num})retur...
本文介绍了React组件内事件传参实现tab切换的示例代码，分享给大家，具体如下： 组件内默认onClick事件触发函数actionClick, 是不带参数的,不带参数的写法: 如onClick= { actionItem }带参数的写法, onClick = { this.activateButton.bind(this, 0) }下面是一个向组件内函数传递参数的小例子 需求: 在页面的底部, 有四个按钮, 负责切换内容, 当按钮被点击时, 变为激活状态, 其余按钮恢复到未激活状态分析: 我们首先要创建点击事件的...
使用vue来做一些小巧的动画效果是非常方便的，今天本人想使用vue的transition来完成一个滑动过渡效果，这里和大家分享一下。 直接上源代码： <!DOCTYPE html> <html> <head><meta charset="utf-8"><title>Vue滑动效果</title><style>.d {position: absolute;border: 1px solid red;width: 30px;height: 30px;}@keyframes show {0% {opacity: 0;left: 32px;}100% {opacity: 1;left: 0;}}@keyframes hide {0% {opacity: 1;left: 0;}1...
我的环境 亚马逊(AWS)的一个ubuntu虚拟机.nodeopenssl生成证书输入如下命令会在你的当前文件夹生成localhost.key和localhost.cert. openssl genrsa -out localhost.key 2048 openssl req -new -x509 -key localhost.key -out localhost.cert -days 3650 -subj /CN=localhost其中localhost为域名. 想要换成别的域名就直接把上面的所有localhost替换成你的域名. 以我为例, 我的虚拟机的域名是xxx.compute.amazonaws.com, 就以这个域名...