软件标准体系结构报告书.docx

软件体系结构汇报书

基于MVC模式软件体系
小型项目标应用

组 号： 24
成 员：01613240 李 尧
01613232孙雨晨
01613227 钱 磊
完成日期： /11/8

项目提要

1、 项目介绍
①、整体概况介绍
②、Client端介绍
③、服务器Tomcat介绍
④、数据库SQL Server R2介绍
⑤、整个项目框架图

2、 Model层
①、数据库连接
②、添加用户
③、删除用户
④、修改用户
⑤、查询用户
⑥、为每个登录用户添加Cookie/Session机制
⑦、定时跳转
⑧、添加分页功效
⑨、提供下载功效
⑩、安全退出后续操作

3、 View层
①、登录主界面
②、管理主界面
③、显示用户管理/用户查询查询结果
④、显示添加用户元件
⑤、查找用户界面
⑥、修改用户主界面
⑦、删除用户成功/添加用户成功/登陆成功界面/登陆错误页面/修该用 户信息成功页面
⑧、防盗链页面

4、 Controller层
①、用户登录控制
②、防盗链控制（非法登录控制）
③、数据库连接控制
④、分页控制
⑤、添加用户页面显示控制
⑥、定时页面跳转控制

5、 项目测试

项目介绍
1、 整体概况介绍
本项目是基于MVC模式软件体系小型项目标应用，即基于模型(model)－视图(view)－控制器(controller)之间Client端、服务器Tomcat、SQL Server R2数据库应用操作项目。采取MVC框架，是一个软件设计典范，用一个业务逻辑、数据、界面显示分离方法组织代码，将业务逻辑聚集到一个部件里面，在改善和个性化定制界面及用户交互同时，不需要重新编写业务逻辑。MVC被独特发展起来用于映射传统输入、处理和输出功效在一个逻辑图形化用户界面结构中。简单步骤描述能够概括为：用户经过用户端（Client端）访问页面→经过服务器响应用户请求→到数据库中查询数据→返回给用户端（Client端），在这里我们用户端为浏览器端，类似B/S架构。在这种结构下，用户工作界面是经过WWW浏览器来实现，极少部分事务逻辑在前端(Browser)实现，不过关键事务逻辑在服务器端(Server)实现，形成所谓三层3-tier结构。B/S结构是WEB兴起后一个网络结构模式，WEB浏览器是用户端最关键应用软件。这种模式统一了用户端，将系统功效实现关键部分集中到服务器上，简化了系统开发、维护和使用。用户机上只要安装一个浏览器（Browser），如Netscape Navigator或Internet Explorer，服务器安装Oracle、Sybase、Informix或 SQL Server等数据库。浏览器经过Web Server同数据库进行数据交互。 这么就大大简化了用户端电脑载荷，减轻了系统维护和升级成本和工作量，降低了用户总体成本(TCO)。
2、 Client端介绍
用户端（Client）或称为用户端，是指和服务器相对应，为用户提供当地服务程序。除了部分只在当地运行应用程序之外，通常安装在一般用户机上，需要和服务端相互配合运行。因特网发展以后，较常见用户端包含了如万维网使用网页浏览器，收寄电子邮件时电子邮件用户端，和即时通讯用户端软件等。对于这一类应用程序，需要网络中有对应服务器和服务程序来提供对应服务，如数据库服务，电子邮件服务等等，这么在用户机和服务器端，需要建立特定通信连接，来确保应用程序正常运行。本项目中使用Internet Explorer 11，360急速浏览器充当用户端。

3、 服务器Tomcat介绍
Tomcat服务器是Apache软件基金会项目中一个开源Web应用服务器，属于轻量级应用服务器，在中小型系统和并发访问用户不是很多场所下被普遍使用，是开发和调试JSP 程序首选。对于一个初学者来说，能够这么认为，当在一台机器上配置好Apache 服务器，可利用它响应HTML（标准通用标识语言下一个应用）页面访问请求。实际上Tomcat 部分是Apache 服务器扩展，但它是独立运行，所以当你运行tomcat 时，它实际上作为一个和Apache 独立进程单独运行。本项目使用是Tomcat 8.0版本（最新）。

