web开发项目总结

记录一下接手的web项目的流程
目录结构
前端代码在WebRoot里面，后端在src目录之下

前端结构（以test页面为例）

Jsp文件为页面的静态展示，控制页面的元素的布局，js文件控制页面的逻辑。在一个页面中List.jsp是页面总体展示，页面的逻辑完成在页面加载初始化的时候，Add，Edit，Detail是页面上控件增删改查所调处来的模态框展示的页面。

jsp页面的末尾通过此语句来和相应的js相连接。
在js中有用到调用后端数据库的方法（以此为例）、

function loadInfo(id){
	$.ajax({
	
		url:"testGetById.action", 
		data:"id="+id, 
		dataType:"json", 
	    async:false,
		type:"post",
		success:function (mm) {
			console.log(mm);
			$("#id").val(mm.id);  
			$("#stu_number").val(mm.uid);  
			$("#stu_name").val(mm.name); 
			$("#classnum").val(mm.classnum);   
			$("#sex").val(mm.sex);  
			$("#birth_date").val(mm.birthdate);  
				
			$('#hobby1').prop('checked', false);
			$('#hobby2').prop('checked', false);
			$('#hobby3').prop('checked', false);
			$('#hobby4').prop('checked', false);
			var checkList=mm.hobbies.split(",");
			for(var i=0;i<checkList.length;i++){
				if(checkList[i]=="basketball"){$('#hobby1').prop('checked', true);}
				else if(checkList[i]=="football"){$('#hobby2').prop('checked',true);}
				else if(checkList[i]=="pingpang"){$('#hobby3').prop('checked', true);}
				else if(checkList[i]=="painting"){$('#hobby4').prop('checked', true);}
			}
				
			$("#stu_sex").selectpicker('val',mm.sex);//机动化程度
			
			 
			window.parent.$("#editWPS").modal('show');
		}, 
		error:function (error) {
			 window.parent.$("#tipContent").html("获取单个信息失败！");
			 window.parent.$("#myModal").modal('show');
	}});

其中url指明调用的路径，是action中的testGetById方法
这是，就俩看看后端代码

后端基本就涉及到这几个文件，xml标记了后端方法的路径，后端有关数据库的方法都需要再次注册一下
model文件是对于数据库表中的字段的实例化，若要对某一个表进行操作，必须要实例化成对象，以便get和set
action中是对应前端方法调用的门户，同时也调用dao中的方法对数据库进行操作
dao直接与数据库交互，执行增删改查
值的注意的是有一个叫DBManager的类，里面封装了很多sql语句，有些可以直接调用

	
		<!-- 增删改查测试页面展示 -->
		<action name="testListAction" class="com.dhcc.wq.action.testListAction" method="testListAction">
			<result type="json"></result>
		</action>

如这里就指明了方法名称，方法路径，然后就到对应的action中找对应的方法

/**
	 * 页面展示方法
	 * @return
	 * @throws Exception
	 */
	public String testListAction() throws Exception {

		testDao dao = new testDao();
		List<TestList> list = new ArrayList<TestList>();
		list = dao.testQueryList(sortname,sortorder);
		PrintWriter pWriter = null;
		try {
			JSONArray json = JSONArray.fromObject(list);
			ServletActionContext.getResponse().setCharacterEncoding("UTF-8");
			pWriter = ServletActionContext.getResponse().getWriter();
			pWriter.print(json);
		}catch(Exception e) {
			e.printStackTrace();
		}finally {
			pWriter.flush();
			pWriter.close();
		}
		return SUCCESS;
		
	}	

在action相应的方法中调用dao中的方法操作数据库

list = dao.testQueryList(sortname,sortorder);

注意返回类型是刚刚model中实例化的数据库表的类

 public List<TestList> testQueryList(String sortname,String sortorder){
	    	DBManager dbm = new DBManager();
	    	List<TestList> list=null;
	    	String sql = "select * from testcrud where 1=1";
			 sql += " order by "+sortname+" "+sortorder+" ";    	
			try {
				list = dbm.getObjectList(TestList.class, sql);
			} catch (Exception e) {
				e.printStackTrace();
				return null;
			}finally{
	    	   dbm.close();
			}
	    	return list;
	    }
	 

至此，一个从前端到后端的流程就完了
遇到问题后端可以看编译器的控制台，前端可以看浏览器的控制台。
另外，数据库的配置主要在这几个文件夹里面