Web-第二十三天 Web商城实战三【悟空教程】

Java帮帮

发布于 2018-07-27 15:05:23

8870

发布于 2018-07-27 15:05:23

文章被收录于专栏：Java帮帮-微信公众号-技术文章全总结Java帮帮-微信公众号-技术文章全总结

Web-第二十三天 Web商城实战三【悟空教程】

网上商城实战三

今日内容介绍

订单管理/我的订单
订单管理/订单详情
订单管理/在线支付
权限过滤器
后台页面搭建
后台分类管理
后台商品管理
项目部署

今日内容学习目标

JavaWeb知识巩固
搭建商城后台页面
实现后台分类管理

第1章订单管理

1.1 我的订单

1.1.1 分析

1.1.2 代码实现

步骤1：修改header.jsp页面，查看“我的订单”

步骤2：修改OrderServlet，添加findByUid()方法

//我的订单

public String findByUid(HttpServletRequest request, HttpServletResponse response)

throws Exception {

//1.1 获得当前页

int pageNumber = 1;

try {

pageNumber = Integer.getInteger(request.getParameter("pageNumber"));

} catch (Exception e) {

}

int pageSize = 3 ; //暂时固定值

//1.2 获得当前用户

User loginUser = (User) request.getSession().getAttribute("loginUser");

//2 通过业务层查询

OrderService orderService = new OrderServiceImpl();

PageBean<Order> pageBean = orderService.findByUid(loginUser , pageNumber,pageSize);

//3 显示数据

request.setAttribute("pageBean", pageBean);

return "/jsp/order_list.jsp";

}

步骤3：修改OrderService，添加findByUid()方法

//接口

//通过用户查询订单

PageBean<Order> findByUid(User loginUser, int pageNumber, int pageSize)throws Exception;

//实现类

@Override

public PageBean<Order> findByUid(User user, int pageNumber, int pageSize)throws Exception{

//1 查询总记录数

int totalRecord = orderDao.findTotalRecordByUid(user);

//2 封装数据

PageBean<Order> pageBean = new PageBean<>(pageNumber, pageSize, totalRecord);

//3 分页数据

List<Order> data = orderDao.findAllByUid(user , pageBean.getStartIndex() , pageBean.getPageSize());

pageBean.setData(data);

return pageBean;

}

步骤4：修改OrderDao，提供findTotalRecordByUid() 和 findAllByUid() 两个方法

//接口

