目录
1. Web端工程搭建 2
2. 反向工程生成数据模型 6
3.创建SysMenuDao,用于操作菜单栏 7
4.编写newIndex.jsp 8
5. 在WebAction中增加index方法，显示左侧菜单 14
6. 在struts.xml中进行配置 16
7. Address的DAO接口 18
8.Address的DAO接口实现 18
9.编写WebAction，实现分页显示所有地址功能 20
10.在struts.xml中进行配置 22
11.编写addresslist.jsp,显示所有地址 22
12.实现修改地址,编写WebAction 28
13.实现修改地址,先编写addresslist.jsp的跳转 29
写一个方法用于跳转到oneAddress,并且把addressId传给action 29
14.实现修改地址,编写updateAddress.jsp 30
15.实现新增地址,编写WebAction 34
16.实现新增地址,编写addAddress.jsp 35
1. Web端工程搭建
1.1 新建SDSYwZJF项目
1.2 添加SSH库包支持
1.3 添加spring支持
1.4 在DB Browser视图中添加数据库连接
首先将mysql-connector-java-5.0.8.jar包复制到WEB-INF|lib目录下，MyEclipse自动将该jar包添加到Web App Libraries引用目录下。
1.5 添加struts支持
1.6 在src文件夹下新建struts.properties文件
在该文件中，添加：struts.objectFactory=spring
1.7 添加Hibernate支持以及数据库连接
1.8 测试网页是否成功运行
2. 反向工程生成数据模型
这个数据库里的所有表都是单表，表之间没有外键，所以反向address和sys_menu表即可
此时遇到错误An internal error occurred during: "Generating Artifacts". java.lang.NullPointerException
百度后解决
反向后生成这几个文件
同时applicationContext中生成
<property name="mappingResources">
<list>
<value>web/model/Address.hbm.xml</value>
<value>web/model/SysMenu.hbm.xml</value>
</list>
</property>
3.创建SysMenuDao,用于操作菜单栏
public interface SysMenuDao {
List<String> findPmenu(); //查找父菜单,通过group by 查找父菜单的名称
List<SysMenu> findSysMenu();//菜单栏所有的操作对象
}
新建SysMenuDaoImp实现SysMenuDao
public class SysMenuDaoImp extends HibernateDaoSupport implements SysMenuDao {
@Override
public List<SysMenu> findSysMenu() {
// TODO Auto-generated method stub
List<SysMenu> list=this.getHibernateTemplate().find("from SysMenu order by fsign,sign");
return list;
}
@Override
public List<String> findPmenu() {
List<SysMenu> list=this.getHibernateTemplate().find("from SysMenu group by name order by fsign");
List<String> listm=new ArrayList<String>();
if(list!=null&&list.size()>0){
for(int i=0;i<list.size();i++){
listm.add(list.get(i).getName());
}
}
return listm;
}
}
4.编写newIndex.jsp
class和id 在css文件中的使用区别
<html lang="zh"> 指定html的字符集
<meta charset="UTF-8" /> 指定编码
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
在移动设备上显示时控制他的长宽比例
导入的link
<link rel="stylesheet" href="css/bootstrap.min.css" /> 标准jquery库
<link rel="stylesheet" href="css/matrix-style.css" /> 定义 id="sidebar" id="content" id=”header” 的样式
<link rel="stylesheet" href="css/matrix-media.css" /> 定义 id="sidebar"
id="content" id=”header”的背景色
<link href="font-awesome/css/font-awesome.css" rel="stylesheet" />
定义icon-check icon-key icon-lock icon-caret-right 图标选择组件
<script src="js/jquery.min.js"></script>
<script src="js/excanvas.min.js"></script>
<script src="js/jquery.ui.custom.js"></script>
使用JQuery要导入的js文件，用于控制菜单栏样式
var url="index"，跳转到index.action
data是JSONObject对象s中的一个数据对象，步骤5会往s对象里放数据
<script type="text/javascript">
$(document).ready(function(){
var url="index";
login(url);
});
function login(url){
$.ajax({
url: url,
type: "Get",
async: false ,
dataType: "json",
success: function(data) {
for(var i=0;i<data.data.length;i++){
var str="<li class='submenu'><a herf='#'><span>"+data.data[i].name+"</span></a><ul>"
for(var j=0;j<data.data[i].list.length;j++){
str+='<li><a class="menu_a" link="'+data.data[i].list[j].url+'"> '+data.data[i].list[j].functions+'</a></li>'
}
str+="</ul></li>" 拼凑jsp代码
document.getElementById("index").innerHTML+=str;将代码放到页面中 index位置
}
}
});
}
css class 功能描述 css文件
navbar 基础导航条 css/bootstrap.min.css
navbar-inverse 指定导航条组件为黑色主题 css/bootstrap.min.css
nav nav表示导航标签 css/bootstrap.min.css
dropdown 简单的下拉列表插件 css/bootstrap.min.css
dropdown-toggle 按钮右侧的圆角 css/bootstrap.min.css
text 文本样式 css/bootstrap.min.css
dropdown-menu 下拉菜单 css/bootstrap.min.css
icon-check UI图标 font-awesome/css/font-awesome.css
icon-key UI图标 font-awesome/css/font-awesome.css
submenu 下拉菜单 css/bootstrap.min.css
icon-lock 锁图标选择组件 font-awesome/css/font-awesome.css
icon-caret-right 右箭头图标选择组件 font-awesome/css/font-awesome.css
tip-bottom 鼠标悬停Tip js/matrix.js 这是一个js事件
icon-home 房子图标 font-awesome/css/font-awesome.css
<div id="header">
<h1>
<a>管理平台</a>
</h1>
</div>
<!--top-Header-menu-->
<div id="user-nav" class="navbar navbar-inverse">
<ul class="nav">
<li class="dropdown" id="profile-messages"><a title="" href="#"
data-toggle="dropdown" data-target="#profile-messages"
class="dropdown-toggle"> <i class="icon icon-user"></i> <span
class="text">欢迎你，<%=loginname%>
</span> <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a class="menu_a" link="allActivity.action"><i
class="icon-check"></i> 我的发布</a></li>
<li class="divider"></li>
<li><a class="menu_a" onclick="unLogin(this)"><i
class="icon-key"></i> 退出系统</a></li>
</ul></li>
</ul>
</div>
<!--close-top-Header-menu-->
<div id="search"></div>
<div id="sidebar" style="OVERFLOW-Y: auto; OVERFLOW-X:hidden;">
<ul id="index">
<li class="submenu"><a href="#"> <i class="icon icon-lock"></i>
<span>权限管理</span>
</a>
<ul>
<li><a class="menu_a" link="relationList.jsp"><i
class="icon icon-caret-right"></i>权限列表</a></li>
</ul>
</li>
</ul>
</div>
<div id="content">
<div id="content-header">
<div id="breadcrumb">
<a href="newIndex.jsp" title="返回主页" class="tip-bottom"><i
class="icon-home"></i> Home</a>
</div>
</div>
<iframe src="allActivity.action?" id="iframe-main" style="width:100%;"></iframe>
</div>
<script src="js/bootstrap.min.js"></script> body
<script src="js/matrix.js"></script> #iframe-main #sidebar
jquery通过$(“#id”)来访问id指定的标签
<script type="text/javascript">
//初始化相关元素高度
function init() {
$("body").height($(window).height() - 80);
$("#iframe-main").height($(window).height() - 90);
$("#sidebar").height($(window).height() - 50);
}
/**/$(function() {
init();
$(window).resize(function() {
init();
});
});
</script>
5. 在WebAction中增加index方法，显示左侧菜单
先增加一个JSONObject属性s，并get,set
private JSONObject s;
public JSONObject getS() {
return s;
}
public void setS(JSONObject s) {
this.s = s;
}
lista 是存放Map<String, Object>的一个list集合
map ={name:父菜单名称；list:一个父菜单下所有子操作的名称和url}
将lista放入s对象的”data”中
public String index(){
List<String> listp = sysMenuDao.findPmenu();//父菜单
List<SysMenu> list = sysMenuDao.findSysMenu();//所有菜单
List<Map<String, Object>> lista = new ArrayList<Map<String, Object>>();
SysMenu menu;
if (list != null && list.size() > 0) {
for (String str : listp) {
Map<String, Object> map = new HashMap<String, Object>();
List<Map<String, Object>> listf = new ArrayList<Map<String, Object>>();
map.put("name", str);
for (SysMenu me : list) {
if (str.equals(me.getName())) {
Map<String, Object> mapr = new HashMap<String, Object>();
mapr.put("functions", me.getFunction());
mapr.put("url", me.getUrl());
listf.add(mapr);
}
}
map.put("list", listf);
lista.add(map);
}
}
s = JSONTools.createJsonObject("data", lista);//将lista放入s对象的”data”中
return "success";
}
这里需要一个工具类用于管理JSONObject对象
public class JSONTools {
public static String createJsonString(String key,Object value){
JSONObject jsonObject = new JSONObject();
jsonObject.put(key, value);
return jsonObject.toString();
}
public static JSONObject createJsonObject(String key,Object value) {
JSONObject jsonObject=new JSONObject();
jsonObject.put(key, value);
return jsonObject;
}
}
6. 在struts.xml中进行配置
返回的是一个JSONObject, root表示返回对象的层级为根部,注意继承json-default
</package>
<package name="excle" extends="json-default">
<action name="index" method="index" class="webAction">
<result type="json" name="success">
<param name="root">s</param>
</result>
</action>
</package>
运行程序
7. Address的DAO接口
记录总条数 用于分页时计算总页面用，allAddress(int i)返回的地址list用于在jsp上显示当前页数的页面
public interface AddressDao {
public void newAddress(Address address); //新增一个地址
public void deleteAddress(Address address); //删除一个地址
public double pageSum(); //记录总条数
public List<Address> allAddress(int i); //一页上的地址
public List<Address> allAddress(); //所有地址
public Address findAddress(int addressId); //根据id查找地址
public void updateAddress(Address address); //更新地址
}
8.Address的DAO接口实现
allAddress(int i) 查找从指定条数的记录开始，查找7条记录，放入list中，用于显示在jsp页面上
package web.dao.imp;
import java.util.List;
import org.hibernate.Query;
import org.hibernate.Session;
import org.springframework.orm.hibernate3.support.HibernateDaoSupport;
import web.dao.AddressDao;
import web.model.Address;
public class AddressDaoImp extends HibernateDaoSupport implements AddressDao {
@Override
public void newAddress(Address add) {
this.getHibernateTemplate().save(add);
}
@Override
public void deleteAddress(Address address) {
this.getHibernateTemplate().delete(address);
}
@Override
public double pageSum() {
Session session = getSession();
Query query = session.createQuery("select count(*) from Address");
Long count = (Long) query.uniqueResult();
double a = count;
session.close();
return a;
}
@Override
public List<Address> allAddress(int i) {
Session ssn = getSession();
Query query = ssn.createQuery("from Address");
query.setFirstResult(i);
query.setMaxResults(7);
List<Address> l = query.list();
ssn.close();
return l;
}
@Override
public Address findAddress(int addressId) {
List<Address> list = getHibernateTemplate().find("from Address where id=?", addressId);
return list.get(0);
}
@Override
public List<Address> allAddress() {
Session ssn = getSession();
Query query = ssn.createQuery("from Address");
List<Address> l = query.list();
ssn.close();
return l;
}
@Override
public void updateAddress(Address address) {
this.getHibernateTemplate().update(address);
}
}
9.编写WebAction，实现分页显示所有地址功能
继承 SessionAware接口,并创建Map session域对象用于传递数据
public class WebAction extends ActionSupport implements SessionAware {
Address addre;
Map session;
//重载函数,对Session进行初始化
public Map getSession() {
return session;
}
新建属性addresslist用于向jsp传递数据
private List<Address> addresslist = new ArrayList<Address>();
public List<Address> getAddresslist() {
return addresslist;
}
public void setAddresslist(List<Address> addresslist) {
this.addresslist = addresslist;
}
public String allAddress() {
Integer pa = (Integer) session.get("addresspag");
pageSum2 = (int) (addressDao.pageSum() / 7 + 0.99);//总页数
if (pageSum2 == 0)
pageSum2 = 1;
if (n == 0) //首页
pa = 1;
else if (n == 1 && pa > 0) //上一页
pa = pa - 1;
else if (n == 2 && pa < pageSum2) //下一页
pa = pa + 1;
else if (n == 3 && pa < pageSum2) //尾页
pa = pageSum2;
page2 = pa; //保存当前页
addresslist = addressDao.allAddress((pa - 1) * 7); //拷贝查询页的所有记录到addresslist中
session.put("addresspag", pa);
return "success";
}
10.在struts.xml中进行配置
<action name="allAddress" class="webAction" method="allAddress">
<result name="success">/addresslist.jsp</result>
</action>
11.编写addresslist.jsp,显示所有地址
与表格样式有关的2个css
<link href="jules/css/style.min862f.css?v=4.1.0" rel="stylesheet"> class="gray-bg" 控制body背景色
class="project-title" 标题样式
class="clients-list" 列表样式
class="ibox-content"
<link href="jules/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
class=” btn-danger” 按钮样式
class="table-responsive" 响应式表格
class="tab-pane active" 选项卡
class="col-sm-12" 字体格式
class="row" 行样式
class=” wrapper”
css class 功能描述 css文件
gray-bg body背景色 Jules/css/style.min862
table-responsive table包裹在.table-responsive中即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动 jules/css/bootstrap.min14ed.css
table-striped table-hover 表格样式 jules/css/bootstrap.min14ed.css
client-link 鼠标悬停字体颜色大小 jules/css/style.min862f.css
btn-danger btn-xs 设置按钮样式 jules/css/bootstrap.min14ed.css
ibox jules/css/bootstrap.min14ed.css
Tab(tab-content, tab-pane) 标签页插件 jules/css/bootstrap.min14ed.css
project-title 标题文字样式 jules/css/style.min862f.css
<%@page contentType="text/html; charset=UTF-8"%>
<%@taglib uri="/struts-tags" prefix="s"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page isELIgnored="false"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>地址管理</title>
<link href="jules/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
<link href="jules/css/style.min862f.css?v=4.1.0" rel="stylesheet">
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-sm-12">
<div class="ibox">
<div class="ibox-content">
<h2>所有地址</h2>
<div class="clients-list">
<div class="tab-content">
<div id="tab-1" class="tab-pane active">
<div class="full-height-scroll">
<div class="table-responsive">
<table class="table table-striped table-hover">
<tbody>
<c:forEach items="${addresslist}" var="res">
<tr style="height:80px">
<td class="client-link">序号：</a> <small>
${res.id} </small>
</td>
<td class="project-title"><a href="">教室名称：</a> <small>
${res.name} </small></td>
<td class="project-title"><a href="">教室经度：</a> <small>
${res.longitude} </small></td>
<td class="project-title"><a href="">教室纬度：</a> <small>
${res.latitude} </small></td>
<td>
<button onClick="deleteaddress(${res.id})" type="button"
class="btn btn-danger btn-xs">
<span>修改</span>
</button>
</td>
</tr>
</c:forEach>
</td>
</tbody>
</table>
<td style="text-align:center">
<div style="text-align: center;">
<s:if test="page2!=1">
<a href="allAddress.action?n=0">首页</a>
<a href="allAddress.action?n=1">上一页</a>
</s:if>
<s:if test="page2!=PageSum2">
<a href="allAddress.action?n=2">下一页</a>
<a href="allAddress.action?n=3">尾页</a>
</s:if>
第${page2}页/共${PageSum2}页
</div>
</td>
</div>
</div>
</div>
</body>
</html>
12.实现修改地址,编写WebAction
oneAddress接收从addresslist.jsp页面跳转过来的要修改的address
Address addre;
public Address getAddre() {
return addre;
}
public void setAddre(Address addre) {
this.addre = addre;
}
addressId是从addresslist页面通过url传过来的
public String oneAddress() {
// System.out.println(itemId);
addre = addressDao.findAddress(addressId);
// System.out.println(acItem.getAname());
return "success";
}
在struts.xml文件中进行配置
<action name="oneAddress" class="webAction" method="oneAddress">
<result name="success">/updateAddress.jsp</result>
</action>
13.实现修改地址,先编写addresslist.jsp的跳转
写一个方法用于跳转到oneAddress,并且把addressId传给action
<script type="text/javascript">
var goodid;
function deleteaddress(id) {
var url = "oneAddress.action?addressId=" + id;
window.location.href = url;
}
</script>
编写修改按钮,调用deleteaddress方法
<button onClick="deleteaddress(${res.id})" type="button"
class="btn btn-danger btn-xs">
<span>修改</span>
</button>
14.实现修改地址,编写updateAddress.jsp
这个表单提交到updateAddress.action,默认显示值是addre的值,将修改的值分别放到name，longitude，latitude中
<link href="jules/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
class=”form-group” 增加块元素的下部留白或下部边界，从而使块元素的间距变大
class=”form-control” 换行+填充整行
class=”col-sm-2” 控制文字左对齐
<link href="jules/css/style.min862f.css?v=4.1.0" rel="stylesheet">
css class 功能描述 css文件
form-group
form-control form-control :换行+填充整行
form-group : 增加块元素的下部留白或下部边界，从而使块元素的间距变大 jules/css/bootstrap.min14ed.css
wrapper wrapper-content animated fadeInRight article 页面框起来，好限定宽度及其他设置 jules/css/style.min862f.css
col-lg-10 col-lg-offset-1 Bootstrap栅格系统布局 jules/css/bootstrap.min14ed.css
text-center 文字居中 jules/css/bootstrap.min14ed.css
btn btn-sm btn-primary m-t-n-xs pull-right 按钮样式，按钮靠右放置且颜色为绿色 jules/css/bootstrap.min14ed.css
<body class="gray-bg">
<div id="showLargeImage" style="display:none;z-index:9999;width:500px;height:400px;position:absolute;left:50%;">
<img id="ShowImageBox" src="http://img.52fuqing.com/upload/news/20160125/201601251216541264.jpg" width="500px;" height="380px;" />
</div>
<div class="wrapper wrapper-content animated fadeInRight article">
<div class="row">
<div class="col-lg-10 col-lg-offset-1">
<div class="ibox">
<div class="ibox-content">
<form action="updateAddress" name="cform" method="post" enctype="multipart/form-data" id="upDetailFrom">
<div class="text-center ">
<h1>${addre.name}</h1>
<div class="ibox float-e-margins">
<div class="ibox-content">
</div>
<div class="form-group" style="height: 95px">
<label class="col-sm-2" style="a">地址名：</label>
<textarea class="form-control " rows="2" type="text" name="name">${addre.name}</textarea>
</div>
<div class="form-group" style="height: 95px">
<label class="col-sm-2" style="a">经度：</label>
<textarea class="form-control " rows="2" type="text" name="longitude">${addre.longitude}</textarea>
</div>
<div class="form-group" style="height: 95px">
<label class="col-sm-2" style="a">纬度：</label>
<textarea class="form-control " rows="3" type="text" name="latitude">${addre.latitude}</textarea>
</div>
<div class="form-group" style="height: auto">
<input id="submit" class="btn btn-sm btn-primary m-t-n-xs pull-right" type="submit" value="确定 " />
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</body>
新增属性address
private String address;
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
修改地址,根据addresslist传过来的addressId，找到这个地址，并进行修改
public String updateAddress() {
System.out.println("修改");
Address address = addressDao.findAddress(addressId);
address.setName(name);
address.setLatitude(this.getLatitude());
address.setLongitude(this.getLongitude());
address.setARange(this.getRange());
addressDao.updateAddress(address);
return "success";
}
在struts.xml中进行配置, 当修改完成后，跳转到allAddress这个action，读取数据后跳到/addresslist.jsp，显示所有地址
<action name="updateAddress" class="webAction" method="updateAddress">
<result name="success" type="chain">allAddress</result>
</action>
15.实现新增地址,编写WebAction
// 添加地址
public String addAddress() {
Address add = new Address();
add.setName(this.getAddress());
add.setLatitude(this.getLatitude());
add.setLongitude(this.getLongitude());
add.setARange(this.getRange());
if (add.getARange() == null) { //如果未设置扫码范围
add.setARange(10);
}
addressDao.newAddress(add);
return "success";
}
struts.xml中进行配置,返回的是一个action
<action name="addAddress" class="webAction" method="addAddress">
<result name="success" type="chain">allAddress</result>
</action>
16.实现新增地址,编写addAddress.jsp
<link href="jules/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
class=”form-group” 增加块元素的下部留白或下部边界，从而使块元素的间距变大
class=”form-control” 换行+填充整行
class="table table-bordered" 表格的样式
<link href="jules/css/style.min862f.css?v=4.1.0" rel="stylesheet">
wrapper wrapper-content animated fadeInRight article 页面框起来，好限定宽度及其他设置
这些信息存放在address，longitude，latitude，range中
设置所有<th>的背景色
<style>
th {
background-color: #F5F5F6;
}
</style>
<%@page contentType="text/html; charset=UTF-8"%>
<%@taglib uri="/struts-tags" prefix="s"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page isELIgnored="false"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="jules/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
<link href="jules/css/style.min862f.css?v=4.1.0" rel="stylesheet">
<style>
th {
background-color: #F5F5F6;
}
</style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight article">
<div class="row">
<div class="col-lg-10 col-lg-offset-1">
<div class="ibox">
<div class="ibox-content">
<div class="ibox float-e-margins">
<div class="text-center">
<h3>新增地址</h3>
</div>
<div class="ibox-content">
<form action="addAddress" name="addaddress" method="post" enctype="multipart/form-data">
<table class="table table-bordered" style="height: auto;">
<tr>
<th>教室名称</th>
<td>
<input class="form-control " type="text" name="address" required="required">
</td>
</tr>
<tr>
<th>教室经度</th>
<td>
<input class="form-control " type="text" name="longitude" id="jd" required="required">
</td>
</tr>
<tr>
<th>教室纬度</th>
<td>
<input class="form-control " type="text" name="latitude" id="wd" required="required">
</td>
</tr>
<tr>
<th>扫码范围 <i class="iconfont icon-wenhao" id="displayInput" required="required"></th>
<td>
<input class="form-control " type="text" name="range" id="displayInput" placeholder="推荐范围10~20">
<input class="form-control " type="text " name=" " value="为了防止学生拍照扫码，因此设置一个扫码范围" disabled="disabled" id="dis" style="display: none;">
</td>
</tr>
</table>
<div class="form-group" style="height: auto">
<input class="btn btn-sm btn-primary m-t-n-xs pull-right" style="margin-left: 20px" type="submit" value="取消">
<input id="submit" class="btn btn-sm btn-primary m-t-n-xs pull-right" type="submit" value="确定">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>