在课程设计阶段，老师手里突然来了一个实际项目，而我正好缺少一个实际项目检验自己的能力，经过一节课的纠结，思量，最后接了这个比较难的项目，说它比较难是因为其对实际应用性的要求极高，这就要求我们在做项目时，不仅仅要实现后台的功能完备性，同时要满足极大部分用户的体验感，即前端，使用逻辑要简洁有力，符合用户逻辑。好久没更了，最近做完项目，正逢春节，趁有时间，一把把她更完，省的后面时间久了容易遗忘~~~2019.1.18
| 2019.1.10 | 初步构想本文架构，开了头 |
|---|---|
| 2019.1.18 | 整理前端部分常识，主要是type |
| 2019.1.19 | 建立本表， |
| 2019.2.2 | 考完科目二，晚上失眠，继续更新博客， |
| 2019.2.8 | 项目中的不足之处 |
本项目中存在以下不足之处：
1、角色管理，由于项目比较特殊，存在实际情况：要求管理员登陆进行相应的操作，故一般用户如果没有正确的账户、密码，是不能登陆并且进行数据操作的。
2、登录窗口没有密码格式校验，所谓的密码格式校验并不是和数据库中的数据进行比对，而是运用正则匹配进行校验，比如要求密码更换不超过十六位，必须包含数字、字母，下划线等等。
3、Hibernate中使用一个关联来操纵数据，实际项目中应该使用多个，并且用一个总的Hibernate来实现 Hibernate统领
4、在前端显示是没有使用级联功能
5、在数据库中没有使用触发器或者存储过程
6、没有做到前后端分离
本文主要从以下两条逻辑线索进行分享学习：
1、前端 主要是JQuery、bootstrap
2、后端 主要是Struts2、Hibernate3.3
好嘞，废话不多说，直接撸代码上案例：
一、首先，是前端部分
整体的思路是这样的：SSH深度整合。
但写得时候想起来啥就写啥，毕竟自己目前还没能达到讲师的水平，不能很好的将教授方法研究透，这一点还请广大读者朋友们给予最大限度的理解、支持哦。
实现前端后台的数据交互需要一个发力点，找到这个发力点就能打通任督二脉，实现SSH框架局部灵活，整体通透的特性，一开始并没用特意去寻找这个发力点，只是单纯的试试而已，没想到就被我寻找到了，啊哈哈，其实当你真正全身心投入到编程中，用思想去感受她时，就会自觉不自觉地学会一些技术，甚至再后来自己回头看代码时都会有一种莫名的感动！！！
1、发力点是这样的：
（1）第一种方式是form表单提交：<form action = "*.action">
（2）第二种方式是比较常用的需要重点熟记于心，下面以“新增”按钮为例进行说明：
基本形式是这样的：type-->button-->onclick = "add()"-->
下面直接撸代码加以说明
<html>
<head>
</head>
<body>
<input type="button" value="新增" class="ui_input_btn01" onclick="add();" />
</body>
<script type="text/javascript" src="scripts/jquery/jquery-1.7.1.js"></script>
.
.
.
/** 新增 **/
function add() {
document.forms[0].action = "add.action";
document.forms[0].submit();
//$("#submitForm").attr("action", "/xngzf/archives/luruFangyuan.action").submit();
}
.
.
.
</script>
</html>
在这段代码中有几个地方需要注意：
（1）type，目前我们接触到的比较多的type类型有：hidden、button、submit、password、checkbox、radio、reset、text,其中重点讲下button、hidden、checkbox，其他几种简单带过。
- hidden：其属性是隐藏不想让用户看到的信息，使得整个界面视图的逻辑更加符合正常的逻辑思维，比如其在数据库中的id,这个id通常是进行删除，修改、查询的依据，所以是必须的，但是展示给用户就很不对逻辑，会使用户一头雾水。hidden经常和value、数据库中id一起配合使用，比如本项目中涉及到的批量删除功能，就涉及到这种使用方式，其中value多为JSTL表达式表达的值，说到JSTL表达式，就不能这么马马虎虎将hidden介绍完毕，必须详细讲一讲JSTL表达式
a.首先是在JSP中用JSTL表达式的引用：
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>有两个地方需要注意：一是必须在.jsp不是在.html中使用，二是uri="http://java.sun.com/jsp/jstl/core其中的jsp不能省略，是不是一依赖二，这一点待考证
下面是JSTL表达式的经典应用，是范例，应该记住：
1'<c:forEach items="${list}" var="p">:
循环遍历后台传过来的list集合，并将list的值赋值给p,然后利用${p.projectName}展示在视图上
2'<c:if test="${p.stage=='0'}">准备阶段（立项）</c:if>
做判断用的，相当于if，如果p.stage=='0'，那么就将准备阶段（立项）展示给用户。
3'<td>${p.projectName}</td>
<c:forEach items="${list}" var="p">
<tr>
<td><input type="checkbox" name="IDCheck" value="${p.id}" class="acb" /></td>
<td><c:if test="${p.stage=='0'}">准备阶段（立项）</c:if>
<c:if test="${p.stage=='1'}">一阶段（综合布线）</c:if>
<c:if test="${p.stage=='2'}">二阶段（网络设备部署）</c:if>
<c:if test="${p.stage=='3'}">三阶段（调试运行）</c:if>
<c:if test="${p.stage=='4'}">四阶段（项目验收）</c:if>
</td>
<td>${p.projectName}</td>
<td>
<c:if test="${p.state=='76'}">已结束</c:if>
<c:if test="${p.state=='10'}">进行中</c:if>
<c:if test="${p.state=='14'}">偏离一周左右</c:if>
<c:if test="${p.state=='71'}">偏离两周以上</c:if>
</td>
<td>${p.planStartD}</td>
<td>${p.planFiniD}</td>
<td>${p.factFiniD}</td>
<td>${p.zhfjob}</td>
<td>${p.sdjujob}</td>
<td><a href="singledelete.action?id=${p.id}">删除</a>
<a href="edit.action?id=${p.id}">编辑
</td>
</tr>
</c:forEach>
其实，讲完JSTL表达式，细心的网友会发现代码里面有一句：
<a href="edit.action?id=${p.id}">编辑这个是之前根本就没接触过的一个写法，这段代码的意思是点击“编辑”这个链接，会将edit.action连同id=${p.id}这个id的值传给后台，后台获取id的值后可以根据id进行CRUD操作这个操作就比较骚了，其中后台获取id值的方法是：
HttpServletRequest hsr = ServletActionContext.getRequest();
String id = hsr.getParameter("id");这样讲着讲着就讲到了后台，言归正传，继续咱们的前端，
- button，button通常作为触发事件，类似JFrame中的JButton，其通用的格式如下：
<input type="button" value="查询" class="ui_input_btn01" onclick="search();" />
</body>
<script>
function search() {
document.forms[0].action = "query.action";
document.forms[0].submit();
}
</script>
</html>其中最为重要的是οnclick="search();" 这个属性，他定义触发事件后的动作响应，整个流程是这样的：点击按钮-->onclick生效-->在当前上下文中寻找function search()，这里的上下文其实就是<script type="text/javascript">......</script >中，这里有一个小技巧，可以使Tomcat启动时迅速将页面加载出来：将<script type="text/javascript">......</script >写在</body>后面而不是写在<head></head>中，但他本应该是写在<head></head>中，此处是为了运行提高效率，否则就会出现页面响应超时的现象，其实代码上没有错的，只是响应文件太长，导致响应超时。
（2）class=“” 这个class用来引用你页面的类样式。即你先在<style type="text/css"></style>标签内定义一个类样式，然后再来引用它。需要注意的是在style 里面引用的方法是： 点 +class名字。如：
<style type="text/css">
.btn{
color:red;
}
</style>
.
.
.
<input type="button" class="btn" />以上代码说明规定了按钮的颜色为红色。在style里面还可以设置多种样式，比如鼠标焦点移动至哪一行，那一行背景颜色能够主动变深，达到引人注意的效果。本项目也确实达到这个效果，尤其是按钮，当鼠标指针停留在按钮上时，按钮颜色由灰色变为蓝色，确实达到效果。
71
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
