网页设计——第七次课后作业

最新推荐文章于 2024-09-10 20:26:21 发布
最新推荐文章于 2024-09-10 20:26:21 发布
阅读量384 收藏 10
点赞数 8
文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74399220/article/details/135138677
版权

1.基础练习

练习1

<template>
    <!--按钮-->
    <el-row>
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
    </el-row>
    
    <br>

    <!--表格-->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
    </el-table>

    <!--pagination 分页-->
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
      </el-pagination>

      <!--dialog 對話框-->
      <!-- Table -->
      <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>

      <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
        <el-table :data="gridData">
          <el-table-column property="date" label="日期" width="150"></el-table-column>
          <el-table-column property="name" label="姓名" width="200"></el-table-column>
          <el-table-column property="address" label="地址"></el-table-column>
        </el-table>
      </el-dialog>
    </div>

    <!--diolog-form表单-->
    <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>

    <el-dialog title="表单" :visible.sync="dialogFormVisible">

      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="活动名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="活动区域">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动时间">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
</template>

<script>
    export default{
        data() {
    return {
      form: {
          name: '',
          region: '',
          date1: '',
          date2: ''
        },
      gridData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      dialogTableVisible: false,
      dialogFormVisible: false,
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      currentPage4: 4
    };
  },
  methods: {
    handleSizeChange: function (val) {
      alert("每頁" + val + "條");
    },
    handleCurrentChange(val) {
      alert("當前頁" + val + "條");
    },
    onSubmit() {
        alert(JSON.stringify(this.form));
      }
    }
}
</script>

<style>
</style>

运行结果

练习二

DeptView.view

<template>
    <el-container style="height: 700px; border: 1px solid #eee">
        <el-header style="font-size: 40px; background-color:rgb(224, 224, 224)">tlias智能学习辅助系统</el-header>
        <el-container>
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                <el-menu :default-openeds="['1', '3']">
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-message"></i>信息系统管理</template>
                        <el-menu-item-group>
                            <el-menu-item index="1-1">
                                <router-link to="/dept">部门管理</router-link>
                            </el-menu-item>
                            <el-menu-item index="1-2">
                                <router-link to="/emp">员工管理</router-link>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
               <!--表格-->
                <el-table :data="tableData" style="width: 100%" border>
                    <el-table-column prop="name" label="名称" width="180">
                    </el-table-column>
                    <el-table-column prop="updatetime" label="最后操作时间" width="180"></el-table-column>
                    <el-table-column label="操作">
                        <el-button type="primary" size="mini">编辑</el-button>
                        <el-button type="danger" size="mini">删除</el-button>
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    export default{
        data() {
    return {
      tableData: [{
        name: '学工部',
        updatetime: '2010-12-01 12：00：00'
      }, {
        name: '教研部',
        updatetime: '2010-12-01 12：00：00'
      }, {
        name: '就业部',
        updatetime: '2010-12-01 12：00：00'
      }, {
        name: '人事部',
        updatetime: '2010-12-01 12：00：00'
      }, {
        name: '行政部',
        updatetime: '2010-12-01 12：00：00'
      }]
    };
  }
}
</script>

<style>
</style><template>
    <el-container style="height: 700px; border: 1px solid #eee">
        <el-header style="font-size: 40px; background-color:rgb(224, 224, 224)">tlias智能学习辅助系统</el-header>
        <el-container>
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                <el-menu :default-openeds="['1', '3']">
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-message"></i>信息系统管理</template>
                        <el-menu-item-group>
                            <el-menu-item index="1-1">
                                <router-link to="/dept">部门管理</router-link>
                            </el-menu-item>
                            <el-menu-item index="1-2">
                                <router-link to="/emp">员工管理</router-link>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
               <!--表格-->
                <el-table :data="tableData" style="width: 100%" border>
                    <el-table-column prop="name" label="名称" width="180">
                    </el-table-column>
                    <el-table-column prop="updatetime" label="最后操作时间" width="180"></el-table-column>
                    <el-table-column label="操作">
                        <el-button type="primary" size="mini">编辑</el-button>
                        <el-button type="danger" size="mini">删除</el-button>
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    export default{
        data() {
    return {
      tableData: [{
        name: '学工部',
        updatetime: '2010-12-01 12：00：00'
      }, {
        name: '教研部',
        updatetime: '2010-12-01 12：00：00'
      }, {
        name: '就业部',
        updatetime: '2010-12-01 12：00：00'
      }, {
        name: '人事部',
        updatetime: '2010-12-01 12：00：00'
      }, {
        name: '行政部',
        updatetime: '2010-12-01 12：00：00'
      }]
    };
  }
}
</script>