4、 数据库SQL Server R2介绍
SQL Server R2 在Microsoft数据平台上公布，能够组织管理任何数据。能够将结构化、半结构化和非结构化文档数据直接存放到数据库中。能够对数据进行查询、搜索、同时、汇报和分析之类操作。数据能够存放在多种设备上，从数据中心最大服务器一直到桌面计算机和移动设备，它全部能够控制数据而不用管数据存放在哪里。SQL Server R2关键应用于小型项目开发，安全稳定，所以本项目将采取它作为我们数据库管理。
5、 整个项目框架图

项目框架图.xlsx,,,,,,项目框架图.htm
Model层
1、 数据库连接
数据库连接需要含有JDBC驱动（JDBC“Java Data Base Connectivity,java数据库连接”是一个用于实施SQL语句Java API，能够为多个关系数据库提供统一访问，它由一组用Java语言编写类和接口组成。JDBC提供了一个基准，据此能够构建更高级工具和接口，使数据库开发人员能够编写数据库应用程序。）、需要数据库连接地址和数据库用户名和密码。
实现代码以下：
private static Connection dbconn =null;
private static final String diverName = "com.microsoft.sqlserver.jdbc.SQLServerDriver";
private static final String dbURL="jdbc:sqlserver://localhost:1433; DatabaseName=LoginData";
private static final String UserName="Yeoo_Server";
private static final String PassWord="liyao5926362";

try {
Class.forName(diverName); //加载驱动程序
dbconn = DriverManager.getConnection(dbURL, UserName, PassWord); //连接数据库
System.out.println("SQL Server Connection Successful！");
} catch (SQLException e) {
e.printStackTrace();
} catch (ClassNotFoundException e) {
throw new ServletException("加载数据库驱动失败.");
}finally{
try {
if(dbconn!=null){
dbconn.close();
}
} catch (SQLException e) {
e.printStackTrace();
}
}
2、 添加用户
添加用户功效用AddUserServlet.java实现，服务器经过用户端获取到输入新用户名和密码，然后在数据库中添加一个新用户。
代码实现：
数据库连接....（略过）
private static PreparedStatement ps; //获取数据库操作对象
private static String SQL_Insert; //数据库查询语句
//从用户端获取到用户输入新用户
String NewUser = request.getParameter("C_Username");
//从用户端获取到用户输入新密码
String NewPass = request.getParameter("C_Password");
//给数据库查询语句赋值
SQL_Insert = "insert into Table_1(UserName,PassWord) values('"+NewUser+"','"+NewPass+"')";
ps = con.prepareStatement(SQL_Insert); //实施操作语句
ps.executeUpdate(); //更新结果

3、 删除用户
添加用户功效用DeleteServlet.java实现，用户经过用户端点击需要删除用户，由服务器获取到要删除用户UserName，然后在数据库中用语句进行删除。
代码实现：
数据库连接....（略过）
private static PreparedStatement ps = null; //获取数据库操作对象
String s= request.getParameter("Username"); //获取要删除ID
//实施删除语句操作
ps = con.prepareStatement(
"delete from Table_1 where UserName='"+s+"'");
ps.executeUpdate(); //更新结果

4、 修改用户
修该用户操作用ModifyUser.jsp（显示目前用户信息）和 ModifySuccess.jsp（修改目前用户信息）实现，修改用户分为显示目前用户信息，和修改用户信息，同理用户经过在用户端输入需要修改信息，然后又服务器进行获取，在数据库中进行语句修改。
代码实现：
数据库连接....（略过）
//显示目前用户信息
PreparedStatement ps = null; //获取数据库操作对象
ResultSet rs =null;
String Username = request.getParameter("Username"); //获取ID
String PassWrod=null,Email=null,TelePhone=null;
//查询改ID全部信息
ps = con.prepareStatement("select PassWord,Email,TelePhone from Table_1 where UserName='"+Username+"'");
rs=ps.executeQuery(); //把结果储存在ResultSet中
while(rs.next()){ //把查询到结果输出到界面
PassWrod = rs.getString("PassWord");
Email = rs.getString("Email");
TelePhone = rs.getString("TelePhone");
out.println(
"<p class=\"p1\">UserName : "+Username+"</p>");
out.println(
"<p class=\"p1\">PassWord : "+PassWrod+"</p>");
out.println(
"<p class=\"p1\">Email : "+Email+"</p>");
out.println(
"<p class=\"p1\">TelePhone : "+TelePhone+"</p>");
}

