Online: https://brenner8023.github.io/gdut-nav/

GitHub地址: https://github.com/brenner8023/gdut-nav

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

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

内容

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

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

网站集合

工具集合

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

技术

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

页面设计主要参考借鉴了https://github.com/Ice-Hazymoon/MikuTools的界面

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

本项目能够适配PC端和移动端, 移动端界面效果如下:

项目目录结构如下:

│  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

用React写一个工大导航的更多相关文章

  1. react写一个todo

    概述 最近学习redux,打算先复习一下react,所以用react写了一个todo.记录下来,供以后开发时参考,相信对其他人也有用. 代码 代码请见我的github 组织架构如下图:

  2. [前端]如何写一个水平导航栏？（浮动、inline-block+消除间距）

    在看W3school时,看到一个很好的例子,如何制作一个水平的导航栏?没有任何要求,只需要达到下面的效果: 我认为这个例子包含了很多css布局需要了解的知识,因此单独写一下. W3school上面的方 ...

  3. 利用setTimeOut 和clearTimeOut 方法控制写一个 滑动导航显示不同信息的效果

    效果如图鼠标滑动导航  下边显示不同效果 html代码和css格式代码 <body><div id="tab" class="tab"> ...

  4. react 写一个贪吃蛇

    示例: 全部代码如下: snake.jsx import React, { Component } from 'react'; import PropTypes from 'prop-types'; ...

  5. [闲的蛋疼系列]从零开始用TypeScript写React的UI组件(0)-先写一个Button??

    0.咸鱼要说的 一入前端深似海,咸鱼入海更加咸. 最近闲的蛋疼,手上年前的事也完成了7788了,借助[PG1]的话来说,我们要keep real. 咸鱼肯定不real 了,因为我们都活在梦里,所以咱们 ...

  6. React学习及实例开发（二）——用Ant Design写一个简单页面

    本文基于React v16.4.1 初学react,有理解不对的地方,欢迎批评指正^_^ 一.引入Ant Design 1.安装antd yarn add antd 2.引入 react-app-re ...

  7. 深入浅出React Native 3: 从零开始写一个Hello World

    这是深入浅出React Native的第三篇文章. 1. 环境配置 2. 我的第一个应用 将index.ios.js中的代码全部删掉,为什么要删掉呢?因为我们准备从零开始写一个应用~学习技术最好的方式 ...

  8. 放弃antd table，基于React手写一个虚拟滚动的表格

    缘起 标题有点夸张,并不是完全放弃antd-table,毕竟在react的生态圈里,对国人来说,比较好用的PC端组件库,也就antd了.即便经历了2018年圣诞彩蛋事件,antd的使用者也不仅不减,反 ...

  9. 用 nodejs 写一个命令行工具 ：创建 react 组件的命令行工具

    用 nodejs 写一个命令行工具 :创建 react 组件的命令行工具 前言 上周,同事抱怨说 react 怎么不能像 angular 那样,使用命令行工具来生成一个组件.对呀,平时工作时,想要创建 ...

随机推荐

  1. View Controller容器

    在 iOS 5 之前,view controller 容器是 Apple 的特权.实际上,在 view controller 编程指南中还有一段申明,指出你不应该使用它们.Apple 对 view c ...

  2. Linux 安装json神器 jq

    wget -O jq https://github.com/stedolan/jq/releases/download/jq-1.6/jq-linux64 chmod +x ./jq cp jq /u ...

  3. Shell Error: -bash: ./test.sh: /bin/bash^M: bad interpreter: No such file or directory (转)

    错误原因可能有以下几种: 1.在WIN底下用文本编辑工具修改过参数变量,在保存的时候没注意编码格式造成的, 2.也有可能是在VIM里修改,第一行末尾按到ctrl_v 查看文件是DOS格式.UNIX格式 ...

  4. ASP.NET动态网站制作（15）-- SQL数据库（1）

    前言:数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,用户可以对文件中的数据进行增.删.改.查.数据库有很多种类型,从简单的存储有各种数据的表格到能都进行海量数据存储的大型数据库 ...

  5. 卸载系统自带libevent

    rpm -qa|grep libevent yum remove libevent* 或 rpm -e --nodeps --allmatches libevent*

  6. 批处理--md5校检

    @echo off rem 获取文件xx.zip的MD5 for /f "delims=" %%i in ('md5.exe xx.zip') do (set md5_var=%% ...

  7. onkeydown

    <input onkeydown="(function(){ )//或者其他 alert("enter") })(event)"/> $(this) ...

  8. Android拍照后更新相册

    方法一: Uri updateUri = Uri.fromFile(file); Intent updateIntent = new Intent(Intent.ACTION_MEDIA_SCANNE ...

  9. c3p0;jdbc;dbcp；mybatis；ubutils；

    [说明]今天还是完成了一定东西的,上午是jdbc的测试,下午是 数据库连接池 和 dbutils 的测试,晚上是mybatis的测试,都是找了一些网上的例子运行了一下,解决出现的问题. 一:今日完成 ...

  10. ORM性能相关

    model: 先给一个简单的表结构 from django.db import models class User(models.Model): username=models.CharField(m ...