學成在線--24.課程圖片管理(保存課程圖片)

文章目錄

  • 一. 需求分析
  • 二. 服務端開發
    • 1. 模型類
    • 2. API
    • 3. Dao
    • 4. Service
    • 5. Controller
  • 三. 前端開發
    • 1. API
    • 2. 頁面
      • 1). 添加上傳成功的鉤子 :on-success="handleSuccess"
      • 2). 在鉤子方法 中保存課程圖片信息

一. 需求分析

圖片上傳到文件系統后,其它子系統如果想使用圖片可以引用圖片的地址,課程管理模塊使用圖片的方式是將圖片
地址保存到課程數據庫中。業務流程如下:
1、上傳圖片到文件系統服務
2、保存圖片地址到課程管理服務,在課程管理服務創建保存課程與圖片對應關系的表 course_pic。
在這里插入圖片描述
3、在course_pic保存圖片成功后方可查詢課程圖片信息。
通過查詢course_pic表數據則查詢到某課程的圖片信息。

二. 服務端開發

1. 模型類

package com.xuecheng.framework.domain.course;import lombok.Data;
import lombok.ToString;
import org.hibernate.annotations.GenericGenerator;import javax.persistence.*;
import java.io.Serializable;@Data
@ToString
@Entity
@Table(name="course_pic")
@GenericGenerator(name = "jpa-assigned", strategy = "assigned")
public class CoursePic implements Serializable {private static final long serialVersionUID = -916357110051689486L;@Id@GeneratedValue(generator = "jpa-assigned")private String courseid;private String pic;}

2. API

在課程管理服務中要提供保存課程圖片的api。
文件位置:xcEduService01\xc-service-api\src\main\java\com\xuecheng\api\course\CourseControllerApi.java

@ApiOperation("添加課程圖片")
public ResponseResult addCoursePic(String courseId,String pic);

3. Dao

文件位置:xcEduService01\xc-service-manage-course\src\main\java\com\xuecheng\manage_course\dao\ CoursePicRepository.java

public interface CoursePicRepository extends JpaRepository<CoursePic,String> {}

4. Service

文件位置:xcEduService01\xc-service-manage-course\src\main\java\com\xuecheng\manage_course\service\ CourseService.java

//向課程管理數據添加課程與圖片的關聯信息
@Transactional
public ResponseResult addCoursePic(String courseId, String pic) {//課程圖片信息CoursePic coursePic = null;//查詢課程圖片Optional<CoursePic> picOptional = coursePicRepository.findById(courseId);if(picOptional.isPresent()){coursePic = picOptional.get();}if(coursePic == null){coursePic  = new CoursePic();}coursePic.setPic(pic);coursePic.setCourseid(courseId);coursePicRepository.save(coursePic);return new ResponseResult(CommonCode.SUCCESS);
}

5. Controller

文件位置:xcEduService01\xc-service-manage-course\src\main\java\com\xuecheng\manage_course\controller\ CourseController.java

@Override
@PostMapping("/coursepic/add")
public ResponseResult addCoursePic(@RequestParam("courseId") String courseId, @RequestParam("pic")String pic) {return courseService.addCoursePic(courseId,pic);}

三. 前端開發

1. API

文件位置:xc-ui-pc-teach\src\module\course\api\course.js

//保存課程圖片地址到課程數據庫
export const addCoursePic= (courseId,pic) => {return http.requestPost(apiUrl+'/course/coursepic/add?courseId='+courseId+"&pic="+pic)
}

2. 頁面

文件位置:xc-ui-pc-teach\src\module\course\page\course_manage\course_picture.vue

1). 添加上傳成功的鉤子 :on-success=“handleSuccess”

<el-uploadaction="/api/filesystem/upload"list-type="picture-card":before-upload="setuploaddata":on-success="handleSuccess":file-list="fileList":limit="picmax":on-exceed="rejectupload":before-remove="handleRemove":data="uploadval"name="multipartFile"><i class="el-icon-plus"></i>
</el-upload>

