- 博客(80)
- 收藏
- 关注
RSS订阅原创 websocket之node+express+vue+vuex简单实现
借鉴于网上资源一、nodejs+express 构建webSocket服务1、express server:创建服务文件2、安装 npm install nodejs-websocket3、app.js引入以下代码var createError = require('http-errors');var express = require('express');var path = require('path');var cookieParser = require('cookie
2021-08-03 19:40:05
437
原创 面向对象案例tab切换
html代码实现 <div class="tabsbox" id="tab"> <nav class="firstnav"> <ul> <li class="liactive"> <span>测试1</span> <span class="close">-</span> </li> <li> <span>..
2021-05-06 11:27:19
207
1
原创 vue-route+webpack部署单页路由项目，访问刷新出现404问题
问题：利用vue-route结合webpack编写了一个单页路由项目，运维协助在服务器端配置nginx。部署完成后，访问首页没问题，从首页里打开二级页面没问题，但是所有的二级页面打开后，再次刷新，就会出现404现象解决方式：刷新页面时访问的资源在服务端找不到，因为vue-router设置的路径不是真实存在的路径在nginx配置里添加vue-route的跳转设置（这里首页是index.h...
2018-08-06 15:17:20
707
原创 vue-computed购物车
购物车功能深刻体会到了computed的强大1、.html<div class="item-list-wrap"> <div class="cart-item"> <div class="cart-item-head"> <ul> <li&
2018-07-13 11:29:06
655
原创 node --更新数据库(mongoose提供的update)
1、视图2、表结构{ "_id" : ObjectId("5b46b725473038c4d45e1ad7"), "userId" : 1110, "userName" : "Lily", "userPwd" : "333", "salePrice" : 249.0, "goodsSale&a
2018-07-12 10:57:06
4183
原创 vue-infinite-scroll 滚动分页加载
1、安装插件npm i --save v-infinite-scroll2、使用main.jsimport infiniteScroll from 'vue-infinite-scroll'Vue.use(infiniteScroll);.vue文件 <div class="content clearfix"> <ul class="clearfix"> ...
2018-07-03 13:28:31
5519
原创 node接口 分页-排序
1、server/routes/goods.jspage/pageSize/sort分别为前端传入的参数router.get("/",function(req,res,next){ let page=parseInt(req.param("page")); let pageSize=parseInt(req.param("pageSize")) let sort=req.param("sor...
2018-06-29 16:12:55
645
原创 前端请求node接口数据
1.aa.vueimport axios from 'axios'axios.get("/goods").then((response)=>{ let res=response.data; if(res.status=="0"){ this.goodsList=res.result; }else{ this.goodsList=[] } })2....
2018-06-29 14:32:55
1125
原创 基于express开发查询mongodb数据库
pm2 reload all(刷新)一、安装monoose(链接数据库)二、创建models（mongoose创建model实体，通过实体和mongodb关联数据库）models/goods.jsvar mongoose=require('mongoose')var Schema=mongoose.Schema;var productSchema=new Schema({ "produ...
2018-06-29 14:09:47
1382
原创 MongoDB
一、启动在 MongoDB 安装目录的 bin 目录下执行 mongod.exe文件。二、执行mongo.exe文件，实现数据库创建、删除、插入、更新等操作
2018-06-28 17:12:03
166
原创 ECMAScript 6--
ECMAScript 6 即ECMAScript 2015 是javascript最新标准1、默认参数区别es5:function hello(txt){ txt=txt||'hello world'}es6function hello (txt='hello world'){}2、字符串模板 es5var aaa='1111';var bbb='3333'+aaa+'222';e...
2018-06-26 15:05:21
128
原创 根据不同的栏目地址给栏目添加不同的样式标识
<script>$(function(){ //var website='http://www.tianshichuangke.com/cyfh/'; var website=window.location.href; //获取当前网址 如http://www.tianshichuangke.com/financial/business/307.html if(web...
2018-06-22 13:20:54
355
原创 node之express框架
1、安装npm i -g express-generater安装2、查看express版本express --version 3、生成一个express项目express server 生成一下文件
2018-06-21 14:43:51
136
原创 node.js访问静态文件
文件目录：server/Server.js server/index.htmlserver/Server.js//创建服务器let http=require('http');let url=require('url');let util=require('util') let fs=require('fs');let server=http.createServer((req,re...
2018-06-21 13:58:22
687
原创 node创建本地服务
//创建服务器let http=require('http');let server=http.createServer((req,res)=>{ res.statusCode=200; res.setHeader("Content-Type","text/plain;charset=utf-8"); res.end("Hello,Node.js"); })server.listen(300...
2018-06-20 14:37:26
320
原创 vue-lazyload懒加载
https://github.com/hilongjw/vue-lazyload1、安装npm install vue-lazyload2、引入并使用main.jsimport VueLazyload from 'vue-lazyload'//插件注册Vue.use(VueLazyload,{ loading:require('common/images/load.jpg') //未加载图片的默...
2018-06-20 08:55:43
585
原创 node
node模块加载方式：require技术框架：NodeJs/express(node.js Web应用框架)/Mongodb第三方模块&中间件 bodyParser:解析post请求数据cookies:读/写cookieswig:模板解析引擎mongoose:操作mongodb数据markdown:markdown语法解析生成模块项目结构分析目录结构db:数据库存储目录moudels :数...
2018-06-19 16:08:27
198
原创 vue路由
一、动态路由（routert-link）模式：/user/:username路由匹配/user/evan$route.params{username:'evan'}二、嵌套路由（路由嵌套路由）（routert-link）不用刷新页面，局部切换 三、编程式路由:通过js来实现页面的跳转$router.push('name')$router.push({path:"name"})$router.pus...
2018-06-14 15:54:19
242
原创 node.js+MongoDB+vue.js
后端:Node+Express数据库:MongoDB前端Vue.js--MVVM工具支持 vue-cli webpack(打包上线) vue核心思想：数据驱动、组件化
2018-06-14 10:06:10
286
转载 requestAnimationFrame
图像在屏幕上更新的速度，也即屏幕上的图像每秒钟出现的次数，它的单位是赫兹(Hz)。 对于一般笔记本电脑，这个频率大概是60Hz， 可以在桌面上右键->屏幕分辨率->高级设置->监视器 中查看和设置。这个值的设定受屏幕分辨率、屏幕尺寸和显卡的影响，原则上设置成让眼睛看着舒适的值都行。setTimeout 其实就是通过设置一个间隔时间来不断的改变图像的位置，从而达到动画效果的。但我们...
2018-06-08 16:14:31
1673
原创 华为 G9浏览器点击不能下载APP
wap页点击下载APP在华为G9浏览器不能下载刚开始以为是windows.href不能用，测试发现是内核问题使用navigator.userAgent.toLowerCase()获取浏览器内核信息ios显示安卓显示华为 G9显示原始代码$('.download').click(function(){ var ua = navigator.userAgent.toLowerCase(); if ...
2018-06-08 15:15:41
2139
转载 vue本地环境接口地址与线上环境接口地址来回切换
我们在开发项目的时候，往往会在同一个局域网进行开发，前后端分离同时进行开发。我们前端调用后端给的接口也是在局域网内部的。但是，当项目推到线上的时候，我们会从真实服务器上获取接口，因此，我们可能在测试接口和真实接口之间频繁切换1.找到文件/config/dev.env.js/config/prod.env.js2、修改文件a、dev.env.js'use strict'const merge = ...
2018-06-08 11:23:41
8808
原创 移动端个别安装手机图片上传旋转90度 exif.js控制
做微信wap页项目的时候，遇到小米6拍照上传图片旋转的问题，后来查找资料得到Orientation，进行判断并运用canvas把图片旋转后再上传解决了问题exif.js读取图像的元数据https://www.cnblogs.com/niuboren/archive/2016/09/19/5883796.html<script>EXIF.getData(file, function()...
2018-06-06 20:11:01
2005
转载 JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
1、使用mobile-detect.js2、html<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" c
2018-06-06 18:46:14
20580
原创 canvas--二进制转换问题
var img = new Image(); img.src = canvas.toDataURL("image/jpeg", 0.8); //转换为图片形式 打印出二进制数据rotateimg= convertBase64UrlToBlob(img.src); //打印Bob对象 可用于图片上传function convertBase64UrlToBlob(urlData){ ...
2018-06-05 20:22:58
3712
原创 小程序--表单一次性获取值并提交
1、.wxml<view><form bindsubmit="formSubmit" bindreset="formReset"> <view class="container"> <checkbox-group bindchange="checkboxChange" name="checkbox-g
2018-05-31 13:05:48
2865
原创 小程序--获取输入框的信息
onBindBlur: function (event){ var text = event.detail.value; //获取属于框输入的文字}
2018-05-31 10:58:51
323
原创 小程序--上滑加载更多数据/下拉刷新
wxml;<import src="../movie/movie-template.wxml" /><template name="movieGridTemplate"> <scroll-view class="grid-container" scroll-y="true" scroll-x="false" bindscrolltol
2018-05-30 11:05:59
3535
原创 小程序--动态修改导航栏
Page({ data: { navigateTitle: "", //设置中间变量 把onload中的获取到的标题函数传入到onReady中使用 }, onLoad: function (options) { var category = options.category;//获取url传递的参数 this.data.navigateTitle = c...
2018-05-29 15:43:06
1989
原创 小程序--引用外部js方法
1、外部文件 /util/util.jsfunction convertToStarsArray(stars) { //把星级存到数组中 var num = stars.toString().substring(0, 1); var array = []; for (var i = 1; i <= 5; i++) { if (i <= num) { ...
2018-05-29 14:35:23
11377
原创 小程序访问--接口数据问题（未配置appid）
1、访问本地配置的接口设置-项目设置-不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书2、访问豆瓣403https//douban.com/v2/movie/top250改为http://t.yushu.im/v2/movie/top250...
2018-05-28 10:33:38
5249
4
原创 头部标题左侧标题跟随内容区域固定滑动$(selector).scrollTop(offset)--$(selector).scrollLeft(offset)
参考：https://blog.csdn.net/q3585914/article/details/69946478<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>*{ padding: 0
2018-05-25 11:19:30
622
原创 小程序--template多层嵌套
template:wxml:stars-movie-movie-liststars-template.wxml<template name="starsTemplate"> <view class="stars-container"> <view class="stars"> <image src='/images/ico
2018-05-24 16:58:07
2430
1
原创 小程序--tabBar
tabBar若含有tabBar的页面不是首页 则首页设置wx.switchTab跳转wx.switchTab({ //跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 url: "../posts/post" });//所需要加入的tabBar的页面一定要加入数组中 "tabBar": { "borderStyle": "white", "pos...
2018-05-24 15:34:16
410
原创 小程序--全局变量（播放音乐）
1、app.jsApp({ globalData: { g_isPlayingMusic: false, g_currentMusicPostId: null }})2、post-detail.jsvar app=getApp(); var globalData = app.globalData;//获取
2018-05-24 13:31:23
3232
原创 小程序--判断显示不同图片的两种方式
1、src中<image class="audio" catchtap='onMusicTap' src="{{isPlayingMusic? '/images/music/music-stop.png': '/images/music/music-start.png'}}"></image>2、if-else<image catchtap='onCollection...
2018-05-24 11:06:35
6680
2
原创 小程序--缓存机制
var postsData = require('../../../data/posts-data.js');Page({ data: { }, onLoad: function (option) { var postId=option.id this.data.currentPostId = postId; var postData ...
2018-05-24 09:15:36
4411
原创 小程序--跳转详情页
注：凡是data-自定义值 的为自定义属性值必须是data开头：例 data-postd="{{item.postId}}"event.currentTarget.dataset 所有自定义属性的集合a、post.wxml//定义跳转事件 onTapdetail 定义传递的属性志data-postad<block wx:for="{{posts_key}}" wx:for-item="...
2018-05-23 18:41:03
7342
原创 小程序--template
1、新建.wxml .wxss2、编写<template name="postItem"> <view class='post-container'> <view class='post-author-date'> <image src='{{item.avatar}}'></image> <text&am
2018-05-23 16:40:55
183
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人