xdr_gitea/JavaWeb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

第二天

Browse Source
This commit is contained in:
syx_computer
2025-10-13 10:15:32 +08:00
parent 2e4fbfc22c
commit 61ec7c9468
18 changed files with 16637 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
02. 前端Web基础(JS+Vue+Ajax)/JS-Vue/01. JS-引入方式.html Normal file
View File

@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-引入方式</title>
</head>
<body>
<!-- <script>
//内部脚本
alert('hello js');
</script> -->
//外部脚本
<script src="./js/demo.js"></script>
</body>
</html>

27
02. 前端Web基础(JS+Vue+Ajax)/JS-Vue/02. JS-基础语法.html Normal file
View File

@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-基础语法</title>
</head>
<body>
<script>
// //声明的变量
// var a = 10;
// a = "hello js";
// alert(a);
//声明的常量
const PI = 3.14;
// PI = 5.0;
// console.log(PI);
document.write(PI);
</script>
</body>
</html>

38
02. 前端Web基础(JS+Vue+Ajax)/JS-Vue/03. JS-数据类型.html Normal file
View File

@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-数据类型</title>
</head>
<body>
<script>
//1. 数据类型
// alert(typeof 10);
// alert(typeof 1.5);
// alert(typeof true);
// alert(typeof false);
// alert(typeof "Hello");
// alert(typeof 'JS');
// alert(typeof `JavaScript`);
// alert(typeof null);
// let a ;
// alert(typeof a);
// 2.模板字符串
let name = `小王`;
let age = 18;
console.log(`我是${name},我今年${age}岁`);
console.log('我是' + name + '，我今年' + age + '岁');
</script>
</body>
</html>

35
02. 前端Web基础(JS+Vue+Ajax)/JS-Vue/04. JS-函数.html Normal file
View File

@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-函数</title>
</head>
<body>
<script>
// function add(a, b) {
// return a + b;
// }
// let c = add(10, 10);
// console.log(c);
// let a = (a, b) => {
// return a + b;
// }
// let c = a(10, 20);
// console.log(c);
let a = function (a, b) {
return a + b;
}
let c = a(10, 10);
console.log(c);
</script>
</body>
</html>

26
02. 前端Web基础(JS+Vue+Ajax)/JS-Vue/05. JS-自定义对象.html Normal file
View File

@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-函数</title>
</head>
<body>
<script>
let use = {
name: '张三',
age: 18,
show: function () {
alert(this.name + ',年龄' + this.age);
}
};
// use.show();
// alert(use.name);
// alert(use);
alert(JSON.stringify(use));
</script>
</body>
</html>

266
02. 前端Web基础(JS+Vue+Ajax)/JS-Vue/06. JS-案例-员工列表.html Normal file
View File

