《5K入门级项目实战:好来屋在线影院》之第 9 战 —— 电影信息管理

OK,这一节讲解后台管理的最后一个功能:电影信息管理。主要对“添加电影信息”的列表管理。

《5K入门级项目实战:好来屋在线影院》之第 9 战 —— 电影信息管理_第1张图片

我们先在 html 目录下,创建一个 movieManage.html 文件





电影管理页面









编号 电影主图 电影名称 电影标题 是否热门 发布日期
 电影名称:  搜索

接下来,我们开发 API 接口,用来查询电影信息的列表。 

《5K入门级项目实战:好来屋在线影院》之第 9 战 —— 电影信息管理_第2张图片

跟上一篇博客讲解的差不多,直接上代码,这部分功能写在 MovieInfoController 即可:

    //分页查询电影信息
    @ResponseBody
    @RequestMapping("/list")
    public Map list(SearchInfo info, @RequestParam(value = "page", required = false) Integer page, @RequestParam(value = "rows", required = false) Integer rows) {
        Map map = movieInfoManage.getMovieList(info, page, rows);
        return map;
    }

MovieInfoManage 接口增加代码:

    //分页查询电影信息
    Map getMovieList(SearchInfo info, int page, int rows);

MovieInfoManageImpl 实现类增加代码:

    //分页查询电影信息
    @Override
    public Map getMovieList(SearchInfo info, int page, int rows){
        Map map = new HashMap<>();
        try{
            PageQuery pageQuery = SearchInfoUtil.getPageQuery(info,page,rows);
            List list = movieInfoService.findBy(pageQuery);
            map = SearchInfoUtil.getResult(pageQuery,list);//封装结果
        }catch (Exception e){
            e.printStackTrace();
        }
        return map;
    }

MovieInfoService 类增加代码:

    //分页查询
    @Transactional(readOnly = true)
    public List findBy(PageQuery pageQuery){
        return movieInfoDao.findBy(pageQuery);
    }

MovieInfoDao 接口增加代码:

    //分页查询
    List findBy(PageQuery pageQuery);

MovieInfoEntityMapper.xml 文件增加代码(根据主键 id 倒序):

    
    

OK,重启服务,看下效果:

《5K入门级项目实战:好来屋在线影院》之第 9 战 —— 电影信息管理_第3张图片

老铁们,没毛病!

接下来,测试查询功能,搜索框输入电影名称,支持模糊查询:

《5K入门级项目实战:好来屋在线影院》之第 9 战 —— 电影信息管理_第4张图片

OK,搞定。

接下来,我们开发删除电影信息的 API 接口。在删除信息前,我们先弄一些测试数据,这里教一个方法:

insert into movie_info
(select null,movie_name,movie_title,hot,image_name,movie_content,create_time
from movie_info where id = 1);

多执行几次,就可以把电影信息表的 id=1 的信息新增到电影表中,做一些测试。

OK,开发删除接口,需要注意请求的 URL 路径,以及返回的 key。

《5K入门级项目实战:好来屋在线影院》之第 9 战 —— 电影信息管理_第5张图片

 

MovieInfoController 类增加代码:

    //删除电影信息
    @ResponseBody
    @RequestMapping("/delete")
    public Map delete(@RequestParam(value="ids")String ids){
        Map map = new HashMap<>();
        boolean flag = movieInfoManage.delete(ids);
        map.put("flag", flag);
        return map;
    }

MovieInfoManage 接口增加函数: 

    //删除电影信息
    boolean delete(String ids);

MovieInfoManageImpl 实现类增加代码:

    //删除电影信息
    @Override
    public boolean delete(String ids) {
        boolean flag = false;
        try {
            //用逗号分隔前端传递的 id 集合
            String[] idsArr = ids.split(",");
            for(String id : idsArr){
                movieInfoService.delete(Integer.parseInt(id));
            }
            flag = true;
        } catch (Exception e) {
            e.printStackTrace();
        }
        return flag;
    }

MovieInfoService 增加代码: 

    //删除电影信息
    @Transactional(readOnly = false)
    public int delete(Integer id){
        return movieInfoDao.delete(id);
    }

MovieInfoDao 增加代码: 

    //删除电影信息
    int delete(Integer id);

MovieInfoEntityMapper.xml 增加代码(之前已经有了无需增加):

    
  
    delete from movie_info
    where id = #{id,jdbcType=INTEGER}
  

OK,重启服务,测试:

《5K入门级项目实战:好来屋在线影院》之第 9 战 —— 电影信息管理_第6张图片

《5K入门级项目实战:好来屋在线影院》之第 9 战 —— 电影信息管理_第7张图片

OK,搞定!

还有一个功能,就是“修改”电影信息。

《5K入门级项目实战:好来屋在线影院》之第 9 战 —— 电影信息管理_第8张图片

我们以一个新的 tab 页打开,把电影的主键 id 带过去。

OK,我们新建 modifyMovie.html 文件:




    
    修改电影信息页面
    
    
    
    
    
    




电影名称:
电影标题:
电影主图:
是否热门:
电影详情:
发布信息

说明:

