第一个SSM项目开发心得

一、项目介绍

  该项目为公司的官方网站，项目分为前台页面和后台页面。前台页面为公司信息展示页面，包括轮播图展示、公司的产品介绍、公司的各种动态等。后台页面为数据管理页面，在此页面能对前台数据进行各种必要的管理。


  项目主要目录，这里只是使用了maven的结构

二、模块介绍

  在该项目中主要制作了文章模块、轮播图模块、用户模块、公司动态模块

  其中除用户模块外，其他三个模块功能的实现基本一样，我将重点讲解文章模块。
  前端页面是已经做好的只需要使用和修改即可。在后台数据管理页面使用GirdManager进行数据显示和各种管理操作。

  后端首次进入页面查询数据，包含分页查询和高级查询。前端页面加载事件，进入页面直接显示数据。（部分代码展示）

  后端代码service

	@Override
	public PageBean<Article> findAll(ArticleQuery query) {
		//高级查询总条数
		Integer totalsList = mapper.totals(query);
		//判断查询到的总条数是否为空
		if (totalsList == null) {
			return new PageBean<>();
		}
		// 分页数据
		List<Article> list = mapper.findAll(query);
		for (Article article : list) {
			Long typeId = article.getTypeId();
			ArticleType articleType = typeMapper.findById(typeId);
			article.setType(articleType);
		}
		return new PageBean<>(totalsList, list);
	}

  mapper数据查询sql语句

       <!-- List<Article> findAll(ArticleQuery query); -->
		<select id="findAll" resultType="cn.itsource.domain.Article">
			select * from t_article
			 <include refid="query"></include>
			limit #{begin} ,#{pageSize}
		</select>
		
		<!-- Integer totals(ArticleQuery query); -->
		<select id="totals" resultType="int">
			select count(id) from t_article 
			<include refid="query"></include>
		</select>
		
        <sql id="query">
			<where>
				<if test="title != null and '' != title.trim()">
					and title like concat('%',trim(#{title}),'%')
				</if>
				<if test="typeId != null">
					and typeId = #{typeId}
				</if>
				<if test="enable != null">
					and enable = #{enable}
				</if>
			</where>
		</sql>

  前端GirdManager进行数据解析展示

document.querySelector('#table-demo-ajaxPageCode').GM({
		        gridManagerName: 'demo-ajaxPageCode',
		        ajaxData: '/system/article/list',
		        ajaxType: 'POST',
		        supportAjaxPage: true, 
		        sizeData: [5,10,15,20],	//修改页面选择显示内容条数
		        pageSize: 5,			//默认显示多少条内容
		        currentPageKey: "localPage",	//当前是第几页的key
		        pageSizeKey: "pageSize",			//当前显示多少条的key
		        height:'auto',
		        columnData: [
		            {
		                key: 'title',
		                align: 'center',
		                text: '名称'
		            },{
		                key: 'id',
		                align: 'center',
		                text: '<a id="add" style="color: #5cb85c" href="#">添加</a>',
		                template: function(cell, row, index, key){
							//对象转换成json格式 JSON.stringify(row)
		                	var jons = JSON.stringify(row);
		                    return "<a data-obj='"+jons+"' style='color: #f0ad4e' href='#'>修改</a>"+
							"<div style='border-left: solid 2px #ccc;height: 25px;vertical-align: middle;display: inline-block;margin-left: 5px;margin-right: 5px'></div>"+
							"<a data-id="+cell+" style='color: #d9534f' href='#'>删除</a>";
		                }
		            }
		        ]
		    });

  在这里还实现了数据的添加、修改和删除。如上代码所示

  添加和修改使用的是同一个方法，通过判断是否有id值实现添加或者修改，这直接展示service层和mapper的代码

  service层代码，使用了页面静态化

	@Override
	public void save(Article article,HttpServletRequest req) {
		//获取模板文件路径
		String path = req.getServletContext().getRealPath("/static/template");
		File file = new File(path);
		//判断是否存在
		if (!file.exists()) {
			file.mkdirs();
		}
		//创建静态页面
		String url = FreeMarkerUtil.createTemplate(path, "article.ftl", article, ".html");
		//添加url
		article.setUrl(url);
		if (article.getId() == null) {
			mapper.add(article);
		}else {
			//查询出旧的url文件并删除
			//获取id
			Long id = article.getId();
			//通过id查询
			Article article2 = mapper.findById(id);
			//获取查询到的url
			String url2 = article2.getUrl();
			File file2 = new File(file, url2);
			//是否存在
			if (file2.exists()) {
				file2.delete();
			}
			mapper.update(article);
		}
	}

  页面静态化FreeMarker，此为制作的一个工具类。path模板存放路径、templateName模板文件名、data传入的数据、suffix传出的文件后缀名

public class FreeMarkerUtil {

	public static String createTemplate(String path,String templateName,Object data,String suffix) {
		FileWriter out = null;
		try {
			//创建模板对象
			Configuration config = new Configuration(Configuration.VERSION_2_3_28);
			//设置加载路径
			File file = new File(path);
			config.setDirectoryForTemplateLoading(file);
			//设置编码
			config.setDefaultEncoding("UTF-8");
			//获取模板
			Template template = config.getTemplate(templateName);
			//生成静态文件
			String url = System.currentTimeMillis()+suffix;
			out = new FileWriter(new File(file, url));
			template.process(data, out);
			
			return url;
		} catch (Exception e) {
			// TODO: handle exception
		}finally {
			if (out != null) {
				//关闭流
				try {
					out.close();
				} catch (IOException e) {
					// TODO Auto-generated catch block
					e.printStackTrace();
				}
			}
		}
		
		return null;
	}
}

  mapper层

		<!-- void update(Article article); -->
		<update id="update">
			update t_article set title = #{title},typeId = #{typeId}
			,url = #{url},clickCount=#{clickCount},createDate=#{createDate},
			content = #{content},enable = #{enable} where id = #{id}
		</update>
		
		<!-- void add(Article article); -->
		<insert id="add">
			insert into t_article(title,content,typeId,enable,url,createDate) 
			values(#{title},#{content},#{typeId},#{enable},#{url},#{createDate})
		</insert>

  删除也得通过获取id进行删除，但是删除需要先查询的静态文件路径并删除文件，再删除数据数据

	@Override
	public void delById(Long id,HttpServletRequest req) {
		//先查询url，删除文件
		//获取模板文件路径
		String path = req.getServletContext().getRealPath("/static/template");
		//通过id查询
		Article article = mapper.findById(id);
		//获取查询到的url
		String url = article.getUrl();
		File file = new File(path);
		File file2 = new File(file, url);
		//是否存在
		if (file2.exists()) {
			file2.delete();
		}
		//再删除数据库
		mapper.delById(id);
	}

  而后台为了数据安全问题，还需要一个管理员登录功能，在这里直接展示拦截器和等记住我的实现

  拦截器Java代码

	@Override
	public boolean preHandle(HttpServletRequest req, HttpServletResponse resp, Object arg2) throws Exception {
		//获取session
		Object user = req.getSession().getAttribute("USER-IN-SESSION");
		System.out.println(user);
		//判断是否为空
		if (user != null) {
			//不为空则不拦截
			return true;
		}else {
			//为空则拦截，跳转到登录页面
			resp.sendRedirect("/system/login");
			return false;
		}
		
	}

  配置拦截器

	<!-- 配置拦截器组-->
	<mvc:interceptors>
		<!-- 拦截器 -->
		<mvc:interceptor>
			<!-- 要拦截的配置，必须写在不拦截的上面 -->
			<mvc:mapping path="/system/**"/>
			<!-- 不拦截的配置 -->
			<mvc:exclude-mapping path="/system/login"/>
			<!-- 配置拦截器 -->
			<bean class="cn.itsource.interceptor.LoginInterceptor" />
		</mvc:interceptor>
	</mvc:interceptors>

  登录记住我和取消记住我的实现代码

	@RequestMapping(value="/login",method=RequestMethod.POST)
	@ResponseBody
	public AjaxResult login(Integer remember,String username,String password,HttpServletRequest req,HttpServletResponse resp) {
		try {
			User user = service.login(username,password);
			//存入session
			req.getSession().setAttribute("USER-IN-SESSION", user);
			//用户记住我操作
			if (remember != null) {
				//用户名和密码存入cookie
				Cookie c1 = new Cookie("username", username);
				Cookie c2 = new Cookie("password", password);
				
				//设置路径
				c1.setPath("/");
				c2.setPath("/");
				
				//设置cookie生命周期
				c1.setMaxAge(7*24*60*60);
				c2.setMaxAge(7*24*60*60);
				
				//存进浏览器
				resp.addCookie(c1);
				resp.addCookie(c2);
				
			}else {
				//获取cookie
				Cookie[] cookies = req.getCookies();
				for (Cookie cookie : cookies) {
					//判断是否包含用户名或密码
					if (cookie.getName().equals("password") || cookie.getName().equals("username")) {
						//设置生命周期为0
						cookie.setMaxAge(0);
						//设置路径
						cookie.setPath("/");
						//存进浏览器
						resp.addCookie(cookie);
					}
				}
			}
			return new AjaxResult();
		} catch (Exception e) {
			// TODO: handle exception
			return new AjaxResult(false, e.getMessage());
		}
		
	}