珞青网开发手册

开发介绍

开发团队

  • 蔡旭:17级计算机学院本科生
  • 周鹏川:17级计算机学院本科生
  • 赵彪:17级计算机学院本科生
  • 贝雪晨:19级电子信息学院本科生
  • 程红:19级资源与环境科学学院本科生
  • 戴丹凤:19级资源与环境科学学院本科生
  • 官进兵:19级计算机学院本科生
  • 李奥:19级水利水电学院本科生
  • 刘士诚:19级土木建筑工程学院本科生
  • 田丽凯:19级计算机学院本科生
  • 王佳乐:19级经济与管理学院本科生
  • 吴维凡:19级计算机学院本科生
  • 张翔宇:19级计算机学院本科生

开发周期

2个半月(2019年11月19号-2020年2月1号),2019年12月1号-2020年1月5号考试月进度根据情况放缓

开发语言

  1. 前端:
    • HTML
    • CSS
    • JavaScript
  2. 后台:
    PHP
  3. 前后端数据绑定与连接:
    Vue.js

开发需求

页面(第一阶段)

  1. 首页
  2. 内容页面(文章展示,珞青报pdf展示)
  3. 内容总览页面

后台功能(第二阶段)

  1. 后台登录
  2. 后台编辑并上传文章
  3. 后台上传并管理珞青报

开发计划

  1. 第一阶段:主要由19级同学完成,17级同学提供帮助,并负责协调进度以及集成部署
  2. 第二阶段:主要由17级同学完成,蔡旭负责前后端数据绑定,周鹏川和赵彪负责后端

前端开发规范

文件命名规则

文件名称统一用小写的英文字母、数字和下划线的组合,其中不得包含汉字、空格和特殊字符;命名原则的指导**一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义,二是当我们在文件夹中使用“按名称排例”的命令时,同一种大类的文件能够排列在一起,以便我们查找、修改、替换、计算负载量等等操作。

  1. HTML的命名原则

    • 各子页命名的原则首先应该以栏目名的英语翻译取单一单词为名称。如果栏目名称多而复杂并不好以英文单词命名,则统一使用该栏目名称拼音或拼音的首字母表示;

    • 每一个目录中应该包含一个缺省的html 文件,文件名统一用index.htm index.html

  2. 文件存放位置规范

    文件名 文件
    images 存放图片文件
    js 存放JavaScript脚本
    css 存放CSS文件
    categories 放置不同栏目(分类)

CSS书写规范

  1. class与id的使用:

    • id是唯一的并是父级的, class是可重复的并是子级的, 所以id仅使用在大的模块上, class可用在重复使用率高及子级中;
    • id原则上都是分发框架文件时命名的, 为JavaScript预留钩子的除外;为JavaScript预留钩子的命名, 请以 js_ 起始, 比如: js_hide js_show;
  2. css选择器使用从属写法(非常重要,避免项目集成时出现样式覆盖情况)

    <!--
    示例
    -->
    <div id="mainNav">
        <div class="firstNav">
        </div>
    </div>
    /*
     *使用从属写法
    */
    #mainNav.firstNav{
        
    }
  3. css属性书写顺序

    • 建议遵循 布局定位属性-->自身属性-->文本属性-->其他属性. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起.
    • 属性列举:
      1. 布局定位属性主要包括: margin、padding、float(包括clear)、position(相应的 top,right,bottom,left)、display、visibility、overflow等;
      2. 自身属性主要包括: width & height & background & border;
      3. 文本属性主要包括:font、color、text-align、text-decoration、text-indent等;
      4. 其他属性包括: list-style(列表样式)、vertical-vlign、cursor、z-index(层叠顺序) 、zoom等.

id命名规则表

header
内容 content/container
侧栏 sidebar
栏目 column
登录条 loginbar
标志 logo
下载 download
页脚 footer
搜索 search
导航 nav
新闻 news
栏目标题 title
版权 copyright
文章列表 list

注释规范

<!--
	@author:xxx
	@time:2019-11-01
	@description:内容界面
-->
/*
 *@author:
 *@time:
*/
/*
 *@author:
 *@time:
 *@description:功能描述
*/