- 博客(63)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 [vue]—项目引用cesium
cesium介绍cesiumCesium 是一款面向三维地球和地图的，世界级的JavaScript开源产品。它提供了基于JavaScript语言的开发包，方便用户快速搭建一款零插件的虚拟地球Web应用，并在性能，精度，渲染质量以及多平台，易用性上都有高质量的保证。导入// package.json"cesium": "1.79.1","cesium-navigation-es6": "1.1.7","copy-webpack-plugin": "5.1.2",首先就是使用npm或者ya
2022-03-08 22:37:03
1428
原创 [ECharts]——快速入门
数据可视化目的： 借助图形化的手段，直观的展示有效信息ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。创建图表根据官方文档总结，可以分为这几个步骤：获取Echarts获取的方法有很多，项目中最常用的应该是npm安装，也可以直接引入CDN，或者下载源码后导入到项目中npm$ npm install echarts --save下载源码
2021-03-11 23:36:27
284
原创 小程序封装异步请求
我查了很多博客，都是说sass-loader版本过高，方法不支持，然后就按着他们的说法去改，无非就是写在当前版本，安装降级版。$ npm unistall sass-loader$ npm install -D sass-loader@7.x
2021-03-08 13:39:29
285
原创 [小程序]——解决阿里矢量图引入问题
选择矢量图找到我们项目中需要的矢量图，然后添加入库添加项目选择完之后可以添加到项目没有文件夹可以新增生成代码之后就可以选择Unicode方式这里需要生成代码，原因就是下载之后的文件是本地相对路径，而使用代码替换之前的路径就能选择网络路径，这样就能减少项目的大小。下载下载至本地后查看文件夹这是我的下载项目，然后选择iconfont.css，删除之前相同的代码，将生成的代码添加进去。导入项目将文件后缀改为 .wxss ，粘贴到项目文件中，在app.vue中全局引用<s
2021-03-08 11:06:33
608
原创 快速搭建微信小程序
基于uniapp和vue来快速搭建小程序框架安装cli$ npm install -g @vue/cli创建项目$ vue create -p dcloud/uni-preset-vue my-project安装依赖如果使用sass就需要安装sass依赖$ npm install sass-loader node-sass运行项目npm run dev:mp-weixin这时项目框架已经搭建起来，并且运行，如果报错有关依赖的问题，可以直接删除node_modules文件夹，然后重
2021-03-07 22:57:08
1025
原创 [vue]——vue.set()
当data对象中的某个值需要更新，但更新之前是没有值的状态，如果此时只是简单的修改内部的值，就会发现页面上并不会渲染更改后的值。原因原因就是添加新的值之后并不会将添加的值双向绑定，此时虽然更新了，但是页面并不会渲染。解决Vue.set()<div id="app"> <ul> <li v-for="(item, index) in tempList" :key="index">{{item}}</li> </ul> <b
2021-03-04 21:42:46
8442
2
原创 [vue]——登录页面交互
面板切换登录页面板一般会选择多种登录方式，短信登录或者密码登录，这两种登录方式会通过点击来实现显隐。在不使用框架的情况下，实现两哥面板相互显隐，就要用到样式中的display，在初始化的时候给短信登录添加一个计算属性<a href="javascript:;" :class="{on: loginWay}" @click="loginWay =true">短信登录</a><a href="javascript:;" :class="{on: !loginWay}"
2021-03-04 18:40:38
502
1
原创 js创建二维数组
当我们从后台获取数组数据后，而前台需要的是二维数组，此时就需要通过回调来处理这个数据// 后台返回值var backData = [1,2,3,4,5,6,7,8,9];// 处理后的数据var handleData= []function handleD (backData) { // 临时数据，用来填充二维数组 let temp= [] backData.forEach((item) => { // 假如每个二维数组内存放四个数据 if (temp.len
2021-03-04 12:31:58
352
1
原创 通过类名遍历评分星星
在只显示评分及星星的时候，如果有金色、半金以及无色的⭐图案，而此时要遍历出一个数据，就要实现这个算法。假如当前评分是3.5，那么就会有三个全金，一个半金，一个无色的星星。实现将评分提取成可复用的组件，三种形状的星星用类名来区别开，此时只需要循环组件就能实现星星的显示。创建一个数组，数组内装有5个类名，组件通过遍历数组中的类名来添加该样式的星星export default { props: { score: Number // 评分 }, computed: { starClasses
2021-03-03 23:39:27
125
1
原创 [vue]——nextTick()
在做实例的时候遇到一个问题，在获取后台数据之后，要将数据遍历到轮播，轮播使用的是Swiper。在获取轮播数据之后就开始创建swiper实例，然后想着就能直接实现，可问题就出来了，这时候虽然轮播的样子出现了，但是功能没有成功。原因在watch中添加了监听对象之后就创建轮播实例，这时候虽然监听到了数据的改变，但是DOM更新是异步的，此时去创建轮播实例会较早与DOM更新。解决既然问题出现在创建轮播实例的时间上，那直接使用定时器能行吗？答案是可行的，但是会有一个小问题，就是你不知道如何定下时间，这个时间可
2021-03-03 22:30:09
278
1
原创 JS数组取交集、并集
简单数组如果数组中仅是字符串和数值es5var a = [1,2,3], b = [2,3,4,5];// 交集---[1,2,3,4,5]var intersection = a.concat(b.filter(item => {a.indexOf(item) === -1}))// 并集---[2,3]var union= a.filter(item => {return b.indexOf(item) > -1})交集的逻辑就是使用concat方法将a里边没有的
2021-03-02 22:44:37
5585
2
原创 [vue]——question
v-show和v-ifv-show和v-if都是用来控制组件显隐的指令，区别在于两者的实现原理。v-show是通过css的display属性来控制显示与隐藏v-if是将实现组件的销毁与渲染，并不是简单地显示与隐藏因此关于两者的使用时要判断该组件是否会频繁切换，频繁切换的时候使用-vshow，否则使用v-ifv-for中使用key在使用v-for时我们一般都是用key来绑定，原因就是diff算法中要通过tag和key来判定是否是同一个节点，好处就是减少了渲染次数，提升渲染性能vue组件生
2021-02-24 21:17:50
300
原创 css之昼夜交替
在看了B站up主阿阳热爱前端的一个HTML+CSS教程实例后，跟着做了一遍，具体的代码和效果如下：效果： 昼夜交替源码： 阿阳热爱前端 / alternately对于此篇，我只是总结我学到或需要复习的一些知识点，可能价值并不大。flex布局具体详细介绍，请移步阮一峰的网络日志。flex布局即为弹性布局，为盒状模型提供灵活性，其子元素会成为容器成员。内置的属性能够实现页面元素垂直水平居中。定位在网页中实现列式布局，将一切元素设为盒子，就要实现对盒子位置的控制。相对定位：rel
2021-02-21 17:14:48
522
2
原创 了解雪碧图
所谓雪碧图就是讲很多小图标放在一张图上。其是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。这样做的好处将多张图片合并到一张图片中，可以减小图片的总大小将多张图片合并到一张图片后，只需一次网络请求就可以将所需的资源全部下载，减小建立连接的消耗使用时只需要调整图床的位置，使用background-position来定位。 <div> <li class="cat1"><i>
2021-02-21 14:53:51
235
原创 Vue——嵌套路由
路由有关路由的详细信息可以去vue的官网去查看，我这里只是自己实例的一个理解和总结。单页面程序离不开路由的分配，自始至终只有一个页面存活，因此有关路由跳转的逻辑要合理配置vue-Router选择官方使用的vue-router库，因此要先准备环境安装$ npm install vue-router安装之后就要配置路由，但是为了方便维护路由节点，可以创建单独的文件存放路由配置，因此创建router文件夹，添加index.jsindex.jsimport Vue from 'vu
2021-02-02 21:06:53
241
原创 Vue——组件通信
组建通信组件之间的通信在任何框架中都是核心的内容，这一篇仅是看着视频教程和其他博主的内容来誊写的，因此更倾向于自己，对其他人可能没有什么参考价值。拓展：vue组件间通信六种方式（完整版 ——思否(浪里行舟)）vue组件之间通信的8种方式——博客园(张小VV)Vue组件通信——博客园(一只菜鸟攻城狮啊)props之前的事件监听是通过bind绑定来向子组件传值，然后子组件通过props来接收，接受的写法也不同，可以直接将事件名称写进数组中，也可以写成对象的形式，对象中也可以加入一些属性来限制参
2021-02-01 21:30:03
127
原创 Vue——熟悉组件
组件关于组件的理解，可以认为是可复用的功能块，一个功能或许需要不等的组件，因此组件的通信也是要熟悉的，这个是跟着教程做的一个小的实例，主要是了解组建的嵌套和传值。页面页面要实现能够增加或删除一个数据页面很简单，主要就是添加用户名和评论，在点击提交之后把值渲染出来分析页面的布局是很简单的头部、内容格式，因此主要是关心数据存放在哪，要怎么显示。可以将左侧添加数据和右侧的数据展示分为单独的组件，这样能够方便维护。其次就是右侧会有很多评论，而每一个评论的布局都相似，所以可以将每一个评论分为一个组
2021-01-30 21:40:51
209
原创 Vue——基础语法知识
初识Vue简介作为前端三大框架之一并且面向国内的大多数开发者来说，vue是绝对要去学会的一个知识点。vue整体简小灵活，在构建项目框架的时候能够快速搭建而且与众多的第三方库整合，因此在社区维护和容错调试时都能方便找到问题的所在之处。安装平时测试用例和学习可以使用引用 和 CDN 的方式： 引用：<script src="../someWhere/vue.js"></script> CDN：<script src="https://cdn.jsdelivr.net
2021-01-28 23:25:30
257
4
原创 解决json-server无法启动
场景在练习axios的时候使用了json-server插件来充当服务器的角色。但是在安装并写入文件之后就启动不了：于是乎就寻找解决方法，最后找到了，可以移步至解决 — json-server : 无法加载文件xx\npm\json-server.ps1，因为在此系统上禁止运行脚本解决方法：1、使用管理员方式打开Power Shell2、输入Get-ExecutionPolicy，可以查看到当前的策略3、输入Set-ExecutionPolicy RemoteSigned，设置当前的策略为R
2021-01-27 18:12:14
3207
原创 年前规划
离过年还有两个星期左右的时间，前一段时间完成了angular的一个教程，主要还是逻辑和全局API的熟悉，但是呢vue3开始使用ts，所以也想去学习一下vue的教程，这几天准备好好看完一遍vue官方文档。有个问题就是之前没有接触过vue，而目前vue3也只是bate版，不知道怎么选择教程的版本，如果两个版本都看完也不知道时间够不够。先用两天看完官方教程，写几个简单一点的小实例算是熟悉熟悉vue，之后在准备看一个比较实用的教程。...
2021-01-27 11:53:49
100
原创 [Angular实战网易云]——30、总结
我是黑体字我是微软雅黑我是华文彩云color=#0099ff size=72 face=“黑体”color=#00ffffcolor: redcolor=gray
2021-01-17 14:00:26
199
1
原创 [Angular实战网易云]——29、注册
注册注册功能是此项目中最后一个功能模块，我原本以为注册的逻辑很简单，没想到如此的繁琐，以至于项目频频短路，而且没有测试用的注册账号，所以在真的注册时并没有拿到相应的数据。其次还有和收藏分享有关的功能，其基本的实现逻辑与登录等类似，区别之处就是数据的交互并不只是单一的接口，有关数据状态的变更还是要依靠ngrx来检测，所以关于分享与收藏并不打算繁琐的总结了。场景在登录页面和首页头像处有注册的入口，在点击触发后能够将弹窗显示并且类型为事先定义的register类型。在注册页面注入表单组件能够获取手机号码
2021-01-16 19:59:58
378
原创 [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
257
原创 [Angular实战网易云]——27、HTTP拦截器
HTTP拦截在做请求的时，有时需要对请求做一些配置上的附加或者改变，又或者是对响应值的拦截，这时候就需要拦截器了。场景签到时需要登录状态，而状态值存在cookies中，所以在每次请求时都需要将cookies一起发送过去，因此添加HTTP拦截器来拦截请求并作出配置上的改变。XMLHttpRequest类型的 withCredentials属性指示是否使用类似的cookies，因此将其设置为true即可。XMLHttpRequest.withCredentialsXMLHttpRequest.wi
2021-01-14 23:15:29
243
原创 [Angular实战网易云]——26、登录/登出
登录实现就目前的进度来看，是没有实现token验证的，所以所有的登录也只是简单的验证账密，即使账密的复写也只是存在localstorage内存中的，所以关于更加安全的登录不知道后面会不会修改。切换弹窗页面开始实现的default页面只是用来判断登录还是注册，所以说这一步的操作还是要更换弹窗内的渲染内容的。将创建好的登录模块和注册模块添加到app.component.html中的wy-layer-modal标签内。app.component.html<app-wy-layer-m
2021-01-14 21:20:27
711
原创 [Angular实战网易云]——25、登录弹框
场景当点击首页的登录按钮时，需要有个弹框来满足会员登录的功能。但是考虑到会员功能有一些收藏和转发的功能也需要弹框，所以选择使用复用弹框组件，每次调用弹框组件的时候会传递当前的操作，根据操作的不同来选择渲染进弹框的页面。实现创建组件将弹窗的组件创建到wy-ui目录下在会员登录组件中添加点击事件member-card.component.html <button nz-button class="btn" (click)="openModal.emit()">用户登录<
2021-01-12 22:50:47
531
原创 [Angular实战网易云]——24、动画
动画在基本实现了底部播放面板的显示之后就可以为面板做一层动画，来实现底部面板的显隐。底部就只会显示一个小按钮angular动画这里就要提到强大的angular动画了，关于更详细的教程可以去angular官网去搜索动画教程。动画用于提供运动的幻觉：HTML 元素随着时间改变样式。精心设计的动画可以让你的应用更有趣，更易用，但它们不仅仅是装饰性的。动画可以通过几种方式改善你的应用和用户体验：没有动画，Web 页面的转场就会显得突兀、不协调。运动能极大地提升用户体验，因此动画可以让用户察觉到应
2021-01-11 16:58:57
211
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
510
原创 [Angular]——ng-template与ng-container搭配使用
ng-template是一个 Angular 元素，用来渲染 HTML。 它永远不会直接显示出来。ng-template仅是用于包含一个内容的模板，使得其可以与其他的模板镶嵌组合成一个组件模板。<ng-template #name> <button></button></ng-template>正因为其不会显示在DOM中，所以可以将一些指令放在上边。<ng-template #name *ngIf="true"> <bu
2021-01-10 15:59:09
1192
1
原创 [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
195
原创 [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
232
原创 [Angular]——— 路由传参
路由传参queryParams在H5页面标签上添加queryParams<a routerLink="/detail" [queryParams]="{id: 1}">detail</a>在组件中接收参数import { ActivatedRoute } from '@angular/router';// 注入依赖类constructor(private route: ActivatedRoute) { } ngOnInit () { // 变
2021-01-06 20:04:10
560
原创 [Angular实战网易云]——16、歌词滚动
歌词滚动场景在获取到歌词并渲染到面板之后，就要实现歌词和歌曲相对应，在实现歌词的高亮的同时还要实现歌词的滚动状态。监听当前歌曲的值变化的时候就要实现歌词的变化拿到歌词之后通过歌词前面的时间戳来判断当前应该显示哪一条歌词在显示的歌词上加上高亮的效果wy-player-panel.component.ts @Input() playing: boolean; // 歌曲播放状态 @ViewChildren(WyScrollComponent) private wyScro
2021-01-03 15:11:47
286
原创 [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
568
4
原创 [Angular实战网易云]——14、底部信息与功能（二）
系列文章目录提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加例如：第一章 Python 机器学习入门之pandas的使用提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录系列文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例
2020-12-20 17:10:15
220
原创 [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
392
1
空空如也
(angular2) 如何以数组为数据源来动态增加表单项？
2020-09-17
TA创建的收藏夹 TA关注的收藏夹
TA关注的人