SAST2020.WOC优秀作品展示

活动要求

SAST2020-F2E前端组WOC:

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

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

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

以下是具体的WOC内容。


SAST2020前端组的WOC(Winter Of Code)活动将分一下几个阶段:

第一阶段

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

内容:

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

关于Demo:

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

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

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

  • 要求:

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

    例如中国天气网:

    image-20201224212052007

    至少需要有以上两个功能模块。

  • 参考技术方向:

    以下给出一些完成该Demo可能会用到的知识、库、文档等,你也可以使用其他的技术:

    • HTML+CSS+Javascript基础知识
    • Jquery库(Ajax)
    • bootstrap(响应式、栅格布局)
    • Echarts(数据可视化库,用来显示天气数据、折线图等)
    • 可以尝试学习Vue或React脚手架来搭建网页。
    • API:可以自行搜索天气API,有不少开源免费的API可以使用。
  • 参考网站:

  • 提示:

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

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

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

方向二:微信小程序项目——电子商务小程序平台(纯前端)

  • 要求:

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

    参考如下:

    image-20201224220723362

    • 首页:需要有轮播图、部分按钮入口、一些商品展示图
    • 分类:需要有分类栏和细分栏目
    • 商品详情:需要可以添加进购物车
    • 购物车:需要实现对添加的商品进行总数计算。

    具体要求可以根据自己平时使用的电商app或小程序自行探索。

  • 参考技术方向:

    以下给出一些完成该Demo可能会用到的知识、库、文档等,你也可以使用其他的技术:

    • HTML+CSS+Javascript基础知识
    • 微信小程序开发框架:如Wepy(原生)
    • Swiper(轮播图组件)
  • 参考网站:

  • 提示:

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

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

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

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

第二阶段

第二阶段将从寒假后半段(2月起)开始进行,延续到下学期。

内容:

  1. “新柚杯“在线考试系统
  2. AtSAST人事管理系统

我们将同时进行两个Web项目的前端开发和支持,我们将学习使用前端框架React的脚手架进行组件化开发,学习UI切图,学习前后端分离的数据交互、同时学到一些项目管理、代码规范、优化测试、打包部署的知识。

有时间的同学可以学习一下React全家桶

优秀作品

邓杰方-高考许愿系统

image-20210322204728795

image-20210322204801678

image-20210322204812191

image-20210322205907550

王畅-天气预报网页

image-20210322204935797

王畅-假期学习笔记

image-20210322205016969

范震宇-电商小程序‘

image-20210322205143170

潘心荻-次元屋小程序

image-20210322205335269

郭宸-天气网站

image-20210322205406053

孟令东-天气网站

image-20210322205436933

黄宇辰-天气网站

image-20210322205532649

张倪乙弦-天气小程序

image-20210322205638972