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-15 17:48:32 +08:00
parent 61ec7c9468
commit 8150aa63d1
8 changed files with 239 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,10 +1,12 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-DOM</title> <title>JS-DOM</title>
</head> </head>
<body> <body>
<h1 id="title1">11111</h1> <h1 id="title1">11111</h1>
@@ -12,7 +14,11 @@
<h1>33333</h1> <h1>33333</h1>
<script> <script>
// let h1 = document.querySelector('#title1');
// let h1 = document.querySelector('h1');
let h1 = document.querySelectorAll('h1');
h1[1].innerHTML = '44444';
</script> </script>
</body> </body>
</html> </html>

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

@@ -11,7 +11,25 @@
<input type="button" id="btn2" value="点我一下试试2"> <input type="button" id="btn2" value="点我一下试试2">
<script> <script>
//事件监听
// 1. 事件监听
// 事件源.事件类型 = 事件处理函数
// 事件源.事件类型 = function () {
// 事件处理代码
// }
// document.querySelector('#btn1').addEventListener('click', function () {
// console.log("试试就试试");
// })
//事件监听 可多次绑定同一事件
document.querySelector('#btn1').addEventListener('click', () => {
console.log("试试就试试");
})
//事件绑定早期写法 如果多次绑定 后绑定的会覆盖先绑定的
document.querySelector('#btn2').onclick = function () {
console.log("试试就试试2");
}
</script> </script>
</body> </body>
</html> </html>

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

@@ -259,7 +259,15 @@
<script> <script>
//通过JS为上述的表格中数据行添加事件监听, 实现鼠标进入后, 背景色#f2e2e2; 鼠标离开后, 背景色需要设置为#fff; (JS新版本的语法) //通过JS为上述的表格中数据行添加事件监听, 实现鼠标进入后, 背景色#f2e2e2; 鼠标离开后, 背景色需要设置为#fff; (JS新版本的语法)
let trs = document.querySelectorAll('tbody tr');
trs.forEach(tr => {
tr.addEventListener('mouseenter', () => {
tr.style.backgroundColor = '#f2e2e2';
})
tr.addEventListener('mouseleave', () => {
tr.style.backgroundColor = '#fff';
})
})
</script> </script>
</body> </body>
</html> </html>

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

@@ -38,53 +38,8 @@
<td>优秀</td> <td>优秀</td>
</tr> </tr>
</table> </table>
<!-- 引入JS文件 -->
<script> <script src="./js/eventDemo.js" type="module"></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> </body>
</html> </html>

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

@@ -1,12 +1,29 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue-快速入门</title> <title>Vue-快速入门</title>
</head> </head>
<body> <body>
<div id="app">
<h1>{{ msg }}</h1>
<h1>{{count}}</h1>
</div>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
</body> createApp({
</html> data() {
return {
msg: 'Hello Vue!',
count:100
}
}
}).mount('#app')
</script>
<!-- 就是下面这行多余的，需要删除 -->
</body>

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