@@ -0,0 +1,266 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Tlias智能学习辅助系统</title>
<style>
/* 导航栏样式 */
.navbar {
background-color: #b5b3b3; /* 灰色背景 */
display: flex; /* flex弹性布局 */
justify-content: space-between; /* 左右对齐 */
padding: 10px; /* 内边距 */
align-items: center; /* 垂直居中 */
}
.navbar h1 {
margin: 0; /* 移除默认的上下外边距 */
font-weight: bold; /* 加粗 */
color: white;
/* 设置字体为楷体 */
font-family: "楷体";
}
.navbar a {
color: white; /* 链接颜色为白色 */
text-decoration: none; /* 移除下划线 */
}
/* 搜索表单样式 */
.search-form {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 10px; /* 控件之间的间距 */
margin: 20px 0;
}
.search-form input[type="text"], .search-form select {
padding: 5px; /* 输入框内边距 */
width: 260px; /* 宽度 */
}
.search-form button {
padding: 5px 15px; /* 按钮内边距 */
}
/* 表格样式 */
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd; /* 边框 */
padding: 8px; /* 单元格内边距 */
text-align: center; /* 左对齐 */
}
th {
background-color: #f2f2f2;
font-weight: bold;
}
.avatar {
width: 30px;
height: 30px;
}
/* 页脚样式 */
.footer {
background-color: #b5b3b3; /* 灰色背景 */
color: white; /* 白色文字 */
text-align: center; /* 居中文本 */
padding: 10px 0; /* 上下内边距 */
margin-top: 30px;
}
#container {
width: 80%; /* 宽度为80% */
margin: 0 auto; /* 水平居中 */
}
</style>
</head>
<body>
<div id="container">
<!-- 顶部导航栏 -->
<div class="navbar">
<h1>Tlias智能学习辅助系统</h1>
<a href="#">退出登录</a>
</div>
<!-- 搜索表单区域 -->
<form class="search-form" action="/search" method="post">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" placeholder="请输入姓名">
<label for="gender">性别：</label>
<select id="gender" name="gender">
<option value=""></option>
<option value="1">男</option>
<option value="2">女</option>
</select>
<label for="position">职位：</label>
<select id="position" name="position">
<option value=""></option>
<option value="1">班主任</option>
<option value="2">讲师</option>
<option value="3">学工主管</option>
<option value="4">教研主管</option>
<option value="5">咨询师</option>
</select>
<button type="submit">查询</button>
<button type="reset">清空</button>
</form>
<!-- 表格展示区 -->
<table>
<!-- 表头 -->
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>头像</th>
<th>职位</th>
<th>入职日期</th>
<th>最后操作时间</th>
<th>操作</th>
</tr>
</thead>
<!-- 表格主体内容 -->
<tbody>
<tr>
<td>令狐冲</td>
<td>男</td>
<td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="令狐冲"></td>
<td>讲师</td>
<td>2021-06-15</td>
<td>2024-09-16 15:30</td>
<td class="action-buttons">
<button type="button">编辑</button>
<button type="button">删除</button>
</td>
</tr>
<tr>
<td>任盈盈</td>
<td>女</td>
<td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="任盈盈"></td>
<td>咨询师</td>
<td>2021-07-20</td>
<td>2024-09-17 09:00</td>
<td class="action-buttons">
<button type="button">编辑</button>
<button type="button">删除</button>
</td>
</tr>
<tr>
<td>向问天</td>
<td>男</td>
<td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td>
<td>班主任</td>
<td>2021-05-01</td>
<td>2024-09-15 17:45</td>
<td class="action-buttons">
<button type="button">编辑</button>
<button type="button">删除</button>
</td>
</tr>
<tr>
<td>任我行</td>
<td>男</td>
<td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td>
<td>教研主管</td>
<td>2021-05-01</td>
<td>2024-09-15 17:45</td>
<td class="action-buttons">
<button type="button">编辑</button>
<button type="button">删除</button>
</td>
</tr>
<tr>
<td>田伯光</td>
<td>男</td>
<td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="令狐冲"></td>
<td>班主任</td>
<td>2021-06-15</td>
<td>2024-09-16 15:30</td>
<td class="action-buttons">
<button type="button">编辑</button>
<button type="button">删除</button>
</td>
</tr>
<tr>
<td>不戒</td>
<td>女</td>
<td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="任盈盈"></td>
<td>班主任</td>
<td>2021-07-20</td>
<td>2024-09-17 09:00</td>
<td class="action-buttons">
<button type="button">编辑</button>
<button type="button">删除</button>
</td>
</tr>
<tr>
<td>左冷禅</td>
<td>男</td>
<td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td>
<td>班主任</td>
<td>2021-05-01</td>
<td>2024-09-15 17:45</td>
<td class="action-buttons">
<button type="button">编辑</button>
<button type="button">删除</button>
</td>
</tr>
<tr>
<td>定逸</td>
<td>女</td>
<td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td>
<td>班主任</td>
<td>2021-05-01</td>
<td>2024-09-15 17:45</td>
<td class="action-buttons">
<button type="button">编辑</button>
<button type="button">删除</button>
</td>
</tr>
<tr>
<td>东方兄弟</td>
<td>男</td>
<td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td>
<td>讲师</td>
<td>2021-05-01</td>
<td>2024-09-15 17:45</td>
<td class="action-buttons">
<button type="button">编辑</button>
<button type="button">删除</button>
</td>
</tr>
<tr>
<td>金庸</td>
<td>男</td>
<td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td>
<td>咨询师</td>
<td>2021-05-01</td>
<td>2024-09-15 17:45</td>
<td class="action-buttons">
<button type="button">编辑</button>
<button type="button">删除</button>
</td>
</tr>
</tbody>
</table>
<!-- 页脚版权区域 -->
<footer class="footer">
<p>江苏传智播客教育科技股份有限公司</p>
<p>版权所有 Copyright 2006-2024 All Rights Reserved</p>
</footer>
</div>
<script>
//通过JS实现上述表格中数据行的隔行换色效果, 奇数行背景色设置为 #f2e2e2, 偶数行背景色设置为 #e6f7ff (JS新语法实现)
</script>
</body>
</html>

