文章目录

• • 一、前言
  • 二、效果
  • 三、编码过程
  • • 1.前端：
    • • index.vue
      • projectShow.js
      • 富文本框: Editor/index.vue
      • 图片上传：ImgUploadCropper/index.vue
    • 2.后端：
    • • 实体ProjectShow
      • ProjectShowController
      • IProjectShowService
      • ProjectShowServiceImpl
      • ProjectShowMapper
      • ProjectShowMapper.xml

一、前言

现在的需求是：实现一个项目展示模块，后端管理页面除了需要基础信息外，要加上一个图片上传和富文本框编辑器功能。

二、效果

点击”图片存储地址”：可上传电脑任何位置的图片，并可对图片进行放大，缩小，和旋转。

存入数据库的图片以url地址存放

url直接百度可看到图片：

三、编码过程

1.前端：

index.vue

projectShow.js

import request from '@/utils/request'// 查询项目展示列表
export function listProjectShow(query) {return request({url: '/projectShow/list',method: 'get',params: query})
}
// 新增项目展示
export function addProjectShow(data) {return request({url: '/projectShow',method: 'post',data: data})
}// 修改项目展示
export function updateProjectShow(data) {return request({url: '/projectShow',method: 'put',data: data})
}
// 点击修改按钮获取到具体cpsp项目的详情
export function getProjectShow(id) {return request({url: '/projectShow/' + id,method: 'get'})
}// 删除资产分类
export function delProjectShow(id) {return request({url: '/projectShow/' + id,method: 'delete'})
}

富文本框: Editor/index.vue

图片上传：ImgUploadCropper/index.vue

2.后端：

实体ProjectShow

@Data
public class ProjectShow {/** 自增长主键ID */private Long id;/** 项目名称 */@NotNull(message = "项目名称不能为空")private String projectName;/** 项目类型*/@NotNull(message = "项目类型不能为空")private String projectType;/** 图片路径 */@NotNull(message = "图片路径不能为空")private String picUrl;/** 项目详情*/@NotNull(message = "项目详情不能为空")private String projectDetail;/** 创建人 */@NotNull(message = "创建人不能为空")private String createUser;/** 创建日期  */@JsonFormat(pattern = "yyyy-MM-dd")private Date createTime;/** 更新人 */private String updateUser;/** 更新日期  */@JsonFormat(pattern = "yyyy-MM-dd")private Date updateTime;/** 备注 */private String remark;
}

ProjectShowController

@RestController
@RequestMapping("/projectShow")
public class ProjectShowController extends BaseController {@Autowiredprivate IProjectShowService iProjectShowService;@GetMapping("/list")public AjaxResult list(ProjectShow projectShow) {List list = iProjectShowService.selectProjectShowList(projectShow);return  AjaxResult.success(list);}@PostMappingpublic AjaxResult add(@RequestBody ProjectShow projectShow) {return toAjax(iProjectShowService.insertProjectShow(projectShow));}/*** 修改*/@PutMappingpublic AjaxResult edit(@RequestBody ProjectShow projectShow) {return toAjax(iProjectShowService.updateProjectShow(projectShow));}/*** 点击修改按钮后获项目展示的详细信息*/@GetMapping(value = "/{id}")public AjaxResult getInfo(@PathVariable("id") Long id) {return AjaxResult.success(iProjectShowService.selectProjectShowById(id));}/*** 删除*/@DeleteMapping("/{ids}")public AjaxResult remove(@PathVariable Long[] ids) {return toAjax(iProjectShowService.deleteProjectShowByIds(ids));}}

IProjectShowService

public interface IProjectShowService {public List selectProjectShowList(ProjectShow projectShow);public int insertProjectShow(ProjectShow projectShow);public int updateProjectShow(ProjectShow projectShow);public ProjectShow  selectProjectShowById(Long id);public int deleteProjectShowByIds(Long[] ids);}

ProjectShowServiceImpl

@Service
@Slf4j
public class ProjectShowServiceImpl  implements IProjectShowService {@Autowiredprivate ProjectShowMapper projectShowMapper;@Autowiredprivate TokenService tokenService;@Overridepublic List selectProjectShowList(ProjectShow projectShow) {return projectShowMapper.selectProjectShowList(projectShow);}@Overridepublic int insertProjectShow(ProjectShow projectShow) {LoginUser loginUser = tokenService.getLoginUser(ServletUtils.getRequest());SysUser user = loginUser.getUser();projectShow.setCreateUser(user.getUserName());projectShow.setCreateTime(new Date());return projectShowMapper.insertProjectShow(projectShow);}@Overridepublic int updateProjectShow(ProjectShow projectShow) {LoginUser loginUser = tokenService.getLoginUser(ServletUtils.getRequest());SysUser user = loginUser.getUser();projectShow.setUpdateUser(user.getUserName());projectShow.setUpdateTime(new Date());return  projectShowMapper.updateProjectShow(projectShow);}@Overridepublic ProjectShow selectProjectShowById(Long id) {return projectShowMapper.selectProjectShowById(id);}@Overridepublic int deleteProjectShowByIds(Long[] ids) {return projectShowMapper.deleteProjectShowByIds(ids);}}

ProjectShowMapper

@Repository
public interface ProjectShowMapper {public List selectProjectShowList(ProjectShow projectShow);public List selectProjectShowList();public int insertProjectShow(ProjectShow projectShow);//修改public int updateProjectShow(ProjectShow projectShow);public ProjectShow selectProjectShowById(Long id);public int deleteProjectShowByIds(Long[] ids);
}

ProjectShowMapper.xml

select id, project_name, project_type, pic_url, project_detail, create_user, create_time ,update_user ,update_time ,remark from project_showwhere id = #{id}insert into project_showproject_name,project_type,pic_url,project_detail,create_user,create_time,update_user,update_time,remark,#{projectName},#{projectType},#{picUrl},#{projectDetail},#{createUser},#{createTime},#{updateUser},#{updateTime},#{remark},update project_showproject_name=#{projectName},project_type=#{projectType},pic_url=#{picUrl},project_detail=#{projectDetail},create_user=#{createUser},create_time=#{createTime},update_user=#{updateUser},update_time=#{updateTime},remark=#{remark},where id = #{id}delete from project_show where id in#{id}