@@ -1,29 +1,41 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Tlias智能学习辅助系统</title> <title>Tlias智能学习辅助系统</title>
<style> <style>
/* 导航栏样式 */ /* 导航栏样式 */
.navbar { .navbar {
background-color: #b5b3b3; /* 灰色背景 */ background-color: #b5b3b3;
/* 灰色背景 */
display: flex; /* flex弹性布局 */
justify-content: space-between; /* 左右对齐 */
padding: 10px; /* 内边距 */ display: flex;
align-items: center; /* 垂直居中 */ /* flex弹性布局 */
justify-content: space-between;
/* 左右对齐 */
padding: 10px;
/* 内边距 */
align-items: center;
/* 垂直居中 */
} }
.navbar h1 { .navbar h1 {
margin: 0; /* 移除默认的上下外边距 */ margin: 0;
font-weight: bold; /* 加粗 */ /* 移除默认的上下外边距 */
font-weight: bold;
/* 加粗 */
color: white; color: white;
/* 设置字体为楷体 */ /* 设置字体为楷体 */
font-family: "楷体"; font-family: "楷体";
} }
.navbar a { .navbar a {
color: white; /* 链接颜色为白色 */ color: white;
text-decoration: none; /* 移除下划线 */ /* 链接颜色为白色 */
text-decoration: none;
/* 移除下划线 */
} }
/* 搜索表单样式 */ /* 搜索表单样式 */
@@ -31,15 +43,22 @@
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
align-items: center; align-items: center;
gap: 10px; /* 控件之间的间距 */ gap: 10px;
/* 控件之间的间距 */
margin: 20px 0; margin: 20px 0;
} }
.search-form input[type="text"], .search-form select {
padding: 5px; /* 输入框内边距 */ .search-form input[type="text"],
width: 260px; /* 宽度 */ .search-form select {
padding: 5px;
/* 输入框内边距 */
width: 260px;
/* 宽度 */
} }
.search-form button { .search-form button {
padding: 5px 15px; /* 按钮内边距 */ padding: 5px 15px;
/* 按钮内边距 */
} }
/* 表格样式 */ /* 表格样式 */
@@ -47,15 +66,22 @@
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
} }
th, td {
border: 1px solid #ddd; /* 边框 */ th,
padding: 8px; /* 单元格内边距 */ td {
text-align: center; /* 左对齐 */ border: 1px solid #ddd;
/* 边框 */
padding: 8px;
/* 单元格内边距 */
text-align: center;
/* 左对齐 */
} }
th { th {
background-color: #f2f2f2; background-color: #f2f2f2;
font-weight: bold; font-weight: bold;
} }
.avatar { .avatar {
width: 30px; width: 30px;
height: 30px; height: 30px;
@@ -63,19 +89,26 @@
/* 页脚样式 */ /* 页脚样式 */
.footer { .footer {
background-color: #b5b3b3; /* 灰色背景 */ background-color: #b5b3b3;
color: white; /* 白色文字 */ /* 灰色背景 */
text-align: center; /* 居中文本 */ color: white;
padding: 10px 0; /* 上下内边距 */ /* 白色文字 */
text-align: center;
/* 居中文本 */
padding: 10px 0;
/* 上下内边距 */
margin-top: 30px; margin-top: 30px;
} }
#container { #container {
width: 80%; /* 宽度为80% */ width: 80%;
margin: 0 auto; /* 水平居中 */ /* 宽度为80% */
margin: 0 auto;
/* 水平居中 */
} }
</style> </style>
</head> </head>
<body> <body>
<div id="container"> <div id="container">
<!-- 顶部导航栏 --> <!-- 顶部导航栏 -->
@@ -83,21 +116,22 @@
<h1>Tlias智能学习辅助系统</h1> <h1>Tlias智能学习辅助系统</h1>
<a href="#">退出登录</a> <a href="#">退出登录</a>
</div> </div>
{{searchFrom}}
<!-- 搜索区域 -->
<!-- 搜索表单区域 --> <!-- 搜索表单区域 -->
<form class="search-form" action="/search" method="post"> <form class="search-form" action="/search" method="post">
<label for="name">姓名：</label> <label for="name">姓名：</label>
<input type="text" id="name" name="name" placeholder="请输入姓名"> <input type="text" id="name" name="name" v-model="searchFrom.name" placeholder="请输入姓名">
<label for="gender">性别：</label> <label for="gender">性别：</label>
<select id="gender" name="gender"> <select id="gender" name="gender" v-model="searchFrom.gender">
<option value=""></option> <option value=""></option>
<option value="1">男</option> <option value="1">男</option>
<option value="2">女</option> <option value="2">女</option>
</select> </select>
<label for="position">职位：</label> <label for="position">职位：</label>
<select id="position" name="position"> <select id="position" name="position" v-model="searchFrom.job">
<option value=""></option> <option value=""></option>
<option value="1">班主任</option> <option value="1">班主任</option>
<option value="2">讲师</option> <option value="2">讲师</option>
@@ -115,6 +149,7 @@
<!-- 表头 --> <!-- 表头 -->
<thead> <thead>
<tr> <tr>
<th>序号</th>
<th>姓名</th> <th>姓名</th>
<th>性别</th> <th>性别</th>
<th>头像</th> <th>头像</th>
@@ -127,126 +162,38 @@
<!-- 表格主体内容 --> <!-- 表格主体内容 -->
<tbody> <tbody>
<tr> <tr v-for="(item, index) in empList" :key="item.id">
<td>令狐冲</td> <td>{{index+1}}</td>
<td>男</td> <td>{{item.name}}</td>
<td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="令狐冲"></td> <td>{{item.gender === 1 ? '男' : '女'}}</td>
<td>讲师</td> <!-- <td><img class="avatar" src="{{item.image}}" alt=item.name></td> -->
<td>2021-06-15</td> <!-- <td><img class="avatar" :src="item.image" alt="{{item.name}}"></td> -->
<td>2024-09-16 15:30</td> <td><img class="avatar" v-bind:src="item.image" :alt="item.name"></td>
<td class="action-buttons"> <!-- <td>{{item.job === "1" ? '班主任' : (item.job === "2" ? '讲师' : (item.job === "3" ? '学工主管' : (item.job
<button type="button">编辑</button> === "4" ? '教研主管' : '咨询师')))}}</td> -->
<button type="button">删除</button> <td>
</td> <span v-if="item.job == 1">班主任</span>
</tr> <span v-else-if="item.job == 2">讲师</span>
<tr> <span v-else-if="item.job == 3">学工主管</span>
<td>任盈盈</td> <span v-else-if="item.job == 4">教研主管</span>
<td>女</td> <span v-else-if="item.job == 5">咨询师</span>
<td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="任盈盈"></td> <span v-else>其他</span>
<td>咨询师</td> <!-- v-show使用 -->
<td>2021-07-20</td> <!-- <td v-show="item.job == 1">讲师</td>
<td>2024-09-17 09:00</td> <td v-show="item.job == 2">助教</td>
<td class="action-buttons"> <td v-show="item.job == 3">学工主管</td>
<button type="button">编辑</button> <td v-show="item.job == 4">教研主管</td>
<button type="button">删除</button> <td v-show="item.job == 5">咨询师</td>
</td> <td v-else>其他</td> -->
</tr> </td>
<tr> <td>{{item.entrydate}}</td>
<td>向问天</td> <td>{{item.updatetime}}</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"> <td class="action-buttons">
<button type="button">编辑</button> <button type="button">编辑</button>
<button type="button">删除</button> <button type="button">删除</button>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@@ -256,46 +203,54 @@
<p>版权所有 Copyright 2006-2024 All Rights Reserved</p> <p>版权所有 Copyright 2006-2024 All Rights Reserved</p>
</footer> </footer>
</div> </div>
<script type="module"> <script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js' import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({ createApp({
data() { data() {
return { return {
empList: [ searchFrom: {
{ "id": 1, name: '',
"name": "谢逊", gender: '',
"image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/4.jpg", job: ''
"gender": 1, },
"job": "1", empList: [
"entrydate": "2023-06-09", {
"updatetime": "2024-09-30T14:59:38" "id": 1,
}, "name": "谢逊",
{ "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/4.jpg",
"id": 2, "gender": 1,
"name": "韦一笑", "job": "1",
"image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg", "entrydate": "2023-06-09",
"gender": 1, "updatetime": "2024-09-30T14:59:38"
"job": "1", },
"entrydate": "2020-05-09", {
"updatetime": "2024-09-01T00:00:00" "id": 2,
}, "name": "韦一笑",
{ "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg",
"id": 3, "gender": 1,
"name": "黛绮丝", "job": "1",
"image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/2.jpg", "entrydate": "2020-05-09",
"gender": 2, "updatetime": "2024-09-01T00:00:00"
"job": "2", },
"entrydate": "2021-06-01", {
"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",
}).mount('#container') "entrydate": "2021-06-01",
"updatetime": "2024-09-01T00:00:00"
}
]
}
}
}).mount('#container')
</script> </script>
</body> </body>
</html> </html>

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

