axios 使用
//api.js
import axios from 'axios'
//拦截器
axios.interceptors.response.use((response) => {
return response.data;
}, (error) => {
return Promise.reject(error);
});
let post = (url,params) =>{
return axios.post(url,{
source: 'h5',
userId: localStorage.getItem('userId'),//userId
sid:localStorage.getItem('sid'),//sid
data: params
});
}
let PASSPORTURL = 'http://XXXX-dev.bunny-tech.com:30010';
export default {
login(data){
return post(PASSPORTURL+'/v1/passport/login',data)
}
}
鼠标移入显示另外一个div，渐变动画。
用visibility: hidden;visibility: visible;
截图
//html
联系电话:132****1281
//css
.phone{
position: fixed;
width: 100px;
height: 100px;
background: #FFF;
border: 1px solid #DFDFDF;
z-index: 100;
top: 500px;
right: 10px;
box-sizing: border-box;
}
.phone:hover .phone-con{
transform: translateX(0);
visibility: visible;
opacity: 1;
}
.phone-con{
position: relative;
width: 110px;
height: 200px;
left: -110px;
transition: all .3s ease;
transform: translateX(-50px);
visibility: hidden;
opacity: 0;
}
.phone-in{
width: 100px;
height: 200px;
background: #000;
color: #FFF;
position: relative;
}
.phone-in:after{
position: absolute;
right:-20px;
top: 45px;
content:"";
width: 0;
height: 0;
border:10px solid transparent;
border-color: transparent transparent transparent #000;
}
前端js上传文件到oss
泪目先，折腾了大半年才发现原来可以做直接post上传文件，根本不需要
这玩意儿，因为这玩意儿难用难用难用。
import api from './api'
import axios from 'axios'
import uuid from 'uuid-js'
export default {
//上传图片 callback({code:200,result}) progressCallback(progress)
uploadFile(file,callback,progressCallback){
//截取图片后缀
var fileExt = file.name.split('.').pop();
//获取ossToken临时权限
api.getOssToken({}).then((res) => {
if(res.errorCode ==0){
//拼接osss上传的key
var key = res.data.dir + uuid.create(1).toString() +'.'+ fileExt;
//设置上行参数
var request = new FormData();
request.append('OSSAccessKeyId', res.data.accessid);
request.append('policy', res.data.policy);
request.append('Signature', res.data.signature);
request.append('key', key);
request.append('file', file);
request.append('success_action_status',200);//设置返回200 默认204
//设置form-data提交表单
var config = {
headers:{'Content-Type':'multipart/form-data'},
onUploadProgress:function(progressEvent){
var progress = parseInt(progressEvent.loaded/progressEvent.total * 100);
progressCallback && progressCallback(progress);
}
};
//拼接postUrl
var postUrl = 'https://' + res.data.bucket +'.'+ res.data.host.split('/').pop();
//post上传到oss
axios.post(postUrl,request,config).then((ossres) => {
if(ossres.status ==200){
//拼接cdn地址
var result = 'http://'+res.data.cdnUrl+'/'+key;
//上传成功
callback({code:200,result:result});
}else{
//上传失败
callback({code:101,message:'上传osss失败'});
}
});
}else{
//获取ossToken失败
callback({code:100,message:'获取ossToken失败'});
}
});
}
}
我相信肯定有很多前端的伙伴需要的。
vue-cli 2.8.2版本 npm run dev 不能用ip地址打开了。
找到/build/dev-server.js 85行(不出意外的话)
//var server = app.listen(port, 'localhost')
var server = app.listen(port)
就ok了。
官网解释是：如果不指定host，就会以默认host打开，这样不符合预期。好吧，如果你突然发现调试移动端页面的时候，打不开了，麻烦改下配置吧。
vue-cil打包css、js路径引入问题
//config/index.js
assetsPublicPath: './'
vue-cil打包关于css 中background 背景图片路径问题
添加配置
//buidl/utils.js 37行
ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../' //解决vue-cil css背景路径问题
})
Vue路由配置
vue-router:
要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。
//注意注意 子路由不要加 "/" 啊
{
path:'/media',
component:MediaHome,
children:[{
path:'',
name:'serverList',
component:PlanList
},{
path: 'newList',
name: 'newList',
component: IdeaList
}]
}
移动端视口
vue全家桶
vue文档： vue.js
https://vuefe.cn/
异步数据：vue-resource
https://github.com/pagekit/vue-resource
post请求注意
Vue.http.options.emulateJSON = true;
this.$http.post(api.newsAdvert,{type:'1'})
.then(function(res){
//成功操作
//this.isAjaxLoading = false;
this.banners = res.data.data;
},function(){
//网络出错啦
console.log('error');
})
路由： vue-router
http://router.vuejs.org/zh-cn/
main.配置路由
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
import Hello from './components/Hello'
import List from './components/List'
import Detail from './components/Detail'
Vue.use(VueRouter)
const router = new VueRouter({
mode: 'history',
base: __dirname,
routes:[
{ path: '/', component: Hello },
{ path: '/hello', component: Hello },
{ path: '/list', component: List },
{ path: '/detail/:id/:type', component: Detail }
]
})
/* eslint-disable no-new */
Vue.filter('sum',function(input){
var output = input;
output = input + 4;
return output;
})
new Vue({
router:router,
el: '#app',
template: 'App.vue文件
router-link组件
首页
//动态参数
{{item.name}}
移动端：Mint UI
http://mint-ui.github.io/#!/zh-cn
后台：element
http://element.eleme.io/#/zh-CN/component/installation
面板排版css
margin-right: -1px; margin-top: -1px;
03232AD8-6729-4021-B153-F19EFC53B3F2.png
.list ul{
width: 1000px;
height: auto;
}
.list ul li{
width: 251px;
height: 151px;
border: 1px solid #CCC;
float: left;
box-sizing: border-box;
margin-right: -1px;
margin-top: -1px;
transition: all .3s ease-in-out;
}
.5px方案
背景方案
div{
background-image: -webkit-linear-gradient(top, #d9d9d9, #d9d9d9 50%, transparent 50%);
background-image: linear-gradient(180deg, #d9d9d9, #d9d9d9 50%, transparent 50%);
background-size: 120% 1px;
background-repeat: no-repeat;
background-position: bottom left;
}
缩放方式
.line{
width: 100%;
height: 1px;
background: #DFDFDF;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
去除横向滚动条绝招，隐藏。
12323
微信小程序
获取offsetTop不能是有定位属性的dom元素。