yaml
🍉前提知识
- Nodejs和npm,会使用Npm安装包
- 了解yaml基础语法
- 基本的js
- 从命令行接收参数 http://nodejs.cn/learn/nodejs-accept-arguments-from-the-command-line
- 如何本地直接运行js代码:打开终端,输入
node xxx.js
涉及到的库
- js-yaml
练习内容:无页面版Todo list
在你的项目文件夹新建一个 todo.yaml
- 包含三大块: todo, doing, done,分别代表待办任务的三种状态
- 每条任务分布在三大块中,每条任务有以下属性:id,content,
实现以下命令:
node xxx.js ls
:列出所有任务
node xxx.js ls --status=done
:列出所有任务完成的任务
node xxx.js ls --status=doing
: 列出所有进行中的任务
node xxx.js ls --status=todo
node xxx.js done 任务id
: 将该id对应的任务置为完成状态
node xxx.js todo 任务id
node xxx.js doing 任务id
- 下面的我省略node xxx.js:
- delete 任务id
- add 任务内容
。。。自行想象添加功能。。。
一些实现的细节:
- 利用js-yaml中的dump保存js对象到yaml文件
- 利用js-yaml中的load读取yaml文件到js对象
- 可以边写边加入es6语法来练习
最后声明
本练习真的只是为了你练习,主要是练习node,npm,js,es6,所以还是靠自觉完成,但是您的提交次数会作为我们评优的依据,完成了请推到你的分支
links
https://github.com/hduhelp/frontend_2021_pratice/
如何将yaml转为js对象: https://github.com/nodeca/js-yaml
每日一篇之yaml: http://www.ruanyifeng.com/blog/2016/07/yaml.html
每日一篇之es6: https://www.w3cschool.cn/escript6/escript6-827l37er.html ES6 简介_w3cschool
安利一本书https://es6.ruanyifeng.com/ ES6 入门教程
https://hduhelp21.yuque.com/staff-mhchbm/ergbdy/lobnc5
天气小组件入门
天气api
用的api是qweather
和风天气
qweather
api手册
我是蒟蒻
UI设计拉胯
使用世界上最好的js框架 vanilla js
已经实现的功能:
- 获取实时气温 湿度 风向 风力 风速 大气压 能见度
- 获取当前日期时间周几
- 天气小图标
- 3天天气预告
- flex布局,适应设备
待实现功能:
- 气温变化图表
- 穿衣建议
- darkmode
- iconfont图标
通过这次小组件开发学会的东西:
- flex的使用
- fetch then promise (还是不会用
抄的)
- 天气api的使用
- json格式化处理
api请求格式
https://devapi.qweather.com/v7/weather/now?[请求参数]
必须参数 –location
必须参数 –key
返回数据例
// 北京实况天气
// 商业版 https://api.qweather.com/v7/weather/now?location=101010100&key=你的KEY
// 开发版 https://devapi.qweather.com/v7/weather/now?location=101010100&key=你的KEY
{
"code": "200",
"updateTime": "2020-06-30T22:00+08:00",
"fxLink": "http://hfx.link/2ax1",
"now": {
"obsTime": "2020-06-30T21:40+08:00",
"temp": "24",
"feelsLike": "26",
"icon": "101",
"text": "多云",
"wind360": "123",
"windDir": "东南风",
"windScale": "1",
"windSpeed": "3",
"humidity": "72",
"precip": "0.0",
"pressure": "1003",
"vis": "16",
"cloud": "10",
"dew": "21"
},
"refer": {
"sources": [
"Weather China"
],
"license": [
"commercial license"
]
}
}
js例
function fetchwea() {
fetch(‘https://devapi.qweather.com/v7/weather/now?key=90304353392d4ea4ba00608cb2e7f9ae&location=101210101')
.then(res => res.json())
.then(json => {
document.getElementById('temp').innerHTML=json.now.temp+"℃";
使用图标icon
图标api手册
document.getElementById('i').className='qi-'+json.now.icon;
这里json.now.icon会返回图标代码
导入图标css
改变HTML里 标签的class为qi-(图标代码)
就可以显示好看的图标啦~
![images]()
最终效果
![5CZo5V.png]()