迪士尼在逃公组 实验四 软件开发案例（1）团队作业
| 项目 | 内容 |
|---|---|
| 课程班级博客链接 | 2020级卓越工程师班 |
| 这个作业要求链接 | 实验四 软件开发案例（团队作业） |
| 团队名称 | 迪士尼在逃公组 |
| 我的课程学习目标 | 1.练习mysql数据库创建和连接访问技术 2. 掌握数据库应用程序开发技术 3.完成软件开发环境部署 |
| 这个作业在哪些方面帮助我实现学习目标 | 1.在完成创建数据库的过程中将之前所学的知识融汇贯通，将旧的知识加以巩固，也提升了自己的自学能力。 2.在Tomcat服务器中部署项目时遇到了很多问题，通过不断地查阅资料与寻求同学的帮助成功解决。 |
| 团队博客链接 | 迪士尼在逃公组 |
任务一 :用户综合管理软件开发环境配置
（1）创建用户综合管理软件的Java web项目，项目名称自拟。
说明与建议：
此处的Dynamic web module version 建议选4.0及以下更为稳定。
（2）在项目中添加mysql的驱动支持包。
说明与建议：
此处点击Add External JARs，找到驱动器所在目录，最后选择Apply应用到项目中。最后输入UNLOCK TABLES解锁所有表现象。
（3）分别用手工或脚本方式创建mysql数据库及表。
使用Navicat Premium对数据进行管理
说明与建议：
此处选择以脚本形式创建数据库mydatabase与user表,同时插入少量原始数据。
（4）将用户综合管理软件案例代码导入到项目中。
说明与建议：
导入相应的插件做需要的库函数。
同时需要更改数据里连接部分代码
说明与建议：
设置一下全局的jsp 的编码为utf-8，同时对于项目进行异常捕捉打印。
（5）在Tomcat服务器中部署项目。
说明与建议：
（如何在eclipse中配置Tomcat服务器）
1. 可以单击“Window”菜单，选择下方的“Preferences”；
2. 再单击“Server”选项，选择下方的“Runtime Environments”；
3. 再点击“Add”添加Tomcat，点击“Next”，选中自己安装的Tomcat路径；
4. 点击“Finish”完成Tomcat Server 的配置。
（6）测试运行用户信息的查询、更新、删除、显示等操作。
此处使用sql语句批量增加数据。
借助Navicat Premium查看数据状况。
查询操作
点击查询功能卡片，跳转到search.jsp根据id检索用户信息，点击提交按钮，即可跳转到showUser.jsp。
说明与建议：
此处输入id为5，对应信息与下图 {5，米乐文，mlw}符合
新增操作
点击功能卡片，跳转到search.jsp根据id检索用户信息.
点击提交按钮，即可跳转到showUser.jsp,并在其中调用allShow.jsp显示所有用户。
删除操作
点击功能卡片，跳转到dele.jsp根据id检索用户信息。
点击提交按钮，即可跳转到deleShow.jsp。
返回操作结果，可点击按钮显示所有用户。
更新操作
点击更新功能卡片，跳转到update.jsp修改用户信息。
可点击提交按钮显示所有用户。
任务2：用户综合管理软件增量开发
（1）为案例软件开发软件入口主界面，作为查询、更新、删除、显示的功能导航页面。
index.jsp(点击查看代码)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./static/style.css">
</head>
<body>
<div class="container">
<!-- 第一个卡片 -->
<div class="card">
<div class="content">
<h2>01</h2>
<h3>allShow</h3>
<p>你可以点击当前卡片显示所有用户信息</p>
<a href="allShow.jsp">用户显示功能</a>
</div>
</div>
<!-- 第二个卡片 -->
<div class="card">
<div class="content">
<h2>02</h2>
<h3>insert</h3>
<p>你可以点击当前卡片插入用户信息</p>
<a href="insert.jsp">用户新增功能</a>
</div>
</div>
<!-- 第三个卡片 -->
<div class="card">
<div class="content">
<h2>04</h2>
<h3>dele</h3>
<p>你可以点击当前卡片删除用户信息</p>
<a href="dele.jsp">用户删除功能</a>
</div>
</div>
</div>
<div class="container">
<!-- 第一个卡片 -->
<div class="card">
<div class="content">
<h2>03</h2>
<h3>update</h3>
<p>你可以点击当前卡片更新用户信息</p>
<a href="update.jsp">用户更新功能</a>
</div>
</div>
<!-- 第二个卡片 -->
<div class="card">
<div class="content">
<h2>04</h2>
<h3>search</h3>
<p>你可以点击当前卡片检索用户信息</p>
<a href="search.jsp">用户检索功能</a>
</div>
</div>
<!-- 第三个卡片 -->
<div class="card">
<div class="content">
<h2>06</h2>
<h3>upload</h3>
<p>你可以点击当前卡片实现批量上传</p>
<a href="upload.jsp">批量上传功能</a>
</div>
</div>
</div>
<script type="text/javascript" src="vanilla-tilt.js"></script>
<script>
VanillaTilt.init(document.querySelector(".your-element"), {
max: 25,
speed: 400,
glare:true,
"max-glare":1,
});
</script>
<span class="js-cursor-container"></span>
<script>
(function fairyDustCursor() {
var possibleColors = ["#D61C59", "#E7D84B", "#1B8798"]
var width = window.innerWidth;
var height = window.innerHeight;
var cursor = { x: width / 2, y: width / 2 };
var particles = [];
function init() {
bindEvents();
loop();
}
function bindEvents() {
document.addEventListener('mousemove', onMouseMove);
window.addEventListener('resize', onWindowResize);
}
function onWindowResize(e) {
width = window.innerWidth;
height = window.innerHeight;
}
function onMouseMove(e) {
cursor.x = e.clientX;
cursor.y = e.clientY;
addParticle(cursor.x, cursor.y, possibleColors[Math.floor(Math.random() * possibleColors.length)]);
}
function addParticle(x, y, color) {
var particle = new Particle();
particle.init(x, y, color);
particles.push(particle);
}
function updateParticles() {
for (var i = 0; i < particles.length; i++) {
particles[i].update();
}
for (var i = particles.length - 1; i >= 0; i--) {
if (particles[i].lifeSpan < 0) {
particles[i].die();
particles.splice(i, 1);
}
}
}
function loop() {
requestAnimationFrame(loop);
updateParticles();
}
function Particle() {
this.character = "*";
this.lifeSpan = 120; //ms
this.initialStyles = {
"position": "fixed",
"display": "inline-block",
"top": "0px",
"left": "0px",
"pointerEvents": "none",
"touch-action": "none",
"z-index": "10000000",
"fontSize": "25px",
"will-change": "transform"
};
this.init = function (x, y, color) {
this.velocity = {
x: (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 2),
y: 1
};
this.position = { x: x + 10, y: y + 10 };
this.initialStyles.color = color;
this.element = document.createElement('span');
this.element.innerHTML = this.character;
applyProperties(this.element, this.initialStyles);
this.update();
document.querySelector('.js-cursor-container').appendChild(this.element);
};
this.update = function () {
this.position.x += this.velocity.x;
this.position.y += this.velocity.y;
this.lifeSpan--;
this.element.style.transform = "translate3d(" + this.position.x + "px," + this.position.y + "px, 0) scale(" + (this.lifeSpan / 120) + ")";
}
this.die = function () {
this.element.parentNode.removeChild(this.element);
}
}
function applyProperties(target, properties) {
for (var key in properties) {
target.style[key] = properties[key];
}
}
if (!('ontouchstart' in window || navigator.msMaxTouchPoints)) init();
})();
</script>
</body>
</html>
（2）为案例软件开发一个新功能，可将excel文件的用户信息批量导入数据库。
导入方法：
选择文件，并点击上传按钮。
会按id进行检索，如果已经存在，则标红显示，如果不存在则插入数据库，绿色显示，同时也可点击显示所有用户按钮。
功能效果如下：
uploadServelet.java(点击查看代码)
package servlet;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.util.Iterator;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;
import com.alibaba.fastjson.JSON;
import entity.User;
import model.Model;
import utils.MyExcelUtils;
/**
* Servlet implementation class uploadServlet
*/
@MultipartConfig
@WebServlet("/uploadServlet")
public class uploadServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public uploadServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
// 设置编码
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/json;charset=utf-8");
// 获取Part文件上传对象
Part part = request.getPart("excelFile");
// 获取PrintWriter对象，可以在网页显示提示信息
PrintWriter printWriter = response.getWriter();
if (part != null) {
// 获取文件头信息
String fileHeader = part.getHeader("Content-Disposition");
// 文件名
String fileName = fileHeader.substring(fileHeader.lastIndexOf("=") + 2, fileHeader.length() - 1);
// 获取输入流
InputStream inputStream = part.getInputStream();
if(!"".equals(fileName)) {
if(MyExcelUtils.validFileIsExcel(fileName)) {
List<User> users = MyExcelUtils.getExcelData(inputStream, fileName);
// 将用户信息逐一添加到数据库
Model model = new Model();
String msg = "";
for (User user : users) {
int isSuccess = model.insert(user.getId(), user.getName(), user.getPassword());
if (isSuccess > 0) {
msg += "<span style='color: green;'>UID "+ user.getId() + " 的用户 " + user.getName() + " 添加成功</span><br/>";
}else {
msg += "<span style='color: red;'>UID "+ user.getId() + " 的用户 " + user.getName() + " 已经存在</span><br/>";
}
}
request.setAttribute("msg", msg);
// 删除缓存的文件,释放资源
part.delete();
request.getRequestDispatcher("uploadShow.jsp").forward(request, response);
}else {
printWriter.write("<h1 style='color: red'>文件格式不支持，仅支持excel表格文件</h1>");
}
}else {
printWriter.write("<h1 style='color: red'>文件已损坏或不存在</h1>");
}
} else {
printWriter.write("<h1 style='color: red'>未获取到文件</h1>");
}
// 删除缓存的文件,释放资源
part.delete();
printWriter.flush();
printWriter.close();
}
}
upload.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>上传数据</title>
</head>
<body>
<h1 id="msg"></h1>
<script type="text/javascript">
let msg = "${msg}";
let msgDom = document.getElementById("msg");
msgDom.innerHTML = msg;
</script>
<form action="allShow.jsp">
<input type="submit" value="显示所有用户">
</form>
</body>
</html>
（3）将任务1与任务2完成的用户综合管理软件源码上传到团队github仓库。 可点击如下链接查看
扩展与建议
在使用一些POI，或者Part包的时候，如果直接导入识别不出来，可以直接放在WEB-INF/lib下，还有一些包可以放在Tomcat的lib下。
记录完成《实验四 软件开发案例（1）团队作业》各项任务实际花费的时间和成员分工
- 完成各项任务花费的时间
| 任务内容 | 预计花费时间 （min） | 实际花费时间 (min) |
|---|---|---|
| 任务一：用户综合管理软件开发环境配置 | 90 | 130 |
| 任务二：用户综合管理软件增量开发 | 60 | 100 |
| 任务三 ：完成实验四团队博文作业 | 60 | 80 |
- 成员分工
| 成员 | 分工 |
|---|---|
| 米*文 | 1. 创建用户综合管理软件的Java web项目，项目名称自拟。 2.在项目中添加mysql的驱动支持包。 3.分别用手工或脚本方式创建mysql数据库及表。 4.将用户综合管理软件案例代码导入到项目中。 5.在Tomcat服务器中部署项目。（共同完成） 6.撰写个人心得 |
| 何*娜 | 1.为案例软件开发软件入口主界面，作为查询、更新、删除、显示的功能导航页面。 2.为案例软件开发一个新功能，可将excel文件的用户信息批量导入数据库。 3.测试运行用户信息的查询、更新、删除、显示等操作。 4.在Tomcat服务器中部署项目。（共同完成） 5.撰写个人心得 |
| 宋*婷 | 1.完成团队博客的撰写 2.在Tomcat服务器中部署项目。（共同完成） 3.将任务1与任务2完成的用户综合管理软件源码上传到团队github仓库。 4.撰写个人心得并汇总 |
- 每位团队成员总结实验学习心得。
何*娜：
在这次实验中我们清晰认识到项目并不是单纯的写代码，环境配置与项目组织同样重要，同时我们再一次赞叹于git的版本控制与分支操作，帮助我们分工合作，也帮助我们整合。在实验中我还明白了掌握数据流向对于项目至关重要，不仅有助于编写与组织项目，同时有利于我们进行封装与抽象，进一步提高模块的独立性。每个实验项目遇到的都是新的问题，没有规律的解决方案和一成不变的方法，需要自己去查资料总结，去抓住问题的本质寻找规律，然后不断地努力，独立思考，小组合作才能完美的解决问题。
米*文：
通过本次实验，我认识到知识上的巩固与衔接是非常重要的，单单每门课学好是不够的，还要把所学的知识综合起来，做到将知识串联，才能很好的应用于一个项目。还有就是，项目是我们团队共同的项目，大家的目标是一样的，在团队合作中难免会因为观点的不同而产生摩擦，这时候需要我们以团队为重，以项目为主，全身心投入，并充分尊重团队中成员的意见和建议。每一个人的力量都是有限的，在团队中我们能聚集起每个人的能量，将其团队作用发挥到最大。
宋*婷：
在我们为案例软件开发软件入口主界面时，需要对入口界面进行基本功能的完成和界面的美化。我们在美化界面时就可以发挥创造力进行创新，把界面做的具有我们小组的特色。当我在对我们组的作业成果通过博客撰写的方式进行总结时，发现即使是一个庞大的项目也可以通过不断的细分，分成一个个详细的步骤，进而分工到团队的每位成员，大家互相合作就可以合力完成。
