分类 前端 下的文章

下载.jpg

我们可以通过jsonp跨域来获取qq音乐的数据,所以我们需要安装jsonp的插件

npm install jsonp --save

然后我们进行jsonp的封装,首先我们写jsonp.js放在common目录下,在这个文件中我们要写封装的jsonp

import originJSONP from 'jsonp'

export default function jsonp(url,data,option){

    url+=(url.indexOf('?') < 0 ? '?' : '&') + param(data);
    return new Promise((resolve,reject)=>{
    //调用jsonp
    originJSONP(url,option,(err,data)=>{
    if(!err){
        resolve(data)
    }else{
        reject(err)
        }
    })
})

}

export function param(data){

    let url='';
    //循环data
    for(var i in data){
        //如果data值不等于undefined 就把值附给value,否则把空字符串传递给value
        let value= data[i] !== undefined ? data[i] : '';
        //拼接
        url+=`&${i}=${encodeURIComponent(value)}`;
    }
        return url ? url.substring(1) : ''
}    

我们的jsonp分为2种部分,一种是url接口,一种是参数,才能发送正确的请求。

那么我们在param这个方法中主要做一个参数循环的作用,这里把具体的参数转换为url编码附给了拼接url,然后返回一个url作为jsonp函数用

传入的url参数我们拼接data参数,然后通过Promise来调用我们的jsonp的库

然后我们在api下新建一个js文件,是存放我们的推荐页面抓取数据的js

然后在这页面进行数据传输

值得注意的是我们定义url的参数的时候,有很多可重复的参数,比如说编码和option jsonpcallback等等,所以我们将这些公共的数据抽取出来放在config.js中

export const commonParams = {

    g_tk:5381,
    inCharset : 'utf-8',
    outCharset : 'utf-8',
    notice : 0,
    format : 'jsonp'

}

    //jsonp需要的option
    export const options = {
        param : "jsonpCallback"
    }

//错误异常的语义化常量

export const ERR_OK = 0;

在抓取的json中,如果为0就是抓取成功,所以定义的语义化常量是0

然后我们到推荐页面的apijs中去调用方法

//导入jsonp
import jsonp from 'common/js/jsonp'
//读取公共配置
import {commonParams,options} from 'api/config'

export function getrecommend(){

//定义url接口
const url='https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'
//拼接url后的参数,用es6的语法assign塞进去
const data=Object.assign({},commonParams,{
platform: 'h5',
uin : 0,
needNewCode : 1
})
return jsonp(url,data,options);

}

一切都是那么简单,之所以我第一次写的时候很懵逼,等到整理笔记的时候才发现原来是这样,所以要适应这样的封装环境,很不错nice

然后我们去组件中调用

created(){
//加载执行方法
this._getData();
},
methods:{
_getData(){
getrecommend().then((val) => {
if(val.code===ERR_OK){
this.recommend=val.data.slider;
}
})
}
}

这样就调用成功了!!

然后我们把它遍历出来即可。

下载.jpg

在进行准备工作之前,我认为从这次的项目开始将挑选非常精致的代码来分享自己的笔记,让自己能够时时刻刻的复习知识

首先我们进行cli快速构建项目,这次项目依旧是一个移动wap页面,是做一个音乐app,所以我们将引入我们所需要的东西。

首先我们必须引入的fastclick,还有我们的css编译器,stylus和其驱动加载器

还有

"babel-polyfill": "^6.26.0",
"babel-runtime": "^6.26.0",

安装成功后我们将骨架进行分析整理

首先我们看一下我们的目录

api //存放一些和数据相关的接口js
assets
base //存放一些封装的组件
common //存放一些css和js的资源
components
router
store //vuex存放的仓库

然后我们这次项目定义的css比较多,一些公用的样式库我们都选择用styl来存储

然后我们的准备工作都完毕了

u=4055771136,79106349&fm=27&gp=0.jpg大家好,已经很久没有给大家发布文章了,因为最近在学习很多新东西,已经保存到自己的印象笔记,所以后续会持续给大家
补更的,因为明天就开学了,今天晚上就用jquery写了一个小小的下拉菜单的demo。

知识点:

jquery的siblings():取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

