望天一方-CSDN博客

原创关于ejs模板路径引用以及上传文件，图片的问题

ejs的静态资源都是来自于文件夹public！！！因为无论ejs怎么写路径，加载的时候都是以host：port/ avatar/ name.jpg . 而此路径默认加载的是public的avatar文件夹、所以，提交文件到服务器的时候，直接指定文件夹为public中的子文件夹(/avatar)，之后再ejs模板中直接用 ./ avatar 即可。// 处理上传头像exports.doSet...

2019-01-12 21:20:34 2571

原创 mongodb 的使用以及出现db.collection is not a function报错

当出现db.collection is not a function报错时，原因是mongo版本升级为3.0以后api发生变化。3.0：回调函数返回的是访问对象的父对象。所以要let db = client.db(‘forum’);之后再访问数据库对象：db.collection(‘forum’)// 建立数据库var MongoClient = require('mongodb')...

2019-01-05 20:11:31 5468

原创 node.js 权威指南1——tcp客户端与tcp服务器端的创建

Buffer对象：存放二进制数据的缓存区创建：var buf = new Buffer()初始化：buf.fill(value, [offset], [end])Buffer对象转化为字符串格式：buf.toString(‘utf8’)向已创建的Buffer对象写入字符串：buf.write(string, [offset], [length], [encoding])Buffer对象与...

2018-12-13 22:36:21 249

原创 jquery 插件的编写

jauery插件主要分三类：封装对象方法的插件，全局对象的插件，选择器插件所有的对象方法都应放在 jQuery.fn 上，全局对象应该放在jQuery上，插件中的this指的是通过jq方法获得jq对象，而不是dom对象通过this.each遍历所有元素所有插件应以分号结尾，最好在开头也用分号隔开。防止压缩的时候出现格式问题插件应该返回一个jq对象，以便于链式链接。除非返回的是一个字符串，...

2018-11-19 22:57:50 127

原创 jquery基础锋利的jquery

