🍉前提知识

1. Nodejs和npm，会使用Npm安装包
2. 了解yaml基础语法
3. 基本的js
4. 从命令行接收参数 http://nodejs.cn/learn/nodejs-accept-arguments-from-the-command-line
5. 如何本地直接运行js代码：打开终端，输入 node xxx.js

涉及到的库

1. js-yaml

练习内容：无页面版Todo list

1. 在你的项目文件夹新建一个 todo.yaml

   • 包含三大块： todo, doing, done，分别代表待办任务的三种状态
   • 每条任务分布在三大块中，每条任务有以下属性：id，content,

2. 实现以下命令：

• 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 任务内容
  。。。自行想象添加功能。。。

一些实现的细节：

1. 利用js-yaml中的dump保存js对象到yaml文件
2. 利用js-yaml中的load读取yaml文件到js对象
3. 可以边写边加入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-(图标代码)
就可以显示好看的图标啦~