1、修改电影信息的请求 API 我们仍然使用 save 方法,不过需要做一点小变动:判断是否有主键 id,有则修改,无则新增。稍后说。

《5K入门级项目实战:好来屋在线影院》之第 9 战 —— 电影信息管理_第9张图片

2、我们把电影主图也带出来了,只是不显示(hidden),而定义一个 type = "file" 的控件,重新上传。如果不选择文件,则主图不变。后台 API 有判断 file 是否是空的。

《5K入门级项目实战:好来屋在线影院》之第 9 战 —— 电影信息管理_第10张图片

3、获取上一个页面传递的 id,以及调用 selectById 方法查询后台返回的电影信息,并设置到对应的位置中。

《5K入门级项目实战:好来屋在线影院》之第 9 战 —— 电影信息管理_第11张图片

 

OK,我们看下后台 API 如何改造。

MovieInfoController 类新增代码:

    //根据 id 查询电影信息
    @ResponseBody
    @RequestMapping("/selectById")
    public MovieInfoEntity selectById(@RequestParam(value="id")Integer id){
        MovieInfoEntity entity = movieInfoManage.selectById(id);
        return entity;
    }

MovieInfoManage 接口新增代码:

    //根据 id 查询电影信息
    MovieInfoEntity selectById(Integer id);

MovieInfoManageImpl 实现类新增代码,同时修改 save 方法的判断逻辑:判断是否有主键 id

    //根据 id 查询电影信息
    @Override
    public MovieInfoEntity selectById(Integer id){
        MovieInfoEntity infoEntity = null;
        try{
            infoEntity = movieInfoService.selectById(id);
            //将获取到的电影信息进行解码,save 方法里有提到过
            if(null != infoEntity){
                //解码只需一个方法即可,解码后返回给前端,跟传递进来的时候是一样的。
                String movieContent = HtmlUtils.htmlUnescape(infoEntity.getMovieContent());
                infoEntity.setMovieContent(movieContent);//重新设置属性值
            }
        }catch (Exception e){
            e.printStackTrace();
        }
        return infoEntity;
    }
//新增电影信息
    @Override
    public boolean save(MovieInfoEntity entity, MultipartFile file) {
        boolean flag = false;
        try {
            if (!file.isEmpty()) {
                String originalFilename = file.getOriginalFilename();//获取文件名
                String suffixName = originalFilename.substring(originalFilename.lastIndexOf("."));//获取文件后缀
                String newFileName = System.currentTimeMillis() + suffixName;//新的文件名,避免文件名重复
                FileCopyUtils.copy(file.getInputStream(), new FileOutputStream(imageFilePath + newFileName));
                entity.setImageName(newFileName);//设置到实体中
            }

            //将富文本的 html 代码转换特殊字符,防止对网站进行xss跨站攻击
            //方案 1:转成十进制
            String movieContent = HtmlUtils.htmlEscapeDecimal(entity.getMovieContent());
            //方案 2:转成十六进制
            //String movieContent = HtmlUtils.htmlEscapeHex(entity.getMovieContent());

            entity.setMovieContent(movieContent);

            int count = 0;
            if(null != entity.getId()){//有主键 id,是修改
                count = movieInfoService.update(entity);
            }else{//没有主键id,是新增
                count = movieInfoService.insert(entity);
            }
            if (count > 0) {
                flag = true;
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        return flag;
    }

MovieInfoService 新增代码:

    //根据 id 查询电影信息
    @Transactional(readOnly = true)
    public MovieInfoEntity selectById(Integer id){
        return movieInfoDao.selectById(id);
    }

    //更新电影信息
    public int update(MovieInfoEntity entity){
        return movieInfoDao.update(entity);
    }

MovieInfoDao 新增代码:

    //根据 id 查询电影信息
    MovieInfoEntity selectById(Integer id);

    //更新电影信息
    int update(MovieInfoEntity entity);

MovieInfoEntityMapper.xml 新增代码(之前已经有的话可以不新增):

  
  
    update movie_info
    
        
            movie_name = #{movieName,jdbcType=VARCHAR},
        
        
            movie_title = #{movieTitle,jdbcType=VARCHAR},
        
        
            hot = #{hot,jdbcType=CHAR},
        
        
            image_name = #{imageName,jdbcType=VARCHAR},
        
        
            movie_content = #{movieContent,jdbcType=LONGVARCHAR}
        
    
    where id = #{id,jdbcType=INTEGER}
  

    
  

OK,我们做测试:

《5K入门级项目实战:好来屋在线影院》之第 9 战 —— 电影信息管理_第12张图片

点击“修改”,打开新的 tab 页面

《5K入门级项目实战:好来屋在线影院》之第 9 战 —— 电影信息管理_第13张图片

《5K入门级项目实战:好来屋在线影院》之第 9 战 —— 电影信息管理_第14张图片

 

然后我们回到列表页面,点击分页下面的 刷新 按钮,即可查看到最新数据。

 

《5K入门级项目实战:好来屋在线影院》之第 9 战 —— 电影信息管理_第15张图片

 

OK,到这里,我们的后台管理已经全部搞定。后面继续讲解用户端的使用页面。

 

 

你可能感兴趣的:(新手入门级项目,EasyUI,DataGrid)