黑马2024AI+JavaWeb开发入门Day02-JS-VUE飞书作业

讲义作业飞书地址：飞书

一、作业1

html 复制代码

<!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

html 复制代码

<!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

html 复制代码

<!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>

有问题请评论或者私信我！