Angular网易云
文章平均质量分 79
网易云PC模板,Angular项目
这个是作为自己写笔记用的
B站:https://space.bilibili.com/142925973
虽菜但瘾
肝就完了
展开
-
[Angular实战网易云]——30、总结
我是黑体字我是微软雅黑我是华文彩云color=#0099ff size=72 face=“黑体”color=#00ffffcolor: redcolor=gray原创 2021-01-17 14:00:26 · 198 阅读 · 1 评论 -
[Angular实战网易云]——29、注册
注册注册功能是此项目中最后一个功能模块,我原本以为注册的逻辑很简单,没想到如此的繁琐,以至于项目频频短路,而且没有测试用的注册账号,所以在真的注册时并没有拿到相应的数据。其次还有和收藏分享有关的功能,其基本的实现逻辑与登录等类似,区别之处就是数据的交互并不只是单一的接口,有关数据状态的变更还是要依靠ngrx来检测,所以关于分享与收藏并不打算繁琐的总结了。场景在登录页面和首页头像处有注册的入口,在点击触发后能够将弹窗显示并且类型为事先定义的register类型。在注册页面注入表单组件能够获取手机号码原创 2021-01-16 19:59:58 · 377 阅读 · 0 评论 -
[Angular实战网易云]——28、个人中心
个人中心个人中心是展示当前登录人信息的一个模块,关于最近听歌排行以及创建的歌单和收藏的歌单列表等。其入口是在首页登录后头像的展示位置处。实现入口app.component.html<ul> <li nz-menu-item [routerLink]="['/member', user.profile.userId]"> <i nz-icon nzType="user" nzTheme="outline"></i>我的主页 </l原创 2021-01-15 20:39:35 · 255 阅读 · 0 评论 -
[Angular实战网易云]——27、HTTP拦截器
HTTP拦截在做请求的时,有时需要对请求做一些配置上的附加或者改变,又或者是对响应值的拦截,这时候就需要拦截器了。场景签到时需要登录状态,而状态值存在cookies中,所以在每次请求时都需要将cookies一起发送过去,因此添加HTTP拦截器来拦截请求并作出配置上的改变。XMLHttpRequest类型的 withCredentials属性指示是否使用类似的cookies,因此将其设置为true即可。XMLHttpRequest.withCredentialsXMLHttpRequest.wi原创 2021-01-14 23:15:29 · 238 阅读 · 0 评论 -
[Angular实战网易云]——26、登录/登出
登录实现就目前的进度来看,是没有实现token验证的,所以所有的登录也只是简单的验证账密,即使账密的复写也只是存在localstorage内存中的,所以关于更加安全的登录不知道后面会不会修改。切换弹窗页面开始实现的default页面只是用来判断登录还是注册,所以说这一步的操作还是要更换弹窗内的渲染内容的。将创建好的登录模块和注册模块添加到app.component.html中的wy-layer-modal标签内。app.component.html<app-wy-layer-m原创 2021-01-14 21:20:27 · 708 阅读 · 0 评论 -
[Angular实战网易云]——25、登录弹框
场景当点击首页的登录按钮时,需要有个弹框来满足会员登录的功能。但是考虑到会员功能有一些收藏和转发的功能也需要弹框,所以选择使用复用弹框组件,每次调用弹框组件的时候会传递当前的操作,根据操作的不同来选择渲染进弹框的页面。实现创建组件将弹窗的组件创建到wy-ui目录下在会员登录组件中添加点击事件member-card.component.html <button nz-button class="btn" (click)="openModal.emit()">用户登录<原创 2021-01-12 22:50:47 · 531 阅读 · 0 评论 -
[Angular实战网易云]——24、动画
动画在基本实现了底部播放面板的显示之后就可以为面板做一层动画,来实现底部面板的显隐。底部就只会显示一个小按钮angular动画这里就要提到强大的angular动画了,关于更详细的教程可以去angular官网去搜索动画教程。动画用于提供运动的幻觉:HTML 元素随着时间改变样式。精心设计的动画可以让你的应用更有趣,更易用,但它们不仅仅是装饰性的。动画可以通过几种方式改善你的应用和用户体验:没有动画,Web 页面的转场就会显得突兀、不协调。运动能极大地提升用户体验,因此动画可以让用户察觉到应原创 2021-01-11 16:58:57 · 205 阅读 · 1 评论 -
[Angular实战网易云]——23、搜索组件
搜索组件首页顶部的搜索框要开始实现了。使用场景很明确,就是去根据关键字去调用专用的接口拿到返回值后渲染到组件中。为了方便维护,将搜索框封装成单独的模块创建search模块// 在wy-ui下执行 ng g m wy-search ng g c wy-search为了避免循环引用shareModule,所以要在WySearchModule中逐个引用。自定义组件使用ng-container和ng-template标签灵活创建组件渲染的内容wy-search.component.ht原创 2021-01-10 23:27:59 · 504 阅读 · 0 评论 -
[Angular实战网易云]——22、歌曲详情
歌曲详情歌曲的详情页面只是个展示页面,唯一的功能就是即时播放按钮。功能和逻辑都与之前的歌单详情一致。创建song-info组件 ng g m song-info --routing ngng c song-infosong-info-routing.moduel.tsconst routes: Routes = [ { path: 'songInfo/:id', component: SongInfoComponent, data: { titel: '歌曲详情' }, res原创 2021-01-08 21:15:02 · 191 阅读 · 0 评论 -
[Angular实战网易云]——21、歌单列表功能
歌单原创 2021-01-08 18:05:31 · 297 阅读 · 0 评论 -
[Angular实战网易云]——20、歌单详情
歌单详情场景在首页和歌单列表页,点击歌单图片能够查看当前歌单的详细信息,包括歌单内的歌曲创建新模块 ng g m sheet-info --routing ng g c sheet-infoapi接口是之前就写好的,所以api不会有什么变化,但是需要使用路由守卫来拦截数据。sheet.service.ts // 获取歌单详情 getSongSheetDetail (id: number): Observable<SongSheet> { cons原创 2021-01-07 17:10:40 · 226 阅读 · 0 评论 -
[Angular实战网易云]——19、歌单列表
系列文章目录总结原创 2021-01-06 19:15:29 · 160 阅读 · 0 评论 -
[Angular实战网易云]——18、面板优化
系列文章目录总结原创 2021-01-04 22:28:10 · 179 阅读 · 0 评论 -
[Angular实战网易云]——17、删除和清空歌曲
系列文章目录总结原创 2021-01-04 14:26:29 · 332 阅读 · 0 评论 -
[Angular实战网易云]——16、歌词滚动
歌词滚动场景在获取到歌词并渲染到面板之后,就要实现歌词和歌曲相对应,在实现歌词的高亮的同时还要实现歌词的滚动状态。监听当前歌曲的值变化的时候就要实现歌词的变化拿到歌词之后通过歌词前面的时间戳来判断当前应该显示哪一条歌词在显示的歌词上加上高亮的效果wy-player-panel.component.ts @Input() playing: boolean; // 歌曲播放状态 @ViewChildren(WyScrollComponent) private wyScro原创 2021-01-03 15:11:47 · 281 阅读 · 0 评论 -
[Angular实战网易云]——15、歌词渲染
歌词歌词初始化播放面板左侧展示歌单歌曲,右侧展示当前歌曲歌词,并且实现和左侧相通的滚动条。因此要根据ID获取当前歌曲歌词。song.service.ts // 根据ID获取歌曲歌词 getLyric (id: number): Observable<Lyric> { const params = new HttpParams().set('id', id.toString()); return this.http.get(this.uri原创 2021-01-01 22:24:58 · 561 阅读 · 4 评论 -
[Angular实战网易云]——14、底部信息与功能(二)
系列文章目录提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加例如:第一章 Python 机器学习入门之pandas的使用提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录系列文章目录前言一、pandas是什么?二、使用步骤1.引入库2.读入数据总结前言提示:这里可以添加本文要记录的大概内容:例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。提示:以下是本篇文章正文内容,下面案例原创 2020-12-20 17:10:15 · 219 阅读 · 0 评论 -
[Angular实战网易云]——获取完整数据
现有问题根据playList/detail 的API拿到的数据是不完整的,tracks中只存在所有歌曲的前几条,因此要获取trackIds进而请求song/detail 的API。实现home.component.html <!--热门歌单开始--> <div class="down"> <div class="down-wrap"> <app-single-sheet原创 2020-12-19 14:28:30 · 390 阅读 · 1 评论 -
[Angular实战网易云]——13、底部信息与功能(一)
场景在点击播放音乐之后,歌曲的信息也要渲染到DOM中,其中关于歌曲的时长以及播放的时长也要添加上去。步骤wy-player.component.ts – 部分 duration: number; // 总时长 currentTime: number; // 当前已听时间 // 监听当前歌曲 private watchCurrentSong (song: Song) { if (song) { this.currentSong原创 2020-12-17 17:16:07 · 314 阅读 · 0 评论 -
[Angular实战网易云]——12、播放歌单
在初始化ngrx之后,就要考虑如何使用,事件的场景是点击歌单之后会播放歌曲,所以要声明一个播放事件。home.component.html <!--热门歌单开始--> <div class="down"> <div class="down-wrap"> <app-single-sheet class="sheet-item"原创 2020-12-12 13:47:18 · 280 阅读 · 0 评论 -
[Angular实战网易云]——11、ngrx初始化
ngrx- 什么是ngrxngrx官网ngrx是Angular基于Rxjs的状态管理,保存了Redux的核心概念,并使用RxJs扩展的Redux实现。使用Observable来简化监听事件和订阅等操作。- 为什么要用ngrx我们在开发中经常会碰到,这个界面的按钮需要在某种情况下变灰;那个界面上需要根据不同情况显示不同数量的Tab;这个界面的某个值的设定会影响另一个界面的某种展现等等。应该说应用开发中最复杂的部分就在于这些状态的管理。很多项目随着需求的迭代,代码规模逐渐扩大、团队人员水平参差不齐就会原创 2020-12-07 15:18:41 · 501 阅读 · 0 评论 -
[Angular实战网易云]——10、滑块进度条
场景首页主体样式大致实现,底部样式还有所欠缺,所以底部应加上个别信息与播放的进度条,这个进度条类似Zorro的滑块,点击与滑动,其中包括事件的绑定与组件的嵌套。其中进度条不仅仅实现在歌曲进度上,在音量控制上也可以复用,为了方便后期在底部添加各种功能而避免代码臃肿,将进度条分离开是最好的选择。在app.component.html底部中添加新创建的wy-player模块路由 < app-wy-player>< /app-wy-player>wy-player.componen原创 2020-12-03 10:51:00 · 805 阅读 · 0 评论 -
[Angular实战网易云]——9、处理歌单数据
场景home首页渲染歌单列表,再点击列表的播放图标之后获取单个歌单的信息(应包含歌曲的URL,以便于在首页底部添加播放)组件传参歌单的列表是嵌套在父组件中的单独组件,所以再点击子组件时,将获取得到ID广播到父组件,父组件拿到之后再做处理。single-sheet.component.html</div><!--歌单点击事件--> <i class="icon play" (click)="playSheet(sheet.id)"></i>原创 2020-11-18 20:27:48 · 287 阅读 · 0 评论 -
[Angular实战网易云]——8、路由守卫--resolve
路由守卫什么是路由守卫字面理解,路由守卫就是保护路由的跳转。那为什么需要保护路由呢?实际场景中,会有很多不同的访问路径,分别控制不同的场景,就需要路由守卫。该用户可能无权导航到目标组件。可能用户得先登录(认证)。在显示目标组件前,你可能得先获取某些数据。在离开组件前,你可能要先保存修改。你可能要询问用户:你是否要放弃本次更改,而不用保存它们?而路由器也是可以应对这些不同的场景用CanActivate来处理导航到某路由的情况。用CanActivateChild来处理导航到某子路原创 2020-11-17 19:39:11 · 1006 阅读 · 1 评论 -
[Angular实战网易云]——7、入驻歌手
入驻歌手这节的效果是完成上页遗留的右侧歌手专辑名单的列表。在服务里找到相关的API,这里有一点小问题,可能是API的版本更新问题,视频里老师的api 参数在新的里边并没有生效,所以就改了一点参数。home.component.html<!--右侧开始--> <div class="right"> <app-member-card></app-member-card> <div class="settled-s原创 2020-11-15 22:21:59 · 416 阅读 · 0 评论 -
[Angular实战网易云]——6、推荐歌单
数据渲染这次的内容是将调用后端接口并返回数据,将数据渲染到页面中,其中对返回的数据进行处理。调用接口home.service // 获取热门标签 getHotTags(): Observable<HotTag[]> { return this.http.get(this.uri + "playlist/hot").pipe( map((res: { tags: HotTag[] }) => { return res.tags原创 2020-10-09 23:25:45 · 312 阅读 · 0 评论 -
[Angular实战网易云]——5、获取轮播图(二)
组件封装在home路径下新建component文件夹,在component文件夹下新建wy-carousel。这一层是用来封装轮播图两侧及底部动作实现的组件。carousel.component.html<div class="carousel"> <div class="wrap"> <!--左侧箭头,用来切换轮播图--> <i nz-icon class="arrow left" nzType="left原创 2020-09-21 23:29:42 · 428 阅读 · 0 评论 -
[Angular实战网易云]——4、获取轮播图(一)
创建服务在service路径下执行创建服务命令ng g s home@Injectable({ providedIn: ServicesModule, // 哪一个模块提供的})其中HomeService中有一个providedIn属性,代表着这个一个服务是谁提供的;默认值‘root’代表是appModule提供的。但是这次结构是将子服务放进总服务中,所以providedIn值应改为ServicesModule。这样做的好处:如果这测的服务没有被用到,就会被摇数优化给摇掉(tree sh原创 2020-09-17 22:36:22 · 415 阅读 · 0 评论 -
[Angular实战网易云]——3、页面布局
根页面创建完目录之后,就可以实现根页面了,各个子页面都是嵌套在根页面之中,所以根页面要有一定的布局。一般的pc页面都是包含头部、底部、中间的内容、左侧和右侧的菜单视情况而定。这个案例也是采用这种布局。app.component<div id="app"> <nz-layout class="layout"> <!--头部--> <nz-header class="header"> <div class="wrap"&原创 2020-09-17 20:34:07 · 660 阅读 · 0 评论 -
[Angular实战网易云]——2、构建目录
构建目录使用过angular,就会知道什么是模块化,顾名思义,就是把整体分割成能够单独运行的一个各模块,这样做的好处有很多,比如实现逻辑更清晰、可读性强、团队开发分工明确,容易控制、充分利用可以重用代码、抽象出可公用的模块,可维护性强、模块化的遗留系统方便组装开发新的相似系统等等。angular都有一个根模块用于调用整个项目,但是所有引用都放在根模块会对项目产生一定的代价,所以构建一个比较合理的目录,创建子模块来分担跟根模块的负载是很重要的。一、创建文件夹在app路径下执行以下代码来创建模块ng原创 2020-09-16 22:36:04 · 323 阅读 · 1 评论 -
[Angular实战网易云]——1、创建项目
前言目前对于angular的使用虽然有一段时间了,但是对于结构的认知依旧是很片面,一些关键的要点也是一知半解,所以一直想找一个全面介绍的视频或者课程。恰巧,今天刚刚看到一个大佬用angular8+ngrx8完成一项网易云音乐的管理项目,就想着在这位大佬的引领下补充自己未知的知识点,因为课程的内容时长很长,我也不确定什么时候能够跟完,但会一直督促自己,加油!项目地址B站视频:https://www.bilibili.com/video/av70355308GitHub:https://github.原创 2020-09-14 23:02:58 · 672 阅读 · 2 评论