jq对象 -&gt; DOM对象： [index] / get(index)DOM对象 -&gt; jq对象： $() 封装 DOM选择器使用jq获取HTML中不存在的元素都是，不会报错，所以不能以此作为判定条件基本选择器$(#id. class element)层次选择器$(“a b”) a元素的所有b后代元素$(“a &gt; b”) a元素中的所有子元素b$(“prev ...

2018-11-16 22:16:17 185

原创 JS高程

cookie:客户永久性或者暂时性储存的少量状态数据。cookie随着网页被服务器发送给客户，客户在本地将他们储存起来。以后当客户请求统一网页或者与之相关的网页时，他可以把相关的cookie传回服务器，服务器能够利用这些cookie的值来改变发送回客户的内容。 cookie使网页或者网站能够记住有关客户的一些信息。全局变量：全局对象在js解析开始的时候，在执行任何js代码前，创建一个全局对...

2018-10-06 19:37:47 219

原创 ES6 标准入门

let const命令不存在变量提升，var 可以提升暂时性死区（TDZ）：在区块中存在let，const命令，这些区块在一开始就对这些命令声明的变量形成封闭作用域，只要在声明之前使用这些变量就会报错。在let const声明变量之前，该变量不能使用。不允许重复声明块级作用域外层作用域无法调用块级作用域内部定义的变量，函数内层作用域可以定义外层作用域的同名变量变量结构赋值...

2018-10-04 23:02:14 303

原创 canvas

canvas 只能在标签中用width。heigth修改大小基本方法：先得到canvas：let canvas = document.querySelector('#canvas') // 得到canvaslet gd = canvas.getContext('2d')//得到canvas上下文环境gd.moveTo(a,b): 从一个点开始绘图gd.lineTo(c,d):绘图终...

2018-09-20 17:12:45 4458

原创 mysql数据库的初步使用以及websocket.io搭建聊天室

mysql数据库下载后先在文件夹下新建my.ini配置文件，可以去网上搜一下。新建一个data空文件夹 cmd 运行管理员模式，打开进入bin下，mysqld –initialize -console 会对数据库进行初始化，并能得到一个随机密码（8.0版本）之后运行命令行 mysqld –install 安装 net start mysql 运行数据库 mysql -u ro...

2018-09-16 10:45:28 830

原创 node.js 基础原生内容

node.js好处：事件驱动，无堵塞i/o模型，轻量高效基于V8引擎，与前台配很更好建立一个基本服务器const http = require('http')const fs = require('fs')const server = http.createServer((req, res) =&gt; { fs.readFile(`www${re...

2018-09-13 19:46:08 146

原创 http数据通讯

http协议： 1. 无状态协议，服务器不会记住客服端 2. 链接-接受（拒绝）-再发送请求【三次握手】 3. 消息分两块，头header（&amp;lt;=32kb）,体body（&amp;lt;=2gb） https: 更加安全，需要公钥私钥 http 1.0: 短连接 http2.0：长连接-keep aliveform表单： ajax，js...

2018-09-11 18:19:51 383

原创 vue-music（21）在播放控件中删除一首和全部删除

通过actions去改变歌曲的currentIndex，playlist和sequencelistexport const deleteSong = function ({commit, state}, song) { let playList = state.playList.slice() // 创建数组副本，而不用改动原数组 let sequenceList = state....

2018-09-07 20:42:32 517

原创 vue-music（20）点击播放及当前博凡歌曲在列表中的显示的实现

给当前播放的歌曲添加一个class<i class="current" :class="getActivatyCls(item)"></i>getActivatyCls (item) { if (this.currentSong.id === item.id) { // 当前播放是选中的歌曲 return 'icon-play' //...

2018-09-07 20:36:39 905

原创 vue-music（19）mixin的使用及di底部scroll刷新的实现

当多个组件都用到共同的一些js代码时候，可以吧这些代码抽象出来，放在mixin中，用到的时候引用export const playlistMixin = { computed: { ...mapGetters([ 'playList' ]) }, mounted () { // 渲染完毕后触发 this.handlePlayList(this...

2018-09-07 20:26:25 154

原创 vue-music（18）取消和确定弹窗蒙层的设置

首先，要写一个弹窗的confirm组件：<template> <transition name="confirm-fade"> <div class="confirm"> <div class="confirm-wrapper"> <div class="confir

2018-09-07 20:17:36 705

转载 vue-music（17）删除一条历史记录和全部记录

这里的删除需要改变两部分 1：state里的数据 2：localStorage的数据所以还需要在cache里面封装方法// 下面是deleteSearchOne的实现export function deleteSearch (query) { let searches = storage.get(SEARCH_KEY, []) // 上面查看当前存储空间的情况，如果没...

2018-09-07 20:08:27 2765

原创 vue-music（17）搜索历史的保存

state创建一个数组存放：searchHistory: []然后是mutation和typesexport const SET_SEARCH_HISTORY = 'SET_SEARCH_HISTORY' [types.SET_SEARCH_HISTORY] (state, history) { // history接收一个数组 state.searchHis...

2018-09-07 19:43:37 337

原创 vur-music（16）search组件

searc页面有一个搜索框search-box&lt;template&gt; &lt;div class="search-box"&gt; &lt;i class="icon-search"&gt;&lt;/i&gt; &lt;input type=&quo

2018-09-06 22:44:59 286

原创 vue-music（15）歌词的处理

歌词被referer（）保护，所以要景后端反向代理取得数据。得到的数据是格式不正确，不是一般的json格式，所以经过正则变换一下 var ret = response.data // 歌词数据 if (typeof ret === 'string') { var reg = /^\w+$({[^()]+})$$/ ...

2018-09-06 19:52:23 1634

原创 vue-music(14）随机播放的设置

改变播放模式：到这里就实现点击切换图标了。因为原来就有一个播放列表（顺序播放列表），只是在此列表基础上进行随机播放，所以创建一个新list，用shuffle函数打乱顺序播放列表并返回一个新的随机列表，记住要重新提交到mutations中改变store里面的playList的方法。let list = null if (mode === playMode....

2018-09-06 19:32:11 853

原创 vue-music（13）进度条的实现

<template>  <div class="progress-bar" ref="progressBar" @click="progressClick"> <div class="bar-inner"> <!-- 进度条已播放长

2018-09-06 19:18:23 1308

原创 vue-music (12) 播放内核

最重要的就是这个播放器播放页面从整体来看，点击list列表的歌曲会储存到vuex中，然后进入play页面，首先给进入来一个动画1.手写动画的模板<transition name="normal" @enter="enter" @after-enter="afterEnter" @leave="leave" @after-leave="afterLeave">这是

2018-09-05 22:10:32 433

原创 vue-music(11) 不同浏览器前缀函数的封装

因为有不同浏览器，所以许多属性要做跨浏览器使用，故而要加私有前缀。此处封装一个函数，进行统一设置let elementStyles = doument.createElement('div').style // 创建一个div并获得其stylelet vendor = (() =&gt; { // 立即执行函数 let transformName = { web...

2018-09-05 16:01:53 144

原创 vue-music（10）music-list组件

<template> <div class="music-list"> <div class="back" @click="back"> <i class="icon-back"></i> </div> <h1

2018-09-04 23:02:46 587

原创 vue-music (9) vuex 的初始化及应用注意事项

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。2. 你不能直接改变 store 中的状态。改变 st...

2018-09-04 21:06:02 379

原创 vue-music(8) list组件和list组件中的快速入口bar的联动

list组件整体式一个大Scroll组件，点击每个歌手，进入歌手页面，此处用到的是二级路由二级路由<li @click="selectItem(item)" v-for="item in group.items" :key="item.id" class="list-group-item">添加点击事件selectItem (item) { ...

2018-09-04 20:29:10 278

原创 vue-music (7) 对歌手信息的再整理

从QQ音乐返回的数据不是我们想要的，所以要对res.data.list进行在加工，以便于dom操作_getSingerList () { getSingerList().then((res) => { if (res.code === ERR_OK) { this.singer = res.data // 得到的数据不是object类型 ...

2018-09-03 22:18:15 258

原创 vue-music (6) 图片懒加载的使用

npm install vue-lazyload --save 在main.js 中引用import lazyLoad from 'vue-lazyload'Vue.use(lazyLoad, { loading: require('图片路径如 common/image/default.png')})使用：<img v-lazy="图片路径">&l...

2018-09-03 21:19:54 107

原创 vue-music (5) scroll组件的封装

在项目中经常用的组件<template> <div ref="scroll-wrapper"> // Betterscroll 只对于第一个组件有效，所以要交一个父容器包裹 <slot> </solt> // 插槽 </div></template><script

2018-09-03 20:26:39 203

原创 vue-music (4) 对有refrere和host保护的数据的抓取

利用axios方法 axios axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求支持 Promise API 拦截请求和响应转换请求和响应数据取消请求自动转换JSON数据客户端支持防止 CSRF/XSRF1.axios...

2018-09-02 22:49:24 345

原创 vue-music (3) 轮播图

抽象出一个轮播图组件slider&amp;lt;div class=&quot;slider&quot; ref=&quot;slider&quot;&amp;gt; &amp;lt;div class=&quot;slider-group&quot; ref=&quot;sliderGroup&quot;&a

2018-09-02 20:49:33 277

原创 vue-music (2) jsonp 及jsonp第三方插件的使用

jsonp 发送的不是ajax，而是script标签，因为script不受同源策略影响，里面的src指向服务端地址，地址后跟着一个参数：callback 前端在发送请求之前在windows注册一个jsonp1事件，请求的数据包裹在jsonp1中，在调用jsonp1的数据渲染dom等。使用第三方插件： jsonpimport OrignJsonp from 'jsonp'expor...

2018-09-02 17:07:12 791

望天一方小叶子的博客