【开发日志（塌陷地）】在线编辑功能实现

功能描述

采煤塌陷地综合治理项目中的页面主要分为3大部分：基于ArcGIS的专题图、文字描述页面、系统管理。其中，很多页面只有文字描述，最多有几个常年不变的图表，对系统的优化过程中决定对这些文字描述页面进行维护，将文字内容保存到数据库中，并支持在线修改文本。要求加载文字描述类页面时，动态读取数据库中的内容显示到当前页面，点击“编辑”按钮跳转到在线编辑页面，文本框中默认显示编辑前的文本（可以方便用户只改动少数字），修改后点击“确定”按钮，将编辑后的文本保存至数据库中，并自动刷新回到更新后的文本描述页面。

截图

1.文本描述页面

2.在线编辑页面

问题分析

主要遇到以下几个问题：
1.通过ajax实现前后台的数据传参问题，包括两个部分：页面加载时，从数据库读取文本内容，传到前台页面；在线编辑后，点击“确定”按钮将编辑的文本传给后台，保存到数据库中。
2.段落控制：数据库中存的有

等标签，前台读取时调用html()显示为段落，点击“编辑”调用replace(/

/g, " ")等将文本内容自动转义后显示在编辑页面的文本框中，编辑后点击“确定”再用split()分隔后再after += "

" + i + "

"自动将回车转义为

文本

保存到数据库中。
3.在线编辑的前端样式用的ace admin框架的widget-toolbox，肯定有更好的样式，但项目的主要样式框架就是ace，所以干脆用了ace的。

代码

一、前端
以mining.jsp为例：

<%@ page contentType="text/html;charset=utf-8" pageEncoding="utf-8"%>














































	

		

		<%@ include file="base/header.jsp"%>
	

	

		

		

			 
			

			

				

				

					

						
							
						

						
							
						

						
							
						

						
							
						
					

					

						 

						 
					
				
				

				<%@ include file="base/menu.jsp"%>

				

					
				

				
			

			

				

					

					

						
 主页

						
塌陷地现状
						
煤炭开采情况
					
					

					

						

							
						
					
					
				
				

					
					

						
					
					

						编辑
					
					

            			
        			
					
		           	
					
				
				

				
				
			
			

			
		
		

		

		

		
		

		

		

		

		

		

		

		
		
		

		

		

		

		
		

		

		

二、后台
用SpringMVC框架，写了6个类：TextInfoController.java、TextInfoDAO.java、TextInfoDAOImpl.java、TextInfo.java、TextInfoService.java、TextInfoServiceImpl.java。其他的没什么好说的，就重点说说Controller类吧：

package com.sdkd.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.sdkd.entity.TextInfo;
import com.sdkd.service.TextInfoService;

@Controller
@RequestMapping("/text")
public class TextInfoController {
	
	@Autowired
	private TextInfoService textInfoService;
	
	@ResponseBody
	@RequestMapping(value = "/textInfo")
	public String testTextInfo(Integer id, String textContent) {
		System.out.println("id:" + id + " textContent:" + textContent);
		
		TextInfo ti = textInfoService.findById(id);
		//System.out.println("getJSPName:" + ti.getJSPName());
		//System.out.println("textContent:" + textContent);
		String [] text = textContent.split("\\n");
		String after = "";
		System.out.println("按回车分隔:");
		for(String i : text) {
			System.out.println("i:"+ i);
			after += "
" + i + "
";
		}
		System.out.println("after:" + after);
		ti.setTextContent(after);
		textInfoService.save(ti);
		System.out.println("成功保存了编辑后的" + ti.getJSPName() + ".jsp的文本内容");
		return "true";
	}
	
	/*@RequestMapping(value = "/getTextInfoFromDatabase")
	public @ResponseBody String getTextInfoFromDatabase(Integer id) {
		ModelAndView modelAndView = new ModelAndView();
		TextInfo ti = textInfoService.findById(id);
		System.out.println("textInfoFromDB" + ti.getTextContent());
		modelAndView.addObject("textInfo", ti);
		System.out.println("成功从数据库中读取TextContent");
		return ti.getTextContent();
	}*/
	//@ResponseBody
	@RequestMapping(value = "/getTextInfoFromDatabase")
	public @ResponseBody ModelMap getTextInfoFromDatabase(Integer TextId) {
		ModelMap mm = new ModelMap();
		try {
			System.out.println("TextId: " + TextId);
			TextInfo ti = textInfoService.findById(TextId);
			System.out.println("textInfoFromDB" + ti.getTextContent());
			mm.addAttribute("textInfo", ti.getTextContent());
			System.out.println("成功从数据库中读取TextContent");
		} catch(Exception e) {
			System.out.println("catch");
			e.printStackTrace();
		}
		
		return mm;
	}
}