node

node

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
javascript/jQuery

javascript/jQuery

一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。
MongoDB

MongoDB

MongoDB 是一个基于分布式文件存储的数据库
openstack

openstack

OpenStack是一个由NASA(美国国家航空航天局)和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目。
VUE

VUE

一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。
bootstrap

bootstrap

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
HTML

HTML

超文本标记语言,标准通用标记语言下的一个应用。
CSS/SASS/SCSS/Less

CSS/SASS/SCSS/Less

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
PHP

PHP

PHP(外文名:PHP: Hypertext Preprocessor,中文名:“超文本预处理器”)是一种通用开源脚本语言。语法吸收了C语言、Java和Perl的特点,利于学习,使用广泛,主要适用于Web开发领域。PHP 独特的语法混合了C、Java、Perl以及PHP自创的语法。它可以比CGI或者Perl更快速地执行动态网页。用PHP做出的动态页面与其他的编程语言相比,PHP是将程序嵌入到HTML(标准通用标记语言下的一个应用)文档中去执行,执行效率比完全生成HTML标记的CGI要高许多;PHP还可以执
每天进步一点点

每天进步一点点

乌法把门的各累笑寂静
求职招聘

求职招聘

猎头招聘专用栏目
Python

Python

一种解释型、面向对象、动态数据类型的高级程序设计语言。

vue 注册共用filter

lopo1983 发表了文章 • 0 个评论 • 615 次浏览 • 2017-04-28 16:43 • 来自相关话题

import filters from './utils/filters'Object.keys(filters).forEach(k => Vue.filter(k, filters[k]))
import filters from './utils/filters'
Object.keys(filters).forEach(k => Vue.filter(k, filters[k]))

百度BOS 上传 Vue 2.x封装

lopo1983 发表了文章 • 0 个评论 • 836 次浏览 • 2017-04-19 18:28 • 来自相关话题

