欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

用React写一个工大导航

程序员文章站 2022-04-27 23:18:06
Online: https://brenner8023.github.io/gdut nav/ GitHub地址: https://github.com/brenner8023/gdut nav 笔者在广工读书这几年, 总的来说是快乐地生活, 不过生活之中也有一些烦恼存在着, 比如去校医院看病却不知 ......

online:
github地址:

笔者在广工读书这几年, 总的来说是快乐地生活, 不过生活之中也有一些烦恼存在着, 比如去校医院看病却不知道门诊的时间, 想要知道教学日历, 每次都要询问同学等等. 这些事情虽然是小事小问题, 但是它们不止一次地困扰着我. 为此, 我决定利用我大学本科学到的知识来解决这些问题.

问题的解决之道就是设计并开发一个广东工业大学导航网页.

内容

gdut-nav(工大导航)聚合了很多校内校外的站点链接, 也收集了许多方便, 有趣的工具/游戏.

校内导航: 可以通过工大导航访问查看教学日历, 查询校医院门诊时间, 校园网续费等等
用React写一个工大导航

网站集合
用React写一个工大导航

工具集合
用React写一个工大导航

游戏集合: 工大导航同时也收录了一些有趣好玩的在线游戏, 在室内如果想放松却又不知道做什么的时候, 不妨打开工大导航, 访问并体验一把游戏.
用React写一个工大导航

技术

整个项目开发实现起来较为简单, 可以当做一个学习前端开发技术入门的练手项目

页面设计主要参考借鉴了https://github.com/ice-hazymoon/mikutools的界面

运用到的技术/工具主要有react/webpack/iconfont/es6/css/html

本项目能够适配pc端和移动端, 移动端界面效果如下:
用React写一个工大导航

项目目录结构如下:

│  app.js
│  index.js
│  
├─api
│      db.js
│      
├─components
│      header.jsx
│      nav.jsx
│      search.jsx
│      
└─static
    ├─css
    │      index.scss
    │      reset.scss
    │      
    ├─iconfont
    │      iconfont.css
    │      iconfont.eot
    │      iconfont.svg
    │      iconfont.ttf
    │      iconfont.woff
    │      iconfont.woff2