视频地址：哔哩哔哩
讲义作业飞书地址：飞书
一、作业1
<!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>作业1</title>
<style>
table {
width: 80%;
border-collapse: collapse;
margin: 0 auto;
}
th,td {
border: 1px solid #000;
padding: 10px 0px;
}
</style>
</head>
<body>
<!--3 将模型数据和视图进行绑定-->
<div id="app">
<!--扩展需求：在下方表格中展示品牌信息-->
<table id="brandTable">
<tr>
<th>序号</th>
<th>品牌名称</th>
<th>企业名称</th>
<th>排序</th>
<th>品牌介绍</th>
<th>状态</th>
<th>操作</th>
</tr>
<tr v-for="(b, index) in brands" :key="b.id" align="center">
<td>{{index + 1}}</td>
<td>{{b.brandName}}</td>
<td>{{b.companyName}}</td>
<td>{{b.ordered}}</td>
<td>{{b.description}}</td>
<td>
<span v-show="b.status == 1" style="color: green;">启用</span>
<span v-show="b.status == 0" style="color: red;">禁用</span>
</td>
<td><a href="#">修改</a> <a href="#">删除</a></td>
</tr>
</table>
</div>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data() {
return {
brands: [{
id: 10,
brandName: "三只松鼠",
companyName: "三只松鼠",
ordered: "100",
description:"三只松鼠，好吃不上火",
status: 1
}, {
id: 20,
brandName: "优衣库",
companyName: "优衣库",
ordered: "10",
description:"优衣库，服适人生",
status: 0
}, {
id: 30,
brandName: "小米",
companyName: "小米科技有限公司",
ordered: "1000",
description:"为发烧而生",
status: 0
}, {
id: 40,
brandName: "华为",
companyName: "华为科技有限公司",
ordered: "100",
description:"没有伤痕累累，哪来皮糙肉厚，英雄自古多磨难",
status: 1
}]
}
}
}).mount('#app')
</script>
</body>
</html>二、作业2
<!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>作业2</title>
<style>
table {
width: 80%;
border-collapse: collapse;
margin: 0 auto;
}
th,
td {
border: 1px solid #000;
padding: 10px 0px;
}
</style>
</head>
<body>
<!-- 需求: Vue挂载完成后, 通过axios发送异步请求到服务端, 或者学生列表数据, 并通过Vue展示在页面上. -->
<div id="app">
<table>
<tr>
<th>编号</th>
<th>姓名</th>
<th>图像</th>
<th>年龄</th>
<th>性别</th>
<th>成绩</th>
<th>等级</th>
</tr>
<tr v-for="(s, index) in students" :key="s.id" align="center">
<td>{{index + 1}}}</td>
<td>{{s.name}}</td>
<td><img :src="s.image" height="50" width="70"></td>
<td>{{s.age}}</td>
<td>
<span v-if="s.gender == 1">男</span>
<span v-else>女</span>
</td>
<td>{{s.score}}</td>
<td>
<span v-if="s.score >= 85" style="color: green;">优秀</span>
<span v-else-if="s.score >= 60" style="color: yellow;">及格</span>
<span v-else style="color: red;">不及格</span>
</td>
</tr>
</table>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data() {
return {
students: []
}
},
methods: {
search() {
axios.get('https://mock.apifox.cn/m1/3128855-0-default/student').then((result) => {
this.students = result.data.data;
});
}
},
mounted() {
this.search();
}
}).mount('#app')
</script>
</body>
</html>三、作业3
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tlias智能学习辅助系统</title>
<style>
body {
margin: 0;
}
/* 顶栏样式 */
.header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #c2c0c0;
padding: 20px 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* 加大加粗标题 */
.header h1 {
margin: 0;
font-size: 24px;
font-weight: bold;
}
/* 文本链接样式 */
.header a {
text-decoration: none;
color: #333;
font-size: 16px;
}
/* 搜索表单区域 */
.search-form {
display: flex;
align-items: center;
padding: 20px;
background-color: #f9f9f9;
}
/* 表单控件样式 */
.search-form input[type="text"],
.search-form select {
margin-right: 10px;
padding: 10px 10px;
border: 1px solid #ccc;
border-radius: 4px;
width: 26%;
}
/* 按钮样式 */
.search-form button {
padding: 10px 15px;
margin-left: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* 清空按钮样式 */
.search-form button.clear {
background-color: #6c757d;
}
.table {
min-width: 100%;
border-collapse: collapse;
}
/* 设置表格单元格边框 */
.table td,
.table th {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
.avatar {
width: 30px;
height: 30px;
object-fit: cover;
border-radius: 50%;
}
/* 页脚版权区域 */
.footer {
background-color: #c2c0c0;
color: white;
text-align: center;
padding: 10px 0;
margin-top: 30px;
}
.footer .company-name {
font-size: 1.1em;
font-weight: bold;
}
.footer .copyright {
font-size: 0.9em;
}
#container {
width: 80%;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="container">
<!-- 顶栏 -->
<div class="header">
<h1>Tlias智能学习辅助系统</h1>
<a href="#">退出登录</a>
</div>
<!-- 搜索表单区域 -->
<form class="search-form">
<input type="text" placeholder="姓名" V-model="searchEmp.name"/>
<select name="gender" v-model="searchEmp.gender">
<option value="">性别</option>
<option value="1">男</option>
<option value="2">女</option>
</select>
<select name="job" v-model="searchEmp.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="search">查询</button>
<button type="button" class="clear" @click="clear">清空</button>
</form>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>头像</th>
<th>职位</th>
<th>入职日期</th>
<th>最后操作时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(e, index) in empList" :key="e.id">
<td>{{index + 1}}</td>
<td>{{e.name}}</td>
<td>{{e.gender == 1 ? '男':'女'}}</td>
<td><img :src="e.image":alt="e.name" class="avatar"></td>
<td>
<span v-if="e.job === '1'">班主任</span>
<span v-else-if="e.job === '2'">讲师</span>
<span v-else-if="e.job === '3'">学工主管</span>
<span v-else-if="e.job === '4'">教研主管</span>
<span v-else>咨询师</span>
</td>
<td>{{e.entrydate}}</td>
<td>{{e.updatetime}}</td>
<td class="btn-group">
<button class="edit">编辑</button>
<button class="delete">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data() {
return {
searchEmp: {
name: '',
gender: '',
job: ''
},
empList: []
}
},
methods: {
search() {
axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchEmp.name}&gender=${this.searchEmp.gender}&job=${this.searchEmp.job}`).then(res => {
this.empList = res.data.data
console.log(res.data.data);
})
},
clear() {
this.searchEmp = {
name: '',
gender: '',
job: ''
};
this.empList=[];
}
},
mounted() {
this.search();
}
}).mount('#container')
</script>
</body>
</html>有问题请评论或者私信我！