/**

* 通过用户查询订单总记录数

* @param user 指定用户

* @return

int findTotalRecordByUid(User user)throws SQLException;

/**

* 查询用户订单分页数据

* @param user 指定用户

* @param startIndex 开始索引

* @param pageSize 每页显示个数

* @return

List<Order> findAllByUid(User user, int startIndex, int pageSize)throws Exception;

//实现类

@Override

public int findTotalRecordByUid(User user) throws SQLException {

QueryRunner queryRunner = new QueryRunner(JDBCUtils.getDataSource());

String sql = "select count(*) from orders where uid = ?";

Long count = (Long) queryRunner.query(sql, new ScalarHandler(), user.getUid());

return count.intValue();

}

@Override

public List<Order> findAllByUid(User user, int startIndex, int pageSize) throws Exception {

QueryRunner queryRunner = new QueryRunner(JDBCUtils.getDataSource());

String sql = "select * from orders where uid = ? order by ordertime desc limit ?,?";

List<Order> list = queryRunner.query(sql, new BeanListHandler<Order>(Order.class), user.getUid(), startIndex,

pageSize);

// 遍历获得每个订单:

for (Order order : list) {

// 进行查询每个订单的订单项:

sql = "SELECT * FROM orderitem o,product p WHERE oid = ? AND o.pid=p.pid";

// Array ArrayList Map MapList Bean BeanList ColumnName Scalar Keyed

List<Map<String, Object>> oList = queryRunner.query(sql, new MapListHandler(), order.getOid());

for (Map<String, Object> map : oList) {

// 将属于订单项的封装到OrderItem中.

OrderItem orderItem = new OrderItem();

BeanUtils.populate(orderItem, map);

// 将属于商品的数据封装到Product中.

Product product = new Product();

BeanUtils.populate(product, map);

orderItem.setProduct(product);

orderItem.setOrder(order);

order.getList().add(orderItem);

}

order.setUser(user);

}

return list;

步骤5：jsp页面显示表单数据

<%--遍历订单 --%>

<c:forEach items="${pageBean.data}" var="order">

<tbody>

<tr>

<th colspan="5">订单编号:${order.oid} </th>

</tr>

<tr>

</tr>

<c:forEach items="${order.list}" var="orderItem">

<tr>

</td>

<a target="_blank">${orderItem.product.pname}</a>

</td>

￥${orderItem.product.shop_price}

</td>

${orderItem.subtotal}

</td>

<span>￥${orderItem.subtotal}</span>

</td>

</tr>

</c:forEach>

</tbody>

</c:forEach>

1.2 订单详情

1.2.1 分析

1.2.2 代码实现

步骤1：显示“我的订单”时，显示订单状态state对应的文字提示

订单编号:${order.oid} , ${order.state},

<c:if test="${ order.state == 1 }">

</c:if>

<c:if test="${ order.state == 2 }">

等待发货

</c:if>

<c:if test="${ order.state == 3 }">

确认收货

</c:if>

<c:if test="${ order.state == 4 }">

订单结束

</c:if>

<font color="#b00">总金额：${order.total}</font>

步骤2：修改OrderServlet，添加findByOid方法，点击“付款”，根据订单id查询看订单详情。

//通过订单id查询详情

public String findByOid(HttpServletRequest request, HttpServletResponse response)

throws Exception {

//1获得当前页

String oid = request.getParameter("oid");

//2 通过业务层查询

OrderService orderService = new OrderServiceImpl();

Order order = orderService.findByOid(oid);

//3 显示数据

request.setAttribute("order", order);

return "/jsp/order_info.jsp";

}

步骤3：修改OrderService，添加findByOid()方法

//接口

//通过oid查询订单详情

Order findByOid(String oid);

//实现类

public Order findByOid(String oid) {

return orderDao.findByOid(oid);

}

步骤4：修改OrderDao，添加findByOid()方法

//接口

/**

* 通过oid查询详情

* @param oid

* @return

Order findByOid(String oid) throws Exception;

//实现类

@Override

public Order findByOid(String oid) throws Exception {

QueryRunner queryRunner = new QueryRunner(JDBCUtils.getDataSource());

String sql = "select * from orders where oid = ?";

Order order = queryRunner.query(sql, new BeanHandler<Order>(Order.class), oid);

// 封装Order中list集合的数据

sql = "select * from orderitem o,product p where o.pid = p.pid and o.oid = ?";

List<Map<String, Object>> oList = queryRunner.query(sql, new MapListHandler(), oid);

for (Map<String, Object> map : oList) {

OrderItem orderItem = new OrderItem();

BeanUtils.populate(orderItem, map);

Product product = new Product();

BeanUtils.populate(product, map);

orderItem.setProduct(product);

orderItem.setOrder(order);

order.getList().add(orderItem);

}

return order;

}

步骤5：修改/jsp/order_info.jsp页面，显示详情，准备付款。

订单编号:${order.oid}

<tr>

</tr>

<c:forEach items="${order.list}" var="orderItem">

<tr>

</td>

<a target="_blank">${orderItem.product.pname}.</a>

</td>

￥${orderItem.product.shop_price}

</td>

${orderItem.count}

</td>

<span>￥${orderItem.subtotal}</span>

</td>

</tr>

</c:forEach>

商品金额: <strong style="color:#ff6600;">￥${order.total}.00元</strong>

1.3 在线支付(了解)

1.3.1 分析

1.3.2 代码实现

步骤1：修改/jsp/order_info.jsp ，完成支付。表单摘要如下：

<%--隐藏字段 --%>

<input type="radio" name="pd_FrpId" value="ICBC-NET-B2C" checked="checked" />工商银行

</form>

步骤2：修改OrderServlet，添加payOrder方法

// 订单付款

public String payOrder(HttpServletRequest request, HttpServletResponse response)

throws Exception {

//1 获得请求参数

String oid = request.getParameter("oid");

String name = request.getParameter("name");

String address = request.getParameter("address");

String telephone = request.getParameter("telephone");

String pd_FrpId = request.getParameter("pd_FrpId");

//2 调用业务层，查询订单，并修改订单状态

OrderService orderService = new OrderServiceImpl();

Order order = orderService.findByOid(oid);

order.setAddress(address);

order.setName(name);

order.setTelephone(telephone);

orderService.update(order);

//3 重定向到第三方平台

String p0_Cmd = "Buy";

String p1_MerId = "10001126856";

String p2_Order = oid;

String p3_Amt = "0.01";

String p4_Cur = "CNY";

String p5_Pid = "";

String p6_Pcat = "";

String p7_Pdesc = "";

String p8_Url = "http://localhost:8080/"+request.getContextPath()+"/OrderServlet?method=callBack";

String p9_SAF = "";

String pa_MP = "";

String pr_NeedResponse = "1";

String keyValue = "69cl522AV6q613Ii4W6u8K6XuW8vM1N6bFgyv769220IuYe9u37N4y7rI4Pl";

String hmac = PaymentUtil.buildHmac(p0_Cmd, p1_MerId, p2_Order, p3_Amt, p4_Cur, p5_Pid, p6_Pcat, p7_Pdesc, p8_Url, p9_SAF, pa_MP, pd_FrpId, pr_NeedResponse, keyValue);

StringBuffer sb = new StringBuffer("https://www.yeepay.com/app-merchant-proxy/node?");

sb.append("p0_Cmd=").append(p0_Cmd).append("&");

sb.append("p1_MerId=").append(p1_MerId).append("&");

sb.append("p2_Order=").append(p2_Order).append("&");

sb.append("p3_Amt=").append(p3_Amt).append("&");

sb.append("p4_Cur=").append(p4_Cur).append("&");

sb.append("p5_Pid=").append(p5_Pid).append("&");

sb.append("p6_Pcat=").append(p6_Pcat).append("&");

sb.append("p7_Pdesc=").append(p7_Pdesc).append("&");

sb.append("p8_Url=").append(p8_Url).append("&");

sb.append("p9_SAF=").append(p9_SAF).append("&");

sb.append("pa_MP=").append(pa_MP).append("&");

sb.append("pd_FrpId=").append(pd_FrpId).append("&");

sb.append("pr_NeedResponse=").append(pr_NeedResponse).append("&");

sb.append("hmac=").append(hmac);

// 使用重定向：

response.sendRedirect(sb.toString());

return null;

}

步骤3：修改service

//接口

//更新

void update(Order order)throws SQLException;

//实现类

public void update(Order order) throws SQLException{

orderDao.update(order);

}

步骤4：修改dao

//接口

/**

* 更新订单

* @param order

void update(Order order)throws SQLException;

//实现类

public void update(Order order) throws SQLException {

QueryRunner queryRunner = new QueryRunner(JDBCUtils.getDataSource());

String sql = "update orders set total=?,state=?,address=?,name=?,telephone=? where oid = ?";

Object[] params = { order.getTotal(), order.getState(),

order.getAddress(), order.getName(),

order.getTelephone(), order.getOid() };

queryRunner.update(sql, params);

}

步骤5：回调程序，修改OrderServlet，添加callback()方法

//付款成功，回调方法，修改订单状态

public String callBack(HttpServletRequest request, HttpServletResponse response)

throws Exception {

String r6_Order = request.getParameter("r6_Order");

String r3_Amt = request.getParameter("r3_Amt");

OrderService orderService = new OrderServiceImpl();

Order order = orderService.findByOid(r6_Order);

order.setState(2);

orderService.update(order);

request.setAttribute("msg", "请！您已经付款成！订单号为："+r6_Order+" 支付的金额为:"+r3_Amt);

return "/jsp/msg.jsp";

}

第2章权限过滤器

2.1 需求

我们已经完成用户管理、商品管理、分类管理、订单管理等功能模块，订单模块和购物车模块必须确保用户登录后才能访问，我们会在servlet中编写相同的校验代码，我们可以通过权限过滤器统一处理。

2.2 代码实现

步骤1：实现类

public class PrivilegeFilter implements Filter{

@Override

public void init(FilterConfig filterConfig) throws ServletException {

}

@Override

public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)

throws IOException, ServletException {

HttpServletRequest req = (HttpServletRequest) request;

User loginUser = (User) req.getSession().getAttribute("loginUser");

if(loginUser == null){

req.setAttribute("msg", "您还没有登录！没有权限访问！");

req.getRequestDispatcher("/jsp/msg.jsp").forward(req, response);

return;

}

chain.doFilter(req, response);

}

@Override

public void destroy() {

}

步骤2：web.xml配置，只对订单操作、购物车操作进行登录权限校验

<filter-name>PrivilegeFilter</filter-name>

<filter-class>cn.com.javahelp.store.web.filter.PrivilegeFilter</filter-class>

</filter>

<filter-mapping>

<filter-name>PrivilegeFilter</filter-name>

<url-pattern>/jsp/order_info.jsp</url-pattern>

<url-pattern>/jsp/order_list.jsp</url-pattern>

<url-pattern>/OrderServlet</url-pattern>

<url-pattern>/jsp/CartServlet</url-pattern>

</filter-mapping>

第3章后台页面搭建

3.1 需求

今天我们要用EASYUI技术来实现WEB系统的后台界面,如下图:

3.2 相关知识点

3.3 案例分析

*_利用layout组件为后台页面进行整体布局布局形式为”西南北中”形式

*_利用according组件为后台页面西部区域进行布局,并且设置对应的点击链接

*_利用tabs组件为后台页面的中间区域实现布局

*_实现页面的JQ代码

3.4 代码实现

3.4.1 步骤1

<body>

<div region="north"

split="true"

border="false"

style="overflow: hidden;

height:30px;

background:url(/images/layout-browser-hd-bg.gif)

#7f99be repeat-x center 50%;

line-height:20px;

color:#fff;

font-family:Verdana, 微软雅黑,黑体">

<span style="float:right;padding-right:20px;">欢迎管理员ad001

安全退出

</a>

</span>

<span style="padding-left:10px; font-size: 15px;">悟空教程商城后台</span>

</div>

<div style="text-align:center;color:#15428B; margin:0px;

padding:0px;line-height:23px; font-weight:bold;">

</div>

<div data-options="region:'west',title:'',split:true,border:false"

style="width:180px;">

</div>

<div data-options="region:'center',title:'',border:false"

style="padding:5px;background:#eee;">

</div>

</body>

3.4.2 步骤2

在西部区域加入以下内容

<div id="aa"

style="width:300px;height:200px;" data-options="fit:true,border:false">

</div>

</div>

<a href="http://www.csdn.com">访问CSDN</a><br/>

</div>

为了使according组件中链接的样式好看,加入以下样式

.aa{ width:80%; background-color:#E0ECFF;

display:block;margin:10px auto;font-size: 15px;}

3.4.3 步骤3

<div id="tt" style="width:500px;height:250px;"

data-options="fit:true">

<div title="首页"

data-options="iconCls:'icon-reload',border:false,closable:true"

style="padding:20px;">

欢迎来到首页

</div>

3.4.4 步骤4

实现以下JQ语句

$(function(){

$("a[class=aa]").click(function(){

//alert("DDDD");

var url=this.href;

var title=this.innerHTML;

//alert(url+"<===>"+title);

addTab(url,title);

return false;

});

$(".aa").mouseover(function(){

$(this).css("background","");

$(this).css("background","#31507B").css("color","#FFF");

});

$(".aa").mouseout(function(){

$(this).css("background","");

$(this).css("background","#E0ECFF").css("color","#000");

});

function addTab(url,title){

if(!$("#tt").tabs("exists",title)){

$("#tt").tabs("add",{

title:title,

content:createStr(url),

closable:true

});

}else{

$("#tt").tabs("select",title);

}

function createStr(url){

Var str="<iframesrc='"+url+"' style='width:100%;height:100%'

frameborder='0'/>";

return str;

}

第4章后台分类管理

4.1 需求分析

用DataGrid组件实现对分类的管理

4.2 相关知识点

4.2.1 组件DataGrid的使用

4.2.1.1 JQ方式创建DataGrid组件

$('#dg').datagrid({

url:'datagrid_data.json',

columns:[[

{field:'code',title:'Code',width:100},

{field:'name',title:'Name',width:100},

{field:'price',title:'Price',width:100,align:'right'}

]]

});

4.2.1.2 DataGrid组件的属性

url	一个URL从远程站点请求数据
fitColumns	真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
singleSelect	如果为true，则只允许选择一行
rownumbers	如果为true，则显示一个行号列
columns	DataGrid列配置对象
toolbar	顶部工具栏的DataGrid面板一个数组，每个工具属性都和linkbutton一样 $('#dg').datagrid({toolbar: [{iconCls: 'icon-edit',handler: function(){alert('编辑按钮')}},'-',{iconCls: 'icon-help',handler: function(){alert('帮助按钮')}}]});

4.3 案例分析

1_在页面/admin/category/category.jsp中采用JQ的方式创建DataGrid

2_在页面上实现Dialog对话框

3_完成页面的JQ代码

4.4 代码实现

4.4.1 步骤1

创建DataGrid组件

页面端代码:

</div>

$(function(){

$('#dg').datagrid({

url:'/store_v3/CategoryServlet?method=findAllCats',

fitColumns:true,

singleSelect:true,

rownumbers:true,

columns:[[

{field:'cid',title:'分类id',width:100},

{field:'cname',title:'分类名称',width:100}

]],

toolbar: [

{

iconCls: 'icon-edit',

text:'编辑',

handler: function(){

alert(“您正在编辑”);

}

},'-',{

iconCls: 'icon-add',

text:'添加分类',

handler: function(){

alert(“您正在添加”);

}

},'-',{

iconCls: 'icon-remove',

text:'删除分类',

handler: function(){

alert(“您正在删除”);

}

}]

});

服务端代码

CategoryService CategoryService=new CategoryServiceImp();

List<Category> list=CategoryService.findAllCats();

String jsonStr=JSONArray.fromObject(list).toString();

resp.setContentType("application/json;charset=utf-8");

resp.getWriter().print(jsonStr);

4.4.2 步骤2

创建对话框组件

<div id="dd"

class="easyui-dialog"

title="修改分类"

style="width:300px; height:160px;padding:5px;background: #fafafa;"

data-options="closed:true,iconCls:'icon-edit'">

<div region="center"

border="false"

style="padding:10px;background:#fff;border:1px solid #ccc;">

</tr>

<tr>

</tr>

</table>

</div>

<div region="south"

border="false"

style="text-align:right;height:30px;line-height:30px;">

<a id="btnEp"

icon="icon-ok" href="javascript:void(0)">确定</a>

<a id="btnCancel"

icon="icon-cancel" href="javascript:void(0)">取消</a>

</div>

4.4.3 步骤3

4.4.3.1 点击DataGrid组件上的编辑按钮

页面端代码:

var obj=$("#dg").datagrid("getSelected");

console.log(obj);

if(null!=obj){

globalUrl="/store_v3/AdminCategoryServlet?method=editCat";

$("#cid").val(obj.cid);

$("#cname").val(obj.cname);

$("#cid").attr("readonly",true);

$("#dd").dialog("open");

}else{

$.messager.alert("警告","请选中修改分类","warning");

}

服务端代码

Category cat=MyBeanUtils.populate(Category.class, req.getParameterMap());

CategoryService CategoryService=new CategoryServiceImp();

CategoryService.updateCategory(cat);

String jsonStr="{\"flag\":true}";

resp.setContentType("application/json;charset=utf-8");

resp.getWriter().print(jsonStr);

return null;

4.4.3.2 点击DataGrid组件上的添加按钮

页面端代码

globalUrl="/store_v3/AdminCategoryServlet?method=addCat";

$("#row").css("display","none");

$("#cname").val("");

$("#dd").dialog("open");

服务端代码

String cname=req.getParameter("cname");

Category cat=new Category();

cat.setCid(UUIDUtils.getId());

cat.setCname(cname);

CategoryService CategoryService=new CategoryServiceImp();

CategoryService.addCat(cat);

String jsonStr="{\"flag\":true}";

resp.setContentType("application/json;charset=utf-8");

resp.getWriter().print(jsonStr);

return null;

4.4.3.3 点击DataGrid组件上的删除按钮

页面端代码

var obj=$("#dg").datagrid("getSelected");

if(null!=obj){

$.messager.confirm("删除确认","你真忍心删除吗?",function(dt){

if(dt==true){

$.post("/store_v3/AdminCategoryServlet",

{"method":'delCat',"cid":obj.cid},

function(dt2){

$("#dd").dialog("close");

$("#dg").datagrid("reload");

});

}

});

}else{

$.messager.alert("警告","请选中被删除的分类","warning");

}

服务端代码

Category cat=MyBeanUtils.populate(Category.class, req.getParameterMap());

CategoryService CategoryService=new CategoryServiceImp();

CategoryService.delCategory(cat);

String jsonStr="{\"flag\":true}";

resp.setContentType("application/json;charset=utf-8");

resp.getWriter().print(jsonStr);

return null;

4.4.3.4 点击保存按钮

页面端代码

$.ajax({

url:globalUrl,

beforeSend:function(){

if($("#cname").val()==""){

$.messager.alert("提示","请输入分类名称","warning");

return false;

}

data:{"cid":$("#cid").val(),"cname":$("#cname").val()},

success:function(dt){

if(dt.flag==true){

$("#dd").dialog("close");

$("#dg").datagrid("reload");

}

type:'post',

dataType:"json"

});

4.4.3.5 点击对话框上的取消按钮是

$("#dd").dialog("close");

第5章后台商品管理

5.1 需求

利用DataGrid组件,Form组件以及分页组件实现对后台商品的管理

5.2 相关知识点

5.2.1 Form组件

Form组件的使用方式

<div>

<input type="text"

name="name" data-options="required:true"/>

</div>

<div>

<label for="email">Email:</label>

<input type="text"

name="email" data-options="validType:'email'"/>

</div>

</form>

利用Form组件可以很方便的实现表单的Ajax提交动作

$('#ff').form('submit', {

url:...,

onSubmit: function(){

// do some check

// return false to prevent submit;

success:function(data){

alert(data)

}

});

5.3 查询商品信息

5.3.1 准备工作

修改后台主页中的链接

商品查看</a>

5.3.2 分析

1_当用户点击商品查看链接时,向服务端发起请求,请求product_list.jsp页面.服务端返回

product_list.jsp页面,浏览器识别页面中的datagrid组件和分页组件

2_当页面加载完毕之后,浏览器再次向服务端发起一个ajax请求,获取首页的全部商品

信息以及全部商品的数量,并将返回的数据绑定在datagrid组件和分页组件上

3_为分页组件绑定onSelect事件,当用户点击不同页面时,向服务端再次发起请求

5.3.3 实现

1_实现页面中datagrid组件和分页组件的创建

<a href="#"

class="easyui-linkbutton"

data-options="iconCls:'icon-add',plain:true" style="font-size: 12px;background: rgb(224, 224, 224)"> 添加</a>|

<a href="#"

data-options="iconCls:'icon-remove',plain:true" style="font-size: 12px;background: rgb(224, 224, 224)"> 删除</a>

</div>

<thead>

<tr>

<th data-options="field:'pimage',

width:100,

formatter:

function(v){

return '<img src=${pageContext.request.contextPath}/'+v+' height=50px />'}">

商品</th>

</tr>

</thead>

</table>

<div id="pp" data-options=""

style="background:#efefef;border:1px solid #ccc;"></div>

</div>

2_页面加载完毕之后向服务端发送AJAX请求,获取响应数据,填充DataGrid组件和分页组件

$("#dg").datagrid({

url:"${pageContext.request.contextPath}/AdminProductServlet?method=findAllProductsWithAjax&num=1",

fitColumns:true,

singleSelect:true,

toolbar:'#tb',

fitColumns:true,

singleSelect:true,

loadFilter : function(data) {

var data_ = {

"rows" : data.list,

"total" : data.total

};

$("#pp").pagination({

total:data.total,

pageSize:8,

pageList:[8]

});

return data_;

}

});

$("#pp").pagination({

onSelectPage: function(pageNumber, pageSize){

$("#dg").datagrid( { url :"${pageContext.request.contextPath}/AdminProductServlet?method=findAllProductsWithAjax&num="+pageNumber,

closable : true,

checkOnSelect : true,

striped : true,

rownumbers : true,

fitColumns : true,

loadFilter : function(data) {

var data_ = {

"rows" : data.list,

"total" :data.total

}

$("#pp").pagination( {

total : data.total

});

return data_;

}

});

}

});

3_实现服务端代码

int curNum=Integer.parseInt(req.getParameter("num"));

ProductService ProductService = new ProductServiceImp();

PageModel pm=ProductService.findProductsWithPage(curNum);

List<Product> list=pm.getList();

for(Product p:list){

p.setPdate(null);

}

Map<String,Object> map=new HashMap<String,Object>();

map.put("list", list);

map.put("total", pm.getTotalRecords());

String jsonStr=JSONObject.fromObject(map).toString();

System.out.println(jsonStr);

resp.setContentType("application/json;charset=utf-8");

resp.getWriter().println(jsonStr);

return nul;

5.4 上传商品

5.4.1 分析:

5.4.1.1 流程分析

5.4.1.2 步骤分析

1_页面端实现上传商品对话框

2_当在对话框中填写完商品数据之后,点击确定,利用Form组件向服务端发起Ajax请求

3_服务端接受商品数据,将图片存入到服务端的某个路径下,同时将数据存入到数据库中,向客户端

返回上传成功提示信息

4_浏览器接收到上传成功消息,关闭对话框,重新加载DataGrid组件中的内容

5.4.2 代码实现

步骤1_实现上传商品对话框

<div id="dd"

class="easyui-dialog"

title="添加商品"

style="width:315px;height:200px;padding:5px;background: #fafafa;"

data-options="closed:true,iconCls:'icon-add'">

<div region="center"

border="false"

style="padding:10px;background:#fff;border:1px solid #ccc;">

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</form>

</div>

<div region="south" border="false"

style="text-align:right;height:30px;line-height:30px;">

<a id="btnEp" icon="icon-ok"

href="javascript:void(0)">确定</a>

<a id="btnCancel" icon="icon-cancel"

href="javascript:void(0)">取消</a>

</div>

步骤2_点击DataGrid组件中的添加商品功能

globalUrl="/store_v3/AddProductServlet";

$("#dd").dialog("open");

PS:globalUrl为JS中定义好的一个全局变量,存储不同的路径

步骤3:点击保存功能

$("#btnEp").click(function(){

$('#fm').form('submit', {

url:"${pageContext.request.contextPath}/AddProductServlet",

onSubmit: function(){

success:function(data){

var dt=eval("("+data+")");

if(dt.flag){

$.messager.alert("成功提示",dt.msg,"info");

$("#dd").dialog("close");

$("#dg").datagrid("reload");

}

});

步骤4:完成服务端商品上传代码

DiskFileItemFactory fac=new DiskFileItemFactory();

ServletFileUpload fileUpload=new ServletFileUpload(fac);

//携带数据

Product product=new Product();

Map<String,String> map=new HashMap<String,String>();

try {

List<FileItem> list=fileUpload.parseRequest(request);

for(FileItem item:list){

if(item.isFormField()){

map.put(item.getFieldName(), item.getString());

}else{

//获取到服务端图片要上传的真实路径 D:\tomcat\tomcat\wtpwebapps\store_v3\products\3

String path=this.getServletContext().getRealPath("/products/3");

System.out.println("path....."+path);

//获取文件名称 111.bmp

String fileName=item.getName();

//获取文件最终名称 2343242342432424.bmp

String fName=UploadUtils.getUUIDName(fileName);

// /4/a/f/c/2/7/7/0

String path02=UploadUtils.getDir(fName);

// D:\tomcat\tomcat\wtpwebapps\store_v3\products\3/4/a/f/c/2/7/7/0

File f=new File(path+path02);

//创建文件夹

if(!f.exists()){

f.mkdirs();

}

//创建文件

//D:\tomcat\tomcat\wtpwebapps\store_v3\products\3/4/a/f/c/2/7/7/0

//2343242342432424.bmp

File ff=new File(f,fName);

if(!ff.exists()){

ff.createNewFile();

}

FileOutputStream ops=new FileOutputStream(ff);

InputStream is=item.getInputStream();

IOUtils.copy(is, ops);

IOUtils.closeQuietly(is);

IOUtils.closeQuietly(ops);

// products/3/4/a/f/c/2/7/7/0

product.setPimage("products/3"+path02+"/"+fName);

}

BeanUtils.populate(product, map);

product.setPid(UUIDUtils.getId());

product.setPdate(new Date());

product.setPflag(0);

System.out.println(product);

ProductService ProductService=new ProductServiceImp();

ProductService.addProduct(product);

Map<String,String> mp=new HashMap<String,String>();

mp.put("msg", "文件上传成功");

mp.put("flag", "true");

response.setContentType("text/html;charset=utf-8");

response.getWriter().print(JSONObject.fromObject(mp).toString());

} catch (Exception e) {

e.printStackTrace();

}

点击取消按钮时

$("#btnCancel").click(function(){

$("#dd").dialog("close");

});

第6章部署

6.1 需要

将项目部署到linux系统下

6.2 步骤

6.2.1 war包

使用eclipse将web项目打成war包

6.2.2 准备工作

安装jdk，已经配置

vim /etc/profile

安装tomcat

vim /etc/sysconfig/iptables

安装mysql

yum install MySQL-*.rpm

创建远程访问用户

use mysql;

select user,host,password from user;

create user 'root'@'%' identified by '1234'; #创建用户，并设置密码

grant all on *.* to 'root'@'%' with grant option; #给指定的用户授权

flush privileges; #刷新权限

安装redis

6.2.3 初始化数据库数据

6.2.4 上传war到tomcat下

6.2.5 访问

6.2.6 注意：乱码问题

如果是window 的cmd命令创建初始化数据库，需要

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2018-07-19，如有侵权请联系 cloudcommunity@tencent.com 删除

java

jsp

servlet

本文分享自 Java帮帮微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

java

jsp

servlet