一、配置nginx反向代理
项目中的Easy Mock
config/dev.env.js 中BASE_API 为项目的easymock地址,目前具有模拟登录、登出、获取用户信息的功能
BASE_API: ‘“http://localhost:8001/”’
登录:/user/login
获取用户信息:/user/info?token=admin
登出:/user/logout
config/dev.env.js,只有一个api地址的配置位置,而我们实际的后端有很多微服务,所以接口地址有很多,
我们可以使用nginx反向代理让不同的api路径分发到不同的api服务器中
1、安装window版的nginx
将nginx-1.12.0.zip解压到开发目录中
如:E:\development\nginx-1.12.0-guli-api
双击nginx.exe运行nginx
访问:localhost
2、配置nginx代理
在Nginx中配置对应的微服务服务器地址即可
注意:最好修改默认的 80端口到81
http {
server {
listen 81;
......
},
......
server {
# 对外端口
listen 9001;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
# 匹配路径
location ~ /eduservice/ {
# 转发到服务器
proxy_pass http://localhost:8001;
}
location ~ /eduoss/ {
proxy_pass http://localhost:8002;
}
}
}
3、重启nginx
nginx -s reload
停止
nginx -s stop
4、测试
启动nginx
前端请求接口改为9001
总结
二、前端整合图片上传组件
1、复制头像上传组件
从vue-element-admin复制组件:
vue-element-admin/src/components/ImageCropper
vue-element-admin/src/components/PanThumb
2、前端参考实现
src/views/components-demo/avatarUpload.vue
3、前端添加文件上传组件
src/views/edu/teacher/form.vue
template:
<!-- 讲师头像 -->
<el-form-item label="讲师头像">
<!-- 头衔缩略图 -->
<pan-thumb :image="teacher.avatar"/>
<!-- 文件上传按钮 -->
<el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像
</el-button>
<!--
v-show:是否显示上传组件
:key:类似于id,如果一个页面多个图片上传控件,可以做区分
:url:后台上传的url地址
@close:关闭上传组件
@crop-upload-success:上传成功后的回调 -->
<image-cropper
v-show="imagecropperShow"
:width="300"
:height="300"
:key="imagecropperKey"
:url="BASE_API+'/admin/oss/file/upload'"
field="file"
@close="close"
@crop-upload-success="cropSuccess"/>
</el-form-item>
引入组件模块
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'
4、js脚本实现上传和图片回显
export default {
//声明组件 才可以使用
components: { ImageCropper, PanThumb },
data() {
return {
teacher: {
name: "",
sort: 0,
level: 1,
career: "",
intro: "",
avatar: "",
},
BASE_API: process.env.BASE_API, // 接口API地址
imagecropperShow: false, // 是否显示上传组件
imagecropperKey: 0, // 上传组件id
saveBtnDisabled: false, // 保存按钮是否禁用,
}
},
methods: {
// 上传成功后的回调函数
cropSuccess(data) {
// console.log(data)
this.imagecropperShow = false
this.teacher.avatar = data.url
// 上传成功后,重新打开上传组件时初始化组件,否则显示上一次的上传结果
this.imagecropperKey = this.imagecropperKey + 1
},
// 关闭上传组件
close() {
this.imagecropperShow = false
// 上传失败后,重新打开上传组件时初始化组件,否则显示上一次的上传结果
this.imagecropperKey = this.imagecropperKey + 1
},
···其他方法
},
5、测试
上传成功! 头像成功存入阿里云
三、EasyExcel
1、Excel导入导出的应用场景
1、数据导入:减轻录入工作量
2、数据导出:统计信息归档
3、数据传输:异构系统之间数据传输
2、EasyExcel简介
1、EasyExcel特点
Java领域解析、生成Excel比较有名的框架有Apache poi、jxl等。但他们都存在一个严重的问题就是非常的耗内存。如果你的系统并发量不大的话可能还行,但是一旦并发上来后一定会OOM或者JVM频繁的full gc。
EasyExcel是阿里巴巴开源的一个excel处理框架,以使用简单、节省内存著称。EasyExcel能大大减少占用内存的主要原因是在解析Excel时没有将文件数据一次性全部加载到内存中,而是从磁盘上一行行读取数据,逐个解析。
EasyExcel采用一行一行的解析模式,并将一行的解析结果以观察者的模式通知处理(AnalysisEventListener)。
读写操作可以看其他一篇文章https://blog.csdn.net/wang121213145/article/details/122868063?spm=1001.2014.3001.5501,项目下面会直接使用到easyexcel
四、课程分类管理
(1)添加课程分类后端接口实现
1、使用代码生层工具生成相应的层代码
生成成功
2、service-edu模块配置依赖
<dependencies>
<!-- https://mvnrepository.com/artifact/com.alibaba/easyexcel -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>easyexcel</artifactId>
<version>2.1.1</version>
</dependency>
</dependencies>
3、Controller业务处理
EduSubjectController.java
package com.xii.eduservice.controller;
import com.xii.commonutils.R;
import com.xii.eduservice.service.EduSubjectService;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
/**
* <p>
* 课程科目 前端控制器
* </p>
*
* @author xhjava
* @since 2022-02-10
*/
@RestController
@RequestMapping("/eduservice/subject")
@Api(description = "添加课程")
@CrossOrigin //跨域
public class EduSubjectController {
@Autowired
private EduSubjectService subjectService;
//添加课程
//获取上传过来的文件 把文件内容读取出来
@PostMapping("addSubject")
@ApiOperation(value = "上传课程文件")
public R addSubject(MultipartFile file){ //MultipartFile 获取文件
//上传过来的文件
subjectService.saveSubject(file,subjectService);
return R.ok();
}
}
4、创建和Excel对应的实体类
package com.xii.eduservice.entity.excel;
import com.alibaba.excel.annotation.ExcelProperty;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.ToString;
/**
* @description: 操作excel的实体类 对应excel前两列
*
* @author wangxihao
* @email wangxh0108@163.com
**/
@Data
public class SubjectData {
@ExcelProperty(index = 0) //读取的excel文件中的第一列
private String oneSubjectName;
@ExcelProperty(index = 1) //读取的excel文件中的第二列
private String twoSubjectName;
}
5、EduSubjectService
(1)接口
public interface EduSubjectService extends IService<EduSubject> {
//添加课程
void saveSubject(MultipartFile file,EduSubjectService subjectService);
}
(2)实现类
package com.xii.eduservice.service.impl;
import java.io.InputStream;
/**
* <p>
* 课程科目 服务实现类
* </p>
*
* @author xhjava
* @since 2022-02-10
*/
@Service
public class EduSubjectServiceImpl extends ServiceImpl<EduSubjectMapper, EduSubject> implements EduSubjectService {
/**
* @description: 添加课程分类
*
* @author wangxihao
* @email wangxh0108@163.com
**/
@Override
public void saveSubject(MultipartFile file,EduSubjectService subjectService) {
try {
//1 获取文件输入流
InputStream inputStream = file.getInputStream();
// 这里 需要指定读用哪个class去读,然后读取第一个sheet 文件流会自动关闭
EasyExcel.read(inputStream, SubjectData.class, new SubjectExcelListener(subjectService)).sheet().doRead();
}catch(Exception e) {
e.printStackTrace();
throw new XiiException(20002,"添加课程分类失败");
}
}
}
6、创建读取Excel监听器
package com.xii.eduservice.listener;
import com.alibaba.excel.context.AnalysisContext;
import com.alibaba.excel.event.AnalysisEventListener;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.xii.eduservice.entity.EduSubject;
import com.xii.eduservice.entity.excel.SubjectData;
import com.xii.eduservice.service.EduSubjectService;
import com.xii.servicebase.exceptionhandler.XiiException;
import java.util.Map;
/**
* @description: excel上传读取监听器
*
* @author wangxihao
* @email wangxh0108@163.com
**/
// SubjectExcelListener不能交给spring去管理 不需要 需要手动用
public class SubjectExcelListener extends AnalysisEventListener<SubjectData> {
//手动写有参无参构造 给EduSubjectService赋值
public EduSubjectService subjectService;
public SubjectExcelListener() {}
//创建有参数构造,传递subjectService用于操作数据库
public SubjectExcelListener(EduSubjectService subjectService) {
this.subjectService = subjectService;
}
//一行一行的读取内容
@Override
public void invoke(SubjectData subjectData, AnalysisContext analysisContext) {
if(subjectData == null) {
throw new XiiException(20001,"添加失败!文件为空!");
}
System.out.println("数据行"+subjectData);
//添加一级分类 判断是不是一级标题
EduSubject existOneSubject = SubjectExcelListener.existOneSubject(subjectService,subjectData.getOneSubjectName());
if(existOneSubject == null) {//没有相同的 添加为一级标题
existOneSubject = new EduSubject();
existOneSubject.setTitle(subjectData.getOneSubjectName());
existOneSubject.setParentId("0");
subjectService.save(existOneSubject);
}
// 每个数据都有一级标题 获得一级分类的id
String pid = existOneSubject.getId();
//添加二级分类 判断添加二级标题
EduSubject existTwoSubject = SubjectExcelListener.existTwoSubject(subjectService,subjectData.getTwoSubjectName(),pid);
if(existTwoSubject == null) {//没有相同的 添加为一级标题
existTwoSubject = new EduSubject();
existTwoSubject.setTitle(subjectData.getTwoSubjectName());
existTwoSubject.setParentId(pid);
subjectService.save(existTwoSubject);
}
}
//读取的头
@Override
public void invokeHeadMap(Map<Integer, String> headMap, AnalysisContext context) {
System.out.println("表格"+headMap);
}
//读取后执行
@Override
public void doAfterAllAnalysed(AnalysisContext analysisContext) {
}
//判断一级分类是否重复
private static EduSubject existOneSubject(EduSubjectService subjectService,String name) {
QueryWrapper<EduSubject> wrapper = new QueryWrapper<>();
wrapper.eq("title",name);
wrapper.eq("parent_id","0");
EduSubject eduSubject = subjectService.getOne(wrapper);
System.out.println("查询一级分类:"+eduSubject);
return eduSubject;
}
//判断二级分类是否重复
private static EduSubject existTwoSubject(EduSubjectService subjectService,String name,String pid) {
//MP的条件构造器
QueryWrapper<EduSubject> wrapper = new QueryWrapper<>();
wrapper.eq("title",name);
wrapper.eq("parent_id",pid);
EduSubject eduSubject = subjectService.getOne(wrapper);
return eduSubject;
}
}
7、Swagger接口测试
添加成功!
(2)添加课程分类前端实现
1、添加路由
// 课程分类管理
{
path: '/edu/subject',
component: Layout,
redirect: '/edu/subject/list',
name: 'Subject',
meta: { title: '课程分类管理', icon: 'nested' },
children: [
{
path: 'list',
name: 'EduSubjectList',
component: () => import('@/views/edu/subject/list'),
meta: { title: '课程分类列表' }
},
{
path: 'import',
name: 'EduSubjectImport',
component: () => import('@/views/edu/subject/import'),
meta: { title: '导入课程分类' }
}
]
},
2、添加vue组件
3、表单组件save.vue
使用element-ui上传文件的组件
<template>
<div class="app-container">
<el-form label-width="120px">
<el-form-item label="信息描述">
<el-tag type="info">excel模版说明</el-tag>
<el-tag>
<i class="el-icon-download"/>
<a :href="'/static/subjectdemo/添加课程.xlsx'">点击下载模版</a>
</el-tag>
</el-form-item>
<el-form-item label="选择Excel">
<!-- auto-upload 自动提交 accept 文件类型 -->
<el-upload
ref="upload"
:auto-upload="false"
:on-success="fileUploadSuccess"
:on-error="fileUploadError"
:disabled="importBtnDisabled"
:limit="1"
:action="BASE_API+'/eduservice/subject/addSubject'"
name="file"
accept="application/vnd.ms-excel">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button
:loading="loading"
style="margin-left: 10px;"
size="small"
type="success"
@click="submitUpload">{{ fileUploadBtnText }}</el-button>
</el-upload>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
fileUploadBtnText:"上传到服务器",
BASE_API: process.env.BASE_API, // 接口API地址
importBtnDisabled: false, // 按钮是否禁用,
loading: false
}
},
created(){
},
methods:{
//点击上传
submitUpload() {
this.fileUploadBtnText = '正在上传'
this.importBtnDisabled = true
this.loading = true
this.$refs.upload.submit()
},
//上传成功回调函数 response为接口的返回值
fileUploadSuccess(response){
if (response.success === true) {
this.fileUploadBtnText = '导入成功'
this.loading = false
this.$message({
type: 'success',
message: response.message
})
}
},
//失败事件
fileUploadError(response) {
this.fileUploadBtnText = '导入失败'
this.loading = false
this.$message({
type: 'error',
message: '导入失败'
})
}
}
}
</script>
<style>
</style>
(3)课程分类列表后端实现
课程列表是使用的树形菜单,前端接收的参数类型为
后端封装成此类型的参数
1、创建一级分类二级分类实体
/**
* @description: 一级分类
*
* @author wangxihao
* @email wangxh0108@163.com
**/
@Data
public class OneSubject {
private String id;
private String title;
//一个一级分类里面会有多个二级分类
private List<TwoSubject> children = new ArrayList<TwoSubject>();
}
/**
* @description: 二级分类
*
* @author wangxihao
* @email wangxh0108@163.com
**/
@Data
public class TwoSubject {
private String id;
private String title;
}
2、Controller层
@GetMapping("getAllSubject")
@ApiOperation(value = "得到课程列表(树形菜单)")
public R getAllSubject(){
//list集合泛型 是一级分类
List<OneSubject> list = subjectService.getAllOneTwoSubject();
return R.ok().data("list",list);
}
3、Service接口以及实体类
//课程分类列表(树形)
List<OneSubject> getAllOneTwoSubject();
实体类封装数据全过程
package com.xii.eduservice.service.impl;
import com.alibaba.excel.EasyExcel;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.xii.eduservice.entity.EduSubject;
import com.xii.eduservice.entity.excel.SubjectData;
import com.xii.eduservice.entity.subject.OneSubject;
import com.xii.eduservice.entity.subject.TwoSubject;
import com.xii.eduservice.listener.SubjectExcelListener;
import com.xii.eduservice.mapper.EduSubjectMapper;
import com.xii.eduservice.service.EduSubjectService;
import com.xii.servicebase.exceptionhandler.XiiException;
import org.springframework.beans.BeanUtils;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;
import java.io.InputStream;
import java.util.ArrayList;
import java.util.List;
/**
* <p>
* 课程科目 服务实现类
* </p>
*
* @author xhjava
* @since 2022-02-10
*/
@Service
public class EduSubjectServiceImpl extends ServiceImpl<EduSubjectMapper, EduSubject> implements EduSubjectService {
/**
* @description: 添加课程分类
*
* @author wangxihao
* @email wangxh0108@163.com
**/
@Override
public void saveSubject(MultipartFile file,EduSubjectService subjectService) {
try {
//1 获取文件输入流
InputStream inputStream = file.getInputStream();
// 这里 需要指定读用哪个class去读,然后读取第一个sheet 文件流会自动关闭
EasyExcel.read(inputStream, SubjectData.class, new SubjectExcelListener(subjectService)).sheet().doRead();
}catch(Exception e) {
e.printStackTrace();
throw new XiiException(20002,"添加课程分类失败");
}
}
/**
* @description: 得到树形列表
*
* @author wangxihao
* @email wangxh0108@163.com
**/
@Override
public List<OneSubject> getAllOneTwoSubject() {
//获取一级分类数据记录 parent_id = 0 存入list集合
QueryWrapper<EduSubject> queryWrapper = new QueryWrapper<>();
queryWrapper.eq("parent_id", 0);
queryWrapper.orderByAsc("sort", "id");
List<EduSubject> oneSubjectList = baseMapper.selectList(queryWrapper);
//获取二级分类数据记录 parent_id != 0
QueryWrapper<EduSubject> queryWrapper2 = new QueryWrapper<>();
queryWrapper2.ne("parent_id", 0);
queryWrapper2.orderByAsc("sort", "id");
List<EduSubject> twoSubjectList = baseMapper.selectList(queryWrapper2);
//创建最终要的到的数据列表
ArrayList<OneSubject> subjectNestedVoArrayList = new ArrayList<>();
//遍历一级标题集合 封装一级分类 将一级标题集合内容放到最终需要的集合中 使用
for (int i = 0; i < oneSubjectList.size(); i++) {
//所有一级标题
EduSubject eduSubject = oneSubjectList.get(i);
OneSubject oneSubject = new OneSubject();
// oneSubject.setId(eduSubject.getId());
// oneSubject.setTitle(eduSubject.getTitle()); 这样写比较麻烦 使用工具类BeanUtils 复制另一个对象
BeanUtils.copyProperties(eduSubject,oneSubject);
subjectNestedVoArrayList.add(oneSubject);//加入到最终所需集合
//封装二级分类 遍历所有二级分类
//创建存储二级分类的集合
ArrayList<TwoSubject> twoFinalSubjectList = new ArrayList<>();
for (int j = 0; j < twoSubjectList.size(); j++) {
EduSubject teduSubject = twoSubjectList.get(j);
//如果二级标题的父id等于一级标题的id
if(eduSubject.getId().equals(teduSubject.getParentId())){
//创建二级类别vo对象
TwoSubject twoSubject = new TwoSubject();
BeanUtils.copyProperties(teduSubject,twoSubject); //前面对象的内容复制到后面对象中
//添加到存储二级分类的集合数据列表
twoFinalSubjectList.add(twoSubject);
}
}
//将该二级分类列表添加到当前一级列表的Children
oneSubject.setChildren(twoFinalSubjectList);
}
return subjectNestedVoArrayList;
}
}
4、测试
成功得到数据列表!
(4)课程分类列表前端实现
1、创建api
import request from '@/utils/request'
//课程列表 请求后端
export default {
getSubjectListPage() {
return request({
url: `/eduservice/subject/getAllSubject`,
method: 'get'
})
}
}
//默认写法
// export function getList(params) {
// return request({
// url: '/table/list',
// method: 'get',
// params
// })
// }
2、list.vue
<template>
<!-- 树形菜单 -->
<div class="app-container">
<el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" />
<el-tree
ref="tree2"
:data="data2"
:props="defaultProps"
:filter-node-method="filterNode"
class="filter-tree"
default-expand-all
/>
</div>
</template>
<script>
import subject from '@/api/edu/subject'
export default {
data() {
return {
filterText: '',
data2: [], //数据列表
defaultProps: {
children: 'children',
label: 'title' //与数据库返回来的数据字段对应
}
}
},
watch: { // 响应数据的变化
filterText(val) {
this.$refs.tree2.filter(val)
}
},
created(){ //页面渲染后执行
this.getAllSubjectList()
},
methods: {
//获得请求数据
getAllSubjectList() {
subject.getSubjectList()
.then(response => { //.then 成功返回执行
// console.log(response.data.list)
this.data2 = response.data.list
})
},
filterNode(value, data) {
if (!value) return true
return data.title.toLowerCase().indexOf(value.toLowerCase()) !== -1 //统一比较大写
}
}
}
</script>