ssm项目管理（三）新增功能

谁借莪１个温暖的怀抱￠ 2022-01-10 02:33 303阅读 0赞

### 1.图片上传并预览 ###

此处使用的是ElementUI提供的上传组件el-upload，提供了多种不同的上传效果，上传成功后可以进行预览。

## 实现步骤 ##

## 前端代码 ##

### 1.1定义模型数据，用于后面上传文件的图片预览： ###

![20190620212246571.png][]

### 1.2定义上传组件： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70][]

### 1.3定义对应的钩子函数 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 1][]

## 后端代码 ##

### 1,1创建SetmealController接收上传文件 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 3][]

## 前端代码 ##

### 添加 ###

### 提交请求 ###

> 当用户点击新增窗口中的确定按钮时发送ajax请求将数据提交到后台进行数据库操作。提交到后台的数据分为两部分：套餐基本信息（对应的模型数据为formData）和检查组id数组（对应的模型数据为checkgroupIds）

### 1.1为确定按钮绑定单击事件，对应的处理函数为handleAdd ###

![20190620215233975.png][]

### 1.2完善handleAdd方法 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 4][]

## 后端代码 ##

### 1.1Controller在SetmealController中增加方法 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 5][]

### 1.2服务实现类创建SetmealServiceImpl服务实现类并实现新增方法 ###

package com.itheima.service;
    
    import com.alibaba.dubbo.config.annotation.Service;
    import com.itheima.pojo.Setmeal;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.transaction.annotation.Transactional;
    
    import java.util.HashMap;
    import java.util.Map;
    
    /***
     * 体验套餐实现类
     */
    @Service(interfaceClass = SetmealService.class)
    @Transactional
    public class SetmealServiceImp implements SetmealService{
        @Autowired
        private SetmealDao setmealDao;
    
        /***
         * 新增套餐
         * @param setmeal
         * @param checkgroupIds
         */
        @Override
        public void add(Setmeal setmeal, Integer[] checkgroupIds) {
             setmealDao.add(setmeal);
             if(checkgroupIds!=null&&checkgroupIds.length>0){
                 //绑定套餐和检查组的多对多关系
                 setSetmealAndCheckGroup(Setmeal.getId(),checkgroupIds)
             }
        }
    
        /***
         * 绑定套餐多对多关系
         * 套餐和检查组的多对多关系
         * @param id
         * @param checkgroupIds
         */
        private void setSetmealAndCheckGroup(Integer id, Integer[] checkgroupIds) {
            for (Integer checkgroupId : checkgroupIds) {
                Map<String,Integer> map=new HashMap<String,Integer>();
                map.put("setmeal_id",id);
                map.put("checkgroup_id",checkgroupId);
                setmealDao.setSetmealAndCheckGroup(map);
            }
        }
    
    }

### 1.3Dao接口创建SetmealDao接口并提供相关方法 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 6][]

### 1.4Mapper映射文件创建SetmealDao.xml文件并定义相关SQL语句 ###

<?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
            "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
    <mapper namespace="com.itheima.dao.SetmealDao" >
        
        <insert id="add" parameterType="com.itheima.pojo.Setmeal">
            <selectKey resultType="java.lang.Integer" order="AFTER" keyProperty="id">
                SELECT LAST_INSERT_ID()
            </selectKey>
            insert into t_setmeal
          		(code,name,sex,age,helpCode,price,remark,attention,img)
            		values 
          		(#{code},#{name},#{sex},#{age},#{helpCode},#{price},#{remark},#{attention},#{img})
        </insert>
        
        <insert id="setSetmealAndCheckGroup" parameterType="hashmap">
            insert into t_setmeal_checkgroup
          		(setmeal_id,checkgroup_id) 
          			values
          		(#{setmeal_id},#{checkgroup_id})
        </insert>
    </mapper>

[20190620212246571.png]: /images/20220109/f17e188179d3451d8bd028dd711f3095.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70]: /images/20220109/1c3b2fd1a5f442998f292ef5a26dee26.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 1]: /images/20220109/b5b06089a36b467c883bfab51b926b87.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 2]: /images/20220109/05b239729d3e4494a01979061c17d11e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 3]: /images/20220109/038317b8ff3f43ada6cbae2ff6efeb31.png
[20190620215233975.png]: /images/20220109/4111a2a6eff54d958deecb0b5257d23c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 4]: /images/20220109/9d9470a66ff24cfb8b60f1ae7ed812ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 5]: /images/20220109/1d8db045c2fc4e23959f517823daa411.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 6]: /images/20220109/e7dfe1d845f84825846d9965949179d1.png