18
02. 前端Web基础(JS+Vue+Ajax)/JS-Vue/07. JS-DOM.html Normal file
View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-DOM</title>
</head>
<body>
<h1 id="title1">11111</h1>
<h1>22222</h1>
<h1>33333</h1>
<script>
</script>
</body>
</html>

17
02. 前端Web基础(JS+Vue+Ajax)/JS-Vue/08. JS-事件监听.html Normal file
View File

@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS事件</title>
</head>
<body>
<input type="button" id="btn1" value="点我一下试试1">
<input type="button" id="btn2" value="点我一下试试2">
<script>
</script>
</body>
</html>

265
02. 前端Web基础(JS+Vue+Ajax)/JS-Vue/09. JS-案例-员工列表.html Normal file
View File

@@ -0,0 +1,265 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Tlias智能学习辅助系统</title>
<style>
/* 导航栏样式 */
.navbar {
background-color: #b5b3b3; /* 灰色背景 */
display: flex; /* flex弹性布局 */
justify-content: space-between; /* 左右对齐 */
padding: 10px; /* 内边距 */
align-items: center; /* 垂直居中 */
}
.navbar h1 {
margin: 0; /* 移除默认的上下外边距 */
font-weight: bold; /* 加粗 */
color: white;
/* 设置字体为楷体 */
font-family: "楷体";
}
.navbar a {
color: white; /* 链接颜色为白色 */
text-decoration: none; /* 移除下划线 */
}
/* 搜索表单样式 */
.search-form {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 10px; /* 控件之间的间距 */
margin: 20px 0;
}
.search-form input[type="text"], .search-form select {
padding: 5px; /* 输入框内边距 */
width: 260px; /* 宽度 */
}
.search-form button {
padding: 5px 15px; /* 按钮内边距 */
}
/* 表格样式 */
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd; /* 边框 */
padding: 8px; /* 单元格内边距 */
text-align: center; /* 左对齐 */
}
th {
background-color: #f2f2f2;
font-weight: bold;
}
.avatar {
width: 30px;
height: 30px;
}
/* 页脚样式 */
.footer {
background-color: #b5b3b3; /* 灰色背景 */
color: white; /* 白色文字 */
text-align: center; /* 居中文本 */
padding: 10px 0; /* 上下内边距 */
margin-top: 30px;
}
#container {
width: 80%; /* 宽度为80% */
margin: 0 auto; /* 水平居中 */
}
</style>
</head>
<body>
<div id="container">
<!-- 顶部导航栏 -->
<div class="navbar">
<h1>Tlias智能学习辅助系统</h1>
<a href="#">退出登录</a>
</div>
<!-- 搜索表单区域 -->
<form class="search-form" action="/search" method="post">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" placeholder="请输入姓名">
<label for="gender">性别：</label>
<select id="gender" name="gender">
<option value=""></option>
<option value="1">男</option>
<option value="2">女</option>
</select>
<label for="position">职位：</label>
<select id="position" name="position">
<option value=""></option>
<option value="1">班主任</option>
<option value="2">讲师</option>
<option value="3">学工主管</option>
<option value="4">教研主管</option>
<option value="5">咨询师</option>
</select>
<button type="submit">查询</button>
<button type="reset">清空</button>
</form>
<!-- 表格展示区 -->
<table>
<!-- 表头 -->
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>头像</th>
<th>职位</th>
<th>入职日期</th>
<th>最后操作时间</th>
<th>操作</th>
</tr>
</thead>
<!-- 表格主体内容 -->
<tbody>
<tr>
<td>令狐冲</td>
<td>男</td>
<td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="令狐冲"></td>
<td>讲师</td>
<td>2021-06-15</td>
<td>2024-09-16 15:30</td>
<td class="action-buttons">
<button type="button">编辑</button>
<button type="button">删除</button>
</td>
</tr>
<tr>
<td>任盈盈</td>
<td>女</td>
<td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="任盈盈"></td>
<td>咨询师</td>
<td>2021-07-20</td>
<td>2024-09-17 09:00</td>
<td class="action-buttons">
<button type="button">编辑</button>
<button type="button">删除</button>
</td>
</tr>
<tr>
<td>向问天</td>
<td>男</td>
<td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td>
<td>班主任</td>
<td>2021-05-01</td>
<td>2024-09-15 17:45</td>
<td class="action-buttons">
<button type="button">编辑</button>
<button type="button">删除</button>
</td>
</tr>
<tr>
<td>任我行</td>
<td>男</td>
<td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td>
<td>教研主管</td>
<td>2021-05-01</td>
<td>2024-09-15 17:45</td>
<td class="action-buttons">
<button type="button">编辑</button>
<button type="button">删除</button>
</td>
</tr>
<tr>
<td>田伯光</td>
<td>男</td>
<td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="令狐冲"></td>
<td>班主任</td>
<td>2021-06-15</td>
<td>2024-09-16 15:30</td>
<td class="action-buttons">
<button type="button">编辑</button>
<button type="button">删除</button>
</td>
</tr>
<tr>
<td>不戒</td>
<td>女</td>
<td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="任盈盈"></td>
<td>班主任</td>
<td>2021-07-20</td>
<td>2024-09-17 09:00</td>
<td class="action-buttons">
<button type="button">编辑</button>
<button type="button">删除</button>
</td>
</tr>
<tr>
<td>左冷禅</td>
<td>男</td>
<td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td>
<td>班主任</td>
<td>2021-05-01</td>
<td>2024-09-15 17:45</td>
<td class="action-buttons">
<button type="button">编辑</button>
<button type="button">删除</button>
</td>
</tr>
<tr>
<td>定逸</td>
<td>女</td>
<td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td>
<td>班主任</td>
<td>2021-05-01</td>
<td>2024-09-15 17:45</td>
<td class="action-buttons">
<button type="button">编辑</button>
<button type="button">删除</button>
</td>
</tr>
<tr>
<td>东方兄弟</td>
<td>男</td>
<td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td>
<td>讲师</td>
<td>2021-05-01</td>
<td>2024-09-15 17:45</td>
<td class="action-buttons">
<button type="button">编辑</button>
<button type="button">删除</button>
</td>
</tr>
<tr>
<td>金庸</td>
<td>男</td>
<td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td>
<td>咨询师</td>
<td>2021-05-01</td>
<td>2024-09-15 17:45</td>
<td class="action-buttons">
<button type="button">编辑</button>
<button type="button">删除</button>
</td>
</tr>
</tbody>
</table>
<!-- 页脚版权区域 -->
<footer class="footer">
<p>江苏传智播客教育科技股份有限公司</p>
<p>版权所有 Copyright 2006-2024 All Rights Reserved</p>
</footer>
</div>
<script>
//通过JS为上述的表格中数据行添加事件监听, 实现鼠标进入后, 背景色#f2e2e2; 鼠标离开后, 背景色需要设置为#fff; (JS新版本的语法)
</script>
</body>
</html>

