java ssm框架集成 MongoDB java的cms框架

你好！ 欢迎来到本博客，我们一起快乐学习Java

JAVA学习

• 项目基本架构分析

• 项目期（一）

• day01

• 1.CMS:内容(文章)管理系统
• 2.Maven:结构(以后大家使用maven:它可以帮我们自动导包,自动编译,规范代码,....)
• 3.项目搭建的常规操作
• 4.搞定页面(凡是WEB-INF中的页面都要通过Controller访问)
• 5.与前端交互
• 6.完成图片上传

项目基本架构分析

1.项目结构：springmvc+spring+springjdbc
2.Maven结构创建
3.后台管理系统 前台页面展示
4.轮播的CRUD上传
5.分页
6.高级查询
7.拦截器mvc
8.缓存
9.职位静态化页面处理
10.富文件编辑

项目期（一）

day01

1.CMS:内容(文章)管理系统

2.Maven:结构(以后大家使用maven:它可以帮我们自动导包,自动编译,规范代码,…)

1.src/main/java -> Java代码的存放位置
	2.src/main/resources -> 资源文件的存放位置
	3.src/test/java -> 测试代码的位置
	4.src/test/resources -> 代码资源文件的位置

3.项目搭建的常规操作

1.建表(t_image)

2.建domain(Images),dao,service,controller

