web开发中一些值得注意的点（1）

前端时间写个大实验，在一些需求中遇到一些问题，发现很多值得注意与学习的地方，在此做个笔记，希望能够帮助到一些朋友，使用不是最优，只是提供思路。

1、图片上传，支持预览

FileReader是一种异步文件读取机制，结合input:file可以很方便的读取本地文件。下面是简单的例子

<input type="file" accept="image/x-png,image/bmp,image/gif,image/jpeg,image/jpg" id="doc-ipt-file-2" id="headImage" name="headImage" onchange="previewFile()"><br>

function previewFile() {
var preview = document.querySelector('#showHead');
var file    = document.querySelector('input[type=file]').files[0];
var reader  = new FileReader();

reader.onloadend = function () {
preview.src = reader.result;
}

if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "";
}
}

2、在一些页面中可能需要要上传很多数据到后台，数据需要一定的格式，例如List<Object(name,age)>这种格式。此时可能就需要在页面编辑JavaScript代码，构建对象，构建List，转为json，最后使用ajax发送给后端。

如下图是一个简单的例子：

1、构建对象 2、构建array 构建json，3、ajax发送json到后台

/* checkRecode对象 */
 function checkRecodeObj(stuName,checkState,feedback){
       this.stuName=stuName;
       this.checkState=checkState;
       this.feedback=feedback;
 }

        /* 构建出考核结果的对象数组 */
	var objarr = new Array();
 	for(var i=0;i<stuNum;i++){
    	    var selectVal= $('#select'+ i +' option:selected').val();
	    var stuVal=$('#stu'+i).text();
	    var feedbackStr=$('#feedback'+i).val();
	    /* 	alert(feedbackStr); */
	    var obj=new checkRecodeObj(stuVal,selectVal,feedbackStr);
	    objarr.push(obj);
	}
        console.log(objarr);
        var json =JSON.stringify(objarr);
        console.log(json);

        /* 传递到后台 */
        var url =  "<%=path%>/check_addCheck";
 	var args = {"cid":cid,"courseName":courseName,"stuTime":stuTime,"checkTime":checkTime,"checkRecordeJson":json}; 
  	$.post(url,args,function(data){
		alert(data);
	},"JSON");/

3、在ajax做级联下拉框时，一般使用JQuery的change事件，当第一个下拉框变化时，第二个下拉会更新数据，这里就要考虑到如果第一个用户看到一个选项就是自己需要的，用户不下拉change，那就无法触发change事件去后台拉数据并构建第二个下拉框，解决的办法可以是第一个下拉框给用户看到的是班级“请选择”，这样用户体验也还行，必须change才能选中他所需要的项，根据该项的change也就构建了第二个下拉框。

简单例子如下：

<h2>班级:</h2><select data-am-selected id="cla" style="width: 50px;" name="cla"></select>

<div class="am-u-sm-2">
	<h2>课程:</h2>
	<select data-am-selected id="course" name="course">
	    <option selected="selected"></option>
	</select>
</div>

/* 班级改变，更新该班的课程 */
$("#cla").change(function(){
 	var url =  "<%=path%>/check_getCourseListBycid";
	var cid = $("#cla option:selected").val();
 	var args = {"cid":cid}; 
  	$.post(url,args,function(data){
		var arr = data.split(',');
		$("#course").html("");
		for(var i = 0;i<arr.length;i++)
			$("#course").append("<option value='"+arr[i]+"'>"+arr[i]+"</option>"); 
	},"JSON"); 
});

4、图片上传到数据库的问题：

数据库中可以存二进制，但是不建议，往往存储文件路径。使用eclipse或者myeclipse加tomcat时需要注意将server里配置部署位置（具体看之前一个博客https://blog.csdn.net/lys1695227550/article/details/78107462），这样就部署好项目到自己的生产环境的tomcat,此时数据库中存储的就可以是webcontent开始的路径。

例如：

如果资源在其他服务器上，那存储的路径可以是url,或者也可以参考上述，存储后半段路径，ip与端口就在程序中使用配置文件。

5、web开发中往往需要考虑到删除这一需求，但是很多数据我们只是想不查询出来，但是信息可能需要保留，为了以后数据分析或者处于某种业务需要查出处理，此时数据丢了往往是很懊悔的，在一些我决定比较重要的表，我是不提供删除，只是设置一个状态字段state，通过state来判断该记录是否活跃或者已经失效（即删除了）。这样delete就变为了update，所以记录可以撤回。

6、在设计数据库时，发觉很多外键关系可以使用程序维护来代替数据库维护，这样做的好处：例如在Hibernate中，一对多，多对多的配置与处理比较麻烦，如果不设外键，配置文件就会变得简单，在程序中维护外键也是比较简单的。所以，建表时可以根据具体情况考量一下哪一种方案合适。

就先写到这吧！希望通过和大家分享自己的学习经历，能够帮助一些和我一样在学web的童鞋们。

web开发中一些值得注意的点（1）

猜你喜欢