91
02. 前端Web基础(JS+Vue+Ajax)/JS-Vue/10. JS-常见事件.html Normal file
View File

@@ -0,0 +1,91 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-事件-常见事件</title>
</head>
<body>
<form action="" style="text-align: center;">
<input type="text" name="username" id="username">
<input type="text" name="age" id="age">
<input id="b1" type="submit" value="提交">
<input id="b2" type="button" value="单击事件">
</form>
<br><br><br>
<table width="800px" border="1" cellspacing="0" align="center">
<tr>
<th>学号</th>
<th>姓名</th>
<th>分数</th>
<th>评语</th>
</tr>
<tr align="center">
<td>001</td>
<td>张三</td>
<td>90</td>
<td>很优秀</td>
</tr>
<tr align="center" id="last">
<td>002</td>
<td>李四</td>
<td>92</td>
<td>优秀</td>
</tr>
</table>
<script>
//click: 鼠标点击事件
document.querySelector('#b2').addEventListener('click', () => {
console.log("我被点击了...");
})
//mouseenter: 鼠标移入
document.querySelector('#last').addEventListener('mouseenter', () => {
console.log("鼠标移入了...");
})
//mouseleave: 鼠标移出
document.querySelector('#last').addEventListener('mouseleave', () => {
console.log("鼠标移出了...");
})
//keydown: 某个键盘的键被按下
document.querySelector('#username').addEventListener('keydown', () => {
console.log("键盘被按下了...");
})
//keyup: 某个键盘的键被抬起
document.querySelector('#username').addEventListener('keyup', () => {
console.log("键盘被抬起了...");
})
//blur: 失去焦点事件
document.querySelector('#age').addEventListener('blur', () => {
console.log("失去焦点...");
})
//focus: 元素获得焦点
document.querySelector('#age').addEventListener('focus', () => {
console.log("获得焦点...");
})
//input: 用户输入时触发
document.querySelector('#age').addEventListener('input', () => {
console.log("用户输入时触发...");
})
//submit: 提交表单事件
document.querySelector('form').addEventListener('submit', () => {
alert("表单被提交了...");
})
</script>
</body>
</html>