template
<div class="fileup">
<input type="file" ref="fileup" multiple="multiple" class="hide" name="fileUp" :id="rdid" @change="onFileChange" />
<label class="btn btn-ces" :for="rdid"><span class="iconfont icon-add"></span>选择文件</label>
<span>{{infomsg}}</span>
<div class="fileup-area" v-show="files.length">
<div class="col-md-2 files" v-for="(item,index) in files">
<div class="thumbnail">
<div class="thumbnail-object" :style="{'background-image':`url(${item.src})`}">
<a class="ctr-bar" @click="delFile(index,item.key,item.status)">
<span class="iconfont icon-del"></span>
</a>
</div>
<div class="caption">
<p class="name">{{item.name}}</p>
<span class="iconfont icon-zhengque text-success" v-if="item.status==2"></span>
<bsf-progress :state="item.progress" v-if="item.progress<100"></bsf-progress>
</div>
</div>
</div>
</div>
<p class="btn-mix" v-if="files.length>0">
<a class="btn btn-ces" @click="sendFile">提交</a>
<a class="btn btn-default" @click="clearFile">取消</a>
</p>
</div>
javascript
import bos from '@/assets/js/bce-sdk-js/baidubce-sdk.bundle'
import lib from "@/assets/js/lib"
import bsfProgress from '@/components/comp/progress'
import { bosConfig, bucket } from '@/config/bos'
let client = new baidubce.sdk.BosClient(bosConfig);
export default {
name: "bosupt",
components: {
bsfProgress
},
props: {
maxlength: {
type: Number,
default: 3
},
maxSize: {
type: Number,
default: 50000
}
},
data() {
return {
files: [],
infomsg:""
}
},
computed: {
rdid() {
return "up" + Math.ceil(Math.random() * 1000, 3);
}
},
methods: {
onFileChange(evt) {
let files = evt.target.files;
let _this = this;
if(files.length) {
for(let i = 0, len = files.length; i < len; i++) {
let file = files[i];
let fcobj = {
type: file.name.substring(file.name.lastIndexOf('.')).toLowerCase(),
key: lib.randomStr(false, 5)
};
let o = {
file: file, // File 对象
status: 0, // 0:未上传 1:正在上传:2上传成功 3:上传失败
progress: 0, // 上传进度
type: fcobj.type,
key: fcobj.key,
name: file.name,
size: file.size,
path: "http://" + bucket + ".bj.bcebos.com/" + fcobj.key + fcobj.type
};
let reader = new FileReader()
reader.readAsDataURL(file);
reader.onload = (e) => {
o.src = e.target.result // base64 可以作为判断是不是存在相同文件
if(this.files.findIndex(f => f.src == o.src) > -1) {
return false
}
if(o.size <= _this.maxSize) {
this.files.push(o)
} else {
this.infomsg="图片太大了哦"
return false
}
};
};
}
Array.from(this.files).slice(0, this.maxlength)
},
delFile(index, key, status) {
if(status == 2) {
client.deleteObject(bucket, key).then(e => {
e && this.files.splice(index, 1);
}).catch(e => {
console.log(e)
})
} else {
this.files.splice(index, 1);
}
},
clearFile() {
let files = this.files;
this.files = [];
let ar = []
this.$refs.fileup.value = "";
this.$emit('clearfile', ar)
},
sendFile() {
this.files.forEach(o => {
if(o.status == 0) {
let file = o.file
let blob = file;
let keytext = o.type;
let key = o.key + keytext;
const ext = key.split(/\./g).pop();
let mimeType = baidubce.sdk.MimeType.guess(ext);
if(/^text\//.test(mimeType)) {
mimeType += '; charset=UTF-8';
}
let options = {
'Content-Type': mimeType
};
client.putObjectFromBlob(bucket, key, blob, options)
.then(function(res) {})
.catch(function(err) {
console.error(err);
});
client.on('progress', function(evt) {
if(evt.lengthComputable) {
o.progress = (evt.loaded / evt.total) * 100;
o.status = 2;
}
});
}
});
let ar = []
this.files.forEach(e => {
ar.push(e.path)
});
this.$emit('sendfile', ar)
}
},
mounted: function() {
this.$nextTick(function() {

})
}
}
BOS 配置
bos.js
const bosConfig = {
credentials: {
ak: '',
sk: ''
},
endpoint: 'http://bj.bcebos.com'
}
const bucket = 'bucket名称';
export{bosConfig,bucket}
感谢戏子大爷 查看全部
template
<div class="fileup">
<input type="file" ref="fileup" multiple="multiple" class="hide" name="fileUp" :id="rdid" @change="onFileChange" />
<label class="btn btn-ces" :for="rdid"><span class="iconfont icon-add"></span>选择文件</label>
<span>{{infomsg}}</span>
<div class="fileup-area" v-show="files.length">
<div class="col-md-2 files" v-for="(item,index) in files">
<div class="thumbnail">
<div class="thumbnail-object" :style="{'background-image':`url(${item.src})`}">
<a class="ctr-bar" @click="delFile(index,item.key,item.status)">
<span class="iconfont icon-del"></span>
</a>
</div>
<div class="caption">
<p class="name">{{item.name}}</p>
<span class="iconfont icon-zhengque text-success" v-if="item.status==2"></span>
<bsf-progress :state="item.progress" v-if="item.progress<100"></bsf-progress>
</div>
</div>
</div>
</div>
<p class="btn-mix" v-if="files.length>0">
<a class="btn btn-ces" @click="sendFile">提交</a>
<a class="btn btn-default" @click="clearFile">取消</a>
</p>
</div>

