【橙子日记22】从零开始的毕业设计

最新推荐文章于 2021-02-20 18:38:16 发布

CCNetCore

最新推荐文章于 2021-02-20 18:38:16 发布

阅读量120

点赞数

分类专栏：日记文章标签：毕业设计

本文链接：https://blog.csdn.net/QAQQVQQTQ/article/details/113705135

版权

日记专栏收录该内容

40 篇文章 2 订阅

订阅专栏

本文档详细记录了使用Vue.js实现课程图标上传的前后端交互过程，包括前端模板代码、图片预览、文件大小限制、后端接口处理及数据库存储。在前端，通过el-upload组件实现文件上传，并在未选择图标时提供默认图片；后端使用ASP.NET MVC处理文件上传，确保目录存在并保存文件。此外，还展示了如何在学生和教师课程页面展示课程图标。

摘要由CSDN通过智能技术生成

更新时间：2021年2月5日

今天来填个坑
关于
课程图标的上传操作：

数据库
在这里插入图片描述
添加logo字段，其实就是保存logo的文件名即可

前端
我直接放源码吧，因为改了很多很多次，中间的过程没有记录到
（鬼知道我这里和bug磨时间磨了多久）

<template>
  <!-- @click="intoMyWork(item.id)" -->
  <div id="home">
    <div class="row">
      <div class="col-lg-8" style="padding-right: 0">
        <div class="col-lg-12">
          <div class="shadow myList p-2" style="height: 200px">
            这里放一些老师的数据
          </div>
        </div>
        <div class="col-lg-12">
          <div class="shadow myList p-2">
            <div class="row">
              <div
                class="col-lg-3"
                v-for="(item, i) in curriculumList"
                :key="i"
              >
                <el-card :body-style="{ padding: '0px' }">
                  <img
                    src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                    class="image"
                  />
                  <div style="padding: 14px">
                    <span>{{ item.curriculum_name }}</span>
                    <div class="bottom clearfix">
                      <time class="time">{{ item.createdate }}</time>
                      <el-button
                        @click="intoWork(item.id)"
                        type="text"
                        class="button"
                        >进入</el-button
                      >
                    </div>
                  </div>
                </el-card>
              </div>

              <div class="col-lg-3">
                <el-card :body-style="{ padding: '0px' }">
                  <i
                    class="image el-icon-circle-plus-outline"
                    style="font-size: 180px; color: #8c939d"
                  ></i>
                  <div style="padding: 14px">
                    <div class="bottom clearfix">
                      <el-button
                        type="text"
                        class="button"
                        @click="dialogFormVisible = true"
                        >添加课程</el-button
                      >
                    </div>
                  </div>
                </el-card>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-12">
          <div class="shadow myList" style="height: 400"></div>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="col-lg-12">
          <div class="shadow myList" style="height: 400px"></div>
        </div>
        <div class="col-lg-12">
          <div class="shadow myList" style="height: 600px"></div>
        </div>
      </div>
    </div>

    <!--打开嵌套表单的 Dialog-->

    <el-dialog title="添加课程" :visible.sync="dialogFormVisible" width="600px">
      <el-form :model="form" label-width="80px" ref="form">
        <el-form-item label="课程名称">
          <el-input v-model="form.curriculum_name"></el-input>
        </el-form-item>

        <el-form-item label="课程图标">
          <el-upload
            name="logoFile"
            class="avatar-uploader"
            :show-file-list="false"
            :limit="1"
            :action="uploadUrl()"
            :on-change="handleChange"
            :before-upload="beforeAvatarUpload"
            :auto-upload="false"
            :data="this.form"
            ref="upload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <div >
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="insert('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
    <style  scoped>
.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  height: 180px;
  width: 180px;
}
.avatar-uploader:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.myList {
  background-color: #ffffff;
  border: darkgray;
  border-radius: 0px !important;
}
#home {
  background-color: #f6f6f6;
  padding-left: 20px;
  padding-right: 20px;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
