2018 Summer Java小学期课程 Web 开发

2017 夏季学期经管Java Web开发课程相关资料

课程时间： 2018年 7月14~20日

课程目标

帮助同学们掌握 Java/Html/Javascript 技术协作（Markdown）开发小型 MVC Web 应用的能力，理解常见 Web 开发架构，前端（HTML）与后端(数据库）的基本原理与数据传输格式(HTMl or JSON)，将 Web 开发的架构设计与思考能力延续到未来的学习当中。

2018年 同学项目链接

• 快乐肥宅组：https://github.com/shenzihan97/GGWP
• 天才组：https://github.com/meng10270/Genius
• 庸才组：https://github.com/adrianbabe/unGenuis
• Holmes：https://github.com/Xiaxiaxiah/Holmes

2017年 上期同学项目链接

Java小学期Github仓库:

• HappyJune组: 美食 https://github.com/JuneRainbow/Hungry
• ASC组：婚礼 https://github.com/wuxinran-Angel/ASC-WEB
• PPAP组：音乐 https://github.com/dandandeyousangjun/no.2-ppap
• MWZ组: 电影 https://github.com/364879671/FilmWeb

评分标准

个人总分

个人总分=A中期选题汇报（20%）+ B课程项目汇报（50%）+ C课堂参与（10%）+ D团队内贡献（20%）

团队分组

• 人数：2-3人，自由组合，选定负责组长, 中文组名, 组名英文id(符合目录命名规则,无空格, 区分大小写)
• 建议分工：
  • 组长：协调选题、分配队员工作、给出团队内贡献分值D
  • 文案, PPT报告, Markdown 文档协作等
  • 系统架构
  • 后端（Servlet、ORM-数据库、RestFul-JSON）
  • 前端（Html+CSS，Photoshop平面设计, Javascript, 响应式设计）

具体评分方式

编号	得分项	评分依据	评分方式	时间
A	中期报告	团队分工, 设计目标, 技术储备, 难点与解决思路, 10分钟之内	教师分组评价	教师作讲解(技术储备, 代码等) 2018/7/15 中期报告 周日上午: 1-6组
B	结项报告	PPT汇报, 演示, 目标难度与完成状况+, Github文档提交与代码展示++	教师分组评价	周日晚上
C	课堂参与	回答问题，主动提问	教师个人评价	平时
D	团队贡献	子目标难度，完成状况	组长评价	结项报告后

知识点一览

思维导图:
本课知识点思维导图
Java Web 开发详细思维导图
重点(4h)： MVC 架构(1h)，JSON后端处理(0.5h)，JSON 前端处理(0.5h)，Github 仓库项目分享与展示(2h)
非重点：数据可视化（EChart），前端框架 Vue.js Atom Live HttpServer ， 响应式设计 ， Github 协作

环境预备

示范项目: https://github.com/chenzheng128/ShiyanlouPhoto
任务：

• 注册 Github 账号，Clone 克隆项目至自己的账号中
• 用Open in Desktop Github 客户端下载源代码， 使用 Tomcat Server （JSP 页面） 或 HTTP Server (Html 页面， 例如Atom+Live Server) 发布进行页面访问与浏览， 能够区分本地访问和网络访问
• 任务： 安装 Github 客户端， 进行代码版本管理，新建项目，修改与上传操作，插入图片，在不同目录下建立 README.md Markdown 说明文档。
  参考： 1. 专为设计师而写的GitHub快速入门教程 2. 如何同步 Github fork 出来的分支
  （简化起见，都不要 Fork 代码，小组注册一个账户后，同学之间共享账户密码即可）

任务：参考实验楼项目进行 MVC 分层次设计

架构	任务与关联对象	实验楼 src 目录
M - Model 模型	数据(库)对象存储	domain\ 实体对象描述 service\ 存储
C - Controller 控制器	请求分发与处理 Servlet	action\
V - View 展示	样式展示 Servlet/JSP/Html	.jsp .html

Github项目仓库目录规范

• 仓库命名规范: <小组英文id>

• README.md 项目名称、功能介绍，主要功能截图； 目录与文件说明
• 期中选题报告.pptx
• 期末项目报告.pptx
• db.sql db-data.sql 数据库结构与测试数据数据
• screenshot/ 截图文件夹/
• Java代码: src/cuc/web2018/<小组英文id>
• 页面代码: WebContent/web2018/<小组英文id>/index. [html/jsp]
• 数据库: Github仓库根目录中以db.sql存储SQL建表语句与测试数据. 或使用阿里云公共数据库, 数据表前缀应附加: <小组英文id>_
• Github仓库链接: https://github.com///

• 任务: 掌握并熟悉 README.md 中 MarkDown 语法的使用, 建立仓库项目示范文件夹 ：Github + MarkDown

基础知识

• Web网络基础: TCP/IP简单解释, 浅谈CS/BS架构, 理解HTTP协议,
• JSP/Servlet——MVC设计模式 Servlet规范
• HTML表单, RESTful API设计指南

基础实验

• MySQL 基础课程 @实验楼

• 网页前端教程： CSS 入门

• 网页前端实验: ~~~（HTML基础入门 + CSS速成 + Javascript基础（新版）@实验楼~~~ 考虑修改为菜鸟文档链接

• JQuery基础入门 1 2, [.getJSON()]
  (http://www.css88.com/jqapi-1.9/jQuery.getJSON/), JQuery-Ajax

• Java中使用JSON(RESTful API预备), (修改为OrgJsonHelper链接), 介绍JSON@官网

• Chrome浏览器调试(新)

• GitHub仓库创建与管理（国内 coding.net)

• 使用 Maven 管理 Java 项目 (TODO 链接错误): 以 json-lib 为例

扩展参考与实验

• Bootstrap入门, 响应式设计
• J2SE网络通信实践 [@实验楼(会员)]
• Spring框架入门

高级项目

• 结合七牛API搭建个人相册 @实验楼 , 相关知识: Bootstrap(响应式设计), 自定义DAO, API
• 豆瓣Api V2（测试版）Java SDK

项目要求

评分方法:

• 基础元素: 数据库 + 服务端(Java:JSP or Servlet) + 客户端(浏览器JavaSript), Java MVC架构, 自定义JSON数据传输, Github项目仓库+Markdown文档
• 扩展元素: RESTful API(豆瓣等 API 开发 ), GitHub PullRequest协作, 前端功能与效果

期末报告流程:

1. 小组抽签决定报告顺序, 每组报告时间在15分钟以内.
2. 每组报告前, 组长提交小组内各成员共享分值(满分100分), 天使劵及其数量
3. 报告重点: 项目简报(目标难度与完成状况, 分工协作状况, 各自成长与收获), 站点演示, IDE代码展示, Github仓库展示(含README.md). 如使用了 Github Pull
   Request协作, 可介绍 Github Contributor 情况