javascript
import bos from '@/assets/js/bce-sdk-js/baidubce-sdk.bundle'
import lib from "@/assets/js/lib"
import bsfProgress from '@/components/comp/progress'
import { bosConfig, bucket } from '@/config/bos'
let client = new baidubce.sdk.BosClient(bosConfig);
export default {
name: "bosupt",
components: {
bsfProgress
},
props: {
maxlength: {
type: Number,
default: 3
},
maxSize: {
type: Number,
default: 50000
}
},
data() {
return {
files: [],
infomsg:""
}
},
computed: {
rdid() {
return "up" + Math.ceil(Math.random() * 1000, 3);
}
},
methods: {
onFileChange(evt) {
let files = evt.target.files;
let _this = this;
if(files.length) {
for(let i = 0, len = files.length; i < len; i++) {
let file = files[i];
let fcobj = {
type: file.name.substring(file.name.lastIndexOf('.')).toLowerCase(),
key: lib.randomStr(false, 5)
};
let o = {
file: file, // File 对象
status: 0, // 0:未上传 1:正在上传:2上传成功 3:上传失败
progress: 0, // 上传进度
type: fcobj.type,
key: fcobj.key,
name: file.name,
size: file.size,
path: "http://" + bucket + ".bj.bcebos.com/" + fcobj.key + fcobj.type
};
let reader = new FileReader()
reader.readAsDataURL(file);
reader.onload = (e) => {
o.src = e.target.result // base64 可以作为判断是不是存在相同文件
if(this.files.findIndex(f => f.src == o.src) > -1) {
return false
}
if(o.size <= _this.maxSize) {
this.files.push(o)
} else {
this.infomsg="图片太大了哦"
return false
}
};
};
}
Array.from(this.files).slice(0, this.maxlength)
},
delFile(index, key, status) {
if(status == 2) {
client.deleteObject(bucket, key).then(e => {
e && this.files.splice(index, 1);
}).catch(e => {
console.log(e)
})
} else {
this.files.splice(index, 1);
}
},
clearFile() {
let files = this.files;
this.files = [];
let ar = []
this.$refs.fileup.value = "";
this.$emit('clearfile', ar)
},
sendFile() {
this.files.forEach(o => {
if(o.status == 0) {
let file = o.file
let blob = file;
let keytext = o.type;
let key = o.key + keytext;
const ext = key.split(/\./g).pop();
let mimeType = baidubce.sdk.MimeType.guess(ext);
if(/^text\//.test(mimeType)) {
mimeType += '; charset=UTF-8';
}
let options = {
'Content-Type': mimeType
};
client.putObjectFromBlob(bucket, key, blob, options)
.then(function(res) {})
.catch(function(err) {
console.error(err);
});
client.on('progress', function(evt) {
if(evt.lengthComputable) {
o.progress = (evt.loaded / evt.total) * 100;
o.status = 2;
}
});
}
});
let ar = []
this.files.forEach(e => {
ar.push(e.path)
});
this.$emit('sendfile', ar)
}
},
mounted: function() {
this.$nextTick(function() {

})
}
}

BOS 配置
bos.js
const bosConfig = {
credentials: {
ak: '',
sk: ''
},
endpoint: 'http://bj.bcebos.com'
}
const bucket = 'bucket名称';
export{bosConfig,bucket}

感谢戏子大爷

vue-cli打包

lopo1983 发表了文章 • 0 个评论 • 854 次浏览 • 2017-04-15 17:00 • 来自相关话题

1.要是项目直接放网站根目录 直接npm run build2.放到指定目录
? 修改:config/index.jsbuild: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/XXX/', // 项目发布的目录
...
},3.放任意目录
? 修改:config/index.jsbuild: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
...
},4.修改js/css打包名称
build/webpack.prod.conf.js output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[hash].js'),
chunkFilename: utils.assetsPath('js/[id].[hash].js')
},
[name]:名称
[id]:懒加载编号
[hash] 随机码(项目正式上线可删除) new ExtractTextPlugin({
filename: utils.assetsPath('css/[name][hash].css')
}),name:名称
hash 随机码 查看全部
1.要是项目直接放网站根目录 直接
npm run build
2.放到指定目录
? 修改:config/index.js
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/XXX/', // 项目发布的目录
...
},
3.放任意目录
? 修改:config/index.js
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
...
},
4.修改js/css打包名称
build/webpack.prod.conf.js
  output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[hash].js'),
chunkFilename: utils.assetsPath('js/[id].[hash].js')
},
[name]:名称
[id]:懒加载编号
[hash] 随机码(项目正式上线可删除)
    new ExtractTextPlugin({
filename: utils.assetsPath('css/[name][hash].css')
}),
name:名称
hash 随机码

VUE 开发环境搭建

lopo1983 发表了文章 • 0 个评论 • 990 次浏览 • 2017-04-15 16:05 • 来自相关话题

安装Node.js
.......忽略点点 自己百度?
安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org 安装vue-cil
cnpm install -g vue-cli 切换到你的项目目录如www
cd www新建vue项目
vue init webpack demo01 一路回车(第4步ESLint 可以一路n,大师请忽略n)
?
进入新建项目
cd demo01 cnpm?install?

