项目实训——2022

最新推荐文章于 2024-09-13 10:02:08 发布
最新推荐文章于 2024-09-13 10:02:08 发布
阅读量180 收藏
点赞数
分类专栏： 项目实训 文章标签： elementui vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YOUTH11111111/article/details/125238996
版权
这段代码展示了用于班级管理的前端作业功能实现，包括发布、编辑、删除作业，搜索功能，以及作业列表展示。使用了Element UI组件库，如Autocomplete、Table、Pagination等，同时支持文件上传和日期选择器。作业信息包括标题、内容、截止日期等，并提供了图片预览和编辑功能。
摘要由CSDN通过智能技术生成

班级管理中作业相关功能的前端代码：

<template>
  <div id="homework">

    <div class="body">
      <div class="container">
        <div class="query-form">
          <el-row :gutter="20">
            <el-col :span="2">
              <el-button @click="create" icon="el-icon-plus">发布作业</el-button>
            </el-col>
            <el-col :offset="13" :span="3">
              <el-autocomplete
                  popper-class="my-autocomplete"
                  v-model="queryForm.homeworkTitle"
                  :fetch-suggestions="querySearch"
                  placeholder="作业标题"
                  @select="handleSelect">
                <i
                    class="el-icon-edit el-input__icon"
                    slot="suffix"
                    @click="handleIconClick">
                </i>
                <template slot-scope="{ item }">
                  <div class="name">{{ item.value }}</div>
                  <span class="addr">{{ item.address }}</span>
                </template>
              </el-autocomplete>
            </el-col>
            <el-col :span="3">
              <el-button @click="query" icon="el-icon-search" type="primary">搜索</el-button>
            </el-col>
          </el-row>
        </div>
      </div>

      <div>
        <p></p>
      </div>

      <el-row justify="center" type="flex" style="padding-top: 30px;margin-bottom: 0px">
        <el-pagination
            :current-page="currentPage"
            :page-sizes="[5, 10, 20]"
            :page-size="pageSize"
            @size-change="handleSizeChange"
            @current-change="getPage"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length"
        >
        </el-pagination>
      </el-row>

      <div>
        <p></p>
      </div>
      <button @click="img_get">点击获取图片</button>
      <img :src="images" class="showavatar" />

      <div class="homework">
        <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" stripe style="margin-top: 0">
          <el-table-column label="作业编号" prop="hid" width="100px"/>
          <el-table-column label="作业标题" prop="title"/>
          <el-table-column label="作业内容" prop="description"/>
          <el-form-item    label="img"     prop="pic1"/>
          <el-table-column label="创建时间" prop="create_time"/>
          <el-table-column label="截止年限" prop="ddl_year" width="60px"/>
          <el-table-column label="截止月份" prop="ddl_month" width="50px"/>
          <el-table-column label="截止日期" prop="ddl_day" width="50px"/>
          <el-table-column align="center" label="操作" width="200px">
            <template slot-scope="scope" >
              <el-button @click="editHomework(scope.row.hid)" size="mini" type="success">编辑
              </el-button>
              <el-button @click="deleteHomework(scope.row.hid)" size="mini" type="danger">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>


    </div>
    <el-dialog :visible.sync="editing" title="发布作业" width="50%">
      <el-form :model="entityForm" label-width="68px" ref="form">
<!--        <el-form-item label="作业编号">-->
<!--          <el-input disabled v-model="entityForm.homeworkId"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="作业标题">
          <el-input v-model="entityForm.homeworkTitle"></el-input>
        </el-form-item>
        <el-form-item label="作业内容">
          <el-input type="textarea" v-model="entityForm.homeworkContent"></el-input>
        </el-form-item>
        <el-form-item label="上传图片">
          <el-upload
              class="upload-demo"
              ref="upload"
              action="#"
              :before-upload="beforeUploadFile"
              :on-change="fileChange"
              :on-exceed="exceedFile"
              :on-success="handleSuccess"
              :headers="file_header"
              :on-error="handleError"
              :file-list="imgFileList"
              list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过1mb</div>
          </el-upload>
        </el-form-item>
