软帝实训第三周总结

经过本周实训，我对后端有了更一步的了解，认识了bootstrap框架，了解了一下layui框架，灵活运用layui中的弹出层组件等。知道JSP:Java Server Page(java服务器页面)是一项运行在服务端的网页模板技术，可以在html网页中嵌入java代码，使得html页面能够动态展示数据库的数据，所以jsp是一项动态网页技术主流动态网页技术主要有：php，ASP，jsp。get和set方法。了解到使用系统时间毫秒数作为新的文件名可以防止中文乱码，避免文件重名。
了解到文件上传前的准备工作：
1.表单的提交方式设置为post(method=“post”)
2.设置表单的enctype属性为"multiprt/form-data"
3.表单中必须存在文件控件(input:file),并为控件指定name属性值
简单了解了一下Canvas,会绘制一些简单的图形，如：矩形，实心矩形，线段，圆形。
总之，经过这周的实训后，项目已经基本完成

项目在本周实现了登录表单验证，获取表单对象，获取表单中用户输入的账号和密码。验证账号密码不能为空，进行了DOM操作。相关代码如下：

登录验证，获取表单对象、数据：

 //1.获取登录页面提交过来的表单数据（账号，密码）
   String name = request.getParameter("username");
   String pwd = request.getParameter("password");
   
   //2.访问数据库根据表单提交的账号密码查询数据库是否存在匹配的数据
  String sql = "select * from tbuser where username=? and password=?";
  User user = DBUtils.queryOne(User.class,sql,name,pwd);
   
   //3.根据数据库的查询结果进行页面跳转   
   if(user == null){
   	//账号或密码错误
   	//JOptionPane.showMessageDialog(null, "账号或密码错误"); 
   	System.out.println("账号或密码错误");
   	request.setAttribute("msg","账号或密码错误");
   }else{
   	if(user.getStatus() == 0){
   		//判断账号是否禁用
   		//JOptionPane.showMessageDialog(null, "账号被禁用"); 
   		System.out.println("账号被禁用");
   		request.setAttribute("msg","账号被禁用");
   	}else{
   		//登录成功（页面跳转到主界面：重定向） 
   		response.sendRedirect("main.html");
   		return;
   	}
   }
    //请求转发
    request.getRequestDispatcher("login.jsp").forward(request,response);

表单不能为空：

function check(){
    var f = document.getElementById('f');
	//DOM操作
   var name = f.username.value;
   var pwd = f.password.value;
  if(name.length < 1 || pwd.length < 1){
	  layer.alert('请输入账号和密码',{icon:2});
  }else{
	  //提交表单
	  f.submit();
		    		}		
		    	}

实现了从数据库获取音乐表中的数据和实现了文件上传。

音乐上传：

    //1.接收上传的文件
    //创建文件上传组件对象 
    SmartUpload su = new SmartUpload();
    //初始化上传组件
    su.initialize(pageContext);
    //设置允许上传的文件类型
    su.setAllowedFilesList("mp3,MP3");
    //设置允许上传的文件最大大小
    su.setMaxFileSize(1024*1024*20);
    //上传
    su.upload();
    
    //获取服务器用于存储文件的路径
    String basePath = this.getServletContext().getRealPath("musics");
    //使用系统时间毫秒数作为新的文件名（防止中文乱码，避免文件重名）
    String newName = System.currentTimeMillis()+".mp3";
    //将文件写入到指定位置
    su.getFiles().getFile(0).saveAs(basePath+"/"+newName);
    
    //2.接收表单信息，并封装为java对象存储到数据库中
    String path = "musics/"+newName;
    //从smartuload对象中将Request对象获取（非servlet中的request）
    Request req = su.getRequest();
    
    String name = req.getParameter("name");
    String artist = req.getParameter("artist");
    String ablum = req.getParameter("ablum");
    String style = req.getParameter("style");
    //获取歌曲大小（字节）
    int size = su.getFiles().getFile(0).getSize();

    String sql= "insert into tbmusic(name,artist,ablum,style,path,size) values(?,?,?,?,?,?)";
    //执行添加操作
    boolean f = DBUtils.exeUpdate(sql, name,artist,ablum,style,path,size);
    if(f){
    	//成功(重定向)
    	response.sendRedirect("music_list.jsp");
    }else{
    	//失败
    	request.setAttribute("msg","上传失败，请检查");
    	request.getRequestDispatcher("music_add.jsp").forward(request, response);
    }

获取信息：

			$(function(){
				//获取按钮并为其绑定点击事件
				$('#select_file').on('click',function(){
					//（打开文件选择框）
					$('#file').click();
				});
				
				//为文件选择控件绑定内容改变事件
				$('#file').on('change',function(){
					var path = $(this).val();
					//判断文件是否是mp3文件
					if(path.toLowerCase().endsWith('.mp3')){						
						//将文件路径填入指定区域
						$('#file_path').text(path);
						//将文件命名截取出来并填入歌曲名的输入框中
						//获取最后一个"\"符号出现的索引
						var index = path.lastIndexOf('\\');
						//截取文件名称（包含后缀）
						var name = path.substring(index+1);
						//去除文件后缀
						name = name.split('\.')[0];
						//将文件名填入输入框
						$('#name').val(name);
					}else{
						//传入的文件非mp3文件
						layer.msg('骚年，请选择正确的mp3文件');
						//去除文件框和文件名输入框中的内容
						$('#name').val('');
						$('#file').val('');
						$('#file_path').text('');
					}
				})
				
				//为歌曲风格的标签绑定点击事件
				$('.music-style>span').css('cursor','pointer')
									  .on('click',function(){
										//获取当前被选中的标签的文本值
										var style = $(this).text();
										//将文本值填入歌曲风格的输入框 
										$('#style').val(style);
									});
			})

完成分页操作（假分页：截取说有数据的一部分显示），相关代码如下：

                      String pn = request.getParameter("pageNow");
					   //分页操作（假分页：截取说有数据的一部分显示）
					   //当前页
					   int pageNow = pn ==null ? 1 :Integer.parseInt(pn);
					   //每页数据行数
					   int pageSize = 10;
					   //总页数
					   int pageCount = 0; 
					   
					   //防止上一页越界
					   pageNow = pageNow < 1 ? 1 : pageNow;
					  
					   //查询出所有的歌曲信息
                       String sql="select * from tbmusic";
					   List<Music> list = DBUtils.queryList(Music.class,sql);
					   //计算并获取总页码数
					   if(list.size() % pageSize == 0){
						   pageCount = list.size() / pageSize;
					   }else{
						   pageCount = list.size() / pageSize + 1;
					   }
					   //防止下一页越界
					   pageNow = pageNow > pageCount ? pageCount : pageNow;
					   //起始位置
					   int start = (pageNow - 1) * pageSize; //0-10第一页 10-20第二页 20-30第三页....
					   //结束位置
					   int end = pageNow * pageSize;
					   //防止截取时末尾位置超出总数据行数  
					   end = end>list.size() ? list.size() : end;
					   //截取集合的某一段数据并返回
					   list = list.subList(start,end);
					   //遍历集合（从集合中将数据一条一条取出来）
					   for(int i=0;i<list.size();i++){
						   //获取一首歌曲对象 
						   Music m = list.get(i);

                <div class="page text-center">
					<ul class="pagination">
						<li>
							<a href="music_list.jsp?pageNow=<%=pageNow-1%>">
								<span>&laquo;</span>
							</a>
						<% for(int i=1;i<=pageCount;i++) {
						    if(i == pageNow){%>
						        <li class="active"><a href=""><%=i %></a></li>
						<%}else{ %>
						<li><a href="music_list.jsp?pageNow=<%=i %>"><%=i %></a></li>
						<%}
						}%>
						<li>
							<a href="music_list.jsp?pageNow=<%=pageNow+1%>">
								<span>&raquo;</span>
							</a>
						</li>
					</ul>
				</div>