网站制作易捷网络,wordpress 全站加密,网站图片制作,增加清晰度的网站文章目录 5.4.4 机构名称5.4.4.1 创建实体类Company5.4.4.2 创建实体类CompanyMapper5.4.4.3 创建实体类CompanyService5.4.4.4 创建实体类CompanyController5.4.4.5 后端测试5.4.4.6 修改basic.js5.4.4.7 修改course.vue5.4.4.8 测试5.4.5 课程标签5.4.5.1 效果5.4.5.2 修改co… 文章目录 5.4.4 机构名称5.4.4.1 创建实体类Company5.4.4.2 创建实体类CompanyMapper5.4.4.3 创建实体类CompanyService5.4.4.4 创建实体类CompanyController5.4.4.5 后端测试5.4.4.6 修改basic.js5.4.4.7 修改course.vue5.4.4.8 测试 5.4.5 课程标签5.4.5.1 效果5.4.5.2 修改course.vue 5.4.6 课程图片上传5.4.6.1 前端开发5.4.6.2 后端开发5.4.6.3 测试 6 分页查课程信息6.1 后台开发6.1.1 修改实体类course6.1.2 修改CourseController6.1.3 准备启动类6.1.4 准备配置文件6.1.5 准备配置类6.1.6 测试 6.2 前台开发6.2.1 修改course.js6.2.2 修改course.vue6.2.3 测试6.2.1 修改course.js6.2.1 修改course.js 5.4.4 机构名称
5.4.4.1 创建实体类Company
package com.zx.system.entity;import com.baomidou.mybatisplus.annotation.TableName;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.ToString;
import lombok.experimental.Accessors;import java.util.Date;@Data
@NoArgsConstructor
@AllArgsConstructor
@ToString
@Accessors(chain = true)
@TableName("tb_company")
public class Company {private Integer id;private String name;//名称private String orgType;//c机构 p个人private String phone;//联系方式private String linkname;//联系人名称private String handPhotos;//手持证件照private String address;//机构地址private String logo;//机构logoprivate String email;//邮箱private String promiseLetter;//承诺书private String trademarkPic;//商标注册证private String intro;//简介private String briefIntro;private String mainCategory;//主营类目private String identityPic;//身份证照片private String workType;//工具性质private String businessPic;//营业执照private Date businessTerm;//营业执照有效期private String businessRegistNo;//营业执照注册号private String eduCertImg;//教育资质/学历证书照片private String eduCertTerm;//教育资质证书有效期private String eduCertNo;//教育资质/学历编号private String approvalStatus;//审核状态private String approvalComment;//审批意见private String approvalPeople;//审批人private Date approvalDate;//审批日期private Integer approvalNums;//审核次数private String remark;//备注private Date createDate;private Date changeDate;private Integer tenantId;//租户IDprivate String idCard;//身份证号private String teacherCertImg;//教师资格证照片private String teacherCertNo;//教师资格证号码private Integer status;//状态private String majorCertImg;//专业证件照片private String majorCertNo;//专业证件号码private String workExperience;//教学工作经历private String workResults;//教学工作成果private String title;//机构名称
}
5.4.4.2 创建实体类CompanyMapper
package com.zx.system.mapper;import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.zx.system.entity.Company;
import org.apache.ibatis.annotations.Mapper;@Mapper
public interface CompanyMapper extends BaseMapperCompany {
}
5.4.4.3 创建实体类CompanyService
package com.zx.system.service;import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.zx.system.entity.Company;
import com.zx.system.mapper.CompanyMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import java.util.List;@Service
public class CompanyService extends ServiceImplCompanyMapper, Company {@Autowiredprivate CompanyMapper companyMapper;public ListCompany selectAll(){QueryWrapper qw = new QueryWrapper();qw.select("id","name","org_type","phone","linkname");//查询指定列qw.eq("status",1);//1正常0停用qw.orderByDesc("create_date");//倒序return companyMapper.selectList(qw);}}
5.4.4.4 创建实体类CompanyController
package com.zx.system.controller;import com.zx.system.entity.Company;
import com.zx.system.service.CompanyService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.util.List;@RestController
@CrossOrigin
@RequestMapping("/system/company")
public class CompanyController {@Autowiredprivate CompanyService companyService;@GetMapping("/selectAll")public ListCompany selectAll(){return companyService.selectAll();}
}
5.4.4.5 后端测试 5.4.4.6 修改basic.js
// 课程管理CRUD
import axios from '../axios.js'//获取分类信息
const zx_basic = 'http://localhost:9999/basic'//去后台,获取所有分类的三级树
export const AllCategory = async ()={const res = await axios.get(zx_basic+"/category/getTree")return res
}//去后台,获取一级分类
export const Level1Category = async ()={const res = await axios.get(zx_basic+"/category/level1Category")return res
}//根据字典编号,获取字典信息
export const GetDict = async (code)={const res = await axios.get(zx_basic+"/dictionary/getDicItems/"+code)return res
}//去后台//获取所有机构信息
const zx_system = 'http://localhost:8888/system'
export const GetCompany = async ()={const res = await axios.get(zx_system+"/company/selectAll")return res
}
5.4.4.7 修改course.vue
templateel-card shadow="always"h3el-iconElementPlus //el-icon课程管理/h3el-row style="padding:10px;" gutter="3"el-col span="8"el-button type="primary" size="small" @click="toAdd"el-iconCirclePlus //el-iconnbsp;新增/el-buttonel-button v-if="multipleSelection.length" type="danger" size="small" @click="handlerMuchDel"删除多条/el-button/el-colel-col span="16"el-input size="small" v-model="searchName" placeholder="按课程名称搜索"template #appendel-iconSearch//el-icon/template/el-input/el-col/el-rowel-table :data="filterData" @selection-change="handleSelectionChange" borderel-table-column prop="id" type="selection" width="55"/el-table-columnel-table-column prop="planNum" label="计划数量" heder-align="center"/el-table-columnel-table-column prop="companyName" label="公司名称" heder-align="center" /el-table-columnel-table-column prop="name" label="课程名称" heder-align="center"/el-table-columnel-table-column prop="tags" label="课程标签" heder-align="center" /el-table-columnel-table-column prop="mtName" label="大分类名称" heder-align="center" /el-table-columnel-table-column prop="stName" label="小分类名称" heder-align="center" /el-table-columnel-table-column prop="grade" label="课程等级" heder-align="center" /el-table-columnel-table-column prop="teachmode" label="教学模式" heder-align="center" /el-table-columnel-table-column prop="auditStatus" label="审核状态" heder-align="center" /el-table-columnel-table-column prop="coursePubId" label="发布标识" heder-align="center" /el-table-columnel-table-column prop="price" label="课程单价" heder-align="center" /el-table-columnel-table-column prop="createDate" label="创建时间" :formatter="formatDate" align="center"/el-table-column prop="auditDate" label="审核时间" :formatter="formatDate" align="center"/el-table-column label="操作" align="center"template #default="scope"el-button @click="toEdit(scope.$index)" type="success" size="small"el-iconEditPen//el-icon修改/el-buttonel-button @click="handleDel(scope.row.id)" type="danger" size="small"el-iconDelete//el-icon删除/el-buttonel-button @click="handlePub(scope.row.id)" type="danger" size="small"el-iconDelete//el-icon发布/el-buttonel-button @click="handleDown(scope.row.id)" type="danger" size="small"el-iconDelete//el-icon下架/el-button/template/el-table-column/el-table!-- 分页条 --div style=""el-pagination :current-page="page.pageNum" :page-size="page.pageSize" :page-sizes="[5,10,50,100]"layout="total,sizes,prev,pager,next,jumper" :total="page.total" @size-change="handleSizeChange" @current-change="handleCurrentChange"/el-pagination/div/el-card!-- 设置对话框 --el-dialog v-model="dialogVisible" draggabletemplate #headerh4el-iconBrush//el-icon {{dialogType==='add'?'新增':'修改'}}课程管理/h4/templateel-form :model="form.data" label-position="left" label-width="120px"el-form-item label="机构名称"el-select v-model="form.data.companyId" placeholder="请选择"el-option v-for="item in companyOptions" :key="item.id" :label="item.name" :value="item.id"/el-option/el-select/el-form-itemel-form-item label="课程名称"el-input v-model="form.data.name" show-word-limit maxlength="100"/el-input/el-form-itemel-form-item label="适用人群"el-input v-model="form.data.users" type="textarea"show-word-limit maxlength="500" :autosize="{minRows:2,maxRows:4}"/el-input/el-form-itemel-form-item label="课程标签"el-input v-model="form.data.tags"/el-input/el-form-item!-- 4个下拉框 --el-form-item label="一级分类"el-select v-model="form.data.mt" placeholder="请选择"el-option v-for="item in mtOptions" :key="item.id" :label="item.name" :value="item.id"/el-option/el-select/el-form-itemel-form-item label="二级分类"!-- 二级分类树 --el-select v-model="form.data.st" placeholder="请选择"el-option :value="selectValue" :label="selectValue" style="height: 200px;overflow: auto;" el-tree :data="stOptions" @node-click="handleNodeClick"/el-tree/el-option/el-select/el-form-itemel-form-item label="课程等级"el-select v-model="form.data.grade" placeholder="请选择"!-- 遍历gradeOptions :key遍历的id :label要展示的数据 :value根据key获取到的value--el-option v-for="item in gradeOptions" :key="item.code" :label="item.desc" :value="item.code"/el-option/el-select/el-form-itemel-form-item label="教学模式"el-select v-model="form.data.teachmode" placeholder="请选择"el-option v-for="item in teachmodeOptions" :key="item.code" :label="item.desc" :value="item.code"/el-option/el-select/el-form-itemel-form-item label="课程介绍"el-input v-model="form.data.description" type="textarea"show-word-limit maxlength="1000" :autosize="{minRows:4,maxRows:10}"/el-input/el-form-itemel-form-item label="课程图片"el-input v-model="form.data.pic"/el-input/el-form-itemel-form-item label="课程单价"el-input v-model="form.data.price"(元)/el-input/el-form-item/el-formdiv style=""el-button @click="dialogSave" type="success"保存/el-buttonel-button @click="dialogCancle" type="primary"取消/el-button/div/el-dialog
/templatescript setup// 一级分类:::: 1.引入jsimport {GetCompany,Level1Category,AllCategory,GetDict} from '../../api/basic.js'import { ref, reactive } from 'vue'import {ElMessageBox} from 'element-plus'//导入消息提示框import {toast} from '../../tools/utils.js'import {CoursePage,CourseDel,CourseSave} from '../../api/course.js'const dialogVisible = ref(false)//对话框是否展示const dialogType = ref('add')//对话框新增还是修改const searchName = ref('')//按照课程名称查询//查后台数据,准备4个下拉框的值,value值是要传给后台的,label的值是要在页面展示的//:::: 一级分类:::: 2.使用1.引入js的结果,利用axios获取数据let mtOptions = ref([]) //一级分类//响应式声明变量Level1Category().then(res={// console.log(res)mtOptions.value = res //给响应式变量赋值要用value属性}).catch(err={})//:::: 二级分类:::: let stOptions = ref([]) AllCategory().then(res={stOptions=resconsole.log(res+'-'+stOptions)}).catch(err={console.log(err)})const selectValue=ref()const handleNodeClick=(e,node)={selectValue.value=e.value+'-'+e.labelform.data.st=selectValue.value}let gradeOptions = ref([]) //课程等级204,课程模式200GetDict(204).then((res={// console.log(res)gradeOptions.value=res})).catch(err={console.log(err)})let teachmodeOptions = ref([]) //教学模式GetDict(200).then(res={teachmodeOptions=res}).catch(err={console.log(err)})//===============机构名称let companyOptions = ref([]) GetCompany().then(res={companyOptions.value=res}).catch(err={console.log(err)})//多选const multipleSelection = ref([])//临时存放选中的数据,实际上就是多个rowconst handleSelectionChange=(val)={//当点击多选按钮时就会触发multipleSelection.value = val}//准备表格数据,const state = reactive({tableDate:[]})//空数组const handleDel=(id)={ElMessageBox.confirm('您是否确认删除此记录?','提示',{confirmButtonText:'确认',cancelButtonText:'取消',type:'warning'}).then(()={CourseDel(id).then(res={toast('删除记录成功！')loadingData(1,page.pageSize)//重新查询,默认展示第一页}).catch(err={console.log(err)})}).catch(()={})}//删除多条const handlerMuchDel=()={ElMessageBox.confirm('您是否确认删除此记录?','提示',{confirmButtonText:'确认',cancelButtonText