//修该用户操作
PreparedStatement ps = null; //获取数据库操作对象
String PassWord = request.getParameter("PassWord"); //原始密码
String Email = request.getParameter("Email");//原始邮箱
String TelePhone = request.getParameter("TelePhone");//原始电话

String UserName = request.getParameter("UserName"); //默认用户名字
String NewUserPassWord = request.getParameter("PassW"); //修改后密码
//判定新密码是否为空，为空设置为原始密码
if(NewUserPassWord.equals("")){ NewUserPassWord=PassWord;
}
String NewUserEmail = request.getParameter("Em"); //修改后邮箱
//判定新邮箱是否为空，为空设置为原始邮箱
if(NewUserEmail.equals("")){
NewUserEmail=Email;
}
String NewUserTelePhone = request.getParameter("Tele"); //修改后电话
//判定新电话是否为空，为空设置为原始电话
if(NewUserTelePhone.equals("")){
NewUserTelePhone=TelePhone;
}
//实施删除操作语句
ps=con.prepareStatement("update Table_1 set PassWord='"+NewUserPassWord+"',Email='"+NewUserEmail+"',TelePhone="+NewUserTelePhone+" where UserName='"+UserName+"'");
ps.executeUpdate(); //更新数据

5、 查询用户
查询用户操作用FindUsers.jsp来实现。直接在数据库中进行查询即可，然后输出。
代码实现：
数据库连接....（略过）
ResultSet rs =null; //定义数据库结果集对象
PreparedStatement ps = null; //定义数据库操作对象
int pageNow=1; //目前页
int pageSize=6; //每页显示条数

//查询用户全部信息，显示6条
ps = con.prepareStatement("select top 6 UserName,PassWord,Email,TelePhone from Table_1 where UserName not in(select top "+((pageNow-1)*pageSize)+" UserName from Table_1)");
rs = ps.executeQuery(); //把查询储存到ResultSet中
while(rs.next()){ //将结果输出
//获取查询结果中UserName列
User = rs.getString("UserName");
//获取查询结果中PassWord列
Pass = rs.getString("PassWord");
//获取查询结果中Email列
Email = rs.getString("Email");
//获取查询结果中TelePhone列
TelePhone = rs.getString("TelePhone");
//将结果输出到表格中 out.println("<tr><td>"+User+"</td><td>"+Pass+"</td><td>"+Email+"</td><td>"+TelePhone+"</td></tr>");
}

6、 为每个登录用户添加Cookie/Session机制
登录成功后为每个用户添加Cookie/Session机制，可储存用户信息，可预防用户非法登录等等功效。
代码实现：
String str_User = request.getParameter("text_1"); //获取用户ID
Cookie mycookie = new Cookie("id", str_User); //创建Cookie
mycookie.setMaxAge(7*2*24*3600); //设置Cooike生命周期为两周
mycookie.setPath("/"); //设置储存Cookie路径
response.addCookie(mycookie); //添加Cookie给用户端
//获取Session，没有则创建一个
HttpSession session = request.getSession();
session.setAttribute("User", str_User); //向Session中设置属性和属性值
//Cookie使用，为每个用户储存ID，在每个页面显示欢迎每个ID
String id= ""; //定义一个变量用于储存要显示ID
Cookie []c = request.getCookies(); //获取Cookie
for(int i=0;i<c.length;i++){
if(c[i].getName().equals("id")){ //获取名为idCookie
id=c[i].getValue(); //把值（用户ID）赋值给id
}
}
//Session使用，可用于用户非法登录（服务器端）
//取出Session中值
String User = (String)request.getSession().getAttribute("User");
if(User == null){
request.getRequestDispatcher("/Error_2.jsp").forward(request, response);
return;
//立即跳转，假如没有return话会等候页面全部加载完再跳转。
}