90
02. 前端Web基础(JS+Vue+Ajax)/JS-Vue/11. JS-常见事件(优化).html Normal file
View File

@@ -0,0 +1,90 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-事件-常见事件</title>
</head>
<body>
<form action="" style="text-align: center;">
<input type="text" name="username" id="username">
<input type="text" name="age" id="age">
<input id="b1" type="submit" value="提交">
<input id="b2" type="button" value="单击事件">
</form>
<br><br><br>
<table width="800px" border="1" cellspacing="0" align="center">
<tr>
<th>学号</th>
<th>姓名</th>
<th>分数</th>
<th>评语</th>
</tr>
<tr align="center">
<td>001</td>
<td>张三</td>
<td>90</td>
<td>很优秀</td>
</tr>
<tr align="center" id="last">
<td>002</td>
<td>李四</td>
<td>92</td>
<td>优秀</td>
</tr>
</table>
<script>
//click: 鼠标点击事件
document.querySelector('#b2').addEventListener('click', () => {
console.log("我被点击了...");
})
//mouseenter: 鼠标移入
document.querySelector('#last').addEventListener('mouseenter', () => {
console.log("鼠标移入了...");
})
//mouseleave: 鼠标移出
document.querySelector('#last').addEventListener('mouseleave', () => {
console.log("鼠标移出了...");
})
//keydown: 某个键盘的键被按下
document.querySelector('#username').addEventListener('keydown', () => {
console.log("键盘被按下了...");
})
//keyup: 某个键盘的键被抬起
document.querySelector('#username').addEventListener('keyup', () => {
console.log("键盘被抬起了...");
})
//blur: 失去焦点事件
document.querySelector('#age').addEventListener('blur', () => {
console.log("失去焦点...");
})
//focus: 元素获得焦点
document.querySelector('#age').addEventListener('focus', () => {
console.log("获得焦点...");
})
//input: 用户输入时触发
document.querySelector('#age').addEventListener('input', () => {
console.log("用户输入时触发...");
})
//submit: 提交表单事件
document.querySelector('form').addEventListener('submit', () => {
alert("表单被提交了...");
})
</script>
</body>
</html>

12
02. 前端Web基础(JS+Vue+Ajax)/JS-Vue/12. Vue-快速入门.html Normal file
View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue-快速入门</title>
</head>
<body>
</body>
</html>

301
02. 前端Web基础(JS+Vue+Ajax)/JS-Vue/13. Vue-案例-员工列表(常用指令).html Normal file
View File

