[nodejs,expressjs,angularjs2] LOL英雄列表数据抓取及查询显示应用

新手磨练,尝试利用angularjs2

又两遍分离了心怡,从泉水归来了浦口,一个郊区到了另一个郊区中……感觉心里很难受,即便已经经历过许多次这种不快了。。。离别苦!

【angularjs2
数据绑定,监听数据变动自动修改相应dom值,非凡方便好用,但与历史观js(jquery)的采取方法会很不同,Dom操作也不太习惯】

初中毕业就上了这一个5+2传说直达本科的职专,到了前几日早就6年了……本科是能达标,只不过是成材本啦……可是也没怎么好后悔的就是了,在旁人高中3年很四个日日夜夜苦读书的时候,我都在相对轻松的专科中走过了,现在不如人才是例行的吗。

利用功用图:

全力以赴不肯定成功,但不尽力会很舒畅啊!这时一贯就这样想。

图片 1

而每当学期期末考时抓耳捞腮时,看着读书好的人被称誉时,挂科时……总在心头默默想,下学期,我必然好好学习!天天拿一刻钟出来上学很轻松吗?之类之类,当然是做不到!

转载请标明出处:cnblogs.com/wangxinsheng
@望星辰

职专的5年就这样玩游戏……过来了,职专停止时,高校给了出去实习,接本,转本,多少个挑选。


实习是不可以的,这大专出来怎么着都不会啊!怎么工作啊!做女招待依然什么呢?那自己上这学有怎么样用啊!

具体步骤如下:

转本的考试很难吗?依旧不要了吧……学习很累的

1.通过使用生成器工具 express 可以高速成立一个施用的龙骨
大局安装 应用生成器工具:$ npm install express-generator -g
在当前工作目录下开创一个命名为 lolHeros 的行使:$ express lolHeros
2.添加并修改 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 files
6.使用supervisor
npm -g install supervisor
修改 package.json script 节点
node => supervisor
起初服务命令改为:npm start
7.采用性使用 html2jade
npm install -g html2jade
此地偷懒,用在线转换页面
8.先做一个html,看效率
9.用工具转为 jade 模板,看看nodejs 运行效果
http://www.html2jade.org/
10.做lol英雄数据抓取功效
轻量级应用,就不用DB了,用systemFile来代表DB效率
nodejs
http抓取和文件读写操作,由于这一次需要共同告知执行结果,就用了协同方法处理
http 同步模块使用 sync-request[npm install sync-request]
下载数据:1.英雄列表,2.英雄详实数据,3.英雄头像,4.肌肤,5.技能图标
11.末尾,整合AngularJS2前端框架
package.json 中加入AngularJS依赖,npm install

唯独成为大牛好像非得要有六个质地,好学,努力,写博客。

注:npm下载插件速度慢时,可以接纳Alibaba在境内的镜像服务器,命令如下:
npm install -gd express –registry=http://registry.npm.taobao.org
可以采用如下命令举办永久设置:
npm config set registry http://registry.npm.taobao.org

当场迷茫的自身给当了10多年程序员的一个小叔子打了个电话,他跟我说了重重,什么html5必火,看安卓苹果支付,thinking
in java……之类的话。


在三遍逛市场中和老妈买了个苹果的微机。这时心中发狠要好好学习,苹果电脑的外形也是真正赏心悦目!便买了。可是回到高校后多少个朋友都说,”买怎么苹果啊!配置差的一米”,“上船多好,就没翻过几个”,“肯定是Acer更好啊!”,“这你还怎么和我们打lol?”,“快去退了这电脑!”之类的话,然则由于一种多年养成的……不想退货的秉性,并不曾去退货。还拿着自身买这电脑是为着求学啊!这种理由安慰着温馨。

关键代码如下:

加了多少个学习群,下了多少个通俗的软件,看着全校的书,最先了所谓的读书。一个月后便不知怎么回事的遗弃了……这时拿着2个月时间为女友做一个生日快乐的网站为对象做为驱引力去上学,都尚未中标……

依赖包 package.json:

直至前几天的本人稍稍后悔1年半事先的我所做的事……

 1 {
 2   "name": "lol_Heros",
 3   "version": "1.0.0",
 4   "description": "get and show lolHeros from qq with NodeJS-Server,ExpressJS-RouteAndTemplate,AngularJS2-JSFrontFramework,Bootstrap-CSS",
 5   "private": true,
 6   "keywords": [
 7     "lol",
 8     "Heros"
 9   ],
10   "author": "Wang Xinsheng",
11   "license": "MIT",
12   "scripts": {
13     "start": "tsc && concurrently \"tsc -w\" \"supervisor ./bin/www\" ",
14     "tsc": "tsc",
15     "tsc:w": "tsc -w"
16   },
17   "dependencies": {
18     "@angular/common": "~2.4.0",
19     "@angular/compiler": "~2.4.0",
20     "@angular/core": "~2.4.0",
21     "@angular/forms": "~2.4.0",
22     "@angular/http": "~2.4.0",
23     "@angular/platform-browser": "~2.4.0",
24     "@angular/platform-browser-dynamic": "~2.4.0",
25     "@angular/router": "~3.4.0",
26     "@types/jquery": "^2.0.39",
27     "angular-in-memory-web-api": "~0.2.4",
28     "body-parser": "~1.15.2",
29     "cookie-parser": "~1.4.3",
30     "core-js": "^2.4.1",
31     "debug": "~2.2.0",
32     "express": "~4.14.0",
33     "jade": "~1.11.0",
34     "morgan": "~1.7.0",
35     "rxjs": "5.0.1",
36     "serve-favicon": "~2.3.0",
37     "sync-request": "~3.0.1",
38     "systemjs": "0.19.40",
39     "zone.js": "^0.7.4"
40   },
41   "devDependencies": {
42     "concurrently": "^3.1.0",
43     "typescript": "~2.0.10",
44     "tslint": "^3.15.1",
45     "@types/node": "^6.0.46"
46   }
47 }

新兴十一月份我上Tmall买了些吃的给女友当作生日礼物。

Express路由:省略,详细可查阅附件

暑假,自然也是玩游戏过去了。

Nodejs 抓取数据代码(getHeroList.js):