npm run dev
?
? 查看全部
安装Node.js
.......忽略点点 自己百度
?
安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org 
安装vue-cil
cnpm install -g vue-cli  
切换到你的项目目录如www
cd www
新建vue项目
vue init webpack demo01 
一路回车(第4步ESLint 可以一路n,大师请忽略n)
?
进入新建项目
cd demo01 
cnpm?install?

npm run dev

?
?

vue 滚动到底部

lopo1983 发表了文章 • 0 个评论 • 1481 次浏览 • 2017-04-13 03:04 • 来自相关话题

template<div class="mix" ref="chatbox">....</div>
datadata() {
return {
userMsg:
}
}
?
?
methodsgoBottom(e) {
e.scrollTop = e.scrollHeight
}mounted(如果需要进入就滚动)mounted: function() {
this.$nextTick(function() {
let e = this.$refs.chatbox;
this.goBottom(e);
})
}
watch(如果响应)watch: {
userMsg() {
this.$nextTick(() => {
let e = this.$refs.chatbox;
this.goBottom(e);
})
}
}?
?
<-------------------------------------------------邪恶分割线------------------------------------------------>
?
?
以上的代码完全可忽略 因为出现了 邪恶分割线
?
CSS3 FLEX 布局解决display: flex;
flex-flow: column-reverse;
align-items: baseline; 查看全部
template
<div class="mix" ref="chatbox">....</div>

data
data() {
return {
userMsg:
}
}

?
?
methods
goBottom(e) {
e.scrollTop = e.scrollHeight
}
mounted(如果需要进入就滚动)
mounted: function() {
this.$nextTick(function() {
let e = this.$refs.chatbox;
this.goBottom(e);
})
}

watch(如果响应)
watch: {
userMsg() {
this.$nextTick(() => {
let e = this.$refs.chatbox;
this.goBottom(e);
})
}
}
?
?
<-------------------------------------------------邪恶分割线------------------------------------------------>
?
?
以上的代码完全可忽略 因为出现了 邪恶分割线
?
CSS3 FLEX 布局解决
display: flex;
flex-flow: column-reverse;
align-items: baseline;

vue multiple type="file" 多文件上传

lopo1983 发表了文章 • 0 个评论 • 765 次浏览 • 2017-04-13 02:56 • 来自相关话题

template<input class="hide" multiple type="file" name="fileup" id="upfile" accept="application/x-zip-compressed" value="" @change="onFileChange" multiple="multiple" />
<label class="btn btn-default" for="upfile">选择文件</label>?
methodsonFileChange(e) {
const files = e.target.files || e.dataTransfer.files;
let a =
Array.from(files, item => {
a.push({
name: item.name,
type: item.name.split('.')[1]
})
});
this.arrfile = a;
}
发送(使用axios FormData)addChat(oid, def) {
let data = new FormData(def);
data.append('uid', window.USER_ID);
data.append('oid', oid);
data.append('guest',true)
return fetch('chat', data);
}sendChat() {
let def = this.$refs.chatform;
api.addChat(this.getOid, def).then(response => {
if(!!response) {
this.getChat()
} else {
alert("非法操作")
}
}), response => {
this.loading = false;
this.errorinfo = "加载失败....服务器出小差了"
}
}
? 查看全部
template
<input class="hide" multiple type="file" name="fileup" id="upfile" accept="application/x-zip-compressed" value="" @change="onFileChange" multiple="multiple" />
<label class="btn btn-default" for="upfile">选择文件</label>
?
methods
onFileChange(e) {
const files = e.target.files || e.dataTransfer.files;
let a =
Array.from(files, item => {
a.push({
name: item.name,
type: item.name.split('.')[1]
})
});
this.arrfile = a;
}

发送(使用axios FormData)
addChat(oid, def) {
let data = new FormData(def);
data.append('uid', window.USER_ID);
data.append('oid', oid);
data.append('guest',true)
return fetch('chat', data);
}
sendChat() {
let def = this.$refs.chatform;
api.addChat(this.getOid, def).then(response => {
if(!!response) {
this.getChat()
} else {
alert("非法操作")
}
}), response => {
this.loading = false;
this.errorinfo = "加载失败....服务器出小差了"
}
}

?

简约至上 关于前端的交互设计

lopo1983 发表了文章 • 2 个评论 • 635 次浏览 • 2016-05-31 12:19 • 来自相关话题

占位
占位