<style>
</style>

EmpView.view

<template>
    <el-container style="height: 700px; border: 1px solid #eee">
        <el-header style="font-size: 40px; background-color:rgb(224, 224, 224)">tlias智能学习辅助系统</el-header>
        <el-container>
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                <el-menu :default-openeds="['1', '3']">
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-message"></i>信息系统管理</template>
                        <el-menu-item-group>
                            <el-menu-item index="1-1">
                                <router-link to="/dept">部门管理</router-link>
                            </el-menu-item>
                            <el-menu-item index="1-2">
                                <router-link to="/emp">员工管理</router-link>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                <!--表单-->
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="姓名">
                        <el-input v-model="formInline.name" placeholder="姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-select v-model="formInline.gender" placeholder="性别">
                            <el-option label="男" value=""></el-option>
                            <el-option label="女" value=""></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="入职时间">
                        <el-date-picker v-model="formInline.entrydate" type="entrydate" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>
                <!--表格-->
                <el-table :data="tableData" border>
                    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
                    <el-table-column label="图像" width="180">
                        <template slot-scope="scope">
                            <img :src="scope.row.image" width="100px" height="70px">
                        </template>
                    </el-table-column>
                    <el-table-column label="性别" width="140">
                        <template slot-scope="scope">
                            {{ scope.row.gender==1? '男' : '女' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="job" label="职位" width="140"></el-table-column>
                    <el-table-column prop="entrydate" label="入职日期" width="180"></el-table-column>
                    <el-table-column prop="updatetime" label="最后操作时间" width="230"></el-table-column>
                    <el-table-column label="操作">
                        <el-button type="primary" size="mini">编辑</el-button>
                        <el-button type="danger" size="mini">删除</el-button>
                    </el-table-column>
                </el-table>
                <br>
                <!--分页-->
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
                        :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
                    </el-pagination>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import axios from 'axios';
export default {
    data() {
        return {
            tableData: [],
            formInline:{
                name:"",
                gender:"",
                entrydate:[]
            },
            currentPage4: 4
        }
    },
    methods:{
        handleSizeChange: function (val) {
            alert("每頁" + val + "條");
        },
        handleCurrentChange(val) {
            alert("當前頁" + val + "條");
        },
        onSubmit() {
         alert("查询数据");
        }
    },
    mounted(){
        //发送异步请求获取数据
        axios.get("https://mock.apifox.cn/m1/3128855-0-default/emp/list").then((result)=>{
            this.tableData=result.data.data;
        });
    }
}
</script>

<style>
.el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
}

.el-aside {
    color: #333;
}
</style>

运行结果

@CodeMaster
关注
  • 8
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
java第七章jdbc课后简答题_java数据库编程——第七章，课后作业
weixin_39616798的博客
12-21 316
1.由控制台输入数据，提交后保存到MYsql数据库。(使用DAO模式)package DAO_dome.kehozuoye;/*** 汽车实体类* @author huang**/public class Vehicie {private String identity;//车主身份证号码private String heading;//车辆识别码private double emissions;...
网页设计——第7次课后作业
m0_74924408的博客
12-20 572
json对象和js的相互转换。
网页设计——第一次课后作业
hinxx的博客
11-06 171
style标签（CSS)，script标签(javaScript)，link标签(CSS), base标签(无意义)2.http-equiv属性。--注释的内容-->head，body标签。3-3 body标签。3-4 HTML注释。
操作系统教程第六版——第三章课后作业
热门推荐
m0_51273315的博客
11-06 1万+
操作系统
操作系统教程第六版——第四章课后作业
m0_51273315的博客
11-04 6884
操作系统
使用jQuery高效制作网页特效——第三章课后作业
qq_41882685的博客
07-17 3039
1.超链接切换图片 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;切换图片&lt;/title&gt; &lt;style&gt; p a{
操作系统基础教程——第五章课后作业答案
m0_51273315的博客
11-18 4658
操作系统
SQL Server 数据库实验课第十周——第七章课后作业
沃然
05-05 1539
第7题学校中有若干系，每个系有若干班级和教研室，每个教研室有若干教员，其中有的教授和副教授每人各带若干研究生，每个班有若干学生，每个学生选修若干课程，每门课可由若干学生选修。 请用E-R图画出此学校的概念模型。 第8题某工厂生产若干产品，每种产品由不同的零件组成，有的零件可用在不同的产品上。这写零件由不同的原材料制成，不同零件所用的材料可以相同。这些零件按所属的不同产品分别放在仓库中，原材料按照类别放在若干仓库中 第10题将以上两个E-R图转换为关系模型 7题关系模型 系（系编号 ，系名，学校名）； 班
数据库第十周作业——第七章课后习题
YKYBTao的博客
05-04 200
《计算机组装与维护》课后习题-第1章——交作业
10-03
7. 显卡：主要包括GPU（图形处理单元）、显存和电路板，负责处理图形信息并输出到显示器。 四、其他硬件组件： 1. 声卡：处理音频输入和输出，有的集成在主板上，有的是独立的。 2. 键盘和鼠标：作为基本的输入设备...
数据库第七周作业——第四章课后题
YKYBTao的博客
04-17 3021
6.对下列两个关系模式：   学生（学号、班级、年龄、性别、家庭住址、班级号）   班级（班级号，班级名，班主任，班长） 使用GRANT语句完成以下授权功能： Student(Sno,Sname,Sage,Ssex,Saddress,Cnum) Class(Cnum,Cname,Cteacher,Cmonitor) (1）授予用户U1对两个表的所有权限，并可给其他用户授权。 GRANT ALL PRIVILEGES ON Student,Class TO U1 WITH GRANT OPTION; (.
数据库第七周作业——第三章课后习题
YKYBTao的博客
04-15 1486
3.有两个关系S（A,B,C,D）和T（C,D,E,F）,写出与下列查询等价的SQL表达式： (1）σ A=10(S） SELECT * FROM S WHERE A=10; (2）π A , B ( S ) SELECT A,B FROM S; (3）S ⋈ T SELECT S.A,S.B,C,D,E,F FROM S,T WHERE S.C=T.C AND S.D=T.D; (4） SELECT * FROM S,T WHERE S.C=T.C; (5) SELECT * FROM S,
《数据清洗》——黑马程序员之第七章数据加载课后作业
m0_54089886的博客
11-08 702
数据的预处理过程，除包括数据抽取、数据本身的清洗与检验以及数据转换操作外·，还包括数据加载操作。数据加载是数据预处理过程的最后一个步骤，主要负责将数据检验、转换后的高质量数据加载到目标数据库中。 7.1 数据的加载机制 数据的加载机制和数据的抽取机制类似。数据的加载机制主要分为全量加载和增量加载。其中，全量加载是指将目标表数据中的数据全部删除后进行数据加载的操作；而增量加载是指将目标表只加载源数据表中变换的数据，包含新增、修改和删除的数据。 7.1.1 全量加载 全量加载只需在数据加载之...
vue3.5新增特性
yunbabac的博客
09-05 431
vue3.5
Vue2 中对数组进行操作时需要注意什么
m0_73882020的博客
09-06 542
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
SprinBoot+Vue远程教育网站的设计与实现
赵广陆
09-10 810
目录1 项目介绍2 项目截图3 核心代码3.1 Controller3.2 Service3.3 Dao3.4 application.yml3.5 SpringbootApplication3.5 Vue4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍：CSDN认证博客专家，CSDN平台Java领域优质创作者，全网30w+粉丝，超300w访问量，专注于大学生项目实战开发、讲解和答疑辅导，对于专业性数据证明一切！ 主要项目：javaweb、ssm、spring
Vue CLI：初学者指南与深入理解
最新发布
x15514104477的博客
09-10 556
本文为初学者提供了一个关于如何使用 Vue CLI 的指南，并帮助读者深入理解其核心概念。Vue CLI 是一个用于快速搭建 Vue.js 项目的命令行工具，适用于所有水平的开发者。
美术|基于java+vue的美术外包管理信息系统(源码+数据库+文档)
weixin_66413741的博客
09-10 594
游戏美术管理信息系统。该系统基于B/S即所谓浏览器/服务器模式，应用java技术，选择MySQL作为后台数据库。系统主要包括系统首页，个人中心，用户管理，公司管理，作品信息管理，作品订单管理，外包需求管理，外包应征管理，流程追踪管理，在线交流管理，在线回复管理，管理员管理，留言反馈，系统管理等功能模块。本文首先介绍了游戏美术外包管理信息技术发展背景与发展现状，然后遵循软件常规开发流程，首先针对系统选取适用的语言和开发平台，
西安电科大《操作系统》第三版课后答案解析：并发、共享与分时系统特性
本资源提供的是《计算机操作系统第三版》课后答案，针对西安电子科技大学的教材，内容覆盖操作系统的基础理论和核心概念。章节包括操作系统引论和进程管理。 在第一章“操作系统引论”部分，主要讨论了以下几个知识...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值