7、 定时跳转
定时跳转需要用HTML、JavaScript结合使用。
代码以下：
HTML：
<meta http-equiv= "Refresh" content= "3;url=http://localhost:8080/MyWebServer/LoginMain.jsp ">

<p>Successfully add a new user to the database , Back home side after <span id="times">3</span> seconds</p>

JavaScript：
<script language="javascript">
var time = 4;
clock();
function clock(){
window.setTimeout('clock()', 1000);
--time;
times.innerHTML = time;
}
</script>

8、 添加分页功效
//定义分页需要四个变量
int pageNow = 1; //现在处于第几页
//接收用户pageNow
String s = request.getParameter("pageNow");
if(s!=null){
pageNow = Integer.parseInt(s);
}

int pageSize = 7; //每页显示条数
int rowCount; //一共有多少条统计(数据库中)
int pageCount; //一共要显示多少页（计算出来）

ps = con.prepareStatement("select count(*) from Table_1");
rs = ps.executeQuery();
rs.next(); //把游标（数据库）向下以一个

rowCount = rs.getInt(1); //获取到一共有多少条统计
pageCount = rowCount%pageSize==0 ? rowCount/pageSize : rowCount/pageSize+1; //计算出一共有多少页

ps = con.prepareStatement("select top 7 UserName,PassWord from Table_1 where UserName not in(select top "+((pageNow-1)*pageSize)+" UserName from Table_1)");
rs = ps.executeQuery();

//显示分页
out.println("<div class=\"FenYe_a\">");
if(pageNow!=1){ //假如目前页不等于第一页，显示第一页超链接
out.println("<a href=\"http://localhost:8080/MyWebServer/Manager_User.jsp?pageNow="+(pageNow-1)+"\">Previous Page</a>");
}
for(int i=0;i<pageCount;i++){ //循环输出超链接
out.println("<a href=\"http://localhost:8080/MyWebServer/Manager_User.jsp?pageNow="+(i+1)+"\">"+(i+1)+"</a>");
}
if(pageNow!=pageCount){//假如目前页不等于最右一页，显示最终一页
out.println("<a href=\"http://localhost:8080/MyWebServer/Manager_User.jsp?pageNow="+(pageNow+1)+"\">Next Page</a>");
}

9、 提供下载功效
下载功效由DownLoadServlet.java实现
response.setHeader("Content-Disposition", "attachment; filename=2.jpg");
String path = this.getServletContext().getRealPath("2.jpg");
FileInputStream fin = new FileInputStream(path);
byte[] buff = new byte[1024];
int len=0;
OutputStream os = response.getOutputStream();
while((len=fin.read(buff))>0){
os.write(buff, 0, len);
}
os.close();
fin.close();

10、 安全退出后续操作
安全退出返回登录主界面（MyJsp.jsp）之外，还需要销毁Cookie和Session，即清除用户登录痕迹和为用户保留用户信息。
实现原理为：把Cookie和Session生命周期设为0.
关键代码：
mycookie.setMaxAge(0);
session.setMaxInactiveInterval(0);

View层

1、 登录主界面
由MyJsp.jsp实现，需要用到CSS样式表。
效果图：

样式表内容：
<style>
*{margin:0px 0px; }
body{font-family: Verdana;color:white;}
div{position: absolute;top:350px;left:530px;}
input{background-color:#020514;border:1px solid black;
height:28px;width:200px;border-radius:5px;color:white;}
</style>
Body内容：
<body>
<img src="1.png" width="100%" height="100%" />
<div id = div_from>
<form name=form_1 method="post" action="http://localhost:8080/MyWebServer/servlet/LoginServer">
<span>Username : </span>
<input type="text" name = "text_1"><br/><br/><br/>
<span>Password&nbsp;&nbsp;: </span>
<input type="password" name = "password_1"><br/><br/><br/>
<input type = "submit" value="Login" style="margin:20px 55px;color:black;font-size:15px;background-color:white;">
</form>
</div>
</body>