大白话就是:拿到非当前对象的所有对象

还有一个查找的方法是children:取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

大白话就是:拿到当前对象下的某某子元素

demo:案例代码:

<!DOCTYPE html>

<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.0.0.js"></script>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .nav{
        width: 300px;
        list-style: none;
        margin: 100px auto;
    }
    .nav>li{
        border: 1px solid #000;
        line-height: 35px;
        border-bottom: none;
        text-indent: 2em;
    }
    .nav>li:first-child{
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
    }
    .nav>li:last-child{
        border-bottom: 1px solid #000;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
    }
    .sub{
        display: none;
    }
    .sub>li{
        list-style: none;
        background: mediumpurple;
    }
    .sub>li:hover{
        background: red;
        border-bottom: 1px solid #fff;
    }
</style>
<script>
    $(function () {
        $('.nav>li').click(function () {
            //拿到二级菜单
            var $sub=$(this).children('.sub');
            $sub.slideDown(300);
            //拿到非当前的一级菜单的二级菜单
            var othersub=$(this).siblings().children(".sub");
            //让其他二级菜单收起
            othersub.slideUp(300);
        })
    })
</script>




我最近开始玩github了,下半年也会有一个cms免费开源的程序跟大家见面

1. /*溢出部分样式*/  
2. 

.txt-ell {

3. 
whitewhite-space:nowrap;  //强制在一行显示   
4. 
overflow:hidden;    //溢出的内容切割隐藏   
5. 
text-overflow:ellipsis; //当内联溢出块容器时,将溢出部分替换为…   
6. 
word-break:keep-all;  //允许在单词内换行   
7. 
color: red;  //这里我自己标识一下   
8. 
padding: 0 7px;  //由于想跟边线留有距离,所以设置了下   
9. 

}

10. 

.table-fix {

11. 
table-layout:fixed;     
12. 

}

首先第二个样式是专门给table标签加的,想要实现内容溢出,那么表格必须有固定的宽高,表格内部的tr,td也要有固定的宽高。在用内容溢出之前,先要给table添加table-fix这个类。然后检查自己的tr,td有没有给width,如果没有的话,最好是给个吧,固定的也行,百分比的也行,我主要给的百分比,外边table给固定宽度,里面的tr和td就是百分比的宽度,这样才能使用内容溢出样式。最后如果哪个格子里面的内容非常的多,你想实现点点点,就给这个格子添加一个.txt-ell的类吧

下载.jpg

今天又是充满希望的一天,就跟着案例教程做了一个vue的小项目,但是虽然说很简单,但是在学习的过程中,对于没有多少js的基础的人来说
是比较困难的,项目的关键的地方就是用了vue的三个进行交互的方法,get,post,jsonp
--语法
引入vue交互模块,resource.js,然后直接在方法中this.$http.get(post(jsonp)) 第一个参数是url路径,第二个参数是数据,然后通过then.funcition,分别是成功返回的方法,和失败返回的方法
--需要特别提示一点的就是在post的提交的时候需要把emulateJSON:true,加入到第三个参数中并且用{}包裹起来
--在jsonp跨域中,callback的默认名字就是callback,但是在百度中,默认的名字为cb,所以在调用接口的时候,需要声明callback的名字为cb,所以要在第三个参数中声明jsonp:'cb',这样我们就可以正常调用了。

po一下代码,代码的功能就是简单的百度搜索功能,输入东西按回车也会直接跳到一个百度搜素结果页中,调用了windows.open配合百度的搜索接口,把
参数换成输入框中的数据即可。

<!DOCTYPE html>

<meta charset="UTF-8">
<title>百度下拉菜单</title>
<script src="bootstrap.js"></script>
<script src="bootstrap.min.css"></script>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>



<div id="box">
    <input type="text" class="input-group" v-model="text" @keyup="get($event)" @keydown.down="down()" @keydown.up.prevent="up()" @keydown.enter="enter()">
    <ul>
        <li class="list-group" v-for="(li,$index) in mydata" :class="{grey:$index==now}">{{li}}</li>
    </ul>
    <p v-show="mydata.length==0">暂无数据。。。</p>
</div>


u=1436948145,4270509323&fm=200&gp=0.jpg