迪士尼在逃公组 实验四 软件开发案例(1)团队作业
项目 | 内容 |
---|---|
课程班级博客链接 | 2020级卓越工程师班 |
这个作业要求链接 | 实验四 软件开发案例(团队作业) |
团队名称 | 迪士尼在逃公组 |
我的课程学习目标 | 1.练习mysql数据库创建和连接访问技术 2. 掌握数据库应用程序开发技术 3.完成软件开发环境部署 |
这个作业在哪些方面帮助我实现学习目标 | 1.在完成创建数据库的过程中将之前所学的知识融汇贯通,将旧的知识加以巩固,也提升了自己的自学能力。 2.在Tomcat服务器中部署项目时遇到了很多问题,通过不断地查阅资料与寻求同学的帮助成功解决。 |
团队博客链接 | 迪士尼在逃公组 |
任务一 :用户综合管理软件开发环境配置
(1)创建用户综合管理软件的Java web项目,项目名称自拟。
![](https://img2023.cnblogs.com/blog/3165072/202304/3165072-20230428184328809-841889206.png)
说明与建议:
此处的Dynamic web module version 建议选4.0及以下更为稳定。
(2)在项目中添加mysql的驱动支持包。
![](https://img2023.cnblogs.com/blog/3165072/202304/3165072-20230428184812333-804358408.png)
说明与建议:
此处点击Add External JARs,找到驱动器所在目录,最后选择Apply应用到项目中。最后输入UNLOCK TABLES解锁所有表现象。
(3)分别用手工或脚本方式创建mysql数据库及表。
![](https://img2023.cnblogs.com/blog/3165072/202304/3165072-20230428191053095-968447131.png)
使用Navicat Premium对数据进行管理
![](https://img2023.cnblogs.com/blog/3165072/202304/3165072-20230428232458559-1383859393.png)
说明与建议:
此处选择以脚本形式创建数据库mydatabase与user表,同时插入少量原始数据。
(4)将用户综合管理软件案例代码导入到项目中。
![](https://img2023.cnblogs.com/blog/3165072/202304/3165072-20230428191649244-1111316795.png)
说明与建议:
导入相应的插件做需要的库函数。
同时需要更改数据里连接部分代码
![](https://img2023.cnblogs.com/blog/3165072/202304/3165072-20230428233920055-559495795.png)
说明与建议:
设置一下全局的jsp 的编码为utf-8,同时对于项目进行异常捕捉打印。
(5)在Tomcat服务器中部署项目。
![](https://img2023.cnblogs.com/blog/3165072/202304/3165072-20230428191852633-1874069607.png)
说明与建议:
(如何在eclipse中配置Tomcat服务器)
1. 可以单击“Window”菜单,选择下方的“Preferences”;
2. 再单击“Server”选项,选择下方的“Runtime Environments”;
3. 再点击“Add”添加Tomcat,点击“Next”,选中自己安装的Tomcat路径;
4. 点击“Finish”完成Tomcat Server 的配置。
(6)测试运行用户信息的查询、更新、删除、显示等操作。
此处使用sql语句批量增加数据。
![](https://img2023.cnblogs.com/blog/3165072/202304/3165072-20230428192446338-1280254130.png)
借助Navicat Premium查看数据状况。
![](https://img2023.cnblogs.com/blog/3165072/202304/3165072-20230428192910523-1845829848.png)
查询操作
点击查询功能卡片,跳转到search.jsp根据id检索用户信息,点击提交按钮,即可跳转到showUser.jsp。
说明与建议:
此处输入id为5,对应信息与下图 {5,米乐文,mlw}符合
![](https://img2023.cnblogs.com/blog/3165072/202304/3165072-20230428194607890-259045203.png)
新增操作
点击功能卡片,跳转到search.jsp根据id检索用户信息.
![](https://img2023.cnblogs.com/blog/3165072/202304/3165072-20230428192642266-670855326.png)
点击提交按钮,即可跳转到showUser.jsp,并在其中调用allShow.jsp显示所有用户。
![](https://img2023.cnblogs.com/blog/3165072/202304/3165072-20230428193017963-991334687.png)
删除操作
点击功能卡片,跳转到dele.jsp根据id检索用户信息。
点击提交按钮,即可跳转到deleShow.jsp。
![](https://img2023.cnblogs.com/blog/3165072/202304/3165072-20230428193232341-1996882548.png)
返回操作结果,可点击按钮显示所有用户。
![](https://img2023.cnblogs.com/blog/3165072/202304/3165072-20230428193320618-335046577.png)
更新操作
点击更新功能卡片,跳转到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文件的用户信息批量导入数据库。
导入方法:
选择文件,并点击上传按钮。
![](https://img2023.cnblogs.com/blog/3165072/202304/3165072-20230429123256625-349529974.png)
会按id进行检索,如果已经存在,则标红显示,如果不存在则插入数据库,绿色显示,同时也可点击显示所有用户按钮。
![](https://img2023.cnblogs.com/blog/3165072/202304/3165072-20230429123206657-1379877812.png)
功能效果如下:
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的版本控制与分支操作,帮助我们分工合作,也帮助我们整合。在实验中我还明白了掌握数据流向对于项目至关重要,不仅有助于编写与组织项目,同时有利于我们进行封装与抽象,进一步提高模块的独立性。每个实验项目遇到的都是新的问题,没有规律的解决方案和一成不变的方法,需要自己去查资料总结,去抓住问题的本质寻找规律,然后不断地努力,独立思考,小组合作才能完美的解决问题。
米*文:
通过本次实验,我认识到知识上的巩固与衔接是非常重要的,单单每门课学好是不够的,还要把所学的知识综合起来,做到将知识串联,才能很好的应用于一个项目。还有就是,项目是我们团队共同的项目,大家的目标是一样的,在团队合作中难免会因为观点的不同而产生摩擦,这时候需要我们以团队为重,以项目为主,全身心投入,并充分尊重团队中成员的意见和建议。每一个人的力量都是有限的,在团队中我们能聚集起每个人的能量,将其团队作用发挥到最大。
宋*婷:
在我们为案例软件开发软件入口主界面时,需要对入口界面进行基本功能的完成和界面的美化。我们在美化界面时就可以发挥创造力进行创新,把界面做的具有我们小组的特色。当我在对我们组的作业成果通过博客撰写的方式进行总结时,发现即使是一个庞大的项目也可以通过不断的细分,分成一个个详细的步骤,进而分工到团队的每位成员,大家互相合作就可以合力完成。