十一月份时发出了一件令人很惨痛的事情,那时大家12届还有几天就要放假,而该校起头了又一遍换宿舍,让学员从3楼到4楼,4楼到5楼……一直不明白这么反复的换宿舍是为着什么,奇怪的老实。而二零一九年就该距离的我们依旧从自然6人一间有单独卫生间的宿舍搬到了8人一间一层楼公用一洗手间的宿舍去。宿舍里及时因为选拔接不接本的原因,6人只剩2人,另一人在自身周周回家的周末中搬去了异常宿舍中。班级原本在这4个宿舍20来个男生只剩下了3个宿舍,5个男生。宿管整日赶大家走,阴阳怪气的用断电断水来威吓,打电话给班总裁吗,说教务部管不到生活部上……但该校还要上课啊!但我们交了一学期的宿舍费用啊!为何要赶人走呀!

  1 /* GET Hreo List Data. */
  2 /*写入文件系统*/
  3 var fs= require('fs');
  4 var path = require('path');
  5 /*同步抓取*/
  6 var request = require('sync-request');
  7 
  8 // 所有英雄列表
  9 var heroListPath = 'http://lol.qq.com/biz/hero/champion.js';
 10 // 单图 image full:http://ossweb-img.qq.comlol/img/champion/Aatrox.png
 11 var fullImgPath = 'http://ossweb-img.qq.comlol/img/champion/';
 12 //英雄信息:Aatrox=data.ID.js
 13 var heroDetailPath = 'http://lol.qq.com/biz/hero/';
 14 // skins.id http://ossweb-img.qq.comlol/web201310/skin/big266000.jpg
 15 var heroDetailSkinPath = 'http://ossweb-img.qq.comlol/web201310/skin/big';
 16 // 技能:Aatrox_Passive.png=>http://ossweb-img.qq.comlol/img/passive/Aatrox_Passive.png
 17 var heroDetailPSkillPath = 'http://ossweb-img.qq.comlol/img/passive/';
 18 // Q技能:http://ossweb-img.qq.comlol/img/spell/AatroxQ.png  Aatrox.png
 19 var heroDetailSkillPath = 'http://ossweb-img.qq.comlol/img/spell/';
 20 
 21 var heroVerPath = '';
 22 var heroVerSkinPath = '';
 23 var heroVerSkillPath = '';
 24 var heroVerImgPath = '';
 25 var heroListJson = null;
 26 module.exports = function() {
 27     console.log('GET Hreo List Data starting...');
 28 
 29     // 新建文件夹
 30     // process.cwd() 启动目录
 31     // process.execPath node.exe文件路劲
 32     // __dirname 代码所在的目录
 33     var heroDataPath = process.cwd() + '\\heroData';
 34     var exists = fs.existsSync(heroDataPath);
 35     if(!exists){
 36         // 不存在创建目录
 37         try{
 38             fs.mkdirSync(heroDataPath);
 39             console.log('创建目录成功:'+heroDataPath);
 40         }catch(e){
 41             console.log('创建目录失败',heroDataPath,e);
 42             return '创建目录失败:'+'\n'+heroDataPath+'\n'+e;
 43         }
 44     }
 45     // 抓取数据-所有英雄
 46     var r = getHList(heroDataPath);
 47     if(r!='')
 48         return r;
 49     // 抓取数据-所有英雄小头像
 50     var r = getHListImg();
 51     if(r!=''){
 52         deleteFolderRecursive(heroVerPath);
 53         return r;
 54     }
 55     console.log('GET Hreo List Data Finished');
 56     return '';
 57 };
 58 
 59 // 获取英雄列表,英雄版本重复检查,创建版本文件夹,写入英雄列表
 60 function getHList(parentPath){
 61     console.log('GET Hreo List Data...');
 62     var opt = getRequireOption(heroListPath);
 63     var res = request(opt.method,opt.path,opt);
 64     var data = res.getBody("utf8");
 65     // jsonp 解析
 66     data = data.replace('if(!LOLherojs)var LOLherojs={};LOLherojs.champion=','');
 67     data = data.substr(0 ,data.length-1);
 68     data = reconvert(data);
 69     heroListJson = JSON.parse(data);
 70     console.log(heroListJson.version,heroListJson.updated);
 71     //JSON.stringify(obj)
 72     heroVerPath = parentPath + '\\'+heroListJson.version;
 73     var exists = fs.existsSync(heroVerPath);
 74 
 75     if(exists){
 76         console.log('存在该版本',heroListJson.version);
 77         return '存在该版本';
 78     }else{
 79         try{
 80             fs.mkdirSync(heroVerPath);
 81         }catch(e){
 82             console.log('创建目录失败',heroVerPath,e);
 83             return '创建目录失败:'+"\n"+heroVerPath+"\n"+e;
 84         }
 85 
 86         var heroVerListPath = heroVerPath + '\\herolist.json';
 87         try{
 88             var w = fs.writeFileSync(heroVerListPath, JSON.stringify(heroListJson));
 89         }catch(e){
 90             console.log('写入错误',heroVerListPath,e);
 91             return '写入错误:'+"\n"+heroVerListPath+"\n"+e;
 92         }
 93         console.log('写入成功',heroVerListPath);
 94     }
 95     console.log('GET Hreo List Data Finished');
 96     return '';
 97 }
 98 
 99 function getHListImg(){
100     // 抓取图片
101     // 创建头像目录
102     heroVerImgPath = heroVerPath + "\\" + "imgs";
103     var exists = fs.existsSync(heroVerImgPath);
104     if(!exists){
105         // 不存在创建目录
106         try{
107             fs.mkdirSync(heroVerImgPath);
108             console.log('创建目录成功:'+heroVerImgPath);
109         }catch(e){
110             console.log('创建目录失败',heroVerImgPath,e);
111             return '创建目录失败:'+'\n'+heroVerImgPath+'\n'+e;
112         }
113     }
114     // 皮肤目录
115     heroVerSkinPath = heroVerPath + "\\" + "skin";
116     var exists = fs.existsSync(heroVerSkinPath);
117     if(!exists){
118         // 不存在创建目录
119         try{
120             fs.mkdirSync(heroVerSkinPath);
121             console.log('创建目录成功:'+heroVerSkinPath);
122         }catch(e){
123             console.log('创建目录失败',heroVerSkinPath,e);
124             return '创建目录失败:'+'\n'+heroVerSkinPath+'\n'+e;
125         }
126     }
127     // 技能目录
128     heroVerSkillPath = heroVerPath + "\\" + "skill";
129     var exists = fs.existsSync(heroVerSkillPath);
130     if(!exists){
131         // 不存在创建目录
132         try{
133             fs.mkdirSync(heroVerSkillPath);
134             console.log('创建目录成功:'+heroVerSkillPath);
135         }catch(e){
136             console.log('创建目录失败',heroVerSkillPath,e);
137             return '创建目录失败:'+'\n'+heroVerSkillPath+'\n'+e;
138         }
139     }
140     for (var key in heroListJson.keys) {
141         // 下载头像图片
142         var imgName = heroListJson.data[heroListJson.keys[key]].image.full;
143         var fullImgUrl = fullImgPath+imgName;
144         console.log("抓取头像图片",imgName,fullImgUrl);
145         var opt = getRequireOption(fullImgUrl);
146         var res = request(opt.method,opt.path,opt);
147         var data = res.getBody();
148         var heroVerFullImgPath = heroVerImgPath + '\\'+imgName;
149         try{
150             var w = fs.writeFileSync(heroVerFullImgPath, data);
151         }catch(e){
152             console.log('写入错误',heroVerFullImgPath,e);
153             return '写入错误:'+"\n"+heroVerFullImgPath+"\n"+e;
154         }
155         console.log('写入成功',heroVerFullImgPath);
156 
157         // 下载英雄详细文件
158         var heroDataId = heroListJson.keys[key];
159         var heroDataUrl = heroDetailPath+heroDataId+'.js';
160         console.log("抓取英雄详细数据",heroDataId,heroDataUrl);
161         var opt = getRequireOption(heroDataUrl);
162         var res = request(opt.method,opt.path,opt);
163         var data = res.getBody('utf8');
164         // jsonp 解析
165         data = data.replace('if(!LOLherojs)var LOLherojs={champion:{}};LOLherojs.champion.'+heroDataId+'=','');
166         data = data.substr(0 ,data.length-1);
167         data = reconvert(data);
168         var heroDetailJson = JSON.parse(data);
169         var heroVerDetailPath = heroVerPath + '\\'+heroDataId+'.json';
170         try{
171             var w = fs.writeFileSync(heroVerDetailPath, data);
172         }catch(e){
173             console.log('写入错误',heroVerDetailPath,e);
174             return '写入错误:'+"\n"+heroVerDetailPath+"\n"+e;
175         }
176         console.log('写入成功',heroVerDetailPath);
177 
178         // 下载英雄皮肤图片
179         for(var skin in heroDetailJson.data.skins){
180             skin = heroDetailJson.data.skins[skin];
181             var skinImgUrl = heroDetailSkinPath + skin.id + '.jpg';
182             console.log("抓取皮肤图片",skin.id,skinImgUrl);
183             var opt = getRequireOption(skinImgUrl);
184             var res = request(opt.method,opt.path,opt);
185             var data = res.getBody();
186             var heroVerSkinImgPath = heroVerSkinPath + '\\'+skin.id + '.jpg';
187             try{
188                 var w = fs.writeFileSync(heroVerSkinImgPath, data);
189             }catch(e){
190                 console.log('写入错误',heroVerSkinImgPath,e);
191                 return '写入错误:'+"\n"+heroVerSkinImgPath+"\n"+e;
192             }
193             console.log('写入成功',heroVerSkinImgPath);
194         }
195         // 下载英雄技能图片 主动
196         for(var spell in heroDetailJson.data.spells){
197             spell = heroDetailJson.data.spells[spell];
198             var spellImgUrl = heroDetailSkillPath + spell.image.full;
199             console.log("抓取主动技能图片",spell.image.full,spellImgUrl);
200             var opt = getRequireOption(spellImgUrl);
201             var res = request(opt.method,opt.path,opt);
202             var data = res.getBody();
203             var heroVerSpellImgPath = heroVerSkillPath + '\\'+spell.image.full;
204             try{
205                 var w = fs.writeFileSync(heroVerSpellImgPath, data);
206             }catch(e){
207                 console.log('写入错误',heroVerSpellImgPath,e);
208                 return '写入错误:'+"\n"+heroVerSpellImgPath+"\n"+e;
209             }
210             console.log('写入成功',heroVerSpellImgPath);
211         }
212         // 下载英雄技能图片 被动
213         var passiveImgUrl = heroDetailPSkillPath + heroDetailJson.data.passive.image.full;
214         console.log("抓取被动技能图片",heroDetailJson.data.passive.image.full,passiveImgUrl);
215         var opt = getRequireOption(passiveImgUrl);
216         var res = request(opt.method,opt.path,opt);
217         var data = res.getBody();
218         var heroVerPassiveImgPath = heroVerSkillPath + '\\'+heroDetailJson.data.passive.image.full;
219         try{
220             var w = fs.writeFileSync(heroVerPassiveImgPath, data);
221         }catch(e){
222             console.log('写入错误',heroVerPassiveImgPath,e);
223             return '写入错误:'+"\n"+heroVerPassiveImgPath+"\n"+e;
224         }
225         console.log('写入成功',heroVerPassiveImgPath);
226 
227         //break; //test
228     }
229     return '';
230 }
231 
232 function reconvert(str){ 
233     str = str.replace(/(\\u)(\w{1,4})/gi,function($0){ 
234         return (String.fromCharCode(parseInt((escape($0).replace(/(%5Cu)(\w{1,4})/g,"$2")),16))); 
235     }); 
236     str = str.replace(/(&#x)(\w{1,4});/gi,function($0){ 
237         return String.fromCharCode(parseInt(escape($0).replace(/(%26%23x)(\w{1,4})(%3B)/g,"$2"),16)); 
238     }); 
239     str = str.replace(/(&#)(\d{1,6});/gi,function($0){ 
240         return String.fromCharCode(parseInt(escape($0).replace(/(%26%23)(\d{1,6})(%3B)/g,"$2"))); 
241     }); 
242     return str; 
243 }
244 
245 function deleteFolderRecursive(path) {
246     var files = [];
247     if( fs.existsSync(path) ) {
248         files = fs.readdirSync(path);
249         files.forEach(function(file,index){
250             var curPath = path + "/" + file;
251             if(fs.statSync(curPath).isDirectory()) { // recurse
252                 deleteFolderRecursive(curPath);
253             } else { // delete file
254                 fs.unlinkSync(curPath);
255             }
256         });
257         fs.rmdirSync(path);
258     }
259 };
260 
261 function getRequireOption(pathStr){
262     return op={
263         host:pathStr.match(/http[s]?:\/\/[^\\|\/]*/)[0].replace(/http[s]?:\/\//,''),
264         port:80,
265         method:'GET',
266         path:pathStr,
267         headers:{
268             'Host':pathStr.match(/http[s]?:\/\/[^\\|\/]*/)[0].replace(/http[s]?:\/\//,''),
269             "User-Agent":"Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/21.0.1180.92 Safari/537.1 LBBROWSER",
270             "Referer":pathStr.match(/http[s]?:\/\/[^\\|\/]*/)[0].replace(/http[s]?:\/\//,'')
271         }
272     }
273 }

委屈极了的觉得……像是个钉子户。但我们怎么都没做错的旗帜。

jade模板代码(indexTemplate.jade):

俺们采用了租房,4个男生一起住。

  1 doctype html
  2 html
  3   head
  4     title LOL英雄
  5     script(src='/javascripts/jquery-3.1.1.min.js')
  6     script(src='/javascripts/bootstrap.min.js')
  7     script(src='/core-js/client/shim.min.js')
  8     script(src='/zone.js/dist/zone.js')
  9     script(src='/jade/jade.js')
 10     script(src='/systemjs/dist/system.src.js')
 11     script(src='/javascripts/systemjs.config.js')
 12     script.
 13       System.import('app').catch(function(err){ console.error(err); });
 14     link(href='/stylesheets/bootstrap.min.css', rel='stylesheet')
 15     style.
 16       html,body{background-color: black;color:rgb(255,215,000); overflow: hidden; height:100%;}
 17       .main,.selHeroMain{
 18       width:100%;height:100%;
 19       }
 20       .selHeroContain{
 21       border-radius: 50%;
 22       border:3px rgb(255,215,000) solid;
 23       width:60%;
 24       height:90%;
 25       margin: 0 auto;
 26       }
 27       .selHeroDivOut{
 28       border:1px black solid;
 29       width:50%;
 30       height:300%;
 31       margin: auto;
 32       margin-top: -50%;
 33       background-color: black;
 34       }
 35       .selHeroDiv{
 36       position:absolute;
 37       display: none;
 38       border-radius: 50%;
 39       border:2px rgb(255,215,000) solid;
 40       background-size:196% 100%;
 41       background-repeat:no-repeat;
 42       background-position:100% 100%;
 43       overflow: hidden;
 44       box-shadow: 0px 0px 30px rgb(255,215,000);
 45       }
 46       .selHeroDiv img{
 47       height:100%;
 48       border-radius: 50%;
 49       }
 50       .leftHeros,.rightHeros{
 51       width:15%;
 52       height:90%;
 53       position:absolute;
 54       top:0px;
 55       overflow: hidden;
 56       }
 57       .leftHeros{
 58       left:0px;
 59       }
 60       .rightHeros{
 61       right:0px;
 62       }
 63       .leftHeros ul,.rightHeros ul{
 64       height:90%;
 65       margin-top: 30%;
 66       padding-left: 0px;
 67       }
 68       .leftHeros li,.rightHeros li{
 69       white-space:nowrap;
 70       font-size:20px;
 71       list-style-type:none;
 72       height:18%;
 73       padding:1% 0;
 74       border-bottom: 1px rgb(255,215,000) solid;
 75       overflow: hidden;
 76       }
 77       .leftHeros li{
 78       text-align: left;
 79       }
 80       .rightHeros li{
 81       text-align: right;
 82       }
 83       .leftHeros img,.rightHeros img{
 84       vertical-align: bottom;
 85       height:100%;
 86       overflow: hidden;
 87       }
 88       .leftHeros span,.rightHeros span{
 89       overflow: hidden;
 90       }
 91       /*  css3实现图片划过一束光闪过效果 */
 92       .selHeroDiv:before {
 93       content: ""; position: absolute; width:200px; height: 100%; top: 0; left: -350px; overflow: hidden;
 94       background: -moz-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
 95       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)));
 96       background: -webkit-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
 97       background: -o-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
 98       -webkit-transform: skewX(-25deg);
 99       -moz-transform: skewX(-25deg);
100       animation:selHeroDivAnimate 9s infinite linear;
101       }
102       .selHeroDiv:hover:before { left: 150%; animation:selHeroDivAnimateHover 1s 1 ease 0s; /*transition: left 1s ease 0s;*/}
103       @keyframes selHeroDivAnimate
104       {
105       0% {left: -350px;}
106       90% {left: -350px;}
107       100% {left: 150%;}
108       }
109       @keyframes selHeroDivAnimateHover
110       {
111       0% {left: -350px;}
112       100% {left: 150%;}
113       }
114       .pullDown{
115       width:100%;
116       height:10%;
117       position:absolute;
118       top:0px;
119       text-align: center;
120       vertical-align: middle;
121       font-size: 50px;
122       color:white;
123       cursor:pointer;
124       }
125       .pullDown span{width:100%;position: absolute;top: 0px;left:0px;animation:pullDown 2s infinite linear;}
126       @keyframes pullDown
127       {
128       0% {top: 0px;}
129       50% {top: 20px;}
130       100% {top: 0px;}
131       }
132       .heroList{
133       width:100%;
134       height:60%;
135       position:absolute;
136       opacity:0.2;
137       background: gray;
138       top:90%;
139       }
140       /*.heroList:hover{
141       opacity:1;
142       background: black;
143       top:40%;
144       transition: opacity,top 1s ease 0s;
145       }*/
146       .pullUp{
147       position:relative;
148       top:0px;
149       color:white;
150       text-align: right;
151       display: none;
152       cursor:pointer;
153       }
154       .hListMain{display: none; height: 95%;}
155       .hListSearchBar{height: 10%;}
156       .hListStyle1,.hListStyle2{vertical-align: middle; font-size: 30px; height:85%; overflow-y: auto; overflow-x: hidden;}
157       .hListStyle1 .row,.hListStyle2 .row{ margin-top: 15px; border-bottom: 1px rgb(255,215,000) solid; }
158       .hListStyle1 .row{cursor: pointer;}
159       .hListStyle2 .row{border: none;}
160       .hListStyle1 .row div{ height: 100px; line-height: 100px;}
161       .hListStyle2 .row {width:70%; margin:0 auto;}
162       .hListStyle2 .row div{cursor: pointer;}
163       .hListStyle2{display: none;}
164       .hero{position: absolute;width:80%; border: 1px rgb(255,215,000) solid;top:-100%;
165       border-radius: 30px; top:10%;left:10%;background: #2B2B2B; font-size: 30px; height: 80%; /*display: none;*/}
166       .heroTitle{height:20%;width:100%;}
167       .heroData{overflow-y: auto; overflow-x: hidden;height:75%;width:100%;font-size: 15px;}
168       .heroData .row{margin-bottom: 5px; }
169       .heroClose{color:white; font-size: 10px; cursor: pointer;}
170       .getHeroList{position: absolute;top:0px; right: 0px; color: black;font-style: 13px;cursor: pointer;z-index:99;}
171       .leftHeros li:first-child img{border:1px rgb(255,215,000) solid}
172       .loadingDiv{width:100%;height:100%;top:0px;left:0px;background:gray;font-size:40px;position:absolute;text-align:center;padding:20% 0;opacity:0.75;text-shadow: 0px 0px 40px rgb(255,000,000);}
173   body
174     script.
175       window.onresize = function(){
176       var selHeroDivHW = $(".selHeroDivOut").width();
177       $(".selHeroDiv").width(selHeroDivHW);
178       $(".selHeroDiv").height(selHeroDivHW);
179       $(".selHeroDiv").offset({"left":$(".selHeroContain").offset().left+($(".selHeroContain").width()-selHeroDivHW)*0.5
180       ,"top":$(".selHeroContain").offset().top+($(".selHeroContain").height()-selHeroDivHW)*0.5});
181       $(".selHeroDiv").show();
182       };
183       function stopPropagation(e){
184       window.event? window.event.cancelBubble = true : e.stopPropagation();
185       }
186       Array.prototype.contains=function(obj) {
187       var index=this.length;
188       while (index--){
189       if(this[index]===obj){
190       return true;
191       }
192       }
193       return false;
194       }
195     .main

暑假得了,说好的4人联名找房子变成了2人,此外2人各有借口的不来看房屋。

Angularjs2
模板代码(selectHero.html)【理论上应有分组件,通过组件父子间通信来成功】:

说到底,经过忙碌的挑三拣四我们挑选了泉水苑,幸运的是女朋友租的屋宇离我们也很近。

  1       <div class='selHeroMain' (mousewheel)="showHideHeroListPanel()" >
  2         <div class='selHeroContain' #selHeroContain>
  3           <div class='selHeroDivOut' #selHeroDivOut>
  4             <div class='selHeroDiv' [ngStyle]="{'background-image': styleExp}" #selHeroDiv>
  5             </div>
  6           </div>
  7         </div>
  8         <div class='leftHeros'>
  9           <ul>
 10             <li>玩家1:<img src='{{leftPlayImg1}}' width='133' height='120' /></li>
 11             <li>玩家2:<img src='{{leftPlayImg2}}' width='133' height='120' /></li>
 12             <li>玩家3:<img src='{{leftPlayImg3}}' width='133' height='120' /></li>
 13             <li>玩家4:<img src='{{leftPlayImg4}}' width='133' height='120' /></li>
 14             <li>玩家5:<img src='{{leftPlayImg5}}' width='133' height='120' /></li>
 15           </ul>
 16         </div>
 17         <div class='rightHeros'>
 18           <ul>
 19             <li><img src='{{rightPlayImg1}}' width='133' height='120' />:玩家1</li>
 20             <li><img src='{{rightPlayImg2}}' width='133' height='120' />:玩家2</li>
 21             <li><img src='{{rightPlayImg3}}' width='133' height='120' />:玩家3</li>
 22             <li><img src='{{rightPlayImg4}}' width='133' height='120' />:玩家4</li>
 23             <li><img src='{{rightPlayImg5}}' width='133' height='120' />:玩家5</li>
 24           </ul>
 25         </div>
 26         <!--<div class='pullDown'>下拉/点击 选择英雄</div>-->
 27       </div>
 28       <div class='heroList container' [@openClosePanel]="statePanelExpression" #heroList >
 29         <div class='pullDown' (click)="showHeroListPanel()" #pullDown >下拉/点击 选择英雄</div>
 30         <div class='pullUp' (click)="hideHeroListPanel()" #pullUp >关闭</div>
 31         <div class='hListMain' #hListMain >
 32           <div class='hListSearchBar form-inline text-center'>
 33             <div class="row">
 34               <div class="col-lg-1 col-md-1 col-sm-1">
 35                 <div class="dropdown">
 36                     <button type="button" class="btn dropdown-toggle btn-primary" id="dropdownMenuVer" data-toggle="dropdown">版本
 37                         
 38                     </button>
 39                     <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuVer">
 40                         <li role="presentation" *ngFor="let ver of heroVers.vers; let i = index" [ngClass]="{'active':ver==curVer}" (click)="getNewVersion(ver)">
 41                             <a role="menuitem" tabindex="-1" href="#" >{{ver}}</a>
 42                         </li>
 43                     </ul>
 44                 </div>
 45               </div>
 46               <div class="col-lg-1 col-md-1 col-sm-1">
 47                 <div class="dropdown">
 48                     <button type="button" class="btn dropdown-toggle btn-primary" id="dropdownMenuVer" data-toggle="dropdown">英雄类型
 49                         
 50                     </button>
 51                     <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuVer">
 52                         <li role="presentation" *ngFor="let htc of heroTypeCList; let i = index" [ngClass]="{'active':htc==heroTypeCCur}" (click)="filterType(heroTypeCList[i])">
 53                             <a role="menuitem" tabindex="-1" href="#">{{heroTypeCList[i]}}</a>
 54                         </li>
 55                     </ul>
 56                 </div>
 57               </div>
 58               <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>
 59               <div class="col-lg-8 col-md-8 col-sm-8">检索条件: {{heroTypeCCur}}英雄 | 名称:{{heroFilterName.value}}</div>
 60               <div class="col-lg-1 col-md-1 col-sm-1">
 61                 <div class="dropdown pull-right">
 62                     <button type="button" class="btn dropdown-toggle btn-primary" id="dropdownMenuVer" data-toggle="dropdown">显示方式
 63                         
 64                     </button>
 65                     <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuVer">
 66                         <li role="presentation" [ngClass]="{'active':showListTypeCur=='LB'}">
 67                             <a role="menuitem" tabindex="-1" href="#" #menuitemLB (click)="heroListLB()" >列表</a>
 68                         </li>
 69                         <li role="presentation" [ngClass]="{'active':showListTypeCur=='TZ'}">
 70                             <a role="menuitem" tabindex="-1" href="#" #menuitemTZ (click)="heroListTZ()" >图阵</a>
 71                         </li>
 72                     </ul>
 73                 </div>
 74               </div>
 75             </div>
 76           </div>
 77           <div class='hListStyle1' #hListStyle1 >
 78             <div class="row text-center" (click)="showHeroDetail(heroData)" (mouseenter)="showBigPic(heroData)" *ngFor="let heroData of heroDataList; let i = index">
 79               <div class="col-lg-1 col-md-1 col-sm-1">
 80               </div>
 81               <div class="col-lg-2 col-md-2 col-sm-2">
 82                 <img src='/{{curVer}}/imgs/{{heroData.image.full}}' width="90" />
 83               </div>
 84               <div class="col-lg-1 col-md-1 col-sm-1">
 85                 {{heroData.id}}
 86               </div>
 87               <div class="col-lg-2 col-md-2 col-sm-2">
 88                 {{heroData.name}}
 89               </div>
 90               <div class="col-lg-2 col-md-2 col-sm-2">
 91                 {{heroData.title}}
 92               </div>
 93               <div class="col-lg-2 col-md-2 col-sm-2">
 94                 {{heroData.tags}}
 95               </div>
 96               <div class="col-lg-2 col-md-2 col-sm-2">
 97               </div>
 98             </div>
 99           </div>
100           <div class='hListStyle2' #hListStyle2 >
101             <div class="row text-center">
102               <div class="col-lg-2 col-md-2 col-sm-2" (click)="showHeroDetail(heroData)" (mouseenter)="showBigPic(heroData)" *ngFor="let heroData of heroDataList; let i = index">
103                 <a data-toggle="tooltip" data-placement="top" title="{{heroData.id}}:{{heroData.name}}:{{heroData.title}}:{{heroData.tags}}">
104                   <img src='/{{curVer}}/imgs/{{heroData.image.full}}' width="120" />
105                 </a>
106               </div>  
107             </div>
108           </div>
109         </div>
110       </div>
111       <div *ngIf="heroShowDetailAllytips && heroShowDetailAllytips.length>0" class='hero container' [@openCloseHero]="stateHeroExpression" #hero >
112         <p class="heroClose text-right" (click)="hideHeroDetail()" >关闭</p>
113         <div class="heroTitle">
114           <div class="row">
115             <div class="col-lg-2 col-md-2 col-sm-2">
116               <img src='/{{curVer}}/imgs/{{heroShowDetail.id}}.png' width="120" />
117             </div>
118             <div class="col-lg-6 col-md-6 col-sm-6">
119               ({{heroShowDetail.id}}) {{heroShowDetail.name}} : {{heroShowDetail.title}}
120             </div>
121             <div class="col-lg-2 col-md-2 col-sm-2 text-right">
122               [{{heroShowDetail.tags}}]
123             </div>
124           </div>
125         </div>
126         <div class="heroData">
127           <div class="row">
128             <div class="col-lg-2 col-md-2 col-sm-2"></div>
129             <div class="col-lg-8 col-md-8 col-sm-8">
130               <div id="myCarousel" class="carousel slide" #myCarousel>
131               <!-- 轮播(Carousel)指标 -->
132               <ol class="carousel-indicators">
133               <li data-target="#myCarousel" [ngClass]="{'active':i==0}" *ngFor="let skin of heroShowDetailSkins; let i = index" ></li>
134               </ol>
135               <!-- 轮播(Carousel)项目 -->
136               <div class="carousel-inner">
137               <div class="item" [ngClass]="{'active':i==0}" *ngFor="let skin of heroShowDetailSkins; let i = index" >
138               <img src="/{{curVer}}/skin/{{skin.id}}.jpg" alt="{{skin.name}}">
139               <div class="carousel-caption">{{skin.name}}</div>
140               </div>
141               </div>
142               <!-- 轮播(Carousel)导航 -->
143               <a class="carousel-control left" href="#myCarousel" 
144               data-slide="prev">&lsaquo;
145               </a>
146               <a class="carousel-control right" href="#myCarousel" 
147               data-slide="next">&rsaquo;
148               </a>
149               </div>
150             </div>
151             <div class="col-lg-2 col-md-2 col-sm-2"></div>
152           </div>
153           <div class="row">
154             <div class="col-lg-1 col-md-1 col-sm-1"></div>
155             <div class="col-lg-1 col-md-1 col-sm-1">故事
156             </div>
157             <div class="col-lg-10 col-md-10 col-sm-10">
158             </div>
159           </div>
160           <div class="row">
161             <div class="col-lg-2 col-md-2 col-sm-2"></div>
162             <div class="col-lg-8 col-md-8 col-sm-8">{{heroShowDetail.lore}}
163             </div>
164             <div class="col-lg-2 col-md-2 col-sm-2"></div>
165           </div>
166           <div class="row">
167             <div class="col-lg-1 col-md-1 col-sm-1"></div>
168             <div class="col-lg-1 col-md-1 col-sm-1">技能
169             </div>
170             <div class="col-lg-10 col-md-10 col-sm-10">
171             </div>
172           </div>
173           <div class="row">
174             <div class="col-lg-2 col-md-2 col-sm-2"></div>
175             <div class="col-lg-1 col-md-1 col-sm-1"><img src='/{{curVer}}/skill/{{heroShowDetailPassiveImg.full}}' width="80" /></div>
176             <div class="col-lg-7 col-md-7 col-sm-7">
177               {{heroShowDetailPassive.name}}<br/>{{heroShowDetailPassive.description}}
178             </div>
179             <div class="col-lg-2 col-md-2 col-sm-2"></div>
180           </div>
181           <div class="row">
182             <div class="col-lg-2 col-md-2 col-sm-2"></div>
183             <div class="col-lg-1 col-md-1 col-sm-1"><img src='/{{curVer}}/skill/{{heroShowDetailSpells1.image}}' width="80" /></div>
184             <div class="col-lg-3 col-md-3 col-sm-3">
185               {{heroShowDetailSpells1.id}}<br/>
186               {{heroShowDetailSpells1.name}}<br/>
187               {{heroShowDetailSpells1.description}}<br/>
188               {{removeTag(heroShowDetailSpells1.tooltip)}}
189             </div>
190             <div class="col-lg-1 col-md-1 col-sm-1"><img src='/{{curVer}}/skill/{{heroShowDetailSpells2.image}}' width="80" /></div>
191             <div class="col-lg-3 col-md-3 col-sm-3">
192               {{heroShowDetailSpells2.id}}<br/>
193               {{heroShowDetailSpells2.name}}<br/>
194               {{heroShowDetailSpells2.description}}<br/>
195               {{removeTag(heroShowDetailSpells2.tooltip)}}
196             </div>
197             <div class="col-lg-2 col-md-2 col-sm-2"></div>
198           </div>
199           <div class="row">
200             <div class="col-lg-2 col-md-2 col-sm-2"></div>
201             <div class="col-lg-1 col-md-1 col-sm-1"><img src='/{{curVer}}/skill/{{heroShowDetailSpells3.image}}' width="80" /></div>
202             <div class="col-lg-3 col-md-3 col-sm-3">
203               {{heroShowDetailSpells3.id}}<br/>
204               {{heroShowDetailSpells3.name}}<br/>
205               {{heroShowDetailSpells3.description}}<br/>
206               {{removeTag(heroShowDetailSpells3.tooltip)}}
207             </div>
208             <div class="col-lg-1 col-md-1 col-sm-1"><img src='/{{curVer}}/skill/{{heroShowDetailSpells4.image}}' width="80" /></div>
209             <div class="col-lg-3 col-md-3 col-sm-3">
210               {{heroShowDetailSpells4.id}}<br/>
211               {{heroShowDetailSpells4.name}}<br/>
212               {{heroShowDetailSpells4.description}}<br/>
213               {{removeTag(heroShowDetailSpells4.tooltip)}}
214             </div>
215             <div class="col-lg-2 col-md-2 col-sm-2"></div>
216           </div>
217           <div class="row">
218             <div class="col-lg-1 col-md-1 col-sm-1"></div>
219             <div class="col-lg-1 col-md-1 col-sm-1">技巧
220             </div>
221             <div class="col-lg-10 col-md-10 col-sm-10">
222             </div>
223           </div>
224           <div class="row">
225             <div class="col-lg-2 col-md-2 col-sm-2"></div>
226             <div class="col-lg-1 col-md-1 col-sm-1">己方技巧:</div>
227             <div class="col-lg-7 col-md-7 col-sm-7">
228               <div class="row" *ngFor="let str of heroShowDetailAllytips; let i = index">{{str}}</div>
229             </div>
230             <div class="col-lg-2 col-md-2 col-sm-2"></div>
231           </div>
232           <div class="row">
233             <div class="col-lg-2 col-md-2 col-sm-2"></div>
234             <div class="col-lg-1 col-md-1 col-sm-1">敌方技巧:</div>
235             <div class="col-lg-7 col-md-7 col-sm-7">
236               <div class="row" *ngFor="let str of heroShowDetailEnemytips; let i = index">{{str}}</div>
237             </div>
238             <div class="col-lg-2 col-md-2 col-sm-2"></div>
239           </div>
240         </div>
241 
242       </div>
243       <div class="getHeroList" #getHeroList (click)="doGetHeroList()" [style.color]="loadFinished?'black':'gold'">点此抓取LOL英雄列表 ^-^</div>
244       <div class='loadingDiv' [style.display]="loadFinished?'none':'block'">{{loadingText}}</div>

租房的光景也许是自己20年来最快乐的小日子吧!苹果台式机用了2周丢给了女朋友,每一日都是玩游戏,所谓的接本课程,考试前背背听天由命的试验就好,一初步的想着2年岁月缓一缓,多学点有用的学问再去做事的想法不知丢到了哪位爪哇国去了!

Angularjs2 ts代码(app.component.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';
  9 
 10 @Component({
 11   selector: '.main',
 12   animations: [
 13       trigger(
 14       'openClosePanel',
 15       [
 16         state('close, void', style({opacity:'0.2',top:'90%'})),
 17         state('open', style({opacity:'1',top:'40%'})),
 18         transition(
 19             'close <=> open', [animate(500)])
 20       ]),
 21       trigger(
 22       'openCloseHero',
 23       [
 24         state('close, void', style({opacity:'0',top:'-100%'})),
 25         state('open', style({opacity:'1',top:'10%'})),
 26         transition(
 27             'close <=> open', [animate(500)]),
 28         transition(
 29             'void => open', [animate(500)])
 30       ])
 31     ],
 32   templateUrl: '/selectHero.html'
 33 })
 34 export class AppComponent implements AfterViewInit,OnInit {
 35     styleExp = 'url("main.jpg")';
 36     leftPlayImg1 = 'ngularjs.png';
 37     leftPlayImg2 = 'xpressjs.jpg';
 38     leftPlayImg3 = 'ootstrap.jpg';
 39     leftPlayImg4 = 'nodejs.png';
 40     leftPlayImg5 = 'npm.jpg';
 41     rightPlayImg1 = 'spring.jpg';
 42     rightPlayImg2 = 'struts2.jpg';
 43     rightPlayImg3 = 'typescript.jpg';
 44     rightPlayImg4 = 'tomcat.jpg';
 45     rightPlayImg5 = 'java.png';
 46     heroTypeCList = ["所有","战士","坦克","刺客","法师","射手","辅助"];
 47     heroTypeCCur = "所有";
 48     showListTypeCur = "LB";
 49     // loading
 50     loadFinished = false;
 51     loadingText = 'Hellow World! 你好!';
 52 
 53     // 获取dom元素 start
 54     // 英雄大头像圈
 55     @ViewChild('selHeroDiv') selHeroDiv: ElementRef;
 56     @ViewChild('selHeroDivOut') selHeroDivOut: ElementRef;
 57     @ViewChild('selHeroContain') selHeroContain: ElementRef;
 58     // 英雄列表面板
 59     @ViewChild('heroList') heroList: ElementRef;
 60     @ViewChild('hListMain') hListMain: ElementRef;
 61     @ViewChild('pullDown') pullDown: ElementRef;
 62     @ViewChild('pullUp') pullUp: ElementRef;
 63     // 英雄列表 图阵 切换
 64     @ViewChild('hListStyle1') hListStyle1: ElementRef;
 65     @ViewChild('hListStyle2') hListStyle2: ElementRef;
 66     // 抓取LOL服务器数据
 67     @ViewChild('getHeroList') getHeroListDom: ElementRef;
 68     // 显示英雄详细信息
 69     @ViewChild('hero') hero: ElementRef;
 70     // 英雄过滤名称
 71     @ViewChild('heroFilterName') heroFilterName: ElementRef;
 72 
 73 
 74     // 获取dom元素 end
 75 
 76     constructor(private renderer: Renderer,private http: Http) {
 77         // 初始:英雄列表隐藏
 78         this.statePanelExpression = 'close';
 79         // 初始:英雄详细隐藏
 80         this.stateHeroExpression = 'close';
 81     }
 82 
 83     ngAfterViewInit() {
 84         // 初期设置大头像位置 start
 85         var selHeroDivHW = this.selHeroDivOut.nativeElement.clientWidth;
 86         var selHeroContainHeight = this.selHeroContain.nativeElement.clientHeight;
 87         var selHeroContainWidth = this.selHeroContain.nativeElement.clientWidth;
 88         var selHeroContainLeft = this.selHeroContain.nativeElement.offsetLeft;
 89         var selHeroContainTop = this.selHeroContain.nativeElement.offsetTop;
 90 
 91         this.renderer.setElementStyle(this.selHeroDiv.nativeElement, 'width', selHeroDivHW+'px');
 92         this.renderer.setElementStyle(this.selHeroDiv.nativeElement, 'height', selHeroDivHW+'px');
 93         this.renderer.setElementStyle(this.selHeroDiv.nativeElement, 'left', selHeroContainLeft+(selHeroContainWidth-selHeroDivHW)*0.5 +'px');
 94         this.renderer.setElementStyle(this.selHeroDiv.nativeElement, 'top', selHeroContainTop+(selHeroContainHeight-selHeroDivHW)*0.5 +'px');
 95 
 96         this.renderer.setElementStyle(this.selHeroDiv.nativeElement, 'display', 'block');
 97         // 初期设置大头像位置 end
 98     }
 99 
100     // 英雄列表面板显示隐藏控制 start
101     statePanelExpression: string;
102     showHeroListPanel() {
103         this.renderer.setElementStyle(this.pullDown.nativeElement, 'display', 'none');
104         this.statePanelExpression = 'open';
105         this.renderer.setElementStyle(this.pullUp.nativeElement, 'display', 'block');
106         this.renderer.setElementStyle(this.heroList.nativeElement, 'background', 'black');
107         this.renderer.setElementStyle(this.hListMain.nativeElement, 'display', 'block');
108     }
109     hideHeroListPanel() {
110         this.renderer.setElementStyle(this.pullUp.nativeElement, 'display', 'none');
111         this.statePanelExpression = 'close';
112         this.renderer.setElementStyle(this.pullDown.nativeElement, 'display', 'block');
113         this.renderer.setElementStyle(this.heroList.nativeElement, 'background', 'gray');
114         this.renderer.setElementStyle(this.hListMain.nativeElement, 'display', 'none');
115     }
116     showHideHeroListPanel(){
117         if(this.statePanelExpression == 'close'){
118             this.showHeroListPanel();
119         }else{
120             this.hideHeroListPanel();
121         }
122     }
123     // 英雄列表面板显示隐藏控制 end
124 
125     // 英雄列表 图阵 切换 start
126     heroListLB(){
127         this.renderer.setElementStyle(this.hListStyle2.nativeElement, 'display', 'none');
128         this.renderer.setElementStyle(this.hListStyle1.nativeElement, 'display', 'block');
129         this.showListTypeCur = "LB";
130     }
131     heroListTZ(){
132         this.renderer.setElementStyle(this.hListStyle1.nativeElement, 'display', 'none');
133         this.renderer.setElementStyle(this.hListStyle2.nativeElement, 'display', 'block');
134         this.showListTypeCur = "TZ";
135     }
136     // 英雄列表 图阵 切换 end
137 
138     // 抓取LOL服务器数据
139     doGetHeroList(){
140         this.renderer.setElementStyle(this.getHeroListDom.nativeElement, 'display', 'none');
141         this.http.get('/getHeroList').toPromise().
142         then(res => 
143         {
144             alert(res.text());
145             this.renderer.setElementStyle(this.getHeroListDom.nativeElement, 'display', 'block');
146             this.ngAfterViewInit();
147             this.ngOnInit();
148         }).catch((e)=>console.log(e));
149     }
150 
151     // 显示英雄详细信息 start
152     stateHeroExpression: string;
153     curHeroDataId = '';
154     heroShowDetail:any = {};
155     heroShowDetailPassive:any = {};
156     heroShowDetailPassiveImg = '';
157     heroShowDetailSkins : Array<any> = [];
158     heroShowDetailSpells1 :any = {};
159     heroShowDetailSpells2 :any = {};
160     heroShowDetailSpells3 :any = {};
161     heroShowDetailSpells4 :any = {};
162     heroShowDetailAllytips : Array<any> = [];
163     heroShowDetailEnemytips : Array<any> = [];
164     showHeroDetail(heroData:any){
165         // 获取英雄详细数据
166         this.curHeroDataId = heroData.id;
167         this.http.get('/' + this.curVer + '/'+ heroData.id +'.json').toPromise()
168         .then((res:Response)=>{
169             if(JSON.parse(res.text()).data.id == this.curHeroDataId){
170                 this.heroShowDetail = JSON.parse(res.text()).data;
171                 this.heroShowDetailSkins = JSON.parse(res.text()).data.skins;
172                 this.heroShowDetail.tags = this.heroTypeEC2C(this.heroShowDetail.tags);
173                 this.heroShowDetailPassive = JSON.parse(res.text()).data.passive;
174                 this.heroShowDetailPassiveImg = JSON.parse(res.text()).data.passive.image;
175 
176                 this.heroShowDetailSpells1 = JSON.parse(res.text()).data.spells[0];
177                 this.heroShowDetailSpells2 = JSON.parse(res.text()).data.spells[1];
178                 this.heroShowDetailSpells3 = JSON.parse(res.text()).data.spells[2];
179                 this.heroShowDetailSpells4 = JSON.parse(res.text()).data.spells[3];
180                 this.heroShowDetailSpells1.image = JSON.parse(res.text()).data.spells[0].image.full;
181                 this.heroShowDetailSpells2.image = JSON.parse(res.text()).data.spells[1].image.full;
182                 this.heroShowDetailSpells3.image = JSON.parse(res.text()).data.spells[2].image.full;
183                 this.heroShowDetailSpells4.image = JSON.parse(res.text()).data.spells[3].image.full;
184                 this.heroShowDetailAllytips = JSON.parse(res.text()).data.allytips;
185                 this.heroShowDetailEnemytips = JSON.parse(res.text()).data.enemytips;
186             }
187         }).catch(this.handleError);
188         this.stateHeroExpression = 'open';
189     }
190     hideHeroDetail() {
191         this.stateHeroExpression = 'close';
192     }
193     // 显示英雄详细信息 end
194     
195     // 英雄列表所有版本号
196     heroVers = JSON.parse('{}');
197     heroDataList : Array<any> = [];
198     bakHeroDataList : Array<any> = [];
199     curVer = '';
200     ngOnInit(){
201         // 取得英雄列表所有版本号
202         // console.log('client get hero version');
203         this.loadingText = '开始取得英雄列表所有版本号';
204         this.http.get('/getHeroVers').toPromise()
205         .then((res:Response)=>{
206             this.heroVers = this.extractVersData(res);
207             if(!this.heroVers && !this.heroVers.vers){
208                 this.loadingText = '服务器尚未抓取英雄列表,请点击右上角文字抓取数据。';
209                 return;
210             }
211             this.curVer = (this.heroVers && this.heroVers.vers &&this.heroVers.vers.length>0)?this.heroVers.vers[0]:'';
212             if(this.curVer!=''){
213                 // 获取英雄列表json
214                 this.loadingText = '开始取得英雄列表';
215                 this.http.get('/' + this.curVer + '/herolist.json').toPromise()
216                 .then((res:Response)=>{
217                     if(JSON.parse(res.text()).version == this.curVer){
218                         this.heroDataList = [];
219                         for (var key in JSON.parse(res.text()).keys) {
220                             var heroIdTmp = JSON.parse(res.text()).keys[key];
221                             this.heroDataList.push(
222                                 JSON.parse(res.text()).data[heroIdTmp]
223                             );
224                             this.bakHeroDataList.push(
225                                 JSON.parse(res.text()).data[heroIdTmp]
226                             );
227                         }
228                         for (var i = this.heroDataList.length - 1; i >= 0; i--) {
229                             this.heroDataList[i].tags = this.heroTypeEC2C(this.heroDataList[i].tags);
230                             this.bakHeroDataList[i].tags = this.heroTypeEC2C(this.bakHeroDataList[i].tags);
231                         }
232                         this.heroDataTypeList = this.heroDataList;
233                         this.loadingText = '随机生成对战英雄';
234                         this.genFight();
235                         this.loadingText = '加载完成';
236                         this.loadFinished = true;
237                     }
238                 }).catch(this.handleError);
239             }else{
240                 this.loadingText = '服务器尚未抓取英雄列表,请点击右上角文字抓取数据。';
241             }
242         }).catch(this.handleError);
243     }
244 
245     genFight(){
246         // 随机生成对战英雄
247         var max = this.heroDataList.length;
248         var randomI = Math.floor(Math.random()*max);
249         this.leftPlayImg1 = '/'+this.curVer+'/imgs/'+this.heroDataList[randomI].id+'.png';
250         var myHero = this.heroDataList[randomI];
251         randomI = Math.floor(Math.random()*max);
252         this.leftPlayImg2 = '/'+this.curVer+'/imgs/'+this.heroDataList[randomI].id+'.png';
253         randomI = Math.floor(Math.random()*max);
254         this.leftPlayImg3 = '/'+this.curVer+'/imgs/'+this.heroDataList[randomI].id+'.png';
255         randomI = Math.floor(Math.random()*max);
256         this.leftPlayImg4 = '/'+this.curVer+'/imgs/'+this.heroDataList[randomI].id+'.png';
257         randomI = Math.floor(Math.random()*max);
258         this.leftPlayImg5 = '/'+this.curVer+'/imgs/'+this.heroDataList[randomI].id+'.png';
259         randomI = Math.floor(Math.random()*max);
260         this.rightPlayImg1 = '/'+this.curVer+'/imgs/'+this.heroDataList[randomI].id+'.png';
261         randomI = Math.floor(Math.random()*max);
262         this.rightPlayImg2 = '/'+this.curVer+'/imgs/'+this.heroDataList[randomI].id+'.png';
263         randomI = Math.floor(Math.random()*max);
264         this.rightPlayImg3 = '/'+this.curVer+'/imgs/'+this.heroDataList[randomI].id+'.png';
265         randomI = Math.floor(Math.random()*max);
266         this.rightPlayImg4 = '/'+this.curVer+'/imgs/'+this.heroDataList[randomI].id+'.png';
267         randomI = Math.floor(Math.random()*max);
268         this.rightPlayImg5 = '/'+this.curVer+'/imgs/'+this.heroDataList[randomI].id+'.png';
269         this.curHeroBigDataId = myHero.id;
270         this.http.get('/' + this.curVer + '/'+ myHero.id +'.json').toPromise()
271         .then((res:Response)=>{
272             if(JSON.parse(res.text()).data.id == this.curHeroBigDataId){
273                 var max = JSON.parse(res.text()).data.skins.length;
274                 var randomI = Math.floor(Math.random()*max);
275                 this.styleExp = 'url("/'+this.curVer+'/skin/'
276                             +JSON.parse(res.text()).data.skins[randomI].id
277                             +'.jpg")';
278             }
279         }).catch(this.handleError);
280     }
281 
282     // 处理英雄列表所有版本号
283     private extractVersData(res: Response) {
284         let body = JSON.parse(res.text());
285         if(body && body.vers){
286             body.vers.sort((a : any,b : any)=>b>a); // 简单排序,需要加工
287         }
288         return body || { };
289     }
290     private handleError (error: Response | any) {
291         console.error(error);
292         return { };
293     }
294 
295     private heroTypeEC2C(ht:Array<string>): Array<string>{
296         let result : Array<string> = [];
297         for (var i = ht.length - 1; i >= 0; i--) {
298             result.push(ht[i].replace('Mage','法师')
299                 .replace('Fighter','战士')
300                 .replace('Tank','坦克')
301                 .replace('Assassin','刺客')
302                 .replace('Marksman','射手')
303                 .replace('Support','辅助'));
304         }
305         return result;
306     }
307     removeTag(str:string):string{
308         if(str)
309             return str.replace(/<.*?>/ig,"");
310         return '';
311     }
312 
313     curHeroBigDataId = '';
314     showBigPic(heroData:any){
315         // 修改大图像
316         this.leftPlayImg1 = '/'+this.curVer+'/imgs/'+heroData.id+'.png';
317         this.curHeroBigDataId = heroData.id;
318         this.http.get('/' + this.curVer + '/'+ heroData.id +'.json').toPromise()
319         .then((res:Response)=>{
320             if(JSON.parse(res.text()).data.id == this.curHeroBigDataId){
321                 var max = JSON.parse(res.text()).data.skins.length;
322                 var randomI = Math.floor(Math.random()*max);
323                 this.styleExp = 'url("/'+this.curVer+'/skin/'
324                             +JSON.parse(res.text()).data.skins[randomI].id
325                             +'.jpg")';
326             }
327         }).catch(this.handleError);
328     }
329     heroDataTypeList : Array<any> = [];
330     filterType(type:string):void{
331         // 选择英雄类型
332         this.heroTypeCCur = type;
333         this.heroDataList = this.bakHeroDataList.filter(
334             (hero:any)=>this.heroTypeCCur =='所有' || hero.tags.contains(this.heroTypeCCur));
335         this.heroDataTypeList = this.heroDataList;
336     }
337     filterTypeFun(hero:any){
338         return hero.tags.contains(this.heroTypeCCur);
339     }
340     searchHeroByName(value: string){
341         // 过滤英雄名称
342         this.heroDataList = this.heroDataTypeList.filter(
343             (hero:any)=>value =='' 
344             || hero.id.toLowerCase().indexOf(value.toLowerCase())>=0
345             || hero.name.toLowerCase().indexOf(value.toLowerCase())>=0
346             || hero.title.toLowerCase().indexOf(value.toLowerCase())>=0);
347     }
348     tempVer = '';
349     getNewVersion(ver: string){
350         // 重新获取英雄版本
351         this.tempVer = ver;
352         if(this.tempVer!='')
353             // 获取英雄列表json
354             this.http.get('/' + this.tempVer + '/herolist.json').toPromise()
355             .then((res:Response)=>{
356                 if(JSON.parse(res.text()).version == this.tempVer){
357                     this.heroDataList = [];
358                     for (var key in JSON.parse(res.text()).keys) {
359                         var heroIdTmp = JSON.parse(res.text()).keys[key];
360                         this.heroDataList.push(
361                             JSON.parse(res.text()).data[heroIdTmp]
362                         );
363                         this.bakHeroDataList.push(
364                             JSON.parse(res.text()).data[heroIdTmp]
365                         );
366                     }
367                     for (var i = this.heroDataList.length - 1; i >= 0; i--) {
368                         this.heroDataList[i].tags = this.heroTypeEC2C(this.heroDataList[i].tags);
369                         this.bakHeroDataList[i].tags = this.heroTypeEC2C(this.bakHeroDataList[i].tags);
370                     }
371                     this.heroDataTypeList = this.heroDataList;
372                     this.genFight();
373                     this.curVer = ver;
374                     this.heroTypeCCur = '所有';
375                     this.heroFilterName.nativeElement.value = '';
376                 }
377             }).catch((error: Response | any)=>{
378                 alert('错误:找不到改版本信息');
379                 return {};
380             });
381     }
382 
383 }

一个在该校住隔壁宿舍的人给我们介绍了个去市场全职的做事。于是4人便都去了。


起初也做过些兼职,可是都是些纤维的兼顾,1天2天的,不算什么,那些只是长时间的兼职啊!人生第一次哟!办了银行卡签了合同的啊!

中等效果图如下:

临兼职的夜晚睡不着觉,牙齿发痒,11点上班,去那1时辰,我6点就醒了……

html模板制作:

感到自己遭遇些相比大的作业中午都睡不着的楷模,上五遍那样是考驾照,再上四次是珍惜上了一个人,再上三回是小学春游…………

图片 2

就这么,全职,上课,去女朋友那吃饭与争吵,玩乐,看随笔,睡觉,回家……感觉日子过的很快意。然则心潮澎湃的光景注定过的迅猛很快吧!

图片 3

10个月后,我们采纳了辞职。

图片 4

我们两两别离在不同的店里工作,在同一层,寒假由于这2人来的太迟被开除了……在干了2个月后,由于考试,也因为做的有点累,想玩一玩了。

图片 5

自家发音讯给一个玩的相比好的营业员说“没事,我们之后也会时时回来看望你们的!”

抓取数据:

直到前几天,我也并未过去看过,听说将来她们中几近也因为商家里面的调动与本人的因由,或主动辞去,或被动调走了这多少个地方,可能再也看不到店里的人马了啊。

图片 6

离职后的一个月,高校考试完先放2周,过去后配了个总计机,先是Taobao上买显卡主板之类的翻车后接纳了在京东买。最后连显示屏5k配了台能玩世面上基本上娱乐的处理器。

图片 7

有了统计机,我长远的痛感到了“游戏真好玩啊!”那话是怎么来的,此前家里的的总括机很渣,我成天拿他看随笔,我觉得自己欣赏看小说,现在总的来说,倘使有打闹的话我说不定会更爱好玩游戏吧?

数据:

出租房的客厅放了3台微机,还有一人在小房间里玩,像是一个网吧。

图片 8

几个人白天黑夜的玩着这些游戏,感觉就很好玩,但玩久了,夜里躺床上时,我的心目又随时泛上来一阵阵焦虑的痛感,我问自己“这种整天玩游戏的生存,真的是团结想要的啊?”

图片 9

和女朋友还有女友的闺蜜一起做一个发传单的兼顾,带着无所事事的4人组也一同去发传单。一天发2钟头,一周发2,3次。15元一刻钟,发了一、三个月,拿了300的薪资。。

图片 10

这和在市场站着时一月2000多的工薪差远了……但聊胜于无。就当是旁人花钱给自己锻练身体的吗!整天睡窝里也不佳。

图片 11

就在自我觉着会这样玩游戏的度过最终半年的接本生活时,意外便冒出了,我以为这种也好不容易意外。

图片 12

该校说最终一学期一周唯有一节课。

用angularjs2 绑定数据后:

这不撒子嘛!一周二节课,我还呆在这样远的地点!我干什么不回家呢???

首页:

在老妈的劝诫与坚定不移下,联系了当程序员10多年的表弟。我是不想联系的,一年半从前说要好好学习,有题目平日问她去,结果坚定不移了很短的光阴就从未再坚贞不屈了,我觉得很惭愧。

图片 13

最终,在堂弟的赞助下在一个创业公司找了份软件测试的劳作当做最先工作。在那么些行当好像裙带关系是不存在的,我也驾驭,即便我怎么样都不会硬要去哥哥这里,最终是2人都会很无耻。

 列表:

正所谓,靠山山倒,靠人人走,求神拜佛,不如求己。

图片 14

自家是想做这一行的,我以为。论嘴皮子我也不6,脸皮我也不厚,力气我也没多少,捞好正式也是这个这么长年累月了,不做那一个,我做哪些去吧?

图片 15

于是乎我们泉水4人组散场了,搬家搬了3天。看着房间里的东西一点一点的远非了,一种难以名状的感到在心底激荡着,不知是不是难过,只认为有点想哭。。

详细:

女友和他爱人齐声送自己去车站,路上很压抑,我也并不想张嘴,毕竟经此一别,就再也不可能每一天晤面,天天在一块用餐,玩乐……

图片 16

稍微想哭,但自我忍住了,我心满意足道“这样可以,未来你也不用烦我接连惹你发火了。我也不用觉得你每天想吃什么样的时候很慢,觉得您打游戏很菜而烦你了……”

图片 17

又走了一会,她说,我们星期三去找你玩吧!这么长年累月,也没去你家这里看一看……

检索:

周末,不出意外的她又嫌弃了两遍我的智障,在家附近玩了一早上,早晨5、6点,看着他俩上车了,我恍然觉得一种难受的感觉到再一次涌上了心头。

图片 18

敏捷的蹬着摩拜,眼泪有些忍不住的往外冒……其实,我也并不想去实习啊,我想吃没营养很充实的饭,想睡每晚都憎恶外面打游戏声有些吵闹的觉,想上临考前才想到复习的课,想过每一天很咸鱼的生存啊!!!

没多少时:

但这样的生活时无法过一生的,时间不以个人的心志停留,永远都在迈入。现在您不嫌弃我没钱,又能再有几年?我不想毕业季就是分手季啊!

图片 19

mac终于派上了用途,在闲置了一年半未来……

转载请标明出处:cnblogs.com/wangxinsheng
@望星辰

自家平昔以为自己是一个路痴。但上班的这天早上自我对着高德地图转了2班车又走了2英里到了商店的所在地,所以说,不bb自己,永远不亮堂自己能形成哪一步。集团9.30上班,我8.30就到了。等了40多分钟,才有人来公司里开门。

全方位源码地址:

一个女的说她是带本人的师父,公司里20来人,连上我2个测试,似乎所有人都懂点编程的样板。每个人都身兼数职的样板。

http://download.csdn.net/user/wangxsh42 

让自身手机升级到11,再下了个软件,就起来点点点,于是,我便起首了点软件的日子。

http://download.csdn.net/detail/wangxsh42/9737390

先是天夜里,回家的中途,房东打来了个电话跟自家说着押金的题目,说房屋弄脏啊,东西弄坏啦之类的政工,我无限后悔当初把自己的身份证拿了出去和房主签约。

自打我说不租房子以来的10多天,房东一向极力的找我,说着咋样我的损失,能不可能早点搬走之类的话。

新生我们早搬走了10天。

回到家,吃了2口饭,我禁不住哭了起来。上五遍这样频繁的想哭是在初中毕业刚到职专时的时候,服装不会洗,被子叠的欠赏心悦目……

痛恨自己无能,什么也不会做,代码也不会敲。上网找了久久的语言,最终甄选了从python开始学,因为据说这门语言浅显易懂又好学,功用的界定又广又有潜力的。

不过看视频好久也感到自己并没有学多少东西,我稍稍沮丧。

先是周,我隐约,我学python,看html,看3cschool,看java……什么都看,又咋样都没懂,每晚回家都哭一会儿,分外雾里看花,周围的同事口中吐出的是“api、借口、类、库、再次来到值……”这多少个既陌生又熟识的词汇。这是职专这么些年教职工口中早就自己认为照本宣科的事物。

原先,课程设计的是没错了,不过我仿佛了然的有点迟了。

唯独,我又了然,我并不迟,小学3年级和5年级时,我也这样问过姑姑“现在攻读晚呢?”当时都也真心了一段时间。

前日自己晓得,那多少个时候学,不晚。

只要想学了,何时都不晚!

第二周,我去公司时,老董找我开口,跟自身说“实习期就2个月,你想要做什么样啊将来?”

我说“我是想做开发的”

她说“这2个月或者有些难,你得先学java,再学html,css,tcp/ip协议……对一般不怎么会的人的话是很难的,推荐自家去某部门学一学”

本身精晓,首席执行官是看在和本身哥是朋友的份上才跟自己说这一个的,也知晓,首席执行官说的有点难是往好听了的说的。大学都要学4年,再怎么有水分也未必2个月就能左右吧!

那一整天,我都很盲目,我不知晓往后该去何地,我不怎么后悔1年半前没起来读书。但当下没这种深厚的下压力我自然不会学多长时间的。。我也了然。。后悔是人最没用的心理了!

本人对协调说,旁人吃过很多苦,受过很多罪,高校一毕业能找到好差事才是常态,像本人如此初中毕业直接快活了6年多早已玩够本了。该吃点苦了……

其三周,头痛了……每一天看一会电脑就很不爽,无数次中午起来时想着要不就不去了呢,去这也学不到哪边啊,点点点,写用例……又有哪些用吧?

不过我最终都起来了,在中考前这种声音在我耳边出现过,我是失利者,没上高中。在可以转本时这种声音出现过,我从未去准备考试,我是战败者,没去转本。那一次,这种声音又冒出了,我不想按部就班这么些声音了,我不想再一枪一弹未发的失利了,我失利的太多了,我不想再尝尝这种感觉了。

星期六,高校布置了个补课,于是我礼拜日夜晚就去了泉水,和女朋友礼拜天去新街口玩了终日,吃了些小吃,很奇怪,以前也一起出去玩过许多次,却没有这种特别满面春风的感觉。可能任何的美好都有绝对论吧,比起上班的苦,此刻的斗嘴极度的甜,甜到忧伤……

星期三深夜去高校上了个课,感觉老师讲的事物本身竟然听懂了……卓殊惊奇,原来一贯听的话,我也是能听懂老师说的是何等的啊!

正午,自然又是个难受的时候了,这一次换成了他们看着本人上车了……又有一种很想哭的感到了。。。

夜晚,我敲下最后一段话的起先,心中百感交集,为啥要写博客呢?是想要做哪些啊?qq空间熟人太多,无法写,写了很搞笑。又不想写日记,这样只有自己能来看,我想把自家的东西分享出来,又不想被熟人所知吧。说不定,几年后,202X年,3X年时,外人看着我写的事物,看着方面的日期,心中想着,原来,每个大牛的始发,都很辛劳吗?

 

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website