@@ -0,0 +1,301 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Tlias智能学习辅助系统</title>
<style>
/* 导航栏样式 */
.navbar {
background-color: #b5b3b3; /* 灰色背景 */
display: flex; /* flex弹性布局 */
justify-content: space-between; /* 左右对齐 */
padding: 10px; /* 内边距 */
align-items: center; /* 垂直居中 */
}
.navbar h1 {
margin: 0; /* 移除默认的上下外边距 */
font-weight: bold; /* 加粗 */
color: white;
/* 设置字体为楷体 */
font-family: "楷体";
}
.navbar a {
color: white; /* 链接颜色为白色 */
text-decoration: none; /* 移除下划线 */
}
/* 搜索表单样式 */
.search-form {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 10px; /* 控件之间的间距 */
margin: 20px 0;
}
.search-form input[type="text"], .search-form select {
padding: 5px; /* 输入框内边距 */
width: 260px; /* 宽度 */
}
.search-form button {
padding: 5px 15px; /* 按钮内边距 */
}
/* 表格样式 */
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd; /* 边框 */
padding: 8px; /* 单元格内边距 */
text-align: center; /* 左对齐 */
}
th {
background-color: #f2f2f2;
font-weight: bold;
}
.avatar {
width: 30px;
height: 30px;
}
/* 页脚样式 */
.footer {
background-color: #b5b3b3; /* 灰色背景 */
color: white; /* 白色文字 */
text-align: center; /* 居中文本 */
padding: 10px 0; /* 上下内边距 */
margin-top: 30px;
}
#container {
width: 80%; /* 宽度为80% */
margin: 0 auto; /* 水平居中 */
}
</style>
</head>
<body>
<div id="container">
<!-- 顶部导航栏 -->
<div class="navbar">
<h1>Tlias智能学习辅助系统</h1>
<a href="#">退出登录</a>
</div>
<!-- 搜索表单区域 -->
<form class="search-form" action="/search" method="post">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" placeholder="请输入姓名">
<label for="gender">性别：</label>
<select id="gender" name="gender">
<option value=""></option>
<option value="1">男</option>
<option value="2">女</option>
</select>
<label for="position">职位：</label>
<select id="position" name="position">
<option value=""></option>
<option value="1">班主任</option>
<option value="2">讲师</option>
<option value="3">学工主管</option>
<option value="4">教研主管</option>
<option value="5">咨询师</option>
</select>
<button type="submit">查询</button>
<button type="reset">清空</button>
</form>
<!-- 表格展示区 -->
<table>
<!-- 表头 -->
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>头像</th>
<th>职位</th>
<th>入职日期</th>
<th>最后操作时间</th>
<th>操作</th>
</tr>
</thead>
<!-- 表格主体内容 -->
<tbody>
<tr>
<td>令狐冲</td>
<td>男</td>
<td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="令狐冲"></td>
<td>讲师</td>
<td>2021-06-15</td>
<td>2024-09-16 15:30</td>
<td class="action-buttons">
<button type="button">编辑</button>
<button type="button">删除</button>
</td>
</tr>
<tr>
<td>任盈盈</td>
<td>女</td>
<td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="任盈盈"></td>
<td>咨询师</td>
<td>2021-07-20</td>
<td>2024-09-17 09:00</td>
<td class="action-buttons">
<button type="button">编辑</button>
<button type="button">删除</button>
</td>
</tr>
<tr>
<td>向问天</td>
<td>男</td>
<td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td>
<td>班主任</td>
<td>2021-05-01</td>
<td>2024-09-15 17:45</td>
<td class="action-buttons">
<button type="button">编辑</button>
<button type="button">删除</button>
</td>
</tr>
<tr>
<td>任我行</td>
<td>男</td>
<td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td>
<td>教研主管</td>
<td>2021-05-01</td>
<td>2024-09-15 17:45</td>
<td class="action-buttons">
<button type="button">编辑</button>
<button type="button">删除</button>
</td>
</tr>
<tr>
<td>田伯光</td>
<td>男</td>
<td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="令狐冲"></td>
<td>班主任</td>
<td>2021-06-15</td>
<td>2024-09-16 15:30</td>
<td class="action-buttons">
<button type="button">编辑</button>
<button type="button">删除</button>
</td>
</tr>
<tr>
<td>不戒</td>
<td>女</td>
<td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="任盈盈"></td>
<td>班主任</td>
<td>2021-07-20</td>
<td>2024-09-17 09:00</td>
<td class="action-buttons">
<button type="button">编辑</button>
<button type="button">删除</button>
</td>
</tr>
<tr>
<td>左冷禅</td>
<td>男</td>
<td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td>
<td>班主任</td>
<td>2021-05-01</td>
<td>2024-09-15 17:45</td>
<td class="action-buttons">
<button type="button">编辑</button>
<button type="button">删除</button>
</td>
</tr>
<tr>
<td>定逸</td>
<td>女</td>
<td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td>
<td>班主任</td>
<td>2021-05-01</td>
<td>2024-09-15 17:45</td>
<td class="action-buttons">
<button type="button">编辑</button>
<button type="button">删除</button>
</td>
</tr>
<tr>
<td>东方兄弟</td>
<td>男</td>
<td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td>
<td>讲师</td>
<td>2021-05-01</td>
<td>2024-09-15 17:45</td>
<td class="action-buttons">
<button type="button">编辑</button>
<button type="button">删除</button>
</td>
</tr>
<tr>
<td>金庸</td>
<td>男</td>
<td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td>
<td>咨询师</td>
<td>2021-05-01</td>
<td>2024-09-15 17:45</td>
<td class="action-buttons">
<button type="button">编辑</button>
<button type="button">删除</button>
</td>
</tr>
</tbody>
</table>
<!-- 页脚版权区域 -->
<footer class="footer">
<p>江苏传智播客教育科技股份有限公司</p>
<p>版权所有 Copyright 2006-2024 All Rights Reserved</p>
</footer>
</div>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data() {
return {
empList: [
{ "id": 1,
"name": "谢逊",
"image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/4.jpg",
"gender": 1,
"job": "1",
"entrydate": "2023-06-09",
"updatetime": "2024-09-30T14:59:38"
},
{
"id": 2,
"name": "韦一笑",
"image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg",
"gender": 1,
"job": "1",
"entrydate": "2020-05-09",
"updatetime": "2024-09-01T00:00:00"
},
{
"id": 3,
"name": "黛绮丝",
"image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/2.jpg",
"gender": 2,
"job": "2",
"entrydate": "2021-06-01",
"updatetime": "2024-09-01T00:00:00"
}
]
}
}
}).mount('#container')
</script>
</body>
</html>

