文章目录

• • 一、前言
  • 二、效果
  • 三、编码过程
  • • 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 {
              @Autowired
              private IProjectShowService iProjectShowService;
              @GetMapping("/list")
              public AjaxResult list(ProjectShow projectShow) {
                  List list = iProjectShowService.selectProjectShowList(projectShow);
                  return  AjaxResult.success(list);
              }
              @PostMapping
              public AjaxResult add(@RequestBody ProjectShow projectShow) {
                  return toAjax(iProjectShowService.insertProjectShow(projectShow));
              }
              /**
               * 修改
               */
              @PutMapping
              public 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 {
              @Autowired
              private ProjectShowMapper projectShowMapper;
              @Autowired
              private TokenService tokenService;
              @Override
              public List selectProjectShowList(ProjectShow projectShow) {
                  return projectShowMapper.selectProjectShowList(projectShow);
              }
              @Override
              public 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);
              }
              @Override
              public 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);
              }
              @Override
              public ProjectShow selectProjectShowById(Long id) {
                  return projectShowMapper.selectProjectShowById(id);
              }
              @Override
              public 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_show
              
              
                  
              
              
                  
                  where id = #{id}
              
              
                  insert into project_show
                  
                      project_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_show
                  
                      project_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}