SAST2020.WOC优秀作品展示

活动要求

SAST2020-F2E前端组WOC：

经过一个学期的前端学习，相信你已经迫不及待想上手做一些简单的项目了。

本次前端组的WOC将分为两个部分——第一部分你可以自行选择一个技术方向开发一个小Demo（比如天气预报Web页面，微信电商小程序平台），第二部分将与后端、Java组一起，开发“新柚杯”考试系统和AtSAST人事管理系统。前者将作为今后的”新柚杯“计算机基础知识竞赛的考试平台以及其他赛事活动的考试系统，后者将作为校科协的人事管理、授课信息、科技节活动公告等的平台。在第二阶段里，我们将体验到一个完整的Web项目的开发流程，你将会学习到前后端分离技术，一些前端框架，前端组件化技术，项目管理、代码管理的一些规范，以及一些web项目测试部署的相关知识。

期待有更多对web开发感兴趣的同学来参加！

以下是具体的WOC内容。

SAST2020前端组的WOC（Winter Of Code）活动将分一下几个阶段：

第一阶段

第一阶段将在寒假上半期（1月底之前）进行。

内容：

复习一学期前端授课的相关内容，掌握HTML，CSS，JavaScript基本知识
学习并开发一个Demo（详见下文）
学习相关框架，并为第二阶段开发“新柚杯”考试系统和AtSAST人事管理系统做技术储备。

关于Demo：

Demo的技术栈方向可以自行选择，以下给出两个不同方向的Demo要求，分别为Web网页和微信小程序两个方向。

部员可以自行选择一个方向去学习，并按要求完成Demo开发。

方向一：Web网页小项目——天气预报Web页面

要求：

参考中国天气网或者其他天气网站，能够实现对输入的城市名称，利用api的调用，将城市的天气情况显示在网页上。

例如中国天气网：

至少需要有以上两个功能模块。
参考技术方向：

以下给出一些完成该Demo可能会用到的知识、库、文档等，你也可以使用其他的技术：
- HTML+CSS+Javascript基础知识
- Jquery库（Ajax）
- bootstrap（响应式、栅格布局）
- Echarts（数据可视化库，用来显示天气数据、折线图等）
- 可以尝试学习Vue或React脚手架来搭建网页。
- API：可以自行搜索天气API，有不少开源免费的API可以使用。
参考网站：
- 腾讯天气：https://tianqi.qq.com/index.htm
提示：

可以在github上找一些相似的项目作参考，但是最终Demo的开发需要独立完成。

第一阶段的成果将作为下学期SAST2020干事综合评价指标中的一部分。

如遇各种问题，希望同学们可以通过网络搜索资料学习解决，也可以可以咨询讲师。

方向二：微信小程序项目——电子商务小程序平台（纯前端）

要求：

使用微信小程序开发框架，开发一个纯前端的电子商务小程序，需要包含至少四个页面（Page）——首页、分类、购物车、商品详情。

参考如下：
- 首页：需要有轮播图、部分按钮入口、一些商品展示图
- 分类：需要有分类栏和细分栏目
- 商品详情：需要可以添加进购物车
- 购物车：需要实现对添加的商品进行总数计算。
具体要求可以根据自己平时使用的电商app或小程序自行探索。
参考技术方向：

以下给出一些完成该Demo可能会用到的知识、库、文档等，你也可以使用其他的技术：
- HTML+CSS+Javascript基础知识
- 微信小程序开发框架：如Wepy（原生）
- Swiper（轮播图组件）
参考网站：
- 微信小程序开发文档：https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/
提示：

微信小程序开发有着它自己的开发框架和开发工具，微信官方文档讲解的非常详细，你也可以再B站和其他平台上搜索一些小程序开发的教程。

这个小程序仅仅是纯前端的页面，还没有涉及到后端调用，只是希望让对微信小程序方向感兴趣的同学快速上手开发。你不一定要完成一个完整的小程序，可以只完成部分页面的功能和布局。

第一阶段的成果将作为下学期SAST2020干事综合评价指标中的一部分。

如遇各种问题，希望同学们可以通过网络搜索资料学习解决，也可以可以咨询讲师。