1我的課程
1.1需求分析
課程添加完成后可通過我的課程進入課程修改頁面，此頁面顯示我的課程列表，如下圖所示，可分頁查詢。
上邊的查詢要實現分頁、會存在多表關聯查詢，所以建議使用mybatis實現我的課程查詢。
1.2API接口
輸入參數：
頁碼、每頁顯示個數、查詢條件輸出結果類型：
QueryResponseResult<自定義類型>
在api工程創建course包，創建CourseControllerApi接口。
//查詢課程列表
@ApiOperation("查詢我的課程列表")
public QueryResponseResult<CourseInfo> findCourseList(
int page,
int size,
CourseListRequest courseListRequest
);
1.3課程管理服務
1.3.1PageHelper
PageHelper是mybatis的通用分頁插件，通過mybatis的攔截器實現分頁功能，攔截sql查詢請求，添加分頁語句， 最終實現分頁查詢功能。
我的課程具有分頁功能，本項目使用Pagehelper實現Mybatis分頁功能開發，由于本項目使用springboot開發，在
springboot上集成pagehelper（https://github.com/pagehelper/pagehelper-spring-boot）
PageHelper的使用方法及原理如下：
在調用dao的service方法中設置分頁參數：PageHelper.startPage(page, size)，分頁參數會設置在ThreadLocal中
PageHelper在mybatis執行sql前進行攔截，從ThreadLocal取出分頁參數，修改當前執行的sql語句，添加分頁 sql。
最后執行添加了分頁sql的sql語句，實現分頁查詢。
1）添加依賴
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper‐spring‐boot‐starter</artifactId>
<version>1.2.4</version>
</dependency>
2）配置pageHelper
在application.yml中配置pageHelper操作的數據庫類型：
pagehelper:helper‐dialect: mysql
2.3.2 Dao
1）mapper 接口
import com.github.pagehelper.Page;
import com.xuecheng.framework.domain.course.CourseBase; import com.xuecheng.framework.domain.course.ext.CourseInfo;
import com.xuecheng.framework.domain.course.request.CourseListRequest; import org.apache.ibatis.annotations.Mapper;@Mapper
public interface CourseMapper {
CourseBase findCourseBaseById(String id);
Page<CourseInfo> findCourseListPage(CourseListRequest courseListRequest);
}
2）mapper.xml映射文件
<select id="findCourseListPage" resultType="com.xuecheng.framework.domain.course.ext.CourseInfo" parameterType="com.xuecheng.framework.domain.course.request.CourseListRequest">
SELECT
course_base.*,
(SELECT pic FROM course_pic WHERE courseid = course_base.id) pic FROM
course_base
</select>
3）測試Dao
//測試分頁@Test
public void testPageHelper(){ PageHelper.startPage(2, 1);
CourseListRequest courseListRequest = new CourseListRequest();
Page<CourseInfo> courseListPage = courseMapper.findCourseListPage(courseListRequest); List<CourseInfo> result = courseListPage.getResult(); System.out.println(courseListPage);
}
測試前修改日志級別為debug，并跟蹤運行日志，發現sql語句中已經包括分頁語句。
1.3.3Service
定義CourseService.java類，用于課程管理的service定義：
//課程列表分頁查詢
public QueryResponseResult<CourseInfo> findCourseList(int page,int size,CourseListRequest courseListRequest) {
if(courseListRequest == null){
courseListRequest = new CourseListRequest();
}
if(page<=0){
page = 0;
}
if(size<=0){
size = 20;
}
//設置分頁參數PageHelper.startPage(page, size);
//分頁查詢
Page<CourseInfo> courseListPage = courseMapper.findCourseListPage(courseListRequest);
//查詢列表
List<CourseInfo> list = courseListPage.getResult();
//總記錄數
long total = courseListPage.getTotal();
//查詢結果集
QueryResult<CourseInfo> courseIncfoQueryResult = new QueryResult<CourseInfo>(); courseIncfoQueryResult.setList(list);
courseIncfoQueryResult.setTotal(total);
return new QueryResponseResult<CourseInfo>(CommonCode.SUCCESS, courseIncfoQueryResult);
}
1.3.4Controller
@RestController @RequestMapping("/course")
public class CourseController implements CourseControllerApi {
@Autowired
CourseService courseService;
@Override
@GetMapping("/coursebase/list/{page}/{size}")
public QueryResponseResult<CourseInfo> findCourseList( @PathVariable("page") int page, @PathVariable("size") int size, CourseListRequest courseListRequest) {
return courseService.findCourseList(page,size,courseListRequest);
}
1.3.5測試
使用postman或swagger-ui測試課程列表接口。
1.4前端
1.4.1頁面
創建course_list.vue
1）使用element 的card組件
頁面布局代碼如下：
<template>
<section>
<el‐row >
<el‐col :span="8" :offset=2 >
<el‐card :body‐style="{ padding: '10px' }">
<img src="/static/images/add.jpg" class="image" height="150px">
<div style="padding: 10px;">
<span>課程名稱</span>
<div class="bottom clearfix">
<time class="time"></time>
<router‐link class="mui‐tab‐item" :to="{path:'/course/add/base'}">
<el‐button type="text" class="button" >新增課程</el‐button>
</router‐link>
</div>
</div>
</el‐card>
</el‐col>
<el‐col :span="8" v‐for="(course, index) in courses" :key="course.id" :offset="index > 0 ?
2 : 2">
<el‐card :body‐style="{ padding: '10px' }">
<img :src="course.pic!=null?imgUrl+course.pic:'/static/images/nonepic.jpg'" class="image" height="150px">
<div style="padding: 10px;">
<span>{{course.name}}</span>
<div class="bottom clearfix">
<time class="time"></time>
<el‐button type="text" class="button" @click="handleManage(course.id)">管理課程
</el‐button>
</div>
</div>
</el‐card>
</el‐col><!‐‐分頁‐‐>
<el‐col :span="24" class="toolbar">
<el‐pagination background layout="prev, pager, next" @current‐ change="handleCurrentChange" :page‐size="size"
:total="total" :current‐page="page" style="float:right;">
</el‐pagination>
</el‐col>
</el‐row>
</section>
</template><script>
import * as courseApi from '../api/course'; import utilApi from '../../../common/utils';
let sysConfig = require('@/../config/sysConfig') export default {
data() { return {
page:1, size:7, total: 0, courses: [],
sels: [],//列表選中列
imgUrl:sysConfig.imgUrl
}
},
methods: {
//分頁方法handleCurrentChange(val) {
this.page = val;
},
//獲取課程列表getCourse() {},
handleManage: function (id) { console.log(id)
this.$router.push({ path: '/course/manager/'+id})
}},created(){
},
mounted() {
}
}
</script>
<style scoped>
.el‐col‐8{ width:20%
}
.el‐col‐offset‐2{ margin‐left:2%
}
.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>
6）路由
import course_list from '@/module/course/page/course_list.vue';import Home from '@/module/home/page/home.vue';
export default [{
path: '/course',
component: Home, name: '課程管理', hidden: false,
iconCls: 'el‐icon‐document', children: [
{ path: '/course/list', name: '我的課程',component: course_list,hidden: false }
]
}
]
1.4.2Api調用
1、定義Api方法
//我的課程列表
export const findCourseList = (page,size,params) => {
//對于查詢條件，向服務端傳入key/value串。
//使用工具類將json對象轉成key/value
let queries = querystring.stringify(params)
return http.requestQuickGet(apiUrl+"/course/coursebase/list/"+page+"/"+size+"?"+queries);
}
2、在頁面調用?ndCourseList方法：
//獲取課程列表getCourse() {
courseApi.findCourseList(this.page,this.size,{}).then((res) => { console.log(res);
if(res.success){
this.total = res.queryResult.total;
this.courses = res.queryResult.list;
}
});
}
在mounted鉤子中調用getCourse方法
mounted() {
//查詢我的課程
this.getCourse();
}
在分頁方法中調用getCourse方法
//分頁方法handleCurrentChange(val) {
this.page = val; this.getCourse();
},
1.4.3測試
頁面效果如下：
注意：由于課程圖片服務器沒有搭建，這里圖片暫時無法顯示。
2新增課程
2.1需求分析
用戶操作流程如下：
1、用戶進入“我的課程”頁面，點擊“新增課程”，進入新增課程頁面
2、填寫課程信息，選擇課程分類、課程等級、學習模式等。
3、信息填寫完畢，點擊“提交”，課程添加成功或課程添加失敗并提示失敗原因。
需要解決的是在新增頁面上輸入的信息：
1、課程分類
多級分類，需要方便用戶去選擇。
2、課程等級、學習模式等這些選項建議是可以配置的。
2.2課程分類查詢
2.2.1介紹
在新增課程界面需要選擇課程所屬分類， 分類信息是整個項目非常重要的信息，課程即商品，分類信息設置的好壞直接影響用戶訪問量。
分類信息在哪里應用？
1、首頁分類導航
2、課程的歸屬地
添加課程時要選擇課程的所屬分類。
2.2.2數據結構
分類表category的結構如下：
2.2.3分類查詢
2.2.3.1數據格式
在添加課程時需要選擇課程所屬的分類，這里需要定義課程分類查詢接口。
接口格式要根據前端需要的數據格式來定義，前端展示課程分類使用elemenet-ui的cascader（級聯選擇器）組 件。
數據格式例子如下：
[{
value: 'zhinan',
label: '指南', children: [{
value: 'shejiyuanze', label: ' 設 計 原 則 ', children: [{
value: 'yizhi', label: '一致'
}, {
value: 'fankui', label: '反饋'
}, {
value: 'xiaolv', label: '效率'
}, {
value: 'kekong', label: '可控'
}]
}]
}]
2.2.3.2數據模型
1）定義category的模型
category模型對數據字段對應，如下：
@Data @ToString @Entity
@Table(name="category")
@GenericGenerator(name = "jpa‐assigned", strategy = "assigned")
public class Category implements Serializable {
private static final long serialVersionUID = ‐906357110051689484L;
@Id
@GeneratedValue(generator = "jpa‐assigned")@Column(length = 32)
private String id;private String name; private String label; private String parentid; private String isshow; private Integer orderby;private String isleaf;}
1）定義數據返回格式
@Data @ToString
public class CategoryNode extends Category { List<CategoryNode> children;
}
2.2.3.3Api接口
package com.xuecheng.api.web.controller.api.course;import com.xuecheng.framework.domain.course.ext.CategoryNode; import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody;
@Api(value = "課程分類管理",description = "課程分類管理",tags = {"課程分類管理"})
public interface CategoryControllerApi { @ApiOperation("查詢分類")
public CategoryNode findList();}
2.2.3.4dao
根據數據格式的分析，此查詢需要返回樹型數據格式，為了開發方便我們使用mybatis實現查詢 。
1）定義mapper
@Mapper
public interface CategoryMapper {
//查詢分類
public CategoryNode selectList();
}
2）定義mapper映射文件
采用表的自連接方式輸出樹型結果集。
<?xml version="1.0" encoding="UTF‐8" ?>
<!DOCTYPE mapper PUBLIC "‐//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis‐3‐ mapper.dtd" >
<mapper namespace="com.xuecheng.manage_course.dao.CategoryMapper" ><resultMap type="com.xuecheng.framework.domain.course.ext.CategoryNode" id="categoryMap" >
<id property="id" column="one_id"/>
<result property="name" column="one_name"/>
<result property="label" column="one_label"/>
<result property="isshow" column="one_isshow"/>
<result property="isleaf" column="one_isleaf"/>
<result property="orderby" column="one_orderby"/>
<result property="parentid" column="one_parentid"/><collection property="children" ofType="com.xuecheng.framework.domain.course.ext.CategoryNode">
<id property="id" column="two_id"/>
<result property="name" column="two_name"/><result property="label" column="two_label"/>
<result property="isshow" column="two_isshow"/>
<result property="isleaf" column="two_isleaf"/>
<result property="orderby" column="two_orderby"/>
<result property="parentid" column="two_parentid"/>
<collection property="children" ofType="com.xuecheng.framework.domain.course.ext.CategoryNode">
<id property="id" column="three_id"/>
<result property="name" column="three_name"/>
<result property="label" column="three_label"/>
<result property="isshow" column="three_isshow"/>
<result property="isleaf" column="three_isleaf"/>
<result property="orderby" column="three_orderby"/>
<result property="parentid" column="three_parentid"/>
</collection>
</collection>
</resultMap><select id="selectList" resultMap="categoryMap" > SELECT
a.id one_id, a.name one_name, a.label one_label,
a.isshow one_isshow, a.isleaf one_isleaf, a.orderby one_orderby, a.parentid one_parentid, b.id two_id,
b.name two_name, b.label two_label, b.isshow two_isshow, b.isleaf two_isleaf, b.orderby two_orderby,
b.parentid two_parentid, c.id three_id,
c.name three_name, c.label three_label, c.isshow three_isshow, c.isleaf three_isleaf, c.orderby three_orderby, c.parentid three_parentidFROM
category a LEFT JOIN category b ON a.id = b.parentid
LEFT JOIN category c ON b.id = c.parentid
WHERE a.parentid = '0'ORDER BY a.orderby, b.orderby, c.orderby
</select>
</mapper>
2.2.3.5Service
@Service
public class CategoryService {
@Autowired
CategoryMapper categoryMapper;
//查詢分類
public CategoryNode findList(){
return categoryMapper.selectList();
}
}
2.2.3.6Controller
@RestController @RequestMapping("/category")
public class CategoryController implements CategoryControllerApi { @Autowired
CategoryService categoryService;@Override @GetMapping("/list")
public CategoryNode list() {
return categoryService.findList();
}
}
2.2.3.7接口測試
接口描述如下：
2.3數據字典
2.3.1介紹
在新增課程界面需要選擇課程等級、課程狀態等，這些信息統一采用數據字典管理的方式。
本項目對一些業務的分類配置信息，比如：課程等級、課程狀態、用戶類型、用戶狀態等進行統一管理，通過在數 據庫創建數據字典表來維護這些分類信息。
數據字典對系統的業務分類進行統一管理，并且也可以解決硬編碼問題，比如添加課程時選擇課程等級，下拉框中 的課程等級信息如果在頁面硬編碼將造成不易修改維護的問題，所以從數據字典表中獲取，如果要修改名稱則在數 據字典修改即可，提高系統的可維護性。
2.3.2數據模型
在mongodb中創建數據字典表sys_dictionary
一個字典信息如下：
{
"_id" : ObjectId("5a7e8d2dd019f15418fa2b71"), "d_name" : "課程等級",
"d_type" : "200", "d_value" : [
{
"sd_name" : "低級",
"sd_id" : "200001","sd_status" : "1"
},
{
"sd_name" : "中級",
"sd_id" : "200002",
"sd_status" : "1"
},
{
"sd_name" : "高級",
"sd_id" : "200003",
"sd_status" : "1"
}
]
}
字 段 說 明 如 下 ：
d_name：字典名稱
d_type：字典分類
d_value：字典數據
sd_name：項目名稱
sd_id：項目id
sd_status：項目狀態（1：可用，0不可用）
數據模型類：
@Data@ToString
@Document(collection = "sys_dictionary")
public class SysDictionary {@Id
private String id;@Field("d_name") private String dName;@Field("d_type") private String dType;@Field("d_value")
private List<SysDictionaryValue> dValue;}
SysDictionaryValue類型：
@Data @ToString
public class SysDictionaryValue {@Field("sd_id") private String sdId;@Field("sd_name") private String sdName;@Field("sd_status") private String sdStatus;}
2.3.3字典查詢接口
2.3.3.1API接口
為了方便其它子系統使用，在cms模塊下創建字典查詢接口，根據字典的type查詢字典信息，接口定義如下：
@Api(value = "數據字典接口",description = "提供數據字典接口的管理、查詢功能")
public interface SysDicthinaryControllerApi {
//數據字典
@ApiOperation(value="數據字典查詢接口")
public SysDictionary getByType(String type);
}
2.3.3.2Dao
在cms模塊下創建數據庫的dao、service等類。
@Repository
public interface SysDictionaryDao extends MongoRepository<SysDictionary,String> {
//根據字典分類查詢字典信息
SysDictionary findBydType(String dType);
}
2.3.3.3Service
@Service
public class SysdictionaryService {
@Autowired
SysDictionaryDao sysDictionaryDao;
//根據字典分類type查詢字典信息
public SysDictionary findDictionaryByType(String type){ return sysDictionaryDao.findBydType(type);
}
}
2.3.3.4Controller
@RestControlle
r @RequestMapping("/sys/dictionary")
public class SysDictionaryController implements SysDictionaryControllerApi {@Autowired
SysdictionaryService sysdictionaryService;
//根據字典分類id查詢字典信息@Override @GetMapping("/get/{type}")
public SysDictionary getByType(@PathVariable("type") String type) {return sysdictionaryService.findDictionaryByType(type);
}
}
2.3.3.5測試
2.4新增課程頁面完善
本節完成數據字典顯示及課程分類顯示。
2.4.1新增課程頁面
1、頁面效果如下：
2）創建course_add.vue頁面
在teach前端工程的course模塊下創建course_add.vue頁面。
<template>
<div>
<el‐form :model="courseForm" label‐width="80px" :rules="courseRules" ref="courseForm">
<el‐form‐item label="課程名稱" prop="name">
<el‐input v‐model="courseForm.name" auto‐complete="off" ></el‐input>
</el‐form‐item>
<el‐form‐item label="適用人群" prop="users">
<el‐input type="textarea" v‐model="courseForm.users" auto‐complete="off" ></el‐input>
</el‐form‐item>
<el‐form‐item label="課程分類" prop="categoryActive">
<el‐cascader expand‐trigger="hover"
:options="categoryList" v‐model="categoryActive"
:props="props">
</el‐cascader>
</el‐form‐item>
<el‐form‐item label="課程等級" prop="grade">
<b v‐for="grade in gradeList">
<el‐radio v‐model="courseForm.grade" :label="grade.sdId" >{{grade.sdName}}</el‐ radio>
</b>
</el‐form‐item>
<el‐form‐item label="學習模式" prop="studymodel">
<b v‐for="studymodel_v in studymodelList">
<el‐radio v‐model="courseForm.studymodel" :label="studymodel_v.sdId" >
{{studymodel_v.sdName}}</el‐radio>
</b></el‐form‐item><el‐form‐item label="課程介紹" prop="description">
<el‐input type="textarea" v‐model="courseForm.description" ></el‐input>
</el‐form‐item></el‐form>
<div slot="footer" class="dialog‐footer">
<el‐button type="primary" @click.native="save" >提交</el‐button>
</div>
</div>
</template>
<script>
import * as courseApi from '../api/course'; import utilApi from '../../../common/utils';
import * as systemApi from '../../../base/api/system'; export default {data() { return {
studymodelList:[], gradeList:[], props: {
value: 'id', label:'label', children:'children'
},
categoryList: [], categoryActive:[], courseForm: {
id:'',
name: '',
users: '',
grade:'', studymodel:'', mt:'',
st:'', description: ''
},
courseRules: { name: [
{required: true, message: '請輸入課程名稱', trigger: 'blur'}
],
category: [
{required: true, message: '請選擇課程分類', trigger: 'blur'}
],
grade: [
{required: true, message: '請選擇課程等級', trigger: 'blur'}
],
studymodel: [
{required: true, message: '請選擇學習模式', trigger: 'blur'}
]}
}
},
methods: { save () {
}
},
created(){},
mounted(){}
}
</script>
<style scoped></style>
2）頁面路由
import course_add from '@/module/course/page/course_add.vue';
{ path: '/course/add/base', name: '添加課程',
component: course_add,hidden: true },
3）課程添加鏈接
在我的課程頁面添加“新增課程”鏈接在course_list.vue 中添加：
<router‐link class="mui‐tab‐item" :to="{path:'/course/add/base'}">
<el‐button type="text" class="button" >新增課程</el‐button>
</router‐link>
2.4.2查詢數據字典
課程添加頁面中課程等級、學習模式需要從數據字典查詢字典信息。
1）定義方法
數據字典查詢 為公用方法，所以定義在/base/api/system.js中
let sysConfig = require('@/../config/sysConfig')let apiUrl = sysConfig.xcApiUrlPre;
/*數據字典 */
export const sys_getDictionary= dType => {
return http.requestQuickGet(apiUrl+'/sys/dictionary/get/'+dType)
}
2）在頁面獲取數據字典
在mounted鉤子中定義方法如下：
//查詢數據字典字典systemApi.sys_getDictionary('201').then((res) => {
this.studymodelList = res.dvalue;
});
systemApi.sys_getDictionary('200').then((res) => { this.gradeList = res.dvalue;
});
3）效果
2.4.3課程分類
課程添加頁面中課程分類采用Cascader組件完成。
Cascader級聯選擇器
1）頁面
<el‐form‐item label="課程分類" prop="categoryActive">
<el‐cascader expand‐trigger="hover"
:options="categoryList" v‐model="categoryActive"
:props="props">
</el‐cascader>
</el‐form‐item>
2）定義方法
在本模塊的course.js中定義
/*查詢課程分類 */
export const category_findlist= () => {
return http.requestQuickGet(apiUrl+'/category/list')
}
3）在頁面獲取課程分類
在mounted鉤子中定義
//取課程分類courseApi.category_findlist({}).then((res) => {
this.categoryList = res.children;
});
效果
5) 如何獲取選擇的分類
用戶選擇課程分類后，所選分類ID綁定到categoryActive（數組）中，選擇了一級、二級分類，分別存儲在
categoryActive數組的第一個、第二個元素中。
2.5API接口
創建課程添加提交接口：
@Api(value = "課程管理",description = "課程管理",tags = {"課程管理"}) public interface CourseControllerApi {@ApiOperation("添加課程基礎信息")
public AddCourseResult addCourseBase(CourseBase courseBase);
}
2.6新增課程服務端
2.6.1Dao
public interface CourseBaseRepository extends JpaRepository<CourseBase, String> {}
2.6.2Service
//添加課程提交@Transactional
public AddCourseResult addCourseBase(CourseBase courseBase) {
//課程狀態默認為未發布courseBase.setStatus("202001"); courseBaseRepository.save(courseBase);
return new AddCourseResult(CommonCode.SUCCESS,courseBase.getId());
}
2.6.3Controller
@Override @PostMapping("/coursebase/add")
public AddCourseResult addCourseBase(@RequestBody CourseBase courseBase) { return courseService.addCourseBase(courseBase);
}
2.7新增課程前端
2.7.1Api方法定義
在前端定義請求服務端添加課程的api的方法，在course模塊中定義方法如下
/*添加課程基礎信息*/
export const addCourseBase = params => {
return http.requestPost(apiUrl+'/course/coursebase/add',params)
}
2.7.2Api方法調用
在course_add.vue 調用api提交課程信息
methods: {
save () {
this.$refs.courseForm.validate((valid) => { if (valid) {
this.$confirm('確認提交嗎？', '提示', {}).then(() => {
//當前選擇的分類
let mt = this.categoryActive[0]; let st = this.categoryActive[1]; this.courseForm.mt = mt; this.courseForm.st = st;
//請求服務接口
courseApi.addCourseBase(this.courseForm).then((res) => { if(res.success){
this.$message.success('提交成功');
//跳轉到課程圖片
//this.$router.push({ path: '/course/add/picture/1/'+this.courseid})
}else{
if(res.message){ this.$message.error(res.message);
}else{
this.$message.error('提交失敗');
}
}
});});
}
});
}
},
2.7.3測試
注意：將course_base表中的company_id改為非必填，待認證功能開發完成再修改為必填 測試流程：
1、進入我的課程，點擊“新增課程”打開新增課程頁面
2、輸入課程信息，點擊提交
3課程信息修改
3.1需求分析
課程添加成功進入課程管理頁面，通過課程管理頁面修改課程的基本信息、編輯課程圖片、編輯課程營銷信息等。 本小節實現修改課程。
3.2課程管理頁面說明
3.2.1頁面結構
課程管理頁面的結構如下：
3.2.2課程管理導航頁面
1、定義course_manage.vue為課程管理導航頁面。導航效果使用Element-UI的NavMenu組件實現。
<template>
<div><el‐menu
:default‐active="activeIndex" class="el‐menu‐demo" mode="horizontal" background‐color="#eee" text‐color="#000" active‐text‐color="#000">
<router‐link class="mui‐tab‐item" :to="{path:'/course/manage/summary/'+this.courseid}">
<el‐menu‐item index="1">課程首頁</el‐menu‐item>
</router‐link>
<router‐link class="mui‐tab‐item" :to="{path:'/course/manage/baseinfo/'+this.courseid}">
<el‐menu‐item index="2">基本信息</el‐menu‐item>
</router‐link>
<router‐link class="mui‐tab‐item" :to="{path:'/course/manage/picture/'+this.courseid}">
<el‐menu‐item index="3">課程圖片</el‐menu‐item>
</router‐link>
<router‐link class="mui‐tab‐item" :to="{path:'/course/manage/marketinfo/'+this.courseid}">
<el‐menu‐item index="4">課程營銷</el‐menu‐item>
</router‐link>
<router‐link class="mui‐tab‐item" :to="{path:'/course/manage/plan/'+this.courseid}">
<el‐menu‐item index="5">課程計劃</el‐menu‐item>
</router‐link>
<router‐link class="mui‐tab‐item" :to="{path:'/course/manage/teacher/'+this.courseid}">
<el‐menu‐item index="6">教師信息</el‐menu‐item>
</router‐link>
<router‐link class="mui‐tab‐item" :to="{path:'/course/manage/pub/'+this.courseid}">
<el‐menu‐item index="7">發布課程</el‐menu‐item>
</router‐link>
</el‐menu>
<router‐view class="main"></router‐view>
</div>
</template>
<script>
import * as courseApi from '../api/course'; import utilApi from '../../../common/utils'; export default {
data() { return {
activeIndex:'2', courseid:''
}
},
methods: {},
mounted(){
//課程id
this.courseid = this.$route.params.courseid console.log("courseid=" + this.courseid)
//跳轉到頁面列表
this.$router.push({ path: '/course/manage/baseinfo/'+this.courseid})}
}
</script>
<style scoped></style>
2、創建各各信息管理頁面
通過管理頁面的導航可以進入各各信息管理頁面，這里先創建各各信息管理頁面，頁面內容暫時為空，待開發時再 完善，在本模塊的page目錄下創建course_manage目錄，此目錄存放各各信息管理頁面，頁面明細如下：
課程管理首頁：course_summary.vue
基本信息修改頁面：course_baseinfo.vue
圖片管理頁面：course_picture.vue 營銷信息頁面：course_marketinfo.vue 老師信息頁面：course_teacher.vue
課程計劃頁面：course_plan.vue 課程發布頁面：course_pub.vue
3、創建路由
import course_manage from '@/module/course/page/course_manage.vue';
import course_summary from '@/module/course/page/course_manage/course_summary.vue'; import course_picture from '@/module/course/page/course_manage/course_picture.vue'; import course_baseinfo from '@/module/course/page/course_manage/course_baseinfo.vue'; import course_marketinfo from '@/module/course/page/course_manage/course_marketinfo.vue'; import course_teacher from '@/module/course/page/course_manage/course_teacher.vue'; import course_plan from '@/module/course/page/course_manage/course_plan.vue';
import course_pub from '@/module/course/page/course_manage/course_pub.vue';{ path: '/course/manager/:courseid', name: '管理課程',component: course_manage,hidden: true , children: [
{ path: '/course/manage/plan/:courseid', name: '課程計劃',component: course_plan,hidden:false },{ path: '/course/manage/baseinfo/:courseid', name: '基本信息',component:course_baseinfo,hidden: false },
{ path: '/course/manage/picture/:courseid', name: '課程圖片',component: course_picture,hidden: false },
{ path: '/course/manage/marketinfo/:courseid', name: '營銷信息',component:
course_marketinfo,hidden: false },
{ path: '/course/manage/teacher/:courseid', name: '教師信息',component: course_teacher,hidden: false},
{ path: '/course/manage/pub/:courseid', name: '發布課程',component: course_pub,hidden:false},{ path: '/course/manage/summary/:courseid', name: '課程首頁',component:course_summary,hidden: false }
]}
3.3Api接口
修改課程需要如下接口：
1、根據id查詢課程信息
2、修改課程提交接口定義如下：
根據課程ID查詢課程信息
@ApiOperation("獲取課程基礎信息")
public CourseBase getCourseBaseById(String courseId) throws RuntimeException;
2）修改課程信息
@ApiOperation("更新課程基礎信息")
public ResponseResult updateCourseBase(String id,CourseBase courseBase);
3.4服務端
3.4.1Dao
略
3.4.2Service
public CourseBase getCoursebaseById(String courseid) {
Optional<CourseBase> optional = courseBaseRepository.findById(courseId); if(optional.isPresent()){
return optional.get();
}
return null;
}@Transactional
public ResponseResult updateCoursebase(String id, CourseBase courseBase) { CourseBase one = this.getCoursebaseById(id);
if(one == null){
//拋出異常..
}
//修改課程信息one.setName(courseBase.getName()); one.setMt(courseBase.getMt()); one.setSt(courseBase.getSt()); one.setGrade(courseBase.getGrade()); one.setStudymodel(courseBase.getStudymodel()); one.setUsers(courseBase.getUsers());
one.setDescription(courseBase.getDescription()); CourseBase save = courseBaseRepository.save(one); return new ResponseResult(CommonCode.SUCCESS);
}
3.4.3Controller
@Override @GetMapping("/coursebase/get/{courseId}")
public CourseBase getCourseBaseById(@PathVariable("courseId") String courseId) throws RuntimeException {
return courseService.getCoursebaseById(courseId);
}@Override @PutMapping("/coursebase/update/{id}")
public ResponseResult updateCourseBase(@PathVariable("id") String id, @RequestBody CourseBase courseBase) {
return courseService.updateCoursebase(id,courseBase);
}
3.5前端
3.5.1修改頁面
在course模塊下的course_manage目錄下創建course_baseinfo.vue頁面，本頁面實現課程修改
<template>
<div>
<el‐form :model="courseForm" label‐width="80px" :rules="courseRules" ref="courseForm">
<el‐form‐item label="課程名稱" prop="name">
<el‐input v‐model="courseForm.name" auto‐complete="off" ></el‐input>
</el‐form‐item>
<el‐form‐item label="適用人群" prop="users">
<el‐input type="textarea" v‐model="courseForm.users" auto‐complete="off" ></el‐input>
</el‐form‐item>
<el‐form‐item label="課程分類" prop="categoryActive">
<el‐cascader expand‐trigger="hover"
:options="categoryList" v‐model="categoryActive"
:props="props">
</el‐cascader>
</el‐form‐item>
<el‐form‐item label="課程等級" prop="grade">
<b v‐for="grade in gradeList">
<el‐radio v‐model="courseForm.grade" :label="grade.sdId" >{{grade.sdName}}</el‐ radio>
</b>
</el‐form‐item>
<el‐form‐item label="學習模式" prop="studymodel">
<b v‐for="studymodel_v in studymodelList">
<el‐radio v‐model="courseForm.studymodel" :label="studymodel_v.sdId" >
{{studymodel_v.sdName}}</el‐radio>
</b></el‐form‐item>
<el‐form‐item label="課程介紹" prop="description">
<el‐input type="textarea" v‐model="courseForm.description" ></el‐input>
</el‐form‐item></el‐form>
<div slot="footer" class="dialog‐footer">
<el‐button type="primary" @click.native="save" :loading="editLoading">提交</el‐button>
</div>
</div>
</template>
<script>
import * as courseApi from '../../api/course'; import utilApi from '../../../../common/utils';
import * as systemApi from '../../../../base/api/system'; export default {data() { return {
courseid:'', studymodelList:[], gradeList:[], editLoading: false, props: {
value: 'id', label:'label', children:'children'
},
categoryList: [], categoryActive:[], courseForm: {
id:'',
name: '',
users: '',
grade:'', studymodel:'', mt:'',
st:'', description: ''
},
courseRules: { name: [
{required: true, message: '請輸入課程名稱', trigger: 'blur'}
],
category: [
{required: true, message: '請選擇課程分類', trigger: 'blur'}
],
grade: [
{required: true, message: '請選擇課程等級', trigger: 'blur'}
],
studymodel: [
{required: true, message: '請選擇學習模式', trigger: 'blur'}
]
}
}
},
methods: { save () {}
},
created(){},
mounted(){}
}
</script>
<style scoped>
</style>
3.5.2API方法
//獲取課程基本信息
export const getCoursebaseById = id => {
return http.requestQuickGet(apiUrl+'/course/coursebase/get/'+id)
}
//更新課程基本信息
export const updateCoursebase= (id,course) => {
return http.requestPut(apiUrl+'/course/coursebase/update/'+id,course)
}
3.5.4課程信息顯示
在mounted鉤子方法中查詢課程信息及數據字典：
mounted(){
//查詢數據字典字典systemApi.sys_getDictionary('201').then((res) => {
// console.log(res); this.studymodelList = res.dvalue;
});
systemApi.sys_getDictionary('200').then((res) => { this.gradeList = res.dvalue;
});
//取課程分類courseApi.category_findlist({}).then((res) => {
this.categoryList = res.children;
});
//查詢課程信息
//課程id
this.courseid = this.$route.params.courseid; courseApi.getCoursebaseById(this.courseid).then((res) => {
// console.log(res); this.courseForm = res;
//課程分類顯示，需要兩級分類
this.categoryActive.push(this.courseForm.mt); this.categoryActive.push(this.courseForm.st);});
}
3.5.5課程修改提交
編輯課程提交方法：
methods: {
save () {
//修改課程this.$refs.courseForm.validate((valid) => {
if (valid) {
this.$confirm('確認提交嗎？', '提示', {}).then(() => { let mt = this.categoryActive[0];
let st = this.categoryActive[1]; this.courseForm.mt = mt; this.courseForm.st = st;
let id = this.courseForm.id courseApi.updateCoursebase(id,this.courseForm).then((res) => {
if(res.success){ this.$message({
message: '提交成功',
type: 'success'
});
}else{
if(res.message){ this.$message.error(res.message);
}else{
this.$message.error('提交失敗');
}
}
});
});
}
});
}
},
4課程營銷
4.1需求分析
課程營銷信息包括課程價格、課程有效期等信息。
4.2數據模型
課程營銷信息使用course_market表存儲。數據模型如下：
@Data @ToString @Entity
@Table(name="course_market")
@GenericGenerator(name = "jpa‐assigned", strategy = "assigned")
public class CourseMarket implements Serializable {
private static final long serialVersionUID = ‐916357110051689486L;
@Id
@GeneratedValue(generator = "jpa‐assigned") @Column(length = 32)
private String id;
private String charge;private String valid; private String qq; private Float price; private Float price_old;
@Column(name = "start_time")
private Date startTime;
@Column(name = "end_time")
private Date endTime;
}
4.3API
查詢課程營銷信息
@ApiOperation("獲取課程營銷信息")
public CourseMarket getCourseMarketById(String courseId);
2）更新課程營銷信息
@ApiOperation("更新課程營銷信息")
public ResponseResult updateCourseMarket(String id,CourseMarket courseMarket);
4.4課程管理服務
4.4.1Dao
public interface CourseMarketRepository extends JpaRepository<CourseMarket, String> {
}
4.4.2Service
public CourseMarket getCourseMarketById(String courseid) { Optional<CourseMarket> optional = courseMarketRepository.findById(courseId); if(!optional.isPresent()){
return optional.get();
}
return null;
}
@Transactional
public CourseMarket updateCourseMarket(String id, CourseMarket courseMarket) { CourseMarket one = this.getCourseMarketById(id);
if(one!=null){ one.setCharge(courseMarket.getCharge());
one.setStartTime(courseMarket.getStartTime());//課程有效期，開始時間
one.setEndTime(courseMarket.getEndTime());//課程有效期，結束時間
one.setPrice(courseMarket.getPrice()); one.setQq(courseMarket.getQq()); one.setValid(courseMarket.getValid()); courseMarketRepository.save(one);
}else{
//添加課程營銷信息
one = new CourseMarket(); BeanUtils.copyProperties(courseMarket, one);
//設置課程id
one.setId(id); courseMarketRepository.save(one);
}
return one;
}
4.4.3Controller
@Override
@PostMapping("/coursemarket/update/{id}")
public ResponseResult updateCourseMarket(@PathVariable("id") String id, @RequestBody CourseMarket courseMarket) {
CourseMarket courseMarket_u = courseService.updateCourseMarket(id, courseMarket); if(courseMarket_u!=null){
return new ResponseResult(CommonCode.SUCCESS);
}else{
return new ResponseResult(CommonCode.FAIL);
}
}@Override
4.5前端
4.5.1Api 方法
//獲取課程營銷信息
export const getCourseMarketById = id => {
return http.requestQuickGet(apiUrl+'/course/coursemarket/get/'+id)
}
// 更新課程營銷信息
export const updateCourseMarket =(id,courseMarket) => {
return http.requestPost(apiUrl+'/course/coursemarket/update/'+id,courseMarket)
}
4.5.2頁面
編寫 course_marketinfo.vue
1)template
<el‐form :model="courseMarketForm" label‐width="110px" :rules="courseMarketFormRules" ref="courseMarketForm">
<el‐form‐item label="課程價格" prop="charge">
<b v‐for="charge in chargeList">
<el‐radio v‐model="courseMarketForm.charge" :label="charge.sdId" >{{charge.sdName}}</el‐
radio>
</b>
<br/>
金額（元）：<el‐input :disabled="this.courseMarketForm.charge == '203002'?false:true" v‐ model="courseMarketForm.price" ></el‐input>
</el‐form‐item>
<el‐form‐item label="課程有效期" prop="expires">
<b v‐for="valid in validList">
<el‐radio v‐model="courseMarketForm.valid" :label="valid.sdId" >{{valid.sdName}}</el‐ radio>
</b>
<br/>
過期時間：<br/>
<el‐date‐picker :disabled="this.courseMarketForm.valid == '204002'?false:true" type="date" placeholder="選擇日期" v‐model="courseMarketForm.expires"></el‐date‐picker>
</el‐form‐item>
<el‐form‐item label="服務咨詢QQ" prop="qq">
<el‐input v‐model="courseMarketForm.qq" ></el‐input>
</el‐form‐item></el‐form>
<div slot="footer" class="dialog‐footer">
<el‐button type="primary" @click.native="save" >提交</el‐button>
</div>
2)數據對象
data() { return {
active: 1, dotype:'',
courseid:'', chargeList:[], validList:[], price_tag:false, expires_tag:false, courseMarketForm: {
id:'',
charge:'',
valid:'',
price:'',
expires: '',
users: '', expiration:[], courseid:this.courseid
},
courseMarketFormRules: { free: [
{required: true, message: '請選擇收費規則', trigger: 'blur'}
],
valid: [
{required: true, message: '請選擇有效期', trigger: 'blur'}
]
}
}
}
3）保存方法
save: function () { this.$refs.courseMarketForm.validate((valid) => {
if (valid) {
this.$confirm(' 確 認 提 交 嗎 ？', ' 提 示 ', {}).then(() => { courseApi.updateCourseMarket(this.courseid,this.courseMarketForm).then((res) => {
if(res.success){
this.$message.success('提交失敗');
}else{
this.$message.error(res.message);
}
});
});
}
});
}
4）在mounted鉤子方法 中查詢課程營銷信息及數據字典信息
mounted(){
//課程id
this.courseid = this.$route.params.courseid;this.courseMarketForm.id = this.courseid;
//查詢字典systemApi.sys_getDictionary('203').then((res) => {
this.chargeList = res.dvalue;
});
systemApi.sys_getDictionary('204').then((res) => { this.validList = res.dvalue;
});//獲取課程營銷信息courseApi.getCourseMarketById(this.courseid).then((res) => {
//console.log(res); if(res && res.id){
this.courseMarketForm = res;
}
});
}
總結
以上是生活随笔為你收集整理的学成在线 第7天 讲义-课程管理实战的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