<!--        <el-form-item label="创建时间">-->
<!--          <div class="block">-->
<!--            &lt;!&ndash;            <span class="demonstration">默认</span>&ndash;&gt;-->
<!--            <el-date-picker-->
<!--                v-model="value1"-->
<!--                type="datetime"-->
<!--                placeholder="选择日期时间">-->
<!--            </el-date-picker>-->
<!--          </div>-->
<!--        </el-form-item>-->
        <el-form-item label="截止时间">
          <div class="block">
<!--            <span class="demonstration">默认</span>-->
            <el-date-picker
                v-model="value2"
                type="date"
                placeholder="选择日期时间">
            </el-date-picker>
          </div>
        </el-form-item>
      </el-form>
      <span class="dialog-footer" slot="footer">
                    <el-button @click="save" type="primary">确 定</el-button>
                    <el-button @click="editing = false">取 消</el-button>
                </span>
    </el-dialog>


  <el-dialog :visible.sync="edit_editing" title="编辑" width="50%">
    <el-form :model="entityForm" label-width="68px" ref="form">
      <!--        <el-form-item label="作业编号">-->
      <!--          <el-input disabled v-model="entityForm.homeworkId"></el-input>-->
      <!--        </el-form-item>-->
      <el-form-item label="作业标题">
        <el-input v-model="entityForm.homeworkTitle"></el-input>
      </el-form-item>
      <el-form-item label="作业内容">
        <el-input type="textarea" v-model="entityForm.homeworkContent"></el-input>
      </el-form-item>
      <el-form-item label="上传图片">
        <el-upload
            class="upload-demo"
            ref="upload"
            action="#"
            :before-upload="beforeUploadFile"
            :on-change="fileChange"
            :on-exceed="exceedFile"
            :on-success="handleSuccess"
            :headers="file_header"
            :on-error="handleError"
            :file-list="imgFileList"
            list-type="picture">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过1mb</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="截止时间">
        <div class="block">
          <el-date-picker
              v-model="value2"
              type="date"
              placeholder="选择日期时间">
          </el-date-picker>
        </div>
      </el-form-item>
    </el-form>
    <span class="dialog-footer" slot="footer">
                    <el-button @click="save" type="primary">确 定</el-button>
                    <el-button @click="edit_editing = false">取 消</el-button>
                </span>
  </el-dialog>

    <el-button @click="handleClick(true)" style="margin-top: 20px">点击查看已提交的作业</el-button>
    <sumbmitted_homework  :cid="cid_2" v-show="dialog_visible" ></sumbmitted_homework>

  </div>
</template>

<script>