27
02. 前端Web基础(JS+Vue+Ajax)/JS-Vue/14. Axios-入门.html Normal file
View File

@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax-Axios</title>
</head>
<body>
<input type="button" value="获取数据GET" id="btnGet">
<input type="button" value="操作数据POST" id="btnPost">
<script src="js/axios.js"></script>
<script>
//发送GET请求
document.querySelector('#btnGet').addEventListener('click', () => {
})
//发送POST请求
document.querySelector('#btnPost').addEventListener('click', () => {
})
</script>
</body>
</html>

27
02. 前端Web基础(JS+Vue+Ajax)/JS-Vue/15. Axios-请求方式别名.html Normal file
View File

@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax-Axios</title>
</head>
<body>
<input type="button" value="获取数据GET" id="btnGet">
<input type="button" value="操作数据POST" id="btnPost">
<script src="js/axios.js"></script>
<script>
//发送GET请求
document.querySelector('#btnGet').addEventListener('click', () => {
})
//发送POST请求
document.querySelector('#btnPost').addEventListener('click', () => {
})
</script>
</body>
</html>

2
02. 前端Web基础(JS+Vue+Ajax)/JS-Vue/js/axios.js Normal file
View File

File diff suppressed because one or more lines are too long

1
02. 前端Web基础(JS+Vue+Ajax)/JS-Vue/js/demo.js Normal file
View File

@@ -0,0 +1 @@
alert('hello JavaScript!');

15377
02. 前端Web基础(JS+Vue+Ajax)/JS-Vue/js/vue.esm-browser.js Normal file
View File

File diff suppressed because it is too large Load Diff