关于项目
项目开始
项目人员
本次项目参与人员两名,一位负责前台页面的动态显示与功能,一位负责后台页面的动态显示和增删改。(我是负责后台页面的)
项目规划
简单模拟了下数据库需要录入的数据,以及一些表的外键关联。(项目后期发现数据库不够完善)也简单分配了下任务(每个人需要写的页面)
项目进行
分配好任务后,两个人开始自己写自己的。过程中并没有进行过多交流
项目整合
因为编写过程中几乎没什么交流,导致整合后出现了不少bug,大多数为数据库bug。
项目展示
项目总结
1.开始一个项目之前,一定要先对这个项目进行完整的计划。(数据库建立,页面联动以及后台的增删改的同时前台也要动态增删改)
2.编写代码的过程中,项目的结构一定要清晰,Dao层,service,servlet,util应该分开放在不同的文件夹,servlet的命名也需要加以修饰以分类。
servlet层也需要根据页面来进行分类(不同文件夹)。由于编写过程中未分类,导致servlet层过于冗长。
(附:servlet层截图)
项目过程中遇到的问题
图片显示
项目开始之前对于ImageServlet的使用不是很熟练,导致无法在网页显示本地的图片。经过本次项目已经完全掌握了图片显示与上传的步骤。
图片上传
var uploadInst = upload.render({
elem: '#test1' //绑定元素
,url: '${path}/UploadServlet' //上传接口
,before: function(obj){
//预读本地文件示例
obj.preview(function(index, file, result){
$('#demo1').attr('src', result); //图片链接(base64)
});
}
test1为上传按钮的id
上传的servlet
@MultipartConfig
@WebServlet("/UploadServlet")
public class UploadServlet extends HttpServlet {
@Override
public void service(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
List<String> fileName = FileUtils.uploadFile(req);
JSONObject obj = new JSONObject();
obj.put("code", 0);
obj.put("msg", ""); // 无数据显示的内容
JSONObject data = new JSONObject();
data.put("src", "ImageServlet?imageName="+fileName.get(0));
data.put("imgName",fileName.get(0));
直接把集合转成json数组
obj.put("data", data);
res.getWriter().write(obj.toString());
}
图片显示
将图片的src属性改为 imageservlet?imageName =需要显示的图片名称
图片显示的Servlet
@WebServlet("/admin/ImageServlet")
public class ImageServlet extends BaseServlet {
public void showImage(HttpServletRequest req, HttpServletResponse res) throws Exception{
String imageName =req.getParameter("imageName");
showImage(req,res,imageName);
}
public void showCodeImage(HttpServletRequest req, HttpServletResponse res) throws Exception {
String s = CodeUtils.generateCodeStream(res);
req.getSession().setAttribute(Constants.USER_LOGIN_CODE,s);
showImage(req,res,"code_img.png");
}
private void showImage(HttpServletRequest req, HttpServletResponse res,String fileName) throws Exception {
//Constants.IMAGE_PATH为某个文件夹(文件所在的文件夹)
File file = new File(Constants.IMAGE_PATH+fileName);
FileInputStream fis = new FileInputStream(file);
ServletOutputStream outputStream = res.getOutputStream();
byte [] bs = new byte[1024*1024] ;
int i = -1 ;
while ((i = fis.read(bs)) != -1){
outputStream.write(bs);
outputStream.flush();
}
outputStream.close();
fis.close();
}
}
select二级联动
$.ajax({
url:'${path}/admin/GoodsTypeServlet?m=insertPage',
success:function(data){
$.each(data.data,function(index,item){
$('#goodsTypeId').append(new Option(item.typeName,item.typeId));//往下拉菜单里添加元素
})
form.render();
}
});
//二级联动,动态下拉框,查找分类对应的品牌
form.on('select(tp)',function (data) {
$("#selectBrand").empty();
if (data.value){
$.ajax({
url:'${path}/admin/BrandServlet?m=selectBrand&typeId='+data.value,
dataType:'json',
success:function(data){
$.each(data.data,function(index,item){
$('#selectBrand').append(new Option(item.brandName,item.brandId));//往下拉菜单里添加元素
// $('#selectId').val($("#bId").val());
})
form.render(); //更新全部表单内容
}
});
}
})