@@ -0,0 +1,46 @@
import { printLog } from "./utils.js";
//click: 鼠标点击事件
document.querySelector('#b2').addEventListener('click', () => {
printLog("我被点击了...");
})
//mouseenter: 鼠标移入
document.querySelector('#last').addEventListener('mouseenter', () => {
printLog("鼠标移入了...");
})
//mouseleave: 鼠标移出
document.querySelector('#last').addEventListener('mouseleave', () => {
printLog("鼠标移出了...");
})
//keydown: 某个键盘的键被按下
document.querySelector('#username').addEventListener('keydown', () => {
printLog("键盘被按下了...");
})
//keyup: 某个键盘的键被抬起
document.querySelector('#username').addEventListener('keyup', () => {
printLog("键盘被抬起了...");
})
//blur: 失去焦点事件
document.querySelector('#age').addEventListener('blur', () => {
printLog("失去焦点...");
})
//focus: 元素获得焦点
document.querySelector('#age').addEventListener('focus', () => {
printLog("获得焦点...");
})
//input: 用户输入时触发
document.querySelector('#age').addEventListener('input', () => {
printLog("用户输入时触发...");
})
//submit: 提交表单事件
document.querySelector('form').addEventListener('submit', () => {
alert("表单被提交了...");
})

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

@@ -0,0 +1,3 @@
export function printLog(message) {
console.log(message);
}