export default {
  name: "homework",
  props: ['cid'],
// components: {
//     homework: resolve => {
//     require(['./homework.vue'], resolve)
//   },
//    sumbmitted_homework: resolve => {
//    require(['./sumbmitted_homework.vue'], resolve)
//   }
//  },
  components: {
    sumbmitted_homework: resolve => {
      require(['./sumbmitted_homework.vue'], resolve)
    }
  },
  data() {
    return {
      images:'',

      cid_2: '',
      dialog_visible: false,
      currentView1: "homework",
      currentView2: "sumbmitted_homework",
      activeName: 'first',
      queryForm: {
        /*homeworkId: "",*/
        homeworkTitle: "",

      },

      entityForm: {},

      tableData: [],
      tableData_title:[],

      pageSize: 5,
      currentPage: 1,
      myclass: "软件工程",
      mycid: {},
      pageCount: 1,
      pageIndex: 1,
      editing: false,
      edit_editing: false,
      text: '',
      value1: '',
      value2: '',

      fileList: [],
      file_header: {'token': localStorage.getItem("token")},
      uploadList: [],

      create_hid: null,
      edit_hid: null,

      //搜索数据
      restaurants: [],
      state: ''

    };
  },

  created() {
    console.log("hhhhhhhhhhhhhh"),
        console.log(this.cid),
        this.axios({
          url: '/teacher/homework_desc',
          method: 'get',
          params: {
            cid: this.cid
          },
          headers: {
            'token': localStorage.getItem("token")
          },
        }).then(
            (res) => {
              console.log(res)
              this.tableData = res.data
              console.log('创建啦啦啦啦啦');
              console.log(this.tableData);

            }
        )


  },

  // 将图片格式转换成file-list需要的格式
  computed: {
    imgFileList() {
      return this.fileList.map((imgURL, index) => {
        return {
          name: index + '.png',
          url: imgURL
        }
      })
    }
  },

  methods: {
    img_get(hid,cid){
      this.axios({
        url: '/teacher/show_img',
        method: 'get',
        params: {
          cid: '777',
          title:'1002'
        },
        headers: {
          'token': localStorage.getItem("token")
        },
        responseType: "blob"
      }
      ).then(res => {

        let blob = new window.Blob([res.data]);
        let url = window.URL.createObjectURL(blob);
        this.images = url;
      });

    },

    sumbmitted_homework() {
      /*<router-link :to="{name:'home', params: {id:123456}}">*/
      this.$router.push({
        path: "/sumbmitted_homework"
      });
    },

    query() {

      this.axios({
        url: '/teacher/homework_desc_query',
        method: 'get',
        params: {
          cid: this.cid,
          title:this.queryForm.homeworkTitle
        },
        headers: {
          'token': localStorage.getItem("token")
        },
      }).then(
          (res) => {
            console.log(res)
            this.tableData = res.data
            console.log('创建啦啦啦啦啦');
            console.log(this.tableData);

          }
      )

    },

    upload_img() {
      console.log("行行好吧aaaaaaa")
      console.log("form:")
      console.log(this.fileList)
      if (this.fileList === 0) {
        this.$message.warning("请上传图片！")
      } else {

        let form = new FormData();
        console.log("form:")
        console.log(form)
        console.log("hid=" + this.hid)
        console.log("sid=" + this.sid)

        form.append('file', this.fileList[0].raw)
        form.append('hid', this.create_hid)
        console.log("form3:")
        console.log(form.get("file"))

        this.axios({
          method: "post",
          url: "/teacher/upload_img",
          enctype: "multipart/form-data",
          headers: {
            /*'Content-type': 'multipart/form-data',*/
            'token': localStorage.getItem("token")
          },
          data: form
        }).then(res => {
          console.log('上传成功！')
        })

      }

    },

    edit_upload_img() {
      console.log("行行好吧aaaaaaa")
      console.log("form:")
      console.log(this.fileList)
      if (this.fileList === 0) {
        this.$message.warning("请上传图片！")
      } else {

        let form = new FormData();
        console.log("form:")
        console.log(form)
        console.log("hid=" + this.hid)
        console.log("sid=" + this.sid)

        form.append('file', this.fileList[0].raw)
        form.append('hid', this.edit_hid)
        console.log("form3:")
        console.log(form.get("file"))

        this.axios({
          method: "post",
          url: "/teacher/upload_img",
          enctype: "multipart/form-data",
          headers: {
            /*'Content-type': 'multipart/form-data',*/
            'token': localStorage.getItem("token")
          },
          data: form
        }).then(res => {
          console.log('上传成功！')
        })

      }

    },

    create() {
      console.log(this.value2);
      console.log(this.value1);
      console.log(this.entityForm);

      var hid = 1000 + Math.ceil(Math.random() * 10);
      var time2 = new Date(this.value2);

      this.create_hid = hid;
      console.log('lllllllllllllllll')
      console.log(this.create_hid);

      this.axios({
        url: '/teacher/add_homework_desc',
        method: 'post',
        headers: {
          'token': localStorage.getItem("token")
        },
        data: {
          hid: this.create_hid,
          cid: this.cid,
          /*create_time: this.value1,*/
          title: this.entityForm.homeworkTitle,
          description: this.entityForm.homeworkContent,
          ddl_year: time2.getFullYear(),
          ddl_month: time2.getMonth() + 1,
          ddl_day: time2.getDate()
        }
      }).then(
          (res) => {
            console.log(res)
            this.text = res.data
          }
      )

      this.entityForm = {
        homeworkId: "",
        homeworkTitle: "",
        homeworkContent: ""
      };
      this.editing = true;
      if (this.text == null) {
        this.editing = false;
      }
    },

    handleClick(visible) {
      console.log(visible)
      this.dialog_visible = visible;
      console.log(this.cid);
      this.cid_2 = this.cid;
      console.log(this.cid_2)
    },

    editHomework(hid) {
      console.log(hid);


      this.edit_editing = true;

      this.edit_hid = hid;

    },

    editHomework_plus() {
      console.log('eeeeeeeeedit')
      console.log(this.entityForm)

      var time2 = new Date(this.value2)
      console.log(time2.getFullYear())
      console.log(time2.getYear())
      this.axios({
        url: '/teacher/edit_homework_desc',
        method: 'post',
        data: {
          hid: this.edit_hid,
          cid: this.cid,
          title: this.entityForm.homeworkTitle,
          description: this.entityForm.homeworkContent,
          ddl_year: time2.getFullYear(),
          ddl_month: time2.getMonth() + 1,
          ddl_day: time2.getDate()
        },
        headers: {
          'token': localStorage.getItem("token")
        },
      }).then(
          (res) => {
            console.log(res)
            this.entityForm = res;
            this.edit_editing = false;
          });
    },

    save() {
      if (this.create_hid==null&&this.edit_hid==null) {
        this.create();
        this.upload_img();
        this.create_hid = null;
        this.finishSave();

      } else {
        this.editHomework_plus();
        /*this.upload_img();*/
        this.edit_upload_img();
        this.edit_hid = null;
        this.finishSave_edit();

      }
    },

    finishSave() {
      this.$message({
        message: '恭喜你，这是一条成功消息',
        type: 'success'
      });
      /*this.getPage(this.pageIndex);*/
      this.editing = false;
    },
    finishSave_edit() {
      this.$message({
        message: '成功编辑作业',
        type: 'success'
      });
      /*this.getPage(this.pageIndex);*/
      this.edit_editing = false;
    },


    deleteHomework(hid) {
      this.$message.warning("delete");
      this.axios({
        url: '/teacher/delete_homework_desc',
        method: 'get',
        params: {
          hid: hid
        },
        headers: {
          'token': localStorage.getItem("token")
        },
      }).then(() => {
        this.$message.success("删除成功");
          }
      )

    },

    getPage(currentPage) {
      this.currentPage = currentPage
      console.log(this.currentPage)
    },

    handleSizeChange(size) {
      this.pageSize = size;
      console.log(this.pageSize)
    },

    exceedFile(files, fileList) {
      this.fileList = fileList;
      this.$message.warning(`只能选择 ${this.limitNum} 个文件，当前共选择了 ${files.length + fileList.length} 个`);
    },
    // 文件状态改变时的钩子
    fileChange(file, fileList) {
      this.fileList = fileList;
      console.log(file.raw);
      this.uploadList.push(file.raw);
      console.log(this.fileList);
    },
    // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
    beforeUploadFile(file) {
      console.log('before upload');
      console.log(file);
      let size = file.size / 1024 / 1024;
      if (size > 1) {
        this.$message.warning('文件大小不得超过1M');
      }
    },
    // 文件上传成功时的钩子
    handleSuccess(res, file, fileList) {
      this.$message.success('文件上传成功');
    },
    // 文件上传失败时的钩子
    handleError(err, file, fileList) {
      console.log(fileList);
      console.log(this.uploadList);
      console.log(this.fileList);
      console.log('err', err)


      this.$message.error('文件上传失败');
    },

YOUTH11111111
关注
专栏目录
项目实训——语音转文字功能
weixin_46346504的博客
06-12 1061
项目实训——语音转文字
J2EE项目实训——Struts框架技术.rar
12-28
本实训主要关注如何使用Struts框架进行实际项目的开发，以提升开发者在企业级应用中的技能。 1. **MVC模式**：Struts框架的核心是MVC设计模式，它将应用程序的业务逻辑、数据和用户界面分离，使得代码更易于管理和...
vue基础知识（day05）
szw2377132528的博客
02-28 364
vue基础知识
【作业题】后台管理系统中的课程管理模块（前端篇）
去创造
05-23 956
后端篇：【作业题】后台管理系统中的课程管理模块（后端篇） 项目地址：课程管理模块 功能实现中用到的知识及技巧 1. 项目部署war和war exploded的区别 IDEA中部署项目两种方式 war模式：将项目以war包的形式上传到服务器的webapps目录中； 可以称之为发布模式：先打成war包，再发布 war exploded模式：将WEB工程以当前文件夹的位置关系上传到服务器，仅仅是目录的映射，就相当于tomcat在项目源文件夹中启动一样； 热部署：一般在开发的时候用这种方式 2
关于element 中table进行单选多选的缓存问题不受分页限制进行最后操作
beichen3997的博客
11-29 858
<!-- 负责区域 --> <template> <section> <section class="content-body mt20"> <div class="body-header"> <h4 class="title-header">转让区域 </h4&...
SDU项目实训——后台搭建——SpringBoot+Vue学习（三）
m0_55633961的博客
03-17 590
SpringBoot的增删改查
山东大学软件学院项目实训——创新实训——角色疆界（2）
foolish200327的博客
05-30 1708
在前面的工作中，已经确定好了页面的总体布局，现在来实现弹窗功能，用来介绍整个项目。
暑期项目实训——15
txy_csdn的博客
07-30 108
准备答辩
暑期项目实训——12
txy_csdn的博客
07-25 94
随机森林算法参数调优（二）
暑期项目实训——04
txy_csdn的博客
07-09 95
。。。。
Java项目实训——图书管理系统参照.pdf
01-10
【Java项目实训——图书管理系统参照】是一个以Java技术为核心的实践项目，旨在教授学生如何构建一个完整的图书管理系统。这个系统主要用于规范、系统化和程序化图书的管理，提供快速的查询和信息更新功能。以下是该...
C语言实训——学生管理系统.zip
08-13
【C语言实训——学生管理系统】 在信息技术领域，C语言是一种基础且重要的编程语言，它以其高效、灵活性和广泛的系统级应用而闻名。这次实训课的作业是开发一个学生管理系统，这是一个典型的命令行界面（CMD）应用...
2023年暑期实训——基于yolov5.zip
02-20
可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】： 项目具有较高的学习借鉴价值，也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，...
vue3子组件向父组件传值
2301_76604664的博客
09-10 686
const emit = defineEmits(['success']) // 定义 success 事件，你也可以定义成别的名字，这里我定义为success;用于操作成功后的回调const emit = defineEmits(['success']) // 定义 success 事件，你也可以定义成别的名字，这里我定义为success;用于操作成功后的回调emit('success',studentId)，需要把你定义的事件名发射给父组件，还有你需要传的值，这里我需要传studentId;
element-plus组件问题汇总
xiaoxian_xian的博客
09-12 415
element-plus组件问题汇总
【Vue嵌套数据中，实现动态表头和内容】
最新发布
强者惜字如金，弱者废话连篇！
09-13 352
【代码】【Vue嵌套数据中，实现动态表头和内容】
vue使用scope插槽实现dialog窗口
weixin_44229734的博客
09-12 679
a-col :span="8">确 定title="详情"
python项目实训——电影推荐系统
07-04
在Python项目实训中，我们可以使用Python编程语言和相关的库和工具，去构建一个电影推荐系统。首先，我们需要收集和整理电影数据集，包括电影的名称、分类、导演、演员、评分等信息。我们可以通过一些公开的电影...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值