[nodejs,expressjs,angularjs2] LOL英雄列表数据抓取及查询显示应用_Javascript教程-织梦者
当前位置:&>&&>& > [nodejs,expressjs,angularjs2] LOL英雄列表数据抓取及查询显示应用
[nodejs,expressjs,angularjs2] LOL英雄列表数据抓取及查询显示应用
本文将为关注织梦者的朋友提供的是的[nodejs,expressjs,angularjs2] LOL英雄列表数据抓取及查询显示应用相关教程，具体实例代码请看下文:新手练习，尝试使用angularjs2
【angularjs2 数据绑定，监听数据变化自动修改相应dom值，非常方便好用，但与传统js(jquery)的使用方法会很不同，Dom操作也不太习惯】
应用效果图：
转载请标明出处：/wangxinsheng@望星辰
具体步骤如下：
1.通过应用生成器工具 express 可以快速创建一个应用的骨架 全局安装 应用生成器工具：$ npm install express-generator -g 在当前工作目录下创建一个命名为 lolHeros 的应用：$ express lolHeros2.添加并修改 package.json 配置文件，加入依赖3.运行命令 npm install 安装依赖4.启动这个应用 （MacOS 或 Linux 平台）：$ DEBUG=lolHeros npm start Windows 平台使用如下命令：set DEBUG=lolHeros & npm start URL：http://127.0.0.1:3000/5.应用生成器创建的应用一般都有如下目录结构： . ├── app.js ├── bin │
└── www ├── package.json ├── public │
├── images │
├── javascripts │
└── stylesheets │
└── style.css ├── routes │
├── index.js │
└── users.js └── views
├── error.jade
├── index.jade
└── layout.jade
7 directories, 9 files6.使用supervisor npm -g install supervisor 修改 package.json script 节点 node =& supervisor 启动服务命令改为：npm start7.选择性使用 html2jade npm install -g html2jade 这里偷懒,用在线转换页面8.先做一个html，看效果9.用工具转为 jade 模板，看看nodejs 运行效果 /biz/hero/champion.js';
10 // 单图 image full:http://ossweb-/images/lol/img/champion/Aatrox.png
11 var fullImgPath = 'http://ossweb-/images/lol/img/champion/';
12 //英雄信息：Aatrox=data.ID.js
13 var heroDetailPath = '/biz/hero/';
14 // skins.id http://ossweb-/images/lol/web201310/skin/big266000.jpg
15 var heroDetailSkinPath = 'http://ossweb-/images/lol/web201310/skin/big';
16 // 技能：Aatrox_Passive.png=&http://ossweb-/images/lol/img/passive/Aatrox_Passive.png
17 var heroDetailPSkillPath = 'http://ossweb-/images/lol/img/passive/';
18 // Q技能：http://ossweb-/images/lol/img/spell/AatroxQ.png
Aatrox.png
19 var heroDetailSkillPath = 'http://ossweb-/images/lol/img/spell/';
21 var heroVerPath = '';
22 var heroVerSkinPath = '';
23 var heroVerSkillPath = '';
24 var heroVerImgPath = '';
25 var heroListJson =
26 module.exports = function() {
console.log('GET Hreo List Data starting...');
// 新建文件夹
// process.cwd() 启动目录
// process.execPath node.exe文件路劲
// __dirname 代码所在的目录
var heroDataPath = process.cwd() + '\\heroData';
var exists = fs.existsSync(heroDataPath);
if(!exists){
// 不存在创建目录
fs.mkdirSync(heroDataPath);
console.log('创建目录成功:'+heroDataPath);
}catch(e){
console.log('创建目录失败',heroDataPath,e);
return '创建目录失败:'+'\n'+heroDataPath+'\n'+e;
// 抓取数据-所有英雄
var r = getHList(heroDataPath);
// 抓取数据-所有英雄小头像
var r = getHListImg();
if(r!=''){
deleteFolderRecursive(heroVerPath);
console.log('GET Hreo List Data Finished');
return '';
59 // 获取英雄列表，英雄版本重复检查，创建版本文件夹，写入英雄列表
60 function getHList(parentPath){
console.log('GET Hreo List Data...');
var opt = getRequireOption(heroListPath);
var res = request(opt.method,opt.path,opt);
var data = res.getBody("utf8");
// jsonp 解析
data = data.replace('if(!LOLherojs)var LOLherojs={};LOLherojs.champion=','');
data = data.substr(0 ,data.length-1);
data = reconvert(data);
heroListJson = JSON.parse(data);
console.log(heroListJson.version,heroListJson.updated);
//JSON.stringify(obj)
heroVerPath = parentPath + '\\'+heroListJson.
var exists = fs.existsSync(heroVerPath);
if(exists){
console.log('存在该版本',heroListJson.version);
return '存在该版本';
fs.mkdirSync(heroVerPath);
}catch(e){
console.log('创建目录失败',heroVerPath,e);
return '创建目录失败:'+"\n"+heroVerPath+"\n"+e;
var heroVerListPath = heroVerPath + '\\herolist.json';
var w = fs.writeFileSync(heroVerListPath, JSON.stringify(heroListJson));
}catch(e){
console.log('写入错误',heroVerListPath,e);
return '写入错误:'+"\n"+heroVerListPath+"\n"+e;
console.log('写入成功',heroVerListPath);
console.log('GET Hreo List Data Finished');
return '';
99 function getHListImg(){
// 抓取图片
// 创建头像目录
heroVerImgPath = heroVerPath + "\\" + "imgs";
var exists = fs.existsSync(heroVerImgPath);
if(!exists){
// 不存在创建目录
fs.mkdirSync(heroVerImgPath);
console.log('创建目录成功:'+heroVerImgPath);
}catch(e){
console.log('创建目录失败',heroVerImgPath,e);
return '创建目录失败:'+'\n'+heroVerImgPath+'\n'+e;
// 皮肤目录
heroVerSkinPath = heroVerPath + "\\" + "skin";
var exists = fs.existsSync(heroVerSkinPath);
if(!exists){
// 不存在创建目录
fs.mkdirSync(heroVerSkinPath);
console.log('创建目录成功:'+heroVerSkinPath);
}catch(e){
console.log('创建目录失败',heroVerSkinPath,e);
return '创建目录失败:'+'\n'+heroVerSkinPath+'\n'+e;
// 技能目录
heroVerSkillPath = heroVerPath + "\\" + "skill";
var exists = fs.existsSync(heroVerSkillPath);
if(!exists){
// 不存在创建目录
fs.mkdirSync(heroVerSkillPath);
console.log('创建目录成功:'+heroVerSkillPath);
}catch(e){
console.log('创建目录失败',heroVerSkillPath,e);
return '创建目录失败:'+'\n'+heroVerSkillPath+'\n'+e;
for (var key in heroListJson.keys) {
// 下载头像图片
var imgName = heroListJson.data[heroListJson.keys[key]].image.
var fullImgUrl = fullImgPath+imgN
console.log("抓取头像图片",imgName,fullImgUrl);
var opt = getRequireOption(fullImgUrl);
var res = request(opt.method,opt.path,opt);
var data = res.getBody();
var heroVerFullImgPath = heroVerImgPath + '\\'+imgN
var w = fs.writeFileSync(heroVerFullImgPath, data);
}catch(e){
console.log('写入错误',heroVerFullImgPath,e);
return '写入错误:'+"\n"+heroVerFullImgPath+"\n"+e;
console.log('写入成功',heroVerFullImgPath);
// 下载英雄详细文件
var heroDataId = heroListJson.keys[key];
var heroDataUrl = heroDetailPath+heroDataId+'.js';
console.log("抓取英雄详细数据",heroDataId,heroDataUrl);
var opt = getRequireOption(heroDataUrl);
var res = request(opt.method,opt.path,opt);
var data = res.getBody('utf8');
// jsonp 解析
data = data.replace('if(!LOLherojs)var LOLherojs={champion:{}};LOLherojs.champion.'+heroDataId+'=','');
data = data.substr(0 ,data.length-1);
data = reconvert(data);
var heroDetailJson = JSON.parse(data);
var heroVerDetailPath = heroVerPath + '\\'+heroDataId+'.json';
var w = fs.writeFileSync(heroVerDetailPath, data);
}catch(e){
console.log('写入错误',heroVerDetailPath,e);
return '写入错误:'+"\n"+heroVerDetailPath+"\n"+e;
console.log('写入成功',heroVerDetailPath);
// 下载英雄皮肤图片
for(var skin in heroDetailJson.data.skins){
skin = heroDetailJson.data.skins[skin];
var skinImgUrl = heroDetailSkinPath + skin.id + '.jpg';
console.log("抓取皮肤图片",skin.id,skinImgUrl);
var opt = getRequireOption(skinImgUrl);
var res = request(opt.method,opt.path,opt);
var data = res.getBody();
var heroVerSkinImgPath = heroVerSkinPath + '\\'+skin.id + '.jpg';
var w = fs.writeFileSync(heroVerSkinImgPath, data);
}catch(e){
console.log('写入错误',heroVerSkinImgPath,e);
return '写入错误:'+"\n"+heroVerSkinImgPath+"\n"+e;
console.log('写入成功',heroVerSkinImgPath);
// 下载英雄技能图片 主动
for(var spell in heroDetailJson.data.spells){
spell = heroDetailJson.data.spells[spell];
var spellImgUrl = heroDetailSkillPath + spell.image.
console.log("抓取主动技能图片",spell.image.full,spellImgUrl);
var opt = getRequireOption(spellImgUrl);
var res = request(opt.method,opt.path,opt);
var data = res.getBody();
var heroVerSpellImgPath = heroVerSkillPath + '\\'+spell.image.
var w = fs.writeFileSync(heroVerSpellImgPath, data);
}catch(e){
console.log('写入错误',heroVerSpellImgPath,e);
return '写入错误:'+"\n"+heroVerSpellImgPath+"\n"+e;
console.log('写入成功',heroVerSpellImgPath);
// 下载英雄技能图片 被动
var passiveImgUrl = heroDetailPSkillPath + heroDetailJson.data.passive.image.
console.log("抓取被动技能图片",heroDetailJson.data.passive.image.full,passiveImgUrl);
var opt = getRequireOption(passiveImgUrl);
var res = request(opt.method,opt.path,opt);
var data = res.getBody();
var heroVerPassiveImgPath = heroVerSkillPath + '\\'+heroDetailJson.data.passive.image.
var w = fs.writeFileSync(heroVerPassiveImgPath, data);
}catch(e){
console.log('写入错误',heroVerPassiveImgPath,e);
return '写入错误:'+"\n"+heroVerPassiveImgPath+"\n"+e;
console.log('写入成功',heroVerPassiveImgPath);
return '';
232 function reconvert(str){
str = str.replace(/(\\u)(\w{1,4})/gi,function($0){
return (String.fromCharCode(parseInt((escape($0).replace(/(%5Cu)(\w{1,4})/g,"$2")),16)));
str = str.replace(/(&#x)(\w{1,4});/gi,function($0){
return String.fromCharCode(parseInt(escape($0).replace(/(%26%23x)(\w{1,4})(%3B)/g,"$2"),16));
str = str.replace(/(&#)(\d{1,6});/gi,function($0){
return String.fromCharCode(parseInt(escape($0).replace(/(%26%23)(\d{1,6})(%3B)/g,"$2")));
245 function deleteFolderRecursive(path) {
var files = [];
if( fs.existsSync(path) ) {
files = fs.readdirSync(path);
files.forEach(function(file,index){
var curPath = path + "/" +
if(fs.statSync(curPath).isDirectory()) { // recurse
deleteFolderRecursive(curPath);
} else { // delete file
fs.unlinkSync(curPath);
fs.rmdirSync(path);
261 function getRequireOption(pathStr){
return op={
host:pathStr.match(/http[s]?:\/\/[^\\|\/]*/)[0].replace(/http[s]?:\/\//,''),
method:'GET',
path:pathStr,
'Host':pathStr.match(/http[s]?:\/\/[^\\|\/]*/)[0].replace(/http[s]?:\/\//,''),
"User-Agent":"Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/21.0.1180.92 Safari/537.1 LBBROWSER",
"Referer":pathStr.match(/http[s]?:\/\/[^\\|\/]*/)[0].replace(/http[s]?:\/\//,'')
jade模板代码（indexTemplate.jade）：
1 doctype html
title LOL英雄
script(src='/javascripts/jquery-3.1.1.min.js')
script(src='/javascripts/bootstrap.min.js')
script(src='/core-js/client/shim.min.js')
script(src='/zone.js/dist/zone.js')
script(src='/jade/jade.js')
script(src='/systemjs/dist/system.src.js')
script(src='/javascripts/systemjs.config.js')
System.import('app').catch(function(err){ console.error(err); });
link(href='/stylesheets/bootstrap.min.css', rel='stylesheet')
html,body{background-color:color:rgb(255,215,000); overflow: height:100%;}
.main,.selHeroMain{
width:100%;height:100%;
.selHeroContain{
border-radius: 50%;
border:3px rgb(255,215,000)
width:60%;
height:90%;
.selHeroDivOut{
width:50%;
height:300%;
margin-top: -50%;
background-color:
.selHeroDiv{
border-radius: 50%;
border:2px rgb(255,215,000)
background-size:196% 100%;
background-repeat:no-
background-position:100% 100%;
box-shadow: 0px 0px 30px rgb(255,215,000);
.selHeroDiv img{
height:100%;
border-radius: 50%;
.leftHeros,.rightHeros{
width:15%;
height:90%;
.leftHeros{
.rightHeros{
.leftHeros ul,.rightHeros ul{
height:90%;
margin-top: 30%;
padding-left: 0
.leftHeros li,.rightHeros li{
white-space:
font-size:20
list-style-type:
height:18%;
padding:1% 0;
border-bottom: 1px rgb(255,215,000)
.leftHeros li{
text-align:
.rightHeros li{
text-align:
.leftHeros img,.rightHeros img{
vertical-align:
height:100%;
.leftHeros span,.rightHeros span{
css3实现图片划过一束光闪过效果 */
.selHeroDiv:before {
content: ""; position: width:200 height: 100%; top: 0; left: -350 overflow:
background: -moz-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(50%, rgba(255,255,255,.2)), color-stop(100%, rgba(255,255,255,0)));
background: -webkit-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
background: -o-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
-webkit-transform: skewX(-25deg);
-moz-transform: skewX(-25deg);
animation:selHeroDivAnimate 9
.selHeroDiv:hover:before { left: 150%; animation:selHeroDivAnimateHover 1s 1 ease 0s; /*transition: left 1s ease 0s;*/}
@keyframes selHeroDivAnimate
0% {left: -350}
90% {left: -350}
100% {left: 150%;}
@keyframes selHeroDivAnimateHover
0% {left: -350}
100% {left: 150%;}
.pullDown{
width:100%;
height:10%;
text-align:
vertical-align:
font-size: 50
.pullDown span{width:100%;position:top: 0left:0animation:pullDown 2}
@keyframes pullDown
0% {top: 0}
50% {top: 20}
100% {top: 0}
.heroList{
width:100%;
height:60%;
opacity:0.2;
background:
/*.heroList:hover{
opacity:1;
background:
transition: opacity,top 1s ease 0s;
text-align:
.hListMain{display: height: 95%;}
.hListSearchBar{height: 10%;}
.hListStyle1,.hListStyle2{vertical-align: font-size: 30 height:85%; overflow-y: overflow-x:}
.hListStyle1 .row,.hListStyle2 .row{ margin-top: 15 border-bottom: 1px rgb(255,215,000) }
.hListStyle1 .row{cursor:}
.hListStyle2 .row{border:}
.hListStyle1 .row div{ height: 100 line-height: 100}
.hListStyle2 .row {width:70%; margin:0}
.hListStyle2 .row div{cursor:}
.hListStyle2{display:}
.hero{position:width:80%; border: 1px rgb(255,215,000)top:-100%;
border-radius: 30 top:10%;left:10%;background: #2B2B2B; font-size: 30 height: 80%; /*display:*/}
.heroTitle{height:20%;width:100%;}
.heroData{overflow-y: overflow-x:height:75%;width:100%;font-size: 15}
.heroData .row{margin-bottom: 5 }
.heroClose{color: font-size: 10 cursor:}
.getHeroList{position:top:0 right: 0 color:font-style: 13cursor:z-index:99;}
.leftHeros li:first-child img{border:1px rgb(255,215,000) solid}
.loadingDiv{width:100%;height:100%;top:0left:0background:font-size:40position:text-align:padding:20% 0;opacity:0.75;text-shadow: 0px 0px 40px rgb(255,000,000);}
window.onresize = function(){
var selHeroDivHW = $(".selHeroDivOut").width();
$(".selHeroDiv").width(selHeroDivHW);
$(".selHeroDiv").height(selHeroDivHW);
$(".selHeroDiv").offset({"left":$(".selHeroContain").offset().left+($(".selHeroContain").width()-selHeroDivHW)*0.5
,"top":$(".selHeroContain").offset().top+($(".selHeroContain").height()-selHeroDivHW)*0.5});
$(".selHeroDiv").show();
function stopPropagation(e){
window.event? window.event.cancelBubble = true : e.stopPropagation();
Array.prototype.contains=function(obj) {
var index=this.
while (index--){
if(this[index]===obj){
Angularjs2 模板代码（selectHero.html）【理论上应该分组件，通过组件父子间通信来完成】：
&div class='selHeroMain' (mousewheel)="showHideHeroListPanel()" &
&div class='selHeroContain' #selHeroContain&
&div class='selHeroDivOut' #selHeroDivOut&
&div class='selHeroDiv' [ngStyle]="{'background-image': styleExp}" #selHeroDiv&
&div class='leftHeros'&
&li&玩家1：&span&&img src='{{leftPlayImg1}}' width='133' height='120' /&&/span&&/li&
&li&玩家2：&span&&img src='{{leftPlayImg2}}' width='133' height='120' /&&/span&&/li&
&li&玩家3：&span&&img src='{{leftPlayImg3}}' width='133' height='120' /&&/span&&/li&
&li&玩家4：&span&&img src='{{leftPlayImg4}}' width='133' height='120' /&&/span&&/li&
&li&玩家5：&span&&img src='{{leftPlayImg5}}' width='133' height='120' /&&/span&&/li&
&div class='rightHeros'&
&li&&span&&img src='{{rightPlayImg1}}' width='133' height='120' /&：玩家1&/span&&/li&
&li&&span&&img src='{{rightPlayImg2}}' width='133' height='120' /&：玩家2&/span&&/li&
&li&&span&&img src='{{rightPlayImg3}}' width='133' height='120' /&：玩家3&/span&&/li&
&li&&span&&img src='{{rightPlayImg4}}' width='133' height='120' /&：玩家4&/span&&/li&
&li&&span&&img src='{{rightPlayImg5}}' width='133' height='120' /&：玩家5&/span&&/li&
&!--&div class='pullDown'&&span&下拉/点击 选择英雄&/span&&/div&--&
&div class='heroList container' [@openClosePanel]="statePanelExpression" #heroList &
&div class='pullDown' (click)="showHeroListPanel()" #pullDown &&span&下拉/点击 选择英雄&/span&&/div&
&div class='pullUp' (click)="hideHeroListPanel()" #pullUp &关闭&/div&
&div class='hListMain' #hListMain &
&div class='hListSearchBar form-inline text-center'&
&div class="row"&
&div class="col-lg-1 col-md-1 col-sm-1"&
&div class="dropdown"&
&button type="button" class="btn dropdown-toggle btn-primary" id="dropdownMenuVer" data-toggle="dropdown"&版本
&span class="caret"&&/span&
&ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuVer"&
&li role="presentation" *ngFor="let ver of heroVers. let i = index" [ngClass]="{'active':ver==curVer}" (click)="getNewVersion(ver)"&
&a role="menuitem" tabindex="-1" href="#" &{{ver}}&/a&
&div class="col-lg-1 col-md-1 col-sm-1"&
&div class="dropdown"&
&button type="button" class="btn dropdown-toggle btn-primary" id="dropdownMenuVer" data-toggle="dropdown"&英雄类型
&span class="caret"&&/span&
&ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuVer"&
&li role="presentation" *ngFor="let htc of heroTypeCL let i = index" [ngClass]="{'active':htc==heroTypeCCur}" (click)="filterType(heroTypeCList[i])"&
&a role="menuitem" tabindex="-1" href="#"&{{heroTypeCList[i]}}&/a&
&div class="col-lg-1 col-md-1 col-sm-1"&&input type="text" class="form-control" id="name" placeholder="输入英雄名称" #heroFilterName (keyup)="searchHeroByName(heroFilterName.value)"&&/div&
&div class="col-lg-8 col-md-8 col-sm-8"&检索条件: {{heroTypeCCur}}英雄 | 名称：{{heroFilterName.value}}&/div&
&div class="col-lg-1 col-md-1 col-sm-1"&
&div class="dropdown pull-right"&
&button type="button" class="btn dropdown-toggle btn-primary" id="dropdownMenuVer" data-toggle="dropdown"&显示方式
&span class="caret"&&/span&
&ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuVer"&
&li role="presentation" [ngClass]="{'active':showListTypeCur=='LB'}"&
&a role="menuitem" tabindex="-1" href="#" #menuitemLB (click)="heroListLB()" &列表&/a&
&li role="presentation" [ngClass]="{'active':showListTypeCur=='TZ'}"&
&a role="menuitem" tabindex="-1" href="#" #menuitemTZ (click)="heroListTZ()" &图阵&/a&
&div class='hListStyle1' #hListStyle1 &
&div class="row text-center" (click)="showHeroDetail(heroData)" (mouseenter)="showBigPic(heroData)" *ngFor="let heroData of heroDataL let i = index"&
&div class="col-lg-1 col-md-1 col-sm-1"&
&div class="col-lg-2 col-md-2 col-sm-2"&
&img src='/{{curVer}}/imgs/{{heroData.image.full}}' width="90" /&
&div class="col-lg-1 col-md-1 col-sm-1"&
{{heroData.id}}
&div class="col-lg-2 col-md-2 col-sm-2"&
{{heroData.name}}
&div class="col-lg-2 col-md-2 col-sm-2"&
{{heroData.title}}
&div class="col-lg-2 col-md-2 col-sm-2"&
{{heroData.tags}}
&div class="col-lg-2 col-md-2 col-sm-2"&
&div class='hListStyle2' #hListStyle2 &
&div class="row text-center"&
&div class="col-lg-2 col-md-2 col-sm-2" (click)="showHeroDetail(heroData)" (mouseenter)="showBigPic(heroData)" *ngFor="let heroData of heroDataL let i = index"&
&a data-toggle="tooltip" data-placement="top" title="{{heroData.id}}:{{heroData.name}}:{{heroData.title}}:{{heroData.tags}}"&
&img src='/{{curVer}}/imgs/{{heroData.image.full}}' width="120" /&
&div *ngIf="heroShowDetailAllytips && heroShowDetailAllytips.length&0" class='hero container' [@openCloseHero]="stateHeroExpression" #hero &
&p class="heroClose text-right" (click)="hideHeroDetail()" &关闭&/p&
&div class="heroTitle"&
&div class="row"&
&div class="col-lg-2 col-md-2 col-sm-2"&
&img src='/{{curVer}}/imgs/{{heroShowDetail.id}}.png' width="120" /&
&div class="col-lg-6 col-md-6 col-sm-6"&
({{heroShowDetail.id}}) {{heroShowDetail.name}} : {{heroShowDetail.title}}
&div class="col-lg-2 col-md-2 col-sm-2 text-right"&
&span class="badge"&[{{heroShowDetail.tags}}]&/span&
&div class="heroData"&
&div class="row"&
&div class="col-lg-2 col-md-2 col-sm-2"&&/div&
&div class="col-lg-8 col-md-8 col-sm-8"&
&div id="myCarousel" class="carousel slide" #myCarousel&
&!-- 轮播（Carousel）指标 --&
&ol class="carousel-indicators"&
&li data-target="#myCarousel" [ngClass]="{'active':i==0}" *ngFor="let skin of heroShowDetailS let i = index" &&/li&
&!-- 轮播（Carousel）项目 --&
&div class="carousel-inner"&
&div class="item" [ngClass]="{'active':i==0}" *ngFor="let skin of heroShowDetailS let i = index" &
&img src="/{{curVer}}/skin/{{skin.id}}.jpg"
&div class="carousel-caption"&{{skin.name}}&/div&
&!-- 轮播（Carousel）导航 --&
&a class="carousel-control left" href="#myCarousel"
data-slide="prev"&&
&a class="carousel-control right" href="#myCarousel"
data-slide="next"&&
&div class="col-lg-2 col-md-2 col-sm-2"&&/div&
&div class="row"&
&div class="col-lg-1 col-md-1 col-sm-1"&&/div&
&div class="col-lg-1 col-md-1 col-sm-1"&故事
&div class="col-lg-10 col-md-10 col-sm-10"&
&div class="row"&
&div class="col-lg-2 col-md-2 col-sm-2"&&/div&
&div class="col-lg-8 col-md-8 col-sm-8"&{{heroShowDetail.lore}}
&div class="col-lg-2 col-md-2 col-sm-2"&&/div&
&div class="row"&
&div class="col-lg-1 col-md-1 col-sm-1"&&/div&
&div class="col-lg-1 col-md-1 col-sm-1"&技能
&div class="col-lg-10 col-md-10 col-sm-10"&
&div class="row"&
&div class="col-lg-2 col-md-2 col-sm-2"&&/div&
&div class="col-lg-1 col-md-1 col-sm-1"&&img src='/{{curVer}}/skill/{{heroShowDetailPassiveImg.full}}' width="80" /&&/div&
&div class="col-lg-7 col-md-7 col-sm-7"&
{{heroShowDetailPassive.name}}&br/&{{heroShowDetailPassive.description}}
&div class="col-lg-2 col-md-2 col-sm-2"&&/div&
&div class="row"&
&div class="col-lg-2 col-md-2 col-sm-2"&&/div&
&div class="col-lg-1 col-md-1 col-sm-1"&&img src='/{{curVer}}/skill/{{heroShowDetailSpells1.image}}' width="80" /&&/div&
&div class="col-lg-3 col-md-3 col-sm-3"&
{{heroShowDetailSpells1.id}}&br/&
{{heroShowDetailSpells1.name}}&br/&
{{heroShowDetailSpells1.description}}&br/&
{{removeTag(heroShowDetailSpells1.tooltip)}}
&div class="col-lg-1 col-md-1 col-sm-1"&&img src='/{{curVer}}/skill/{{heroShowDetailSpells2.image}}' width="80" /&&/div&
&div class="col-lg-3 col-md-3 col-sm-3"&
{{heroShowDetailSpells2.id}}&br/&
{{heroShowDetailSpells2.name}}&br/&
{{heroShowDetailSpells2.description}}&br/&
{{removeTag(heroShowDetailSpells2.tooltip)}}
&div class="col-lg-2 col-md-2 col-sm-2"&&/div&
&div class="row"&
&div class="col-lg-2 col-md-2 col-sm-2"&&/div&
&div class="col-lg-1 col-md-1 col-sm-1"&&img src='/{{curVer}}/skill/{{heroShowDetailSpells3.image}}' width="80" /&&/div&
&div class="col-lg-3 col-md-3 col-sm-3"&
{{heroShowDetailSpells3.id}}&br/&
{{heroShowDetailSpells3.name}}&br/&
{{heroShowDetailSpells3.description}}&br/&
{{removeTag(heroShowDetailSpells3.tooltip)}}
&div class="col-lg-1 col-md-1 col-sm-1"&&img src='/{{curVer}}/skill/{{heroShowDetailSpells4.image}}' width="80" /&&/div&
&div class="col-lg-3 col-md-3 col-sm-3"&
{{heroShowDetailSpells4.id}}&br/&
{{heroShowDetailSpells4.name}}&br/&
{{heroShowDetailSpells4.description}}&br/&
{{removeTag(heroShowDetailSpells4.tooltip)}}
&div class="col-lg-2 col-md-2 col-sm-2"&&/div&
&div class="row"&
&div class="col-lg-1 col-md-1 col-sm-1"&&/div&
&div class="col-lg-1 col-md-1 col-sm-1"&技巧
&div class="col-lg-10 col-md-10 col-sm-10"&
&div class="row"&
&div class="col-lg-2 col-md-2 col-sm-2"&&/div&
&div class="col-lg-1 col-md-1 col-sm-1"&己方技巧：&/div&
&div class="col-lg-7 col-md-7 col-sm-7"&
&div class="row" *ngFor="let str of heroShowDetailA let i = index"&{{str}}&/div&
&div class="col-lg-2 col-md-2 col-sm-2"&&/div&
&div class="row"&
&div class="col-lg-2 col-md-2 col-sm-2"&&/div&
&div class="col-lg-1 col-md-1 col-sm-1"&敌方技巧：&/div&
&div class="col-lg-7 col-md-7 col-sm-7"&
&div class="row" *ngFor="let str of heroShowDetailE let i = index"&{{str}}&/div&
&div class="col-lg-2 col-md-2 col-sm-2"&&/div&
&div class="getHeroList" #getHeroList (click)="doGetHeroList()" [style.color]="loadFinished?'black':'gold'"&点此抓取LOL英雄列表 ^-^&/div&
&div class='loadingDiv' [style.display]="loadFinished?'none':'block'"&{{loadingText}}&/div&
Angularjs2 ts代码（ponent.ts）：
1 import {Component, OnInit, ViewChild, Renderer, ElementRef, AfterViewInit, animate, trigger,state,style,transition} from '@angular/core';
2 import {Http,Response} from '@angular/http';
3 import 'rxjs/add/operator/toPromise';
4 import 'rxjs/add/operator/catch';
5 import 'rxjs/add/operator/debounceTime';
6 import 'rxjs/add/operator/distinctUntilChanged';
7 import 'rxjs/add/operator/map';
8 import 'rxjs/add/operator/switchMap';
10 @Component({
selector: '.main',
animations: [
'openClosePanel',
state('close, void', style({opacity:'0.2',top:'90%'})),
state('open', style({opacity:'1',top:'40%'})),
transition(
'close &=& open', [animate(500)])
'openCloseHero',
state('close, void', style({opacity:'0',top:'-100%'})),
state('open', style({opacity:'1',top:'10%'})),
transition(
'close &=& open', [animate(500)]),
transition(
'void =& open', [animate(500)])
templateUrl: '/selectHero.html'
34 export class AppComponent implements AfterViewInit,OnInit {
styleExp = 'url("/images/main.jpg")';
leftPlayImg1 = '/images/angularjs.png';
leftPlayImg2 = '/images/expressjs.jpg';
leftPlayImg3 = '/images/bootstrap.jpg';
leftPlayImg4 = '/images/nodejs.png';
leftPlayImg5 = '/images/npm.jpg';
rightPlayImg1 = '/images/spring.jpg';
rightPlayImg2 = '/images/struts2.jpg';
rightPlayImg3 = '/images/typescript.jpg';
rightPlayImg4 = '/images/tomcat.jpg';
rightPlayImg5 = '/images/java.png';
heroTypeCList = ["所有","战士","坦克","刺客","法师","射手","辅助"];
heroTypeCCur = "所有";
showListTypeCur = "LB";
// loading
loadFinished =
loadingText = 'Hellow World! 你好！';
// 获取dom元素 start
// 英雄大头像圈
@ViewChild('selHeroDiv') selHeroDiv: ElementR
@ViewChild('selHeroDivOut') selHeroDivOut: ElementR
@ViewChild('selHeroContain') selHeroContain: ElementR
// 英雄列表面板
@ViewChild('heroList') heroList: ElementR
@ViewChild('hListMain') hListMain: ElementR
@ViewChild('pullDown') pullDown: ElementR
@ViewChild('pullUp') pullUp: ElementR
// 英雄列表 图阵 切换
@ViewChild('hListStyle1') hListStyle1: ElementR
@ViewChild('hListStyle2') hListStyle2: ElementR
// 抓取LOL服务器数据
@ViewChild('getHeroList') getHeroListDom: ElementR
// 显示英雄详细信息
@ViewChild('hero') hero: ElementR
// 英雄过滤名称
@ViewChild('heroFilterName') heroFilterName: ElementR
// 获取dom元素 end
constructor(private renderer: Renderer,private http: Http) {
// 初始：英雄列表隐藏
this.statePanelExpression = 'close';
// 初始：英雄详细隐藏
this.stateHeroExpression = 'close';
ngAfterViewInit() {
// 初期设置大头像位置 start
var selHeroDivHW = this.selHeroDivOut.nativeElement.clientW
var selHeroContainHeight = this.selHeroContain.nativeElement.clientH
var selHeroContainWidth = this.selHeroContain.nativeElement.clientW
var selHeroContainLeft = this.selHeroContain.nativeElement.offsetL
var selHeroContainTop = this.selHeroContain.nativeElement.offsetT
this.renderer.setElementStyle(this.selHeroDiv.nativeElement, 'width', selHeroDivHW+'px');
this.renderer.setElementStyle(this.selHeroDiv.nativeElement, 'height', selHeroDivHW+'px');
this.renderer.setElementStyle(this.selHeroDiv.nativeElement, 'left', selHeroContainLeft+(selHeroContainWidth-selHeroDivHW)*0.5 +'px');
this.renderer.setElementStyle(this.selHeroDiv.nativeElement, 'top', selHeroContainTop+(selHeroContainHeight-selHeroDivHW)*0.5 +'px');
this.renderer.setElementStyle(this.selHeroDiv.nativeElement, 'display', 'block');
// 初期设置大头像位置 end
// 英雄列表面板显示隐藏控制 start
statePanelExpression:
showHeroListPanel() {
this.renderer.setElementStyle(this.pullDown.nativeElement, 'display', 'none');
this.statePanelExpression = 'open';
this.renderer.setElementStyle(this.pullUp.nativeElement, 'display', 'block');
this.renderer.setElementStyle(this.heroList.nativeElement, 'background', 'black');
this.renderer.setElementStyle(this.hListMain.nativeElement, 'display', 'block');
hideHeroListPanel() {
this.renderer.setElementStyle(this.pullUp.nativeElement, 'display', 'none');
this.statePanelExpression = 'close';
this.renderer.setElementStyle(this.pullDown.nativeElement, 'display', 'block');
this.renderer.setElementStyle(this.heroList.nativeElement, 'background', 'gray');
this.renderer.setElementStyle(this.hListMain.nativeElement, 'display', 'none');
showHideHeroListPanel(){
if(this.statePanelExpression == 'close'){
this.showHeroListPanel();
this.hideHeroListPanel();
// 英雄列表面板显示隐藏控制 end
// 英雄列表 图阵 切换 start
heroListLB(){
this.renderer.setElementStyle(this.hListStyle2.nativeElement, 'display', 'none');
this.renderer.setElementStyle(this.hListStyle1.nativeElement, 'display', 'block');
this.showListTypeCur = "LB";
heroListTZ(){
this.renderer.setElementStyle(this.hListStyle1.nativeElement, 'display', 'none');
this.renderer.setElementStyle(this.hListStyle2.nativeElement, 'display', 'block');
this.showListTypeCur = "TZ";
// 英雄列表 图阵 切换 end
// 抓取LOL服务器数据
doGetHeroList(){
this.renderer.setElementStyle(this.getHeroListDom.nativeElement, 'display', 'none');
this.http.get('/getHeroList').toPromise().
then(res =&
alert(res.text());
this.renderer.setElementStyle(this.getHeroListDom.nativeElement, 'display', 'block');
this.ngAfterViewInit();
this.ngOnInit();
}).catch((e)=&console.log(e));
// 显示英雄详细信息 start
stateHeroExpression:
curHeroDataId = '';
heroShowDetail:any = {};
heroShowDetailPassive:any = {};
heroShowDetailPassiveImg = '';
heroShowDetailSkins : Array&any& = [];
heroShowDetailSpells1 :any = {};
heroShowDetailSpells2 :any = {};
heroShowDetailSpells3 :any = {};
heroShowDetailSpells4 :any = {};
heroShowDetailAllytips : Array&any& = [];
heroShowDetailEnemytips : Array&any& = [];
showHeroDetail(heroData:any){
// 获取英雄详细数据
this.curHeroDataId = heroData.
this.http.get('/' + this.curVer + '/'+ heroData.id +'.json').toPromise()
.then((res:Response)=&{
if(JSON.parse(res.text()).data.id == this.curHeroDataId){
this.heroShowDetail = JSON.parse(res.text()).
this.heroShowDetailSkins = JSON.parse(res.text()).data.
this.heroShowDetail.tags = this.heroTypeEC2C(this.heroShowDetail.tags);
this.heroShowDetailPassive = JSON.parse(res.text()).data.
this.heroShowDetailPassiveImg = JSON.parse(res.text()).data.passive.
this.heroShowDetailSpells1 = JSON.parse(res.text()).data.spells[0];
this.heroShowDetailSpells2 = JSON.parse(res.text()).data.spells[1];
this.heroShowDetailSpells3 = JSON.parse(res.text()).data.spells[2];
this.heroShowDetailSpells4 = JSON.parse(res.text()).data.spells[3];
this.heroShowDetailSpells1.image = JSON.parse(res.text()).data.spells[0].image.
this.heroShowDetailSpells2.image = JSON.parse(res.text()).data.spells[1].image.
this.heroShowDetailSpells3.image = JSON.parse(res.text()).data.spells[2].image.
this.heroShowDetailSpells4.image = JSON.parse(res.text()).data.spells[3].image.
this.heroShowDetailAllytips = JSON.parse(res.text()).data.
this.heroShowDetailEnemytips = JSON.parse(res.text()).data.
}).catch(this.handleError);
this.stateHeroExpression = 'open';
hideHeroDetail() {
this.stateHeroExpression = 'close';
// 显示英雄详细信息 end
// 英雄列表所有版本号
heroVers = JSON.parse('{}');
heroDataList : Array&any& = [];
bakHeroDataList : Array&any& = [];
curVer = '';
ngOnInit(){
// 取得英雄列表所有版本号
// console.log('client get hero version');
this.loadingText = '开始取得英雄列表所有版本号';
this.http.get('/getHeroVers').toPromise()
.then((res:Response)=&{
this.heroVers = this.extractVersData(res);
if(!this.heroVers && !this.heroVers.vers){
this.loadingText = '服务器尚未抓取英雄列表，请点击右上角文字抓取数据。';
this.curVer = (this.heroVers && this.heroVers.vers &&this.heroVers.vers.length&0)?this.heroVers.vers[0]:'';
if(this.curVer!=''){
// 获取英雄列表json
this.loadingText = '开始取得英雄列表';
this.http.get('/' + this.curVer + '/herolist.json').toPromise()
.then((res:Response)=&{
if(JSON.parse(res.text()).version == this.curVer){
this.heroDataList = [];
for (var key in JSON.parse(res.text()).keys) {
var heroIdTmp = JSON.parse(res.text()).keys[key];
this.heroDataList.push(
JSON.parse(res.text()).data[heroIdTmp]
this.bakHeroDataList.push(
JSON.parse(res.text()).data[heroIdTmp]
for (var i = this.heroDataList.length - 1; i &= 0; i--) {
this.heroDataList[i].tags = this.heroTypeEC2C(this.heroDataList[i].tags);
this.bakHeroDataList[i].tags = this.heroTypeEC2C(this.bakHeroDataList[i].tags);
this.heroDataTypeList = this.heroDataL
this.loadingText = '随机生成对战英雄';
this.genFight();
this.loadingText = '加载完成';
this.loadFinished =
}).catch(this.handleError);
this.loadingText = '服务器尚未抓取英雄列表，请点击右上角文字抓取数据。';
}).catch(this.handleError);
genFight(){
// 随机生成对战英雄
var max = this.heroDataList.
var randomI = Math.floor(Math.random()*max);
this.leftPlayImg1 = '/'+this.curVer+'/imgs/'+this.heroDataList[randomI].id+'.png';
var myHero = this.heroDataList[randomI];
randomI = Math.floor(Math.random()*max);
this.leftPlayImg2 = '/'+this.curVer+'/imgs/'+this.heroDataList[randomI].id+'.png';
randomI = Math.floor(Math.random()*max);
this.leftPlayImg3 = '/'+this.curVer+'/imgs/'+this.heroDataList[randomI].id+'.png';
randomI = Math.floor(Math.random()*max);
this.leftPlayImg4 = '/'+this.curVer+'/imgs/'+this.heroDataList[randomI].id+'.png';
randomI = Math.floor(Math.random()*max);
this.leftPlayImg5 = '/'+this.curVer+'/imgs/'+this.heroDataList[randomI].id+'.png';
randomI = Math.floor(Math.random()*max);
this.rightPlayImg1 = '/'+this.curVer+'/imgs/'+this.heroDataList[randomI].id+'.png';
randomI = Math.floor(Math.random()*max);
this.rightPlayImg2 = '/'+this.curVer+'/imgs/'+this.heroDataList[randomI].id+'.png';
randomI = Math.floor(Math.random()*max);
this.rightPlayImg3 = '/'+this.curVer+'/imgs/'+this.heroDataList[randomI].id+'.png';
randomI = Math.floor(Math.random()*max);
this.rightPlayImg4 = '/'+this.curVer+'/imgs/'+this.heroDataList[randomI].id+'.png';
randomI = Math.floor(Math.random()*max);
this.rightPlayImg5 = '/'+this.curVer+'/imgs/'+this.heroDataList[randomI].id+'.png';
this.curHeroBigDataId = myHero.
this.http.get('/' + this.curVer + '/'+ myHero.id +'.json').toPromise()
.then((res:Response)=&{
if(JSON.parse(res.text()).data.id == this.curHeroBigDataId){
var max = JSON.parse(res.text()).data.skins.
var randomI = Math.floor(Math.random()*max);
this.styleExp = 'url("/'+this.curVer+'/skin/'
+JSON.parse(res.text()).data.skins[randomI].id
+'.jpg")';
}).catch(this.handleError);
// 处理英雄列表所有版本号
private extractVersData(res: Response) {
let body = JSON.parse(res.text());
if(body && body.vers){
body.vers.sort((a : any,b : any)=&b&a); // 简单排序，需要加工
return body || { };
private handleError (error: Response | any) {
console.error(error);
return { };
private heroTypeEC2C(ht:Array&string&): Array&string&{
let result : Array&string& = [];
for (var i = ht.length - 1; i &= 0; i--) {
result.push(ht[i].replace('Mage','法师')
.replace('Fighter','战士')
.replace('Tank','坦克')
.replace('Assassin','刺客')
.replace('Marksman','射手')
.replace('Support','辅助'));
removeTag(str:string):string{
return str.replace(/&.*?&/ig,"");
return '';
curHeroBigDataId = '';
showBigPic(heroData:any){
// 修改大图像
this.leftPlayImg1 = '/'+this.curVer+'/imgs/'+heroData.id+'.png';
this.curHeroBigDataId = heroData.
this.http.get('/' + this.curVer + '/'+ heroData.id +'.json').toPromise()
.then((res:Response)=&{
if(JSON.parse(res.text()).data.id == this.curHeroBigDataId){
var max = JSON.parse(res.text()).data.skins.
var randomI = Math.floor(Math.random()*max);
this.styleExp = 'url("/'+this.curVer+'/skin/'
+JSON.parse(res.text()).data.skins[randomI].id
+'.jpg")';
}).catch(this.handleError);
heroDataTypeList : Array&any& = [];
filterType(type:string):void{
// 选择英雄类型
this.heroTypeCCur =
this.heroDataList = this.bakHeroDataList.filter(
(hero:any)=&this.heroTypeCCur =='所有' || hero.tags.contains(this.heroTypeCCur));
this.heroDataTypeList = this.heroDataL
filterTypeFun(hero:any){
return hero.tags.contains(this.heroTypeCCur);
searchHeroByName(value: string){
// 过滤英雄名称
this.heroDataList = this.heroDataTypeList.filter(
(hero:any)=&value ==''
|| hero.id.toLowerCase().indexOf(value.toLowerCase())&=0
|| hero.name.toLowerCase().indexOf(value.toLowerCase())&=0
|| hero.title.toLowerCase().indexOf(value.toLowerCase())&=0);
tempVer = '';
getNewVersion(ver: string){
// 重新获取英雄版本
this.tempVer =
if(this.tempVer!='')
// 获取英雄列表json
this.http.get('/' + this.tempVer + '/herolist.json').toPromise()
.then((res:Response)=&{
if(JSON.parse(res.text()).version == this.tempVer){
this.heroDataList = [];
for (var key in JSON.parse(res.text()).keys) {
var heroIdTmp = JSON.parse(res.text()).keys[key];
this.heroDataList.push(
JSON.parse(res.text()).data[heroIdTmp]
this.bakHeroDataList.push(
JSON.parse(res.text()).data[heroIdTmp]
for (var i = this.heroDataList.length - 1; i &= 0; i--) {
this.heroDataList[i].tags = this.heroTypeEC2C(this.heroDataList[i].tags);
this.bakHeroDataList[i].tags = this.heroTypeEC2C(this.bakHeroDataList[i].tags);
this.heroDataTypeList = this.heroDataL
this.genFight();
this.curVer =
this.heroTypeCCur = '所有';
this.heroFilterName.nativeElement.value = '';
}).catch((error: Response | any)=&{
alert('错误：找不到改版本信息');
return {};
中间效果图如下：
html模板制作:
抓取数据：
用angularjs2 绑定数据后：
没数据时：
转载请标明出处：/wangxinsheng@望星辰
全部源码地址：
http://download.csdn.net/user/wangxsh42
http://download.csdn.net/detail/wangxsh42/9737390以上就是这篇文章的全部内容了，希望大家能够喜欢。
这些内容可能对你也有帮助
更多可查看Javascript教程列表页。
猜您也会喜欢这些文章