1.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"
	id="WebApp_ID" version="3.1">
	<display-name>cms</display-name>

	<!-- Spring的核心配置文件的位置 -->
	<context-param>
		<param-name>contextConfigLocation</param-name>
		<param-value>classpath:applicationContext.xml</param-value>
	</context-param>
	<!-- 	核心控制器 -->
	<servlet>
		<servlet-name>dispatcher</servlet-name>
		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
		<init-param>
			<!-- SpringMVC的配置文件的位置 -->
			<param-name>contextConfigLocation</param-name>
			<param-value>classpath:applicationContext-mvc.xml</param-value>
		</init-param>
		<!--记SpringMVC跟着服务器(tomcat)的启动而启动 -->
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>dispatcher</servlet-name>
		<!--使用杠更加符合咱们的RESTful风格 -->
		<url-pattern>/</url-pattern>
	</servlet-mapping>
	<!-- 监听服务器(tomcat)的启动，让Spring也同启动 -->
	<listener>
		<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
	</listener>

	<!-- 配置相应的过滤器:角色SpringMVC 的POST请求的乱码问题 -->
	<!-- 配置编码方式过滤器,注意一点:要配置在所有过滤器的前面 -->
 <filter>
   <filter-name>CharacterEncodingFilter</filter-name>
   <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
   <init-param>
     <param-name>encoding</param-name>
     <param-value>utf-8</param-value>
   </init-param>
 </filter>
 <filter-mapping>
   <filter-name>CharacterEncodingFilter</filter-name>
   <url-pattern>/*</url-pattern>
 </filter-mapping>

</web-app>

2.applicationContext.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"
 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
 " >

<!-- 打描包：支持对应的注解,变成bean -->
<context:component-scan base-package="cn.itsource.cms.service,cn.itsource.cms.dao" />

<!-- 读取jdbc.properties -->
<context:property-placeholder location="classpath:jdbc.properties" />

<!-- 配置dataSource(连接池) -->
<bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource" destroy-method="close">
	<property name="driverClassName" value="${jdbc.driverClassName}" />
	<property name="url" value="${jdbc.url}" />
	<property name="username" value="${jdbc.username}" />
	<property name="password" value="${jdbc.password}" />
</bean>
<!-- 
	专门为咱们准备了一个类,用来完成数据库的操作：JdbcTemplate
	JdbcTemplate：jDBC的模板(公共的代码已经完成)
 -->
 <bean id="jdbcTemplate" class="org.springframework.jdbc.core.JdbcTemplate">
 	<property name="dataSource" ref="dataSource" />
 </bean>
</beans>

3.applicationContext-mvc.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:mvc="http://www.springframework.org/schema/mvc"
 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/mvc
 http://www.springframework.org/schema/mvc/spring-mvc.xsd
 " >
	<!--  引入其它的Spring配置文件
 	<import resource="classpath:applicationContext.xml"/>
    -->
	<!-- 扫描包 -->
	<context:component-scan base-package="cn.itsource.cms.web" />
	<!--支持SpringMVC特有的注解 -->
	<mvc:annotation-driven />
	<!-- 对静态资源放行 -->
	<mvc:default-servlet-handler />
	<!-- 视图解析器：自动为咱们添加前缀与后缀 -->
	<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<property name="prefix" value="/WEB-INF/views/" />
		<property name="suffix" value=".jsp" />
	</bean>
	<!-- 上传解析器 -->
	<bean id="multipartResolver"
		class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
		<property name="maxUploadSize">
			<value>2000000000</value>
		</property>
	  </bean>
</beans>

4.搞定页面(凡是WEB-INF中的页面都要通过Controller访问)

SystemController -> 进入后台的主页面

package cn.itsource.cms.web.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
@RequestMapping("/system")
public class SystemController {
	@RequestMapping("/index")
	public String index(){
		return "index";
	}
}

ImagesController -> 进入轮播图(CRUD)管理页面

package cn.itsource.cms.web.controller;

import java.io.File;
import java.io.IOException;
import java.util.UUID;

import javax.servlet.http.HttpServletRequest;

import org.apache.commons.io.FilenameUtils;
import org.apache.commons.io.IOUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;

import cn.itsource.cms.domain.Images;
import cn.itsource.cms.service.IImagesService;

@Controller
@RequestMapping("/images")
public class ImagesController {
	
	@Autowired
	private IImagesService imageService;

	@RequestMapping("/query")
	public String query(Model model){
		model.addAttribute("imageList",imageService.findAll());
		return "main";
	}
	
	/**
	 * 添加或者修改的跳转
	 * @return
	 */
	@RequestMapping("/input")
	public String input(){
		return "main_add";
	}
	
	/**
	 * 添加或者修改功能
	 * @return
	 * @throws IOException 
	 * @throws IllegalStateException 
	 */
	@RequestMapping("/save")
	public String save(Images images,HttpServletRequest req) throws Exception{
		//System.out.println(images);
		//System.out.println(images.getFileImg());
		//一.解决上传的名称问题
		//1.拿到相应的文件
		MultipartFile fileImg = images.getFileImg();
		//2.拿到文件名称
		String fileName = fileImg.getOriginalFilename();
		//3.拿到文件的扩展名
		String extName = FilenameUtils.getExtension(fileName);
		//4.获取随机名称
		String uuid = UUID.randomUUID().toString();
		//5.拼接一个新的名称
		String newFileName = uuid+"."+extName;
		//二.解决上传的路径问题
		//2.1获取真实路径
		String realPath = req.getServletContext().getRealPath("/upload");
		//2.2创建文件
		File file = new File(realPath,newFileName);
		//2.3创建父文件路径
		File parentFile = file.getParentFile();
		if(!parentFile.exists()){
			parentFile.mkdirs();
		}
		//三.保存文件  transferTo:保存文件的方法
		fileImg.transferTo(file);		
		//添加数据
		//1.添加名称
		images.setStorename(fileName);
		//2.添加地址
		images.setStorepath("/upload/"+newFileName);
		imageService.save(images);
		return "redirect:/images/query";
	}
}

5.与前端交互

