经过本周实训，让我更加了解网页的布局，学会使用html+css+javascript,也了解到json。在Java方面，知道如何配置Java运行环境，知道了一些基本语句的使用。了解到如何将低级流包装为高级流，了解到客户端如何连接服务器。在MySQL方面，学习到了创表 添加删除更改数据。总的来说这一周过的非常充实，收获颇多，也提起了学习的热情，相比在学校的混混度日，现在更想做一个优秀的程序猿了。 第一天 因为是5.20所以制作了一个小案例 跳动的心
@-webkit-keyframes boom{ 30%{ transform: scale(1.1) rotate(45deg); } 50%{ transform: scale(1.2) rotate(45deg); } } 而用回车键控制心的跳动，字体由透明到显现是由js来实现的，代码如下：
//初始化跳动状态为停止 var boom = false; //为整个文档绑定按键事件 document.addEventListener('keydown',function(e){ var code = e.keyCode; //判断按下的是否是回车键 if(code === 13){ //获取整个心对象 var div = document.getElementById('love'); //获取文本控制对象 var span = document.getElementById('msg'); if(boom){ div.className = ''; span.style.opacity = 0; }else{ div.className ='start'; //初始化一个变量,表示透明度 var opacity = 0.1; var f = setInterval(function (){ opacity += 0.1; span.style.opacity = opacity; //当透明度为1时则表示完全显示,此时终止定时任务 if(opacity >= 1){ clearInterval(f); } },300); } boom = !boom; } });下午开始学习java 配置环境变量（系统变量）
JAVA_HOME：C:\Program Files\Java\jdk1.8.0_101(JDK安装所在路径) Path：%JAVA_HOME%\bin
第二天 上午熟悉了eclipse软件的运用，并做了一个小游戏，还做了一个类似于QQ的聊天程序，实现了客户端与服务器的连接通信。
下午用HTML编写了一个类似于qq音乐的程序的静态页面，里面用到了定位，flex，伪元素hover，动画等，让我更一步知道该如何布局，怎样分析网页的构造。另外了解到如何下载需要付费的音乐和下载logo图片。
第三天 今天上了前端,学习了用ajax建立音乐数据库,了解到如何用js将生成的HTML代码插入到列表中,格式化大小,了解如何精确到小数点后一位,overflow-y: scroll;//纵向内容找出部分显示滚动条,实现点击事件控制列表歌曲播放。
1将数据跟页面模板绑定
var html = ‘’; for(var i = 0; i < data.length; i++){ //获取一首歌曲对象 var m = data[i]; //console.info(m.name+’------------’+m.size) html +=’
’; html += ‘ ’; html +=’ ’+m.name+’ ’; html +=’ ’+fmtSize(m.size)+’ ’; html +=’ ’; } //将生成的HTML代码插入到列表中 document.querySelector(’.list’).innerHTML = html;2.点击事件控制列表歌曲播放,并且播放时图标旋转，背景颜色高亮。 代码如下： //初始化当前播放的歌曲索引 var currentIndex = 0; //创建音频播放器对象 var player = document.createElement(‘audio’); /1.实现点击事件控制列表歌曲播放/ //获取列表中的所有item项 var items = document.querySelectorAll(’.item’); //遍历数组,为每一个列表项绑定点击事件 for(var i=0;i<items.length;i++){ //位列表项绑定点击事件 items[i].addEventListener(‘click’,function(){ items[currentIndex].className = ‘item’; items[currentIndex].querySelector(’.item-icon’).className = ‘item-icon’; //获取当前列表项的data-index属性值 currentIndex = this.dataset.index; //播放 start(currentIndex); }); }
//开始播放 function start(){ //设置播放源(歌曲路径) player.src = data[currentIndex].path; //启动播放 player.play(); items[currentIndex].className = ‘item active’; //为列表项中的图标设置动画效果 items[currentIndex].querySelector(’.item-icon’).className = ‘item-icon active-play’; } 相关css样式：
/伪类选择器，当鼠标悬停到元素上时触发/ .item:hover{ background: rgba(0,0,0,0.2);/red green blud alpha/ color:#fff; }
/* 列表项激活效果 */ .active{ background: #41A863; color: #eee; }
.active-play{ animation: cycle 3s infinite linear; } 第四天 实现列表项激活效果，为列表项中的图标设置动画效果，安装配置数据库，并创建数据库，查看数据库，创建表、查看表，还有数据的增删改查，还有本行业的就业状况等
Mysql常用命令 连接mysql数据库服务器 mysql -uroot -p123456 查看mysql数据库中的数据库实例 show databases; 创建数据库实例(music) create database music; 使用数据库实例(music) use music; 查看当前数据库实例中的所有表 show tables; 创建一张用户表(id，账号，密码，手机号，注册时间，状态) create table tbuser ( id int primary key auto_increment, --id列，主键，自动递增 username varchar(20) not null, --用户名列 不允许为空 password varchar(40) not null default ‘123456’, --密码列 不允许为空默认值是“123456” phone varchar(15), --手机号 createtime timestamp default CURRENT_TIMESTAMP, --注册时间，默认值使用当前系统时间 status int default 0 --状态列，默认值为0（禁用） ); 查看表结构 desc tbuser; ±-----------±------------±-----±----±------------------±---------------+ | Field | Type | Null | Key | Default | Extra | ±-----------±------------±-----±----±------------------±---------------+ | id | int(11) | NO | PRI | NULL | auto_increment | | username | varchar(20) | NO | | NULL | | | password | varchar(40) | NO | | 123456 | | | phone | varchar(15) | YES | | NULL | | | createtime | timestamp | NO | | CURRENT_TIMESTAMP | | | status | int(11) | YES | | 0 | | ±-----------±------------±-----±----±------------------±---------------+
SQL语句详解 Structured Query Language （SQL：结构化查询语言）；通过类似于英语口语的命令语句对数据库的结构以及数据内容来进行操作，sql语句与平台无关（大多数关系型数据库都支持sql语句），sql语句分为以下几种类别：
DDL（数据定义语句）：一般用于对数据库表结构操作(创建表，删除表，修改表) DML（数据操作语句）：主要作用于对数据库表中的数据操作(增删改查) DCL（数据控制语句）：一般用于对数据库用户，角色权限等操作(由DBA操作) DML语句 查询用户表中的所有记录
select * from tbuser; 向用户表中添加数据(单条数据)
insert into tbuser(username,phone) values(‘softeem’,‘13688888888’);
insert into tbuser(username,password,phone,status) values(‘admin’,‘123321’,‘1868868765’,1); 向用户表中添加数据(多条数据)
insert into tbuser(username,phone) values(‘狗蛋’,‘13866666666’),(‘wangwang’,‘1587654321’); 修改数据（将”狗蛋“的密码修改为“000000”） update tbuser set password=‘000000’ where username=‘狗蛋’; 删除数据（删除id为3的记录） delete from tbuser where id=3; 查询所有被禁用的用户信息 select * from tbuser where status=0; 第五天 实现数据库的导出导入，和用Java实现数据库的连接并用Java实现对数据库的数据进行添加与查询 Java实现添加数据 public class JDBCDemo { 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”, “123456”); //准备SQL语句 String sql = “insert into tbuser(username,password,phone) value(‘mrchai’,‘123’,‘1323214567’)”;
//3.获取处理sql语句的命令对象 PreparedStatement ps = conn.prepareStatement(sql); //4.执行（更新数据） int i = ps.executeUpdate(); //5.处理结果 if(i >0) { System.out.println("添加成功"); } //6.关闭资源 ps.close(); conn.close(); }} Java实现查看数据 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”,“123456”);
String sql = "select * from tbmusic"; //3.获取执行sql语句的命令dx PreparedStatement ps = conn.prepareStatement(sql); //4.执行（查询操作） ResultSet rs = ps.executeQuery(); //5.处理结果 while(rs.next()){ //获取当前结果的一行中的每一列数据 int id = rs.getInt("id"); String name = rs.getString("name"); 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"); Timestamp uptime = rs.getTimestamp("uptime"); System.out.println(name+"--"+artist+"--"+ablum+"--"+style+"--"+path); } //6.关闭资源 rs.close(); ps.close(); conn.close(); }}