<script>
import curriculumApi from "@/api/curriculum.js";
export default {
  data() {
    return {
      curriculumList: [],
      dialogFormVisible: false,
      imageUrl: "",
      form: {
        curriculum_name: "",
      },
    };
  },
  mounted() {
    this.base_api = process.env.VUE_APP_BASE_API;
  },
  created() {
    this.fetchData();
  },
  methods: {
    handleChange(file, fileList) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },

    insert(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // if(this.fileList.length <= 0){
          //     this.$message.error("请至少上传一个文件！");
          //     return;
          // }
          // if(!this.fileSizeIsSatisfy){
          //     this.$message.error("上传失败！存在文件大小超过5M！");
          //     return;
          // }
          //手动上传文件，在点击确认的时候 校验通过才会去请求上传文件的url
          this.$refs.upload.submit();
          this.fetchData();
          this.$message({
            type: "success",
            message: "课程添加成功！",
          });
        }
      });
    },
    uploadUrl: function () {
      return this.base_api + "/Curriculum/AddCurriculum";
    },
    addcurriculum() {
      curriculumApi.addCurriculum(this.form).then((response) => {
        const resp = response.data;
        if (resp.flag) {
          this.$message({
            type: "success",
            message: resp.message,
          });
        } else {
          this.$message.error(resp.message);
        }
        this.dialogFormVisible = false;
        this.fetchData();
      });
    },
    intoWork(CurriculumId) {
      this.$router.push({ path: "/allWork", query: { id: CurriculumId } });
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    fetchData() {
      curriculumApi.getTeacherCurriculumLst().then((response) => {
        const resp = response.data;
        if (resp.flag) {
          this.curriculumList = resp.data;
        }
      });
    },
  },
};
</script>

效果：
在这里插入图片描述
数据库效果：

后端

     [HttpPost]
        [Obsolete]
        public IActionResult AddCurriculum([FromForm] string curriculum_name,IFormFile logoFile, [FromServices] IHostingEnvironment env)//教师添加课程
        {
            string filename = Guid.NewGuid().ToString() + Path.GetExtension(logoFile.FileName);//文件名：唯一标识号.jpg
            string filepub = Path.Combine(env.WebRootPath, "Curriculumlogo", filename);//完整目录
            string fileexit = Path.Combine(env.WebRootPath, "Curriculumlogo");//文件目录名
            if (!Directory.Exists(fileexit))
            {
                Directory.CreateDirectory(fileexit);
            }
            using (var stream = new FileStream(filepub, FileMode.Create))
            {
                logoFile.CopyTo(stream);
            }
            curriculum curriculumData = new curriculum();
            curriculumData.curriculum_name = curriculum_name;
            curriculumData.teacher_id = teacherId;
            curriculumData.createdate = DateTime.Now;
            curriculumData.curriculum_logo = filename;
            _curriculumBll.Add(curriculumData);
            return Content(JsonFactory.Json(message:"添加课程成功！"));
        }

这里记得一下，一定要检测一下文件是否存在，如果不存在，自动创建一个文件，我们需要检测该目录是否存在，那就得导入绝对路径，需要注入IHostingEnvironment，记得打上 [Obsolete]标签

整个上传效果是没有什么问题了，现在看一下具体的查看效果，主要是改2个页面
学生课程页面和教师课程页面

课程logo查看
前端：
在这里插入图片描述
将那个汉堡的图标链接改成我们的链接

我们使用 :src操作
在这里插入图片描述
绑定一个方法

这样就能动态得到我们的图片了
同理，把学生课程也放过去
效果图

没问题了，那个显示不出来是因为之前没有给他添加数据
我们再给他改完美一点，如果前端不选择图标的话‘
我们就给他一个默认的图标
这个我们要在后端操作
后端：
在这里插入图片描述
可以了，我们来创建一个课程，如果我们不添加图标，应该会默认显示一个