Day35（5）-F:\硕士阶段\Java\课程资料\2025最新版JavaWeb+AI\资料\02. 前端Web基础(JS+Vue+Ajax)\资料\03. 基础代码\JS-Vue-13~16
Vue
Vue常用指令
<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="请输入姓名">
<select id="gender" name="gender">
<option value=""></option>
<option value="1">男</option>
<option value="2">女</option>
</select>
<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>
<table>
<!-- 表头 -->
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>头像</th>
<th>职位</th>
<th>入职日期</th>
<th>最后操作时间</th>
<th>操作</th>
</tr>
</thead>
{{index+1}}
{{e.name}}
{{e.gender==1?'男':'女'}}
{{e.job}}
{{e.entrydate}}
{{e.updatetime}}
<footer class="footer">
<p>江苏传智播客教育科技股份有限公司</p>
<p>版权所有 Copyright 2006-2024 All Rights Reserved</p>
</footer>
<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')
<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="请输入姓名">
<select id="gender" name="gender">
<option value=""></option>
<option value="1">男</option>
<option value="2">女</option>
</select>
<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>
<table>
<!-- 表头 -->
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>头像</th>
<th>职位</th>
<th>入职日期</th>
<th>最后操作时间</th>
<th>操作</th>
</tr>
</thead>
{{index+1}}
{{e.name}}
{{e.gender==1?'男':'女'}}
{{e.job}}
{{e.entrydate}}
{{e.updatetime}}
<footer class="footer">
<p>江苏传智播客教育科技股份有限公司</p>
<p>版权所有 Copyright 2006-2024 All Rights Reserved</p>
</footer>
<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')
<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="请输入姓名">
<select id="gender" name="gender">
<option value=""></option>
<option value="1">男</option>
<option value="2">女</option>
</select>
<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>
<table>
<!-- 表头 -->
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>头像</th>
<th>职位</th>
<th>入职日期</th>
<th>最后操作时间</th>
<th>操作</th>
</tr>
</thead>
{{index+1}}
{{e.name}}
{{e.gender==1?'男':'女'}}
班主任
讲师
学工主管
教研主管
咨询师
{{e.entrydate}}
{{e.updatetime}}
<footer class="footer">
<p>江苏传智播客教育科技股份有限公司</p>
<p>版权所有 Copyright 2006-2024 All Rights Reserved</p>
</footer>
<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')
<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" v-model="searchForm.name" placeholder="请输入姓名">
<select id="gender" name="gender" v-model="searchForm.gender">
<option value=""></option>
<option value="1">男</option>
<option value="2">女</option>
</select>
<select id="position" name="position" v-model="searchForm.job">
<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="button" @click="clear()">清空
<table>
<!-- 表头 -->
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>头像</th>
<th>职位</th>
<th>入职日期</th>
<th>最后操作时间</th>
<th>操作</th>
</tr>
</thead>
{{index+1}}
{{e.name}}
{{e.gender==1?'男':'女'}}
班主任
讲师
学工主管
教研主管
咨询师
{{e.entrydate}}
{{e.updatetime}}
<footer class="footer">
<p>江苏传智播客教育科技股份有限公司</p>
<p>版权所有 Copyright 2006-2024 All Rights Reserved</p>
</footer>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data() {
return {
searchForm:{//用于封装用户输入的查询条件
name:'',
gender:'',
job:''
},
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"
}
]
}
},
/**
//方法
methods: {
search(){
//将搜索条件输出到控制台
console.log(this.searchForm);
},
clear(){
//清空搜索条件
this.searchForm = {
name:'',
gender:'',
job:''
}
}
},
}).mount('#container')
</script>
</body>
</html>
Ajax
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
//发送GET请求
document.querySelector('#btnGet').addEventListener('click', () => {
//基于axios发送异步请求
axios({
url:'https://mock.apifox.cn/m1/3083103-0-default/emps/list',
method:'GET'
}).then((result)=>{//成功回调函数
console.log(result.data)
}).catch((error)=>{//失败回调函数
console.log(error)
})
})
//发送POST请求
document.querySelector('#btnPost').addEventListener('click', () => {
axios({
url:'https://mock.apifox.cn/m1/3083103-0-default/emps/update',
method:'POST',
data:'id=1'//POST请求方式，请求体的数据
}).then((result)=>{
console.log(result);
}).catch((error)=>{
console.log(error);
})
})
<script src="js/axios.js"></script>
<script>
//发送GET请求
document.querySelector('#btnGet').addEventListener('click', () => {
axios.get('https://mock.apifox.cn/m1/3083103-0-default/emps/list').then((result) => {
console.log(result);
}).catch((err) => {
console.log(err);
});
console.log('=============================');//这个先输出
})
//发送POST请求
document.querySelector('#btnPost').addEventListener('click', () => {
axios.post('https://mock.apifox.cn/m1/3083103-0-default/emps/update','id=1').then((result) => {
console.log(result);
}).catch((err) => {
console.log(err);
});
})
<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" v-model="searchForm.name" placeholder="请输入姓名">
<select id="gender" name="gender" v-model="searchForm.gender">
<option value=""></option>
<option value="1">男</option>
<option value="2">女</option>
</select>
<select id="position" name="position" v-model="searchForm.job">
<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="button" @click="clear()">清空
<table>
<!-- 表头 -->
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>头像</th>
<th>职位</th>
<th>入职日期</th>
<th>最后操作时间</th>
<th>操作</th>
</tr>
</thead>
{{index+1}}
{{e.name}}
{{e.gender==1?'男':'女'}}
班主任
讲师
学工主管
教研主管
咨询师
{{e.entrydate}}
{{e.updatetime}}
<footer class="footer">
<p>江苏传智播客教育科技股份有限公司</p>
<p>版权所有 Copyright 2006-2024 All Rights Reserved</p>
</footer>
<script src="js/axios.js"></script>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data() {
return {
searchForm:{//用于封装用户输入的查询条件
name:'',
gender:'',
job:''
},
//empList这里面的数据会被循环展示
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"
// }
]
}
},
/**
//方法
methods: {
async search(){
//发送ajax请求获取数据
// axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&job=${this.searchForm.job}&gender=${this.searchForm.gender}`).then((result) => {
// //将响应的数据重新赋值给empList（被for方法遍历展示）
// this.empList=result.data.data
// // result.data（第一层 data）是返回的整个返回的json
// //第二个data是整个被封装的result数据中的一个小板块
// })
let result = await axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&job=${this.searchForm.job}&gender=${this.searchForm.gender}`);
this.empList = result.data.data;
},
clear(){
//清空搜索条件
this.searchForm = {
name:'',
gender:'',
job:''
},
this.search()
}
},
}).mount('#container')
</script>
</body>
</html>
Vue 生命周期（难）
<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" v-model="searchForm.name" placeholder="请输入姓名">
<select id="gender" name="gender" v-model="searchForm.gender">
<option value=""></option>
<option value="1">男</option>
<option value="2">女</option>
</select>
<select id="position" name="position" v-model="searchForm.job">
<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="button" @click="clear()">清空
<table>
<!-- 表头 -->
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>头像</th>
<th>职位</th>
<th>入职日期</th>
<th>最后操作时间</th>
<th>操作</th>
</tr>
</thead>
{{index+1}}
{{e.name}}
{{e.gender==1?'男':'女'}}
班主任
讲师
学工主管
教研主管
咨询师
{{e.entrydate}}
{{e.updatetime}}
<footer class="footer">
<p>江苏传智播客教育科技股份有限公司</p>
<p>版权所有 Copyright 2006-2024 All Rights Reserved</p>
</footer>
<script src="js/axios.js"></script>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data() {
return {
searchForm:{//用于封装用户输入的查询条件
name:'',
gender:'',
job:''
},
//empList这里面的数据会被循环展示
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"
// }
]
}
},
/**
//方法
methods: {
async search(){
//发送ajax请求获取数据
// axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&job=${this.searchForm.job}&gender=${this.searchForm.gender}`).then((result) => {
// //将响应的数据重新赋值给empList（被for方法遍历展示）
// this.empList=result.data.data
// // result.data（第一层 data）是返回的整个返回的json
// //第二个data是整个被封装的result数据中的一个小板块
// })
let result = await axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&job=${this.searchForm.job}&gender=${this.searchForm.gender}`);
this.empList = result.data.data;
},
clear(){
//清空搜索条件
this.searchForm = {
name:'',
gender:'',
job:''
},
this.search()
}
},
//钩子函数
mounted() {
//页面加载完成之后，发送ajax请求，获取数据
this.search();
},
}).mount('#container')
</script>
</body>
</html>
Maven(后端)
<dependencies>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.16.1</version>
</dependency>
</dependencies>
compile：编译
package：打包
浙公网安备 33010602011771号