小码哥crm项目的一些要点以及编码技巧

引入

        最近敲完小码哥的crm项目，虽然总体就是CRUD，权限校验，AOP日志等等，但还是有实际编码的技巧和思路值得去学习的，因为考虑到不同项目具有差异性，所以这里只抽取通用的一些内容，也方便自己复习。

有关js

1.让人感到混乱的项目路径

不知道大家会不会同我一样，对项目中出现的路径经常感觉晕的一批，又是斜杠开头又是非斜杠开头的。所以会出现一种情况就是经常出现404，样式引入失效等等问题，以下是实用的编码小技巧能帮我们改善问题。

  1.1利用ContextListener存储项目路径

<script type="text/javascript" src="/js/jquery-easyui/jquery.min.js"></script>

先看上面这行代码(引入其他样式库同理，都涉及到路径)：

因为路径最前面加上了/，同时又是浏览器路径，因此代表的是"localhost:/8080/js/jquery-easyui/jquery.min.js",  如果你在maven中设置的访问项目名称为空，那么当然可以引入这个js文件，但如果把项目发给别人或是我们设置的项目名称就不为空，那么面临的问题就是引入的文件全部失效(404)，这时候又得每个js文件加上项目名，更不用提自己又加上../一层一层去推，乱上加乱。

那如何解决呢？

我们可以通过ContextListener将我们的项目路径存储到Context.attribute中，这样在js/jsp文件中就能直接通过EL表达式获取到了，先上代码。

public class ContextListener implements ServletContextListener {

	public void contextInitialized(ServletContextEvent event) {
		ServletContext context = event.getServletContext();  //获得ServletContext
		context.setAttribute("APP_PATH", context.getContextPath());  //将项目路径存储到域属性中
	}

	public void contextDestroyed(ServletContextEvent event) {
	}

}

  所以我们的代码由这样       

<script type="text/javascript" src="/js/jquery-easyui/jquery.min.js"></script>

 变成了这样    

<script type="text/javascript" src="${APP_PATH}/js/jquery-easyui/jquery.min.js"></script>

用这样的处理方式，就能解决项目路径不一致导致文件失效的问题了 。

最后再简单总结以下路径的一些知识：

凡是在js/jsp前端页面出现的路径(包括重定向，发送表单):

        加上" / ": 相当于最前面的" / "加上"localhost:8080"

        不加" / ":相对于当前目录

凡是在Servlet/Springmvc后台服务器中出现的路径

        加上" / ": 相当于最前面的" / "加上"localhost:8080/项目名"

        不加" / ":相对于当前目录

在WEB-INF下的文件目录为:localhost:8080/文件名

在webapp下的文件目录为:localhost:8080/项目名/

(路径为localhost:8080/项目名/js/menu.json)

2.参数传递问题         

        一开始的前端表单传递参数到后台服务器这块就把我搞晕乎了，常常出现这种状况：我的参数怎么传不到服务器啊 或者 这也能传？我好像都没指定欸。

总结出的几个事项:

        1.表单字段的名称尽量和pojo中的变量名称相同，

        2.当出现传入的表单参数有多个，而pojo对应的是一个List的时候，需要手动封装参数

        

$("#emp_form").form("submit",{ //提交表单，只看代码即可，逻辑略过
        		url:"insertEmployee",
        		onSubmit:function(param){
        			var ids = $("#emp_roles").combobox("getValues");  //easy-ui
        			console.log(ids);
                    // 2.把这些id塞到参数中
                    //重点关注下面部分，一个用户角色可以有多个，
                    //那么pojo中存储的就是List<Role>，这时候就得我们手动封装这些参数
                    for (var i = 0; i < ids.length; i++) {   
                    
                        param["roles["+i+"].id"] = ids[i];
                    }        			
        		},
        		//..省去success等业务逻辑
        	});

    (这里使用的是easy-ui框架，但是思路还是一致的就是要把相同名称的多个参数封装进去)   

3. 前端请求后端后，后端还应该发送响应的信息来告诉前端数据处理是否成功。(不然如果处理失败，前端得到就是一大片空白，根本不知道发生了什么) 。处理方法也很简单：

        将是否成功  + 成功与否的具体信息包装起来一同响应给前端(适用于增删改)。

        我们可以创建一个类：

        

public class AjaxResult {  
	private boolean success;  //是否成功
	private String message;  //处理的信息
	
	public boolean isSuccess() {
		return success;
	}
	public void setSuccess(boolean success) {
		this.success = success;
	}
	
	public String getMessage() {
		return message;
	}
	public void setMessage(String message) {
		this.message = message;
	}
}

        那么，我们在SpringMVC中，响应数据的时候就能写成这样子：

        

	-----------------SpringMVC---------------
    @RequestMapping("/deleteEmployee")
	@ResponseBody   //记得加ResponseBody，不然会报404
	public AjaxResult deleteEmployee(Integer id){
		AjaxResult result = new AjaxResult(); 
		if(service.deleteEmployee(id)){   //删除成功了
			result.setSuccess(true);
			result.setMessage("删除成功！");
		}else{
			result.setSuccess(false);     //删除失败了
			result.setMessage("删除失败!");
		}
		return result;
	} 
-----------------------------响应给js进行处理---------------------
        success : function(data){
        			data = $.parseJSON(data);  //将AjaxResult转成JSON对象
        			if(data.success){  //判断是否成功
	        			$.messager.alert("温馨提示", data.message, "info", function () {
	                    });
        			}else {  //判断是否失败
                        $.messager.alert("温馨提示", data.message, "info")
                    }
        }；