软帝实训第一周总结

最新推荐文章于 2021-11-12 21:34:01 发布

Asshead_

最新推荐文章于 2021-11-12 21:34:01 发布

阅读量724

点赞数

分类专栏：总结文章标签：实训总结

本文链接：https://blog.csdn.net/Asshead_/article/details/90515276

版权

总结专栏收录该内容

2 篇文章 0 订阅

订阅专栏

经过本周实训，在前端方面让我的基础知识更加扎实，让我更加了解网页的布局，能更加熟练的使用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运行环境，并编写了一个helloWord程序
配置环境变量（系统变量）

JAVA_HOME：C:\Program Files\Java\jdk1.8.0_101(JDK安装所在路径)
Path：%JAVA_HOME%\bin

第二天

上午熟悉了eclipse软件的运用，并用五行代码编了一个游戏，当然最重要的还是那个导入的文件，还做了一个类似于QQ的聊天小程序，实现了客户端与服务器的连接通信。

五行代码：

 // 1.创建游戏的窗体
 	GameFrame gf = new GameFrame();
 	
 // 2.设置游戏的标题
 	gf.setTitle("王校长吃热狗");
 	
// 3.设置窗体的大小
 	gf.setSize(gf.getScreenWidth(),gf.getScreenHeight());
 	
//  4.将游戏主面板加入窗体
 	gf.add(new GamePanel());
 	
// 5.启动游戏
 	gf.startGame();

实现客户端与服务器的连接通信：

//连接到指定ip地址，指定端口的服务器(建立连接)
 	Socket s = new Socket("192.168.2.147",8888);
 	
 //获取基于Socket的输出流
     OutputStream os = s.getOutputStream();
 
 //将低级流包装为高级流
      PrintWriter pw = new PrintWriter(os);
 
 //创建一个文本扫描对象，扫描标准输入流（控制台）中的内容
      Scanner sc = new Scanner(System.in);

下午用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 +='<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">'+fmtSize(m.size)+'</div>';
	html +='</div>';
}
//将生成的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();
	}
}