2). 在鉤子方法 中保存課程圖片信息

  //上傳成功的鉤子方法handleSuccess(response, file, fileList){console.log(response)//   alert('上傳成功')//調用課程管理的保存圖片接口,將圖片信息保存到課程管理數據庫course_pic中//從response得到新的圖片文件的地址if(response.success){let fileId = response.fileSystem.fileId;courseApi.addCoursePic(this.courseid,fileId).then(res=>{if(res.success){this.$message.success("上傳圖片成功")}else{this.$message.error(res.message)}})}},//上傳失敗執行的鉤子方法handleError(err, file, fileList){this.$message.error('上傳失敗');//清空文件隊列this.fileList = []},

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/451868.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/451868.shtml
英文地址,請注明出處:http://en.pswp.cn/news/451868.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

從任意網頁上摘取酷炫Jquery效果為自己使用的方法

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 1. 用的chrome 瀏覽器 2. 隨意百度一個漂亮的jquery效果 比如我找到一個可以旋轉的多面體效果 3. 再F12選 Resources到如下界面&…

shell基礎05 處理用戶輸入

1. 命令行參數------類似javac 參數1 參數2 類似Java中編譯的javac parm1....。在shell中&#xff0c;參數與參數之間用空格隔開。采用位置參數來識別對應的參數值&#xff1a;$0是程序名&#xff0c;$1是第一個參數&#xff0c;以此類推&#xff0c;知道第9個參數$9。對于大…

OpenCV 2.4.0 正式版發布,開源計算機視覺庫

OpenCV 于近日發布了 2.4.0 正式版。 OpenCV是一個基于BSD許可證授權發行的跨平臺開源計算機視覺庫&#xff0c;可以運行在Linux、Windows和Mac OS操作系統上。作為一款簡潔而且高效的視覺庫&#xff0c;OpenCV由一系列 C 函數和少量 C 類構成&#xff0c;同時提供了Python、Ru…

最小編輯代價-golang

題目&#xff1a; 給定兩個字符串str1和str2&#xff0c;在給定三個整數ic,dc和rc,分別代表插入、刪除和替換一個 字符&#xff0c;返回將str1編輯成str2的最小代價。 解題方法&#xff1a; 動態規劃。首先生成大小為(M1)X(N1)的矩陣dp。 假設str1"avb12cd3", str2&q…

You can't specify target table 'TS_AUTH_ADMIN' for update in FROM clause記錄

&#xff11;. 報錯&#xff1a;You cant specify target table TS_AUTH_ADMIN for update in FROM clause&#xff0c; 百度查到說是&#xff0c;不能在同一語句中先select出同一表中的某些值,再update這個表 。 我原本的sql是&#xff1a;&#xff08;刪除角色的時候&#…

study of javaserver faces lifecycle

JavaServer Faces應用程序的生命周期在客戶端為頁面發出HTTP請求時開始&#xff0c;并在服務器響應該頁面并轉換為HTML時結束。 通常將JSF的生命周期分為兩個階段&#xff1a; #執行階段 #渲染階段 1.執行階段 JavaServer Faces應用程序生命周期執行階段包含以下子階段&#xf…

從開源軟件開發中體會到的心得

Mitchell Hashimoto 是一名開源軟件工程師。由他托管到 GitHub 上的 開源項目 Vagrant&#xff0c;是一個用于創建和部署虛擬化開發環境的工具。近日&#xff0c;Mitchell撰文講述了在開發 Vagrant 的過程中學到的有關開源軟件開發的一些心得。 以下為原文文章&#xff1a; 把 …

學成在線--25.課程圖片管理(圖片查詢)

文章目錄一. 需求分析二. API三. 服務端開發1. Dao2. Service3. Controller四. 前端開發1. API方法2. 頁面一. 需求分析 課程圖片上傳成功&#xff0c;再次進入課程上傳頁面應該顯示出來已上傳的圖片。 二. API 在課程管理服務定義查詢方法 文件位置&#xff1a;xcEduServic…