5.1 前端会把html做好,然后我们把他做的页面搞到我们的项目中来(图片,js,css的引入路径都要进行修改)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>新闻标题</title>
		<link rel="stylesheet" href="/css/bootstrap-theme.min.css" />
		<!--引入bootstrap样式文档-->
		<link rel="stylesheet" href="/css/bootstrap.min.css" />

		<script type="text/javascript" src="/js/jquery.min.js"></script>
		<script type="text/javascript" src="/js/bootstrap.min.js"></script>
	</head>

	<body>
		<!--导航条-->
		<nav class="navbar navbar-inverse navbar-fixed-top">
			<div class="container">
				<!-- 导航上Logo和目录显示 -->
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#index-navbar" aria-expanded="false">
       						<span class="sr-only">导航目录</span>
        					<span class="icon-bar"></span>
        					<span class="icon-bar"></span>
        					<span class="icon-bar"></span>
      				</button>
					<a class="navbar-brand" href="javascript:void(0);">源码物流招聘网后台</a>
				</div>

				<!-- 导航上其他按钮-->
				<div class="collapse navbar-collapse navbar-right" id="index-navbar">
					<ul class="nav navbar-nav">
						<li class="dropdown">

							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
								<span class="glyphicon glyphicon-user" aria-hidden="true"></span> 管理员
								<span class="caret"></span>
							</a>
							<ul class="dropdown-menu">
								<li>
									<a href="#">注销登陆</a>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</nav>

		<div class="container-fluid" style="margin-top: 60px;">
			<div class="row">
				<!-- 创建菜单树 -->
				<div class="col-md-2 col-sm-4" style="padding: 0px; position: fixed;top: 60px;left: 0px;">
					<ul id="main-nav" class="nav nav-pills nav-stacked" style="">
						<li>
							<a href="http://www.baidu.com" target="mainContent">
								轮播管理
							</a>
						</li>
						<li>
							<a href="http://www.jd.com" target="mainContent">
								职位管理
							</a>
						</li>
						<li>
							<a href="#systemSetting" class="nav-header collapsed" data-toggle="collapse">
								<span class="glyphicon glyphicon-cog">系统设置</span>
								<span class="pull-right glyphicon glyphicon-chevron-down"></span>
							</a>
							<ul id="systemSetting" class="nav nav-list collapse secondmenu">
								<li>
									<a href="javascript:void(0);" οnclick="menuClick('')"><span class="glyphicon glyphicon-user"></span>用户管理</a>
								</li>
								<li>
									<a href="javascript:void(0);" οnclick="menuClick('')"><span class="glyphicon glyphicon-th-list"></span>bbb</a>
								</li>
							</ul>
						</li>
					</ul>
				</div>
				<div class="col-md-10 col-md-offset-2">
					<!-- 内容展示页 -->
					<div class="main_page">
						<iframe scrolling="no" id="mainContent" name="mainContent" src="/images/query" frameborder="0" style="min-height:600px;width:100%;height:100%;"></iframe>
					</div>
				</div>
				<!-- /.main-content -->
			</div>
		</div>
	</body>
	<script type="text/javascript">
	/*	var menuClick = function(menuUrl) {
			$("#mainContent").attr('src', menuUrl);
		};*/
		// 计算页面的实际高度，iframe自适应会用到
		function calcPageHeight(doc) {
			var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight);
			var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight);
			var height = Math.max(cHeight, sHeight);
			return height;
		}
		//根据ID获取iframe对象
		var ifr = document.getElementById('mainContent');
		ifr.onload = function() {
			//解决打开高度太高的页面后再打开高度较小页面滚动条不收缩
			ifr.style.height = '0px';
			var iDoc = ifr.contentDocument || ifr.document;
			var height = calcPageHeight(iDoc);
			if(height < 850) {
				height = 850;
			}
			ifr.style.height = height + 'px';
		}
	</script>
</html>

5.2 iframe -> 可以把其它的页面直接放入到页面中来
		<iframe src="..."  />

<div class="main_page">
	<iframe scrolling="no" id="mainContent" name="mainContent" src="/images/query" frameborder="0" style="min-height:600px;width:100%;height:100%;"></iframe>
</div>

5.3 注意点:如果咱们配置有上下文路径:所有跳转的路径前:${pageContext.request.contextPath }

6.完成图片上传

6.1 form中需要配置 method="post" enctype="multipart/form-data"	
	6.2 后台要根据上传的文件名进行接收
		①.修改名称  ②.获取路径  ③.保存图片(fileImg.transferTo(file))
		④.保存Images对象(绝对路径的地址,名称)