2、 管理主界面
由LoginMain.jsp实现，需要用到CSS样式表。
效果图：

样式表内容：
<style>
*{margin: 0px 0px;font-family: Verdana;}
#div1{position:absolute;top:230px;left:250px;}
a{text-decoration: none;font-size: 20px;line-height: 50px;
color:black;}
p{position:absolute;top:180px;left:250px;font-family: Verdana;
font-size: 20px;}
a:hover{margin-left:40px;transition: all ease-in .2s;
text-decoration: underline;cursor:pointer;color:red;}
hr{height:1px;width:200px;border:none;border-top:
1px solid black;position:absolute;top:220px;left:250px;}
#div_Download{position:absolute;top:580px;left:620px;}
#div_Download a{color:black;font-size: 18px;font-family:
"张海山锐线体简";}
#div_Download a:hover{color:white;transition:all ease-in .3s;
margin-left:0;}
#div2{position:absolute;top:460px;left:252px;display:none;}
#div2 fieldset {border-color:black; padding-top: 15px;}
.a{margin-left:60px;background:transparent;border:1px solid black;width:150px;cursor: pointer;}
.a:hover{border:1px solid white;color:white;transition
:all ease-in .3s;}
.b{border:1px solid black;background:transparent;}
#div3{position:absolute;top:-150px;left:680px;}
#div3 p{width:420px;}
</style>
Body内容：
<body>
<img src="2.jpg" width="100%" height="100%" />
<div id="div3">
<p>Welcome <font style='color:#FF5A00'><%=id %></font> To Visit This Website!</p>
</div>
<p>Main interface</p><hr />
<div id="div1">
<ahref="http://localhost:8080/MyWebServer/Manager_User.jsp">
Managing User</a><br/>
<a href="javascript:;" id="Add_User">Add User</a><br/>
<a href="http://localhost:8080/MyWebServer/FindUsers.jsp">
Find Users</a><br/>
<a href="http://localhost:8080/MyWebServer/MyJsp.jsp">
Safety Exit</a><br/>
</div>
<div id="div_Download">
<a href="/servlet/DownLoadServlet">下载本页面背景图片</a>
</div>
<div id="div2">
<fieldset>
<legend>Add New Users To The Database</legend>
<form name=form_2 method="post" action="http://localhost:8080/MyWebServer/servlet/AddUserServlet">
<span>UserName : </span>
<input type="text" name="C_Username" class="b" />
<br/><br/>
<span>Password &nbsp;: </span>
<input type="password" name="C_Password" class="b" />
<br/><br/>
<input type="submit" value="Submit" class="a"/>
</form>
</fieldset>
</div>
</body>

3、 显示用户管理/用户查询查询结果
由Manager_User.jsp实现。需要用到CSS样式表和JSP输出。
效果图：

CSS样式表：
<style>
*{margin:0px 0px;font-family: Verdana;}
#div1{position:absolute;top:230px;left:250px;}
#div1 a{text-decoration: none;font-size: 20px;line-height: 50px;
color:black;}
p{position:absolute;top:180px;left:250px;font-size: 20px;}
#div1 a:hover{margin-left:40px;transition: all ease-in .2s;
text-decoration: underline;cursor:pointer;color:red;}
hr{height:1px;width:200px;border:none;border-top:1px solid black;position:absolute;top:220px;left:250px;}
table{border:1px solid black;position:absolute;top:180px;
left:820px;width:500px;}
table td{border:1px solid black;text-align: center;}
table td a{color:black;text-decoration: none;}
table td a:hover{color:white;text-decoration:underline;
transition:all ease-in .3s;}
#div_Download{position:absolute;top:583px;left:620px;}
#div_Download a{color:black;font-size: 18px;font-family
: "张海山锐线体简";text-decoration: none;}
#div_Download a:hover{color:white;transition:all ease- in .3s;margin-lef