redux源碼解讀

背景 因為就得去實習了。所以打算開始補補坑。比如自己閱讀源碼的計劃。所以今天來聊聊redux的源碼。后續會有redux-thunk和react-redux的源碼閱讀。搞定這些的話&#xff0c;就開始閱讀一個node的庫的源碼了&#xff0c;比如eventproxy和anywhere。 開始 總覽, redux的文件結構…

sql語句update中多個case/when的寫法

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 又如&#xff1a; update xxxx_xxxx set xxx_typeCASE WHEN xxx_type 0 THENYXLX-0WHEN xxx_type 1 THENYXLX-1WHEN xxx_type 2 THE…

Redis-ha(sentinel)搭建

服務器描述&#xff1a;本次搭建是用來測試&#xff0c;所以是在一臺服務器上搭建三個redis服務&#xff08;一主兩從&#xff09; 服務角色 端口 Redis.conf名稱 sentinel配置文件名稱 sentinel端口 redis日志路徑 sentinel路勁 主(master) 6379 redis.conf sentine…

學成在線--26.課程圖片管理(圖片刪除)

文章目錄一. 需求分析二. API三. 服務端開發1. Dao2. Service3. Controller四. 前端開發1. API方法2. 頁面1.before-remove鉤子方法2.handleRemove鉤子方法一. 需求分析 課程圖片上傳成功后&#xff0c;可以重新上傳&#xff0c;方法是先刪除現有圖片再上傳新圖片&#xff1b;…

警惕開源代碼庫中的安全隱患

最近的一項研究發現&#xff0c; 在調查的31個流行庫&#xff08;框架&#xff09;的1261個版本中&#xff0c;超過三分之一存在已知的安全漏洞&#xff0c;大約四分之一的下載文件已經被污染。 該項研究由Aspect Security和Sonatype發起。Aspect Security是一家評估軟件安全漏…

jsp注釋

jsp注釋 <%--注釋內容--%> html注釋 <!--注釋內容-->

線程間的協作(3)——管道輸入/輸出流

2019獨角獸企業重金招聘Python工程師標準>>> 1.管道輸入/輸出流類 分為兩類&#xff0c;字節流管道類&#xff08;PipedInputStream/PipedOutputStream&#xff09;和字符流管道類&#xff08;PipedReader/ PipedWriter&#xff09;。這兩個IO流實現了可以在不同的任…

windows簡易版本 Redis 使用 demo樣例(ssm框架下)

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 1. 在網上下載 windows 版本 的Redis 。下載了直接解壓出來 &#xff1a; 2. 雙擊 redis-server.exe 啟動服務&#xff08;如下圖&#…

Redhat7.3安裝配置Telnet詳細教程

請參考&#xff1a;https://blog.csdn.net/weixin_39934520/article/details/84835949 謝謝樓主分享&#xff01;

程序員的半衰期只有15年?

曾在Google工作負責過技術工作的科技編輯 Matt Heusser總結了他在Google的生活經歷&#xff0c;得出結論&#xff1a; 作為程序員&#xff0c;你只有15年時間。Matt 寫道當我在Google工作時&#xff0c;發現Google大部分人都是20出頭的年輕人&#xff0c;他們經歷的很多事情都是…

EasyNVR、EasyDSS二次開發之:RTMP、HLS流在web頁面進行無插件播放示例Demo代碼

不管是基于EasyNVR還是EasyDSS&#xff0c;都是支持無插件直播&#xff0c;這也是未來視頻直播的一個趨勢。對于傳統的瀏覽器插件播放誰用誰知道&#xff1b; 以上是軟件自帶播放展示 背景需求 對于EasyNVR和EasyDSS的使用方式大概分為兩大類&#xff0c;一類是直接將軟件作為視…