Skip to content

编程大作业第一周 #31

@meflyup

Description

@meflyup

说明

这是编程大作业的第一周。要求各小组着手开发自己的web项目。在本周大家需要完成如下工作:

  1. exercisex中初始化项目
  2. 搭建项目基本框架
  3. 完成界面基本设计

exercisex中初始化项目

exercisex 其中的x代表各自小组的项目。

首先各位需要从github上对应的各组的repository上clone各自的项目到本地。然后,各组组长负责在master分支上初始化一个新的项目。这个初始化只需要使用webstorm的想到自动生成web应用框架即可。在自动生成框架之后,组长在项目根目录新建一个bin目录最为服务器的代码目录。然后组长就可以提交同步到github网站上。项目结构如图。

一定要记住要放置一份gitignore文件在你项目的更目录。

搭建项目基本框架

小组要协作完成项目基本框架。

  1. 成员需要设计index.html页面。负责设计页面的同学在同步完成组长初始化的项目到github本地后,基于master分支新建一个pagedesign的分支,然后在其上进行页面设计。
  2. 成员负责web 客户端(web目录下)的main.dart(如果你是按照webstorm向导自动生成程序框架的话)的修改工作,以提供各种函数的空白框架。比如,假设你需要点击一个按钮从网上获得数据那么你需要设计一个事件函数如下:
import 'dart:html';

void main() {
  querySelector('#sample_text_id')
    ..text = 'Click me!'
    ..onClick.listen(reverseText);
}
/// reverseText用来接受用户点击按钮翻转字符的响应工作。
/// 参数[event]是鼠标事件....
void reverseText(MouseEvent event) {
 //todo 在这里添加代码处理鼠标点击之后的工作。
}

完成界面基本设计

基本完成各自app的界面设计,注意这些界面在index.html中,不允许出现多个html文件。你可以通过div组织界面元素。
在设计web页面的过程中,同时设计风格,在style.css文件中填写设计内容。
在设计web页面的过程中,记录下各个页面元素的id,在doc文件目录中的elementID.md文件中用markdwon格式的表格撰写。比如:

id 描述
reverseBtn 翻转字符的按钮
loadStuBtn 载入学生名册的按钮

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions