1.3 修改web.xml
<?xml version="1.0" encoding="UTF-8"?><beans xmlns=“http://www.springframework.org/schema/beans”
xmlns:xsi=“http://www.w3.org/2001/XMLSchema-instance”
xmlns:context=“http://www.springframework.org/schema/context”
xmlns:aop=“http://www.springframework.org/schema/aop”
xmlns:tx=“http://www.springframework.org/schema/tx”
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/aop
http://www.springframework.org/schema/aop/spring-aop.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx.xsd">
<context:component-scan base-package=“com.itzheng.ssm.service”>
</context:component-scan>
<context:component-scan base-package=“com.itzheng.ssm.dao”>
</context:component-scan>
<context:property-placeholder location=“classpath:db.properties”/>
1.4 创建db.properties
jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/ssm?useUnicode=true&characterEncoding=utf8
jdbc.username=root
jdbc.password=root
1.5 配置事务:applicationContext.xml
<tx:annotation-driven transaction-manager=“transactionManager” />
1.6 配置spring-mvc.xml
<?xml version="1.0" encoding="UTF-8"?><beans xmlns=“http://www.springframework.org/schema/beans”
xmlns:mvc=“http://www.springframework.org/schema/mvc”
xmlns:context=“http://www.springframework.org/schema/context”
xmlns:xsi=“http://www.w3.org/2001/XMLSchema-instance”
xmlns:aop=“http://www.springframework.org/schema/aop”
xsi:schemaLocation="
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/aop
http://www.springframework.org/schema/aop/spring-aop.xsd
">
<context:component-scan base-package=“com.itzheng.ssm.controller”>
</context:component-scan>
<mvc:resources location=“/css/” mapping=“/css/**”/>
<mvc:resources location=“/img/” mapping=“/img/**”/>
<mvc:resources location=“/js/” mapping=“/js/**”/>
<mvc:resources location=“/plugins/” mapping=“/plugins/**”/>
<mvc:annotation-driven />
<aop:aspectj-autoproxy proxy-target-class=“true” />
1.7 配置web.xml
<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi=“http://www.w3.org/2001/XMLSchema-instance”
xmlns=“http://xmlns.jcp.org/xml/ns/javaee”
xsi:schemaLocation=“http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd”
version=“3.1”>
org.springframework.web.context.ContextLoaderListener
contextConfigLocation
classpath*:applicationContext.xml
dispatcherServlet
org.springframework.web.servlet.DispatcherServlet
contextConfigLocation
classpath:spring-mvc.xml
1
dispatcherServlet
*.do
characterEncodingFilter
org.springframework.web.filter.CharacterEncodingFilter
encoding
UTF-8
characterEncodingFilter
/*
index.html
index.htm
index.jsp
default.html
default.htm
default.jsp
1.7 修改db.properties,为Oracle的驱动
jdbc.driver=oracle.jdbc.driver.OracleDriver
jdbc.url=jdbc:oracle:thin:@192.168.75.100:1521:orcl
jdbc.username=ssm
jdbc.password=itzheng
1.8 创建以上配置文件对应的包扫描
创建包
创建一个类
package com.itzheng.ssm.controller;
import com.itzheng.ssm.service.IProductService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
@Controller
@RequestMapping(“/product”)
public class ProductController {
@Autowired
private IProductService productService;
public ModelAndView findAll() {
ModelAndView mv = new ModelAndView();
return mv;
}
}
applicationContext.xml当中的包扫描变正常
1.9 继续完善ProductController 类
package com.itzheng.ssm.controller;
import com.itzheng.ssm.domain.Product;
import com.itzheng.ssm.service.IProductService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
import java.util.List;
@Controller
@RequestMapping(“/product”)
public class ProductController {
@Autowired
private IProductService productService;
@RequestMapping(“/findAll.do”)
public ModelAndView findAll() throws Exception {
ModelAndView mv = new ModelAndView();
List ps = productService.findAll();
mv.addObject(“”,ps);
mv.setViewName(“”);
return mv;
}
}
2.0 继续完善IProductDao
package com.itzheng.ssm.dao;
import com.itzheng.ssm.domain.Product;
import org.apache.ibatis.annotations.Select;
import java.util.List;
public interface IProductDao {
//查询所有的产品信息
@Select(“select * from product”)
public List findAll() throws Exception;
}
2、页面显示
功能实现逻辑图
(1)产品操作-查询全部商品
a、完善index.jsp
<%@ page language=“java” contentType=“text/html; charset=UTF-8”
pageEncoding=“UTF-8”%>
b、复制资源文件
将上节当中的的adminlte当中的内容拷贝到工程当中
创建pages目录
c、扫描dao接口
在applicationContext.xml当中
d、创建product-list.jsp
<%@ page language=“java” contentType=“text/html; charset=UTF-8”
pageEncoding=“UTF-8”%>
<%@taglib uri=“http://java.sun.com/jsp/jstl/core” prefix=“c” %>
<meta
content=“width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no”
name=“viewport”>
href=“${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css”>
href=“${pageContext.request.contextPath}/plugins/font-awesome/css/font-awesome.min.css”>
href=“${pageContext.request.contextPath}/plugins/ionicons/css/ionicons.min.css”>
href=“${pageContext.request.contextPath}/plugins/iCheck/square/blue.css”>
href=“${pageContext.request.contextPath}/plugins/morris/morris.css”>
href=“${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-1.2.2.css”>
href=“${pageContext.request.contextPath}/plugins/datepicker/datepicker3.css”>
href=“${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.css”>
href=“${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css”>
href=“${pageContext.request.contextPath}/plugins/datatables/dataTables.bootstrap.css”>
href=“${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.css”>
href=“${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.theme.default.css”>
href=“${pageContext.request.contextPath}/plugins/select2/select2.css”>
href=“${pageContext.request.contextPath}/plugins/colorpicker/bootstrap-colorpicker.min.css”>
href=“${pageContext.request.contextPath}/plugins/bootstrap-markdown/css/bootstrap-markdown.min.css”>
href=“${pageContext.request.contextPath}/plugins/adminLTE/css/AdminLTE.css”>
href=“${pageContext.request.contextPath}/plugins/adminLTE/css/skins/_all-skins.min.css”>
href=“${pageContext.request.contextPath}/css/style.css”>
href=“${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.css”>
href=“${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.skinNice.css”>
href=“${pageContext.request.contextPath}/plugins/bootstrap-slider/slider.css”>
href=“${pageContext.request.contextPath}/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css”>
<jsp:include page=“header.jsp”></jsp:include>
<jsp:include page=“aside.jsp”></jsp:include>
数据管理 数据列表
- 首页
- 数据管理
- 数据列表
列表
<button type=“button” class=“btn btn-default” title=“新建”
οnclick=“location.href=‘${pageContext.request.contextPath}/pages/product-add.jsp’”>
新建
删除
开启
屏蔽
刷新
<input type=“text” class=“form-control input-sm”
placeholder=“搜索”> <span
class=“glyphicon glyphicon-search form-control-feedback”>
class=“table table-bordered table-striped table-hover dataTable”>
id=“selall” type=“checkbox” class=“icheckbox_square-blue”>
ID 编号 产品名称 出发城市 出发时间 产品价格 产品描述 状态 操作<c:forEach items=“${productList}” var=“product”>
${product.id } ${product.productNum } ${product.productName } ${product.cityName } ${product.departureTimeStr } ${product.productPrice } ${product.productDesc } ${product.productStatusStr }订单
详情
编辑
</c:forEach>
新建
删除
开启
屏蔽
刷新
<input type=“text” class=“form-control input-sm”
placeholder=“搜索”> <span
class=“glyphicon glyphicon-search form-control-feedback”>
总共2 页,共14 条数据。 每页
1 2 3 4 5条
- 首页
- 上一页
- 1
- 2
- 3
- 4
- 5
- 下一页
- 尾页
-
Version 1.0.8
Copyright © 2014-2017 <a
href=“http://www.itcast.cn”>研究院研发部.
All rights reserved.
d、完善ProductController类
package com.itzheng.ssm.controller;
import com.itzheng.ssm.domain.Product;
import com.itzheng.ssm.service.IProductService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
import java.util.List;
@Controller
@RequestMapping(“/product”)
public class ProductController {
@Autowired
private IProductService productService;
@RequestMapping(“/findAll.do”)
public ModelAndView findAll() throws Exception {
ModelAndView mv = new ModelAndView();
List ps = productService.findAll();
mv.addObject(“productList”,ps);
mv.setViewName(“product-list”);
return mv;
}
}
e、product-list.jsp当中缺少两个页面,创建这两个页面
创建header.jsp和aside.jsp
header.jsp
<%@ page language=“java” contentType=“text/html; charset=UTF-8”
pageEncoding=“UTF-8”%>
数据
数据后台管理
<a href=“#” class=“sidebar-toggle” data-toggle=“offcanvas”
role=“button”> Toggle navigation
class=“dropdown-toggle” data-toggle=“dropdown”> <img
src=“${pageContext.request.contextPath}/img/user2-160x160.jpg”
class=“user-image” alt=“User Image”>
xxx
src=“${pageContext.request.contextPath}/img/user2-160x160.jpg”
class=“img-circle” alt=“User Image”>
<a href=“${pageContext.request.contextPath}/logout.do”
class=“btn btn-default btn-flat”>注销
aside.jsp
<%@ page language=“java” contentType=“text/html; charset=UTF-8”
pageEncoding=“UTF-8”%>
<img src=“${pageContext.request.contextPath}/img/user2-160x160.jpg”
class=“img-circle” alt=“User Image”>
xxx
- 菜单
href=“${pageContext.request.contextPath}/pages/main.jsp”><i
class=“fa fa-dashboard”> 首页
系统管理 <i
class=“fa fa-angle-left pull-right”>
href=“${pageContext.request.contextPath}/user/findAll.do”> <i
class=“fa fa-circle-o”> 用户管理
href=“${pageContext.request.contextPath}/role/findAll.do”> <i
class=“fa fa-circle-o”> 角色管理
href=“${pageContext.request.contextPath}/permission/findAll.do”>
资源权限管理
href=“${pageContext.request.contextPath}/sysLog/findAll.do”> <i
class=“fa fa-circle-o”> 访问日志
基础数据 <i
class=“fa fa-angle-left pull-right”>
href=“${pageContext.request.contextPath}/product/findAll.do”>
产品管理
href=“${pageContext.request.contextPath}/orders/findAll.do?page=1&pageSize=3”> <i
class=“fa fa-circle-o”> 订单管理
f、运行该项目
web当中添加Tomcat插件
org.apache.tomcat.maven
tomcat7-maven-plugin
8888
2.2
点击OK
clean工程
安装成功
运行项目
报错
需要更新一下数据库驱动
com.mchange
c3p0
0.9.5.2
运行项目
访问链接http://localhost:8888/zheng_ssm_web/
运行成功
时间和状态没有显示
g、修改Product类
public String getProductStatusStr() {
if(productStatus != null){
//状态 0 关闭 1 开启
if(productStatus == 0){
productStatusStr = “关闭”;
}
if(productStatus == 1){
productStatusStr = “打开”;
}
}
return productStatusStr;
}
h、再次运行项目
先clear
在install
运行项目
访问地址http://localhost:8888/zheng_ssm_web/product/findAll.do
显示成功
(2)处理时间显示的问题
在utils下新建一个包
a、创建DateUtils类
package com.itzheng.ssm.utils;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;
public class DateUtils {
//日期转换成字符串
public static String date2String(Date date, String patt) {
SimpleDateFormat sdf = new SimpleDateFormat(patt);
String format = sdf.format(date);
return format;
}
//字符串转换成日期
public static Date string2Date(String str, String patt) throws ParseException {
SimpleDateFormat sdf = new SimpleDateFormat(patt);
Date date = sdf.parse(str);
return date;
}
}
b、修改Product类
public String getDepartureTimeStr() {
if(departureTime != null){
departureTimeStr = DateUtils.date2String(departureTime,“yyyy-MM-dd HH:mm:ss”);
}
return departureTimeStr;
}
c、再次运行项目
先clear
在install
运行项目
访问地址http://localhost:8888/zheng_ssm_web/product/findAll.do
显示成功
3、product-list页面制作
创建product-list1.jsp
修改ProductController
在product-list1.jsp当中引入adminlte当中的admin-datalist.html,将其代码复制
替换css和js的文件路径
选中之后Ctrl+F
替换成功
删除头部和侧边导航
通过jsp引入页面头部和侧边导航
<jsp:include page=“header.jsp”></jsp:include>
<jsp:include page=“aside.jsp”></jsp:include>
修改数据列表表头的内容
ID 编号 产品名称 出发城市 出发时间 产品价格 产品描述 状态 操作继续修改删除其他tr只留下一个tr
引入
<%@taglib uri=“http://java.sun.com/jsp/jstl/core” prefix=“c” %>
继续修改tr当中的内容
<c:forEach items=“${productList}” var=“product” >
${product.id} ${product.productNum} ${product.productName} ${product.cityName} ${product.departureTimeStr} ${product.productPrice} ${product.productDesc} ${product.productStatusStr}订单
详情
编辑
</c:forEach>
修改一下页面
先clear
在install
运行项目
访问地址http://localhost:8888/zheng_ssm_web/product/findAll.do
显示成功
4、main.jsp页面制作
<%@ page language=“java” contentType=“text/html; charset=UTF-8”
pageEncoding=“UTF-8”%>
ITCAST - AdminLTE2定制版 <meta
content=“width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no”
name=“viewport”>
href=“${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css”>
href=“${pageContext.request.contextPath}/plugins/font-awesome/css/font-awesome.min.css”>
href=“${pageContext.request.contextPath}/plugins/ionicons/css/ionicons.min.css”>
href=“${pageContext.request.contextPath}/plugins/iCheck/square/blue.css”>
href=“${pageContext.request.contextPath}/plugins/morris/morris.css”>
href=“${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-1.2.2.css”>
href=“${pageContext.request.contextPath}/plugins/datepicker/datepicker3.css”>
href=“${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.css”>
href=“${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css”>
href=“${pageContext.request.contextPath}/plugins/datatables/dataTables.bootstrap.css”>
href=“${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.css”>
href=“${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.theme.default.css”>
href=“${pageContext.request.contextPath}/plugins/select2/select2.css”>
href=“${pageContext.request.contextPath}/plugins/colorpicker/bootstrap-colorpicker.min.css”>
href=“${pageContext.request.contextPath}/plugins/bootstrap-markdown/css/bootstrap-markdown.min.css”>
href=“${pageContext.request.contextPath}/plugins/adminLTE/css/AdminLTE.css”>
href=“${pageContext.request.contextPath}/plugins/adminLTE/css/skins/_all-skins.min.css”>
href=“${pageContext.request.contextPath}/css/style.css”>
href=“${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.css”>
href=“${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.skinNice.css”>
href=“${pageContext.request.contextPath}/plugins/bootstrap-slider/slider.css”>
<jsp:include page=“header.jsp”></jsp:include>
<jsp:include page=“aside.jsp”></jsp:include>
<img src=“${pageContext.request.contextPath}/img/center.jpg”
width=“100%” height=“100%” />
Version 1.0.8
Copyright © 2014-2017 <a
href=“http://www.itcast.cn”>研究院研发部.
All rights reserved.
访问http://localhost:8888/zheng_ssm_web/pages/main.jsp
处理一下index.jsp
访问http://localhost:8888/zheng_ssm_web/
1、添加产品
流程图
(1)实现添加产品的功能
a、修改product-List.jsp
<button type=“button” class=“btn btn-default” title=“新建”
οnclick=“location.href=‘${pageContext.request.contextPath}/pages/product-add.jsp’”>
新建
b、创建product-add.jsp
<%@ page language=“java” contentType=“text/html; charset=UTF-8”
pageEncoding=“UTF-8”%>
数据 - AdminLTE2定制版 <meta
content=“width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no”
name=“viewport”>
href=“${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css”>
href=“${pageContext.request.contextPath}/plugins/font-awesome/css/font-awesome.min.css”>
href=“${pageContext.request.contextPath}/plugins/ionicons/css/ionicons.min.css”>
href=“${pageContext.request.contextPath}/plugins/iCheck/square/blue.css”>
href=“${pageContext.request.contextPath}/plugins/morris/morris.css”>
href=“${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-1.2.2.css”>
href=“${pageContext.request.contextPath}/plugins/datepicker/datepicker3.css”>
href=“${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.css”>
href=“${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css”>
href=“${pageContext.request.contextPath}/plugins/datatables/dataTables.bootstrap.css”>
href=“${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.css”>
href=“${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.theme.default.css”>
href=“${pageContext.request.contextPath}/plugins/select2/select2.css”>
href=“${pageContext.request.contextPath}/plugins/colorpicker/bootstrap-colorpicker.min.css”>
href=“${pageContext.request.contextPath}/plugins/bootstrap-markdown/css/bootstrap-markdown.min.css”>
href=“${pageContext.request.contextPath}/plugins/adminLTE/css/AdminLTE.css”>
href=“${pageContext.request.contextPath}/plugins/adminLTE/css/skins/_all-skins.min.css”>
href=“${pageContext.request.contextPath}/css/style.css”>
href=“${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.css”>
href=“${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.skinNice.css”>
href=“${pageContext.request.contextPath}/plugins/bootstrap-slider/slider.css”>
href=“${pageContext.request.contextPath}/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css”>
<jsp:include page=“header.jsp”></jsp:include>
<jsp:include page=“aside.jsp”></jsp:include>
产品管理 产品表单
class=“fa fa-dashboard”> 首页
href=“${pageContext.request.contextPath}/product/findAll.do”>产品管理
- 产品表单
method=“post”>
产品信息产品编号<input type=“text” class=“form-control” name=“productNum”
placeholder=“产品编号” value=“”>
产品名称<input type=“text” class=“form-control” name=“productName”
placeholder=“产品名称” value=“”>
出发时间<input type=“text” class=“form-control pull-right”
id=“datepicker-a3” name=“departureTime”>
出发城市<input type=“text” class=“form-control” name=“cityName”
placeholder=“出发城市” value=“”>
产品价格<input type=“text” class=“form-control” placeholder=“产品价格”
name=“productPrice” value=“”>
产品状态<select class=“form-control select2” style=“width: 100%”
name=“productStatus”>
关闭 开启其他信息保存
<button type=“button” class=“btn bg-default”
οnclick=“history.back(-1);”>返回
Version 1.0.8
Copyright © 2014-2017 <a
href=“http://www.itcast.cn”>研究院研发部.
All rights reserved.