实训记录

第一天

刚到实训主要是把html css js结合在一起制作了一个”爱心”,主要是css部分主要是用transform实现旋转，实现自定义动画效果和js部分的键盘按键监听，定时器效果.刚开始也没觉得有多难.

// An highlighted block
	 //初始化一个透明度
					 var opacity=0.1;
				     var set=setInterval(function(){
					   //设置span的透明度
					   opacity += 0.1;
					   span.style.opacity=opacity;
					   if(opacity>=1){
					   	//清除定时任务
					   	clearInterval(set);
					   }
					  },300);
					}

第二天

下午的前端部分，制作音乐软件的主界面，主要还是一些div 的css布局，动画效果和昨天一样,使用了css3里的一些伪类选择器、flex弹性布局、鼠标悬停效果、鼠标指针样式、文字过渡效果.总的来说下午css布局是最重要的.主要是一些基本的布局.

 .item{
	display: flex; /*弹性盒子*/
	height: 50px;
	line-height: 50px;
	font-size: 0.8em;
	border-bottom: 1px solid rgba(255,255,255,0.5);
	cursor:pointer; /*设置指针样式*/
	transition:all .5s; /*过渡效果*/
}
.item-icon{
	flex:1;
	background:url(../img/icon1.png) no-repeat;
	background-position:center center;
}
.item-name{
	flex:5;
}
.item-size{
	flex:1;
}

第三天

今天了解了下什么是json，其实就是把js代码转换成字符串格式，这样能够不止在js，在java，php中都可以读取。我们在js文件里创建伪数据,添加一些音频文件,我们把js代码数据转换成json格式然后添加到html代码中，我们在所有item类中添加了索引i，在js中创建伪数据，来连接前面已经布局好了的音乐界面，从而实现播放.

//将数据跟页面模板绑定
var html='';
for(var i=0;i<data.length;i++){
 var m=data[i];
 //console.log(m.name+'---------'+m.size);
 html+='<div class="item" data-index="'+i+'">';
 	html+='<div class="item-icon"></div>';
 	html+='<div class="item-name">'+m.name+'</div>';
 	html+='<div class="item-size">'+fmSize(m.size)+'</div>';
 html+='</div>';
}
//初始化当前播放的歌曲索引
var currentIndex =0;
//创建一个音频播放器对象
var player=document.createElement('audio');
//获取列表中的所有item项
var items=document.querySelectorAll('.item');
//遍历数组
for(var i=0;i<items.length;i++){
//为items绑定事件监听
items[i].onclick=function(){
   //获取当前列表项的data-index属性值
  currentIndex=this.dataset.index;
  //设置播放源(歌曲播放路劲
  player.src=data[currentIndex].path;
  player.play();
};
}

第四天

今天上午主要是把昨天的音乐界面功能完善，主要实现点击显示高亮，音乐图标旋转。来区分音乐播放的状态，主要是在css文件里加一个可以显示高亮的类样式，之后再加入js代码里，下午讲解数据库如何在MySQL环境下去创建表并且添加数据，对数据进行增删改查。

//开始播放
function start(){

	//设置播放源
		player.src = data[currentIndex].path;
		//启动播放		
		player.play();
		items[currentIndex].className='item active';
		//为列表项中的图标设置动画效果
		items[currentIndex].querySelector('.item-icon').className='item-icon active-play';
}

第五天

今天上午讲了数据库的查询，下午在eclipse的环境下实现了java代码连接数据库，利用了JDBC技术，可以在java代码的编译环境下对mysql进行对数据的增删改查。大概做了下整套体系的后台部分.

/**
 * 实现查询操作
 * select * from tbmusic
 * @author mrchai
 */
public class JDBCDemo2 {

	public static void main(String[] args) throws ClassNotFoundException, SQLException {
		
		//1.加载驱动
		Class.forName("com.mysql.jdbc.Driver");
		//2.获取连接
		Connection conn = DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/music","root","root");
		
		String sql = "select * from tbmusic";
		//3.获取执行sql语句的命令对象
		PreparedStatement ps = conn.prepareStatement(sql);
		//4.执行(查询操作)
		ResultSet rs = ps.executeQuery();
		//5.处理结果
		while(rs.next()){
			//获取当前结果集的一行中的每一列数据
			int id = rs.getInt("id");
			String name = rs.getString("name");
			Timestamp uptime = rs.getTimestamp("uptime");
			String artist = rs.getString("artist");
			String ablum = rs.getString("ablum");
			String style = rs.getString("style");
			String path = rs.getString("path");
			int size = rs.getInt("size");
			//输出结果
			System.out.println(name+"--"+artist+"--"+ablum+"--"+style+"--"+path);
		}
		//6.关闭资源
		rs.close();
		ps.close();
		conn.close();
	}

总结这一周学习来说还是有效果的，能动手敲代码，敲代码速度也有提升，比在学校上课还是要好些.,希望通过这一个多月的实训能够尽可能提高自己的技术，为将来找工作打基础。