VUE el-select下拉框填充后台数据

Myth丶恋晨 2023-10-10 11:51 25阅读 0赞

## 前端模块 ##

### VUE 之视图定义： ###

<el-form-item label="卡Sid" prop="cardData" >
              <el-select v-model="consume.cardSid" >
                <el-option
                    v-for="item in cardData"
                    :key="item.sid"
                    :label="item.sid"
                    :value="item.sid"> 
                </el-option>
             </el-select>
             </el-form-item>
             <el-form-item label="设备终端Sid" prop="deviceData" >
              <el-select v-model="consume.terminalSid" >
                <el-option
                    v-for="item in deviceData"
                    :key="item.sid"
                    :label="item.name"
                    :value="item.sid"> 
                </el-option>
             </el-select>
             </el-form-item>

### Vue 之模型定义： ###

![20201122233435242.png][]

### Vue 之数据初始化 ###

#### VUE 方法定义：请求后台数据接口加载相关数据 ####

method属性中，添加以下两个方法:

asyncCardData(){
                 this.$axios.get('/card/find').then(res => {
                   console.log(res)
                   console.log(res.data.data.list)
     
                   res.data.data.list.forEach(element => {
                    this.cardData.push({sid:element.sid});
                })}).catch(function (error) {
                      console.log(error)
                  })
            },
            asyncdeviceData(){
                 this.$axios.get('/terminal/find').then(res => {
                   console.log(res)
                   console.log(res.data.data.list)
     
                   res.data.data.list.forEach(element => {
                    this.deviceData.push({sid:element.sid,name:element.name});
                })}).catch(function (error) {
                      console.log(error)
                  })
            },

#### VUE 声明周期函数定义：调用VUE的方法定义，完成数据初始化过程. ####

在VUE声明周期函数create()中，调用asyncCardData()和asyncdeviceData(),完成数据初始化过程。

created() {
         this.asyncCardData();
         this.asyncdeviceData();
     },

## SpringBoot 模块 ##

### 实体定义： ###

package com.zzg.entity;
    
    import java.math.BigDecimal;
    import java.util.Date;
    
    import org.springframework.format.annotation.DateTimeFormat;
    
    import com.fasterxml.jackson.annotation.JsonFormat;
    import com.zzg.common.BaseModel;
    
    public class TCard extends BaseModel {
        /**
    	 * 
    	 */
    	private static final long serialVersionUID = 1035674221133528445L;
    
    	private Integer sid;
    
        private String password;
    
        private String state;
    
        private BigDecimal money;
        
        @DateTimeFormat(pattern="yyyy-MM-dd")
        @JsonFormat(pattern="yyyy-MM-dd",timezone="GMT+8")
        private Date starTime;
    
        @DateTimeFormat(pattern="yyyy-MM-dd")
        @JsonFormat(pattern="yyyy-MM-dd",timezone="GMT+8")
        private Date endTime;
    
        private Integer studentSid;
    
        public Integer getSid() {
            return sid;
        }
    
        public void setSid(Integer sid) {
            this.sid = sid;
        }
    
        public String getPassword() {
            return password;
        }
    
        public void setPassword(String password) {
            this.password = password == null ? null : password.trim();
        }
    
        public String getState() {
            return state;
        }
    
        public void setState(String state) {
            this.state = state == null ? null : state.trim();
        }
    
        public BigDecimal getMoney() {
            return money;
        }
    
        public void setMoney(BigDecimal money) {
            this.money = money;
        }
    
        public Date getStarTime() {
            return starTime;
        }
    
        public void setStarTime(Date starTime) {
            this.starTime = starTime;
        }
    
        public Date getEndTime() {
            return endTime;
        }
    
        public void setEndTime(Date endTime) {
            this.endTime = endTime;
        }
    
        public Integer getStudentSid() {
            return studentSid;
        }
    
        public void setStudentSid(Integer studentSid) {
            this.studentSid = studentSid;
        }
    }

package com.zzg.entity;
    
    import com.zzg.common.BaseModel;
    
    public class TTerminal extends BaseModel {
        /**
    	 * 
    	 */
    	private static final long serialVersionUID = -8248914524801004030L;
    
    	private Integer sid;
    
        private String name;
    
        private Integer adminSid;
    
        public Integer getSid() {
            return sid;
        }
    
        public void setSid(Integer sid) {
            this.sid = sid;
        }
    
        public String getName() {
            return name;
        }
    
        public void setName(String name) {
            this.name = name == null ? null : name.trim();
        }
    
        public Integer getAdminSid() {
            return adminSid;
        }
    
        public void setAdminSid(Integer adminSid) {
            this.adminSid = adminSid;
        }
    }

### mapper 定义： ###

package com.zzg.mapper;
    
    import java.util.List;
    import java.util.Map;
    
    import com.zzg.entity.TCard;
    
    public interface TCardMapper {
    	int deleteByPrimaryKey(Integer sid);
    
    	int insert(TCard record);
    
    	int insertSelective(TCard record);
    
    	TCard selectByPrimaryKey(Integer sid);
    
    	int updateByPrimaryKeySelective(TCard record);
    
    	int updateByPrimaryKey(TCard record);
    
    	/**
    	 * 方法拓展
    	 */
    	List<TCard> select(Map<String, Object> parame);
    
    	Integer count(Map<String, Object> parame);
    
    	void batchInsert(List<TCard> list);
    
    	void batchUpdate(List<TCard> list);
    }

package com.zzg.mapper;
    
    import java.util.List;
    import java.util.Map;
    
    import com.zzg.entity.TTerminal;
    
    public interface TTerminalMapper {
        int deleteByPrimaryKey(Integer sid);
    
        int insert(TTerminal record);
    
        int insertSelective(TTerminal record);
    
        TTerminal selectByPrimaryKey(Integer sid);
    
        int updateByPrimaryKeySelective(TTerminal record);
    
        int updateByPrimaryKey(TTerminal record);
        
    	/**
    	 * 方法拓展
    	 */
    	List<TTerminal> select(Map<String, Object> parame);
    
    	Integer count(Map<String, Object> parame);
    
    	void batchInsert(List<TTerminal> list);
    
    	void batchUpdate(List<TTerminal> list);
    }

### service 定义： ###

package com.zzg.service;
    
    import java.util.List;
    import java.util.Map;
    
    import com.zzg.common.BaseService;
    import com.zzg.common.entity.PageDate;
    import com.zzg.common.entity.PageParam;
    import com.zzg.entity.TCard;
    
    public interface TCardService extends BaseService<TCard> {
    	/**
    	 * 自定义分页
    	 * 
    	 * @param parame
    	 * @param rb
    	 * @return
    	 */
    	public PageDate<TCard> selectPage(Map<String, Object> parame, PageParam rb);
    	
    	/**
    	   *    自定义查询
    	 * @param parame
    	 * @return
    	 */
    	public List<TCard> select(Map<String, Object> parame);
    	
    	/**
    	 * 自定义统计
    	 * @param parame
    	 * @return
    	 */
    	public Integer count(Map<String, Object> parame);
    	
    	/**
    	 * 自定义批量插入
    	 * @param list
    	 */
    	public void batchInsert(List<TCard> list);
    	
    	/**
    	 * 自定义批量更新
    	 * @param list
    	 */
    	public void batchUpdate(List<TCard> list);
    	
    	/**
    	 * 充值记录
    	 * @param tCard
    	 */
    	public void recharge(TCard tCard);
    	
    }

package com.zzg.service.impl;
    
    import java.math.BigDecimal;
    import java.util.List;
    import java.util.Map;
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    
    import com.github.pagehelper.PageHelper;
    import com.github.pagehelper.PageInfo;
    import com.zzg.common.AbstractService;
    import com.zzg.common.entity.PageDate;
    import com.zzg.common.entity.PageParam;
    import com.zzg.entity.TCard;
    import com.zzg.mapper.TCardMapper;
    import com.zzg.service.TCardService;
    
    @Service
    public class TCardServiceImpl extends AbstractService<TCard> implements TCardService {
    	@Autowired
    	TCardMapper mapper;
    	
    	public int insert(TCard record) {
    		// TODO Auto-generated method stub
    		return mapper.insert(record);
    	}
    
    	public int insertSelective(TCard record) {
    		// TODO Auto-generated method stub
    		return mapper.insertSelective(record);
    	}
    
    	public TCard selectByPrimaryKey(Integer sid) {
    		// TODO Auto-generated method stub
    		return mapper.selectByPrimaryKey(sid);
    	}
    
    	public int updateByPrimaryKeySelective(TCard record) {
    		// TODO Auto-generated method stub
    		return mapper.updateByPrimaryKeySelective(record);
    	}
    
    	public int updateByPrimaryKey(TCard record) {
    		// TODO Auto-generated method stub
    		return mapper.updateByPrimaryKey(record);
    	}
    
    	public void deleteByPrimaryKey(Integer sid) {
    		// TODO Auto-generated method stub
    		mapper.deleteByPrimaryKey(sid);
    	}
    
    	public PageDate<TCard> selectPage(Map<String, Object> parame, PageParam rb) {
    		// TODO Auto-generated method stub
    		PageHelper.startPage(rb.getPageNo(), rb.getLimit());
    		List<TCard> rs = mapper.select(parame);
    		PageInfo<TCard> pageInfo = new PageInfo<TCard>(rs);
    		return super.page(pageInfo.getList(), pageInfo.getPageNum(), pageInfo.getPageSize(), pageInfo.getTotal());
    	}
    
    	public List<TCard> select(Map<String, Object> parame) {
    		// TODO Auto-generated method stub
    		return mapper.select(parame);
    	}
    
    	public Integer count(Map<String, Object> parame) {
    		// TODO Auto-generated method stub
    		return mapper.count(parame);
    	}
    
    	public void batchInsert(List<TCard> list) {
    		// TODO Auto-generated method stub
    		mapper.batchInsert(list);
    	}
    
    	public void batchUpdate(List<TCard> list) {
    		// TODO Auto-generated method stub
    		mapper.batchUpdate(list);
    	}
    
    	public void recharge(TCard tCard) {
    		// TODO Auto-generated method stub
    		TCard object = mapper.selectByPrimaryKey(tCard.getSid());
    		BigDecimal money = object.getMoney().add(tCard.getMoney());
    		object.setMoney(money);
    		mapper.updateByPrimaryKeySelective(object);
    	}
    
    }

package com.zzg.service;
    
    import java.util.List;
    import java.util.Map;
    
    import com.zzg.common.BaseService;
    import com.zzg.common.entity.PageDate;
    import com.zzg.common.entity.PageParam;
    import com.zzg.entity.TTerminal;
    
    public interface TTerminalService extends BaseService<TTerminal> {
    	/**
    	 * 自定义分页
    	 * 
    	 * @param parame
    	 * @param rb
    	 * @return
    	 */
    	public PageDate<TTerminal> selectPage(Map<String, Object> parame, PageParam rb);
    	
    	/**
    	   *    自定义查询
    	 * @param parame
    	 * @return
    	 */
    	public List<TTerminal> select(Map<String, Object> parame);
    	
    	/**
    	 * 自定义统计
    	 * @param parame
    	 * @return
    	 */
    	public Integer count(Map<String, Object> parame);
    	
    	/**
    	 * 自定义批量插入
    	 * @param list
    	 */
    	public void batchInsert(List<TTerminal> list);
    	
    	/**
    	 * 自定义批量更新
    	 * @param list
    	 */
    	public void batchUpdate(List<TTerminal> list);
    }

package com.zzg.service.impl;
    
    import java.util.List;
    import java.util.Map;
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    
    import com.github.pagehelper.PageHelper;
    import com.github.pagehelper.PageInfo;
    import com.zzg.common.AbstractService;
    import com.zzg.common.entity.PageDate;
    import com.zzg.common.entity.PageParam;
    import com.zzg.entity.TTerminal;
    import com.zzg.mapper.TTerminalMapper;
    import com.zzg.service.TTerminalService;
    
    @Service
    public class TTerminalServiceImpl extends AbstractService<TTerminal> implements TTerminalService {
    	@Autowired
    	 TTerminalMapper mapper;
    	public int insert(TTerminal record) {
    		// TODO Auto-generated method stub
    		return mapper.insert(record);
    	}
    
    	public int insertSelective(TTerminal record) {
    		// TODO Auto-generated method stub
    		return mapper.insertSelective(record);
    	}
    
    	public TTerminal selectByPrimaryKey(Integer sid) {
    		// TODO Auto-generated method stub
    		return mapper.selectByPrimaryKey(sid);
    	}
    
    	public int updateByPrimaryKeySelective(TTerminal record) {
    		// TODO Auto-generated method stub
    		return mapper.updateByPrimaryKeySelective(record);
    	}
    
    	public int updateByPrimaryKey(TTerminal record) {
    		// TODO Auto-generated method stub
    		return mapper.updateByPrimaryKey(record);
    	}
    
    	public void deleteByPrimaryKey(Integer sid) {
    		// TODO Auto-generated method stub
    		mapper.deleteByPrimaryKey(sid);
    	}
    
    	public PageDate<TTerminal> selectPage(Map<String, Object> parame, PageParam rb) {
    		// TODO Auto-generated method stub
    		PageHelper.startPage(rb.getPageNo(), rb.getLimit());
    		List<TTerminal> rs = mapper.select(parame);
    		PageInfo<TTerminal> pageInfo = new PageInfo<TTerminal>(rs);
    		return super.page(pageInfo.getList(), pageInfo.getPageNum(), pageInfo.getPageSize(), pageInfo.getTotal());
    	}
    
    	public List<TTerminal> select(Map<String, Object> parame) {
    		// TODO Auto-generated method stub
    		return mapper.select(parame);
    	}
    
    	public Integer count(Map<String, Object> parame) {
    		// TODO Auto-generated method stub
    		return mapper.count(parame);
    	}
    
    	public void batchInsert(List<TTerminal> list) {
    		// TODO Auto-generated method stub
    		mapper.batchInsert(list);
    	}
    
    	public void batchUpdate(List<TTerminal> list) {
    		// TODO Auto-generated method stub
    		mapper.batchUpdate(list);
    	}
    
    }

### controller 定义： ###

package com.zzg.controller;
    
    import java.util.List;
    import java.util.Map;
    
    import org.slf4j.Logger;
    import org.slf4j.LoggerFactory;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.PathVariable;
    import org.springframework.web.bind.annotation.RequestBody;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.ResponseBody;
    import com.zzg.common.AbstractController;
    import com.zzg.common.entity.PageDate;
    import com.zzg.common.entity.PageParam;
    import com.zzg.common.entity.Result;
    import com.zzg.entity.TCard;
    import com.zzg.service.TCardService;
    
    @Controller
    @RequestMapping("/api/card")
    public class CardController extends AbstractController {
    	// 日志记录
    		public static final Logger log = LoggerFactory.getLogger(CardController.class);
    		
    		@Autowired
    		TCardService cardService;
    		
    		@RequestMapping(value = "/findPage", method = RequestMethod.POST)
    		@ResponseBody
    		public Result findPage(@RequestBody Map<String, Object> parame) {
    			PageParam rb = super.initPageBounds(parame);
    			PageDate<TCard> pageList = cardService.selectPage(parame, rb);
    			return new Result().ok().setData(pageList);
    		}
    		
    		@RequestMapping(value = "/find", method = RequestMethod.GET)
    		@ResponseBody
    		public Result find() {
    			List<TCard> list = cardService.select(null);
    			return new Result().ok().setData(list);
    		}
    
    		@RequestMapping(value = "/findBySid/{sid}", method = RequestMethod.GET)
    		@ResponseBody
    		public Result findBySid(@PathVariable("sid") Integer sid) {
    			TCard object = cardService.selectByPrimaryKey(sid);
    			return new Result().ok().setData(object);
    		}
    
    		@RequestMapping(value = "/deleteBySid/{sid}", method = RequestMethod.GET)
    		@ResponseBody
    		public Result deleteBySid(@PathVariable("sid") Integer sid) {
    			cardService.deleteByPrimaryKey(sid);
    			return new Result().ok();
    		}
    
    		@RequestMapping(value = "/update", method = RequestMethod.POST)
    		@ResponseBody
    		public Result update(@RequestBody TCard card) {
    			int num = cardService.updateByPrimaryKeySelective(card);
    			if (num > 0) {
    				return new Result().ok();
    			}
    			return new Result().error("更新失败");
    		}
    		
    		@RequestMapping(value = "/recharge", method = RequestMethod.POST)
    		@ResponseBody
    		public Result recharge(@RequestBody TCard card) {
    			cardService.recharge(card);
    			return new Result().error("充值成功");
    		}
    
    		@RequestMapping(value = "/insert", method = RequestMethod.POST)
    		@ResponseBody
    		public Result insert(@RequestBody TCard card) {
    			int num = cardService.insertSelective(card);
    			if (num > 0) {
    				return new Result().ok();
    			}
    			return new Result().error("新增失败");
    		}
    }

package com.zzg.controller;
    
    import java.util.List;
    import java.util.Map;
    import org.slf4j.Logger;
    import org.slf4j.LoggerFactory;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.PathVariable;
    import org.springframework.web.bind.annotation.RequestBody;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.ResponseBody;
    import com.zzg.common.AbstractController;
    import com.zzg.common.entity.PageDate;
    import com.zzg.common.entity.PageParam;
    import com.zzg.common.entity.Result;
    import com.zzg.entity.TTerminal;
    import com.zzg.service.TTerminalService;
    
    @Controller
    @RequestMapping("/api/terminal")
    public class TerminalController extends AbstractController {
    	// 日志记录
    	public static final Logger log = LoggerFactory.getLogger(TerminalController.class);
    
    	@Autowired
    	TTerminalService terminalService;
    	
    	@RequestMapping(value = "/findPage", method = RequestMethod.POST)
    	@ResponseBody
    	public Result findPage(@RequestBody Map<String, Object> parame) {
    		PageParam rb = super.initPageBounds(parame);
    		PageDate<TTerminal> pageList = terminalService.selectPage(parame, rb);
    		return new Result().ok().setData(pageList);
    	}
    	
    	@RequestMapping(value = "/find", method = RequestMethod.GET)
    	@ResponseBody
    	public Result find() {
    		List<TTerminal> list =terminalService.select(null);
    		return new Result().ok().setData(list);
    	}
    
    	@RequestMapping(value = "/findBySid/{sid}", method = RequestMethod.GET)
    	@ResponseBody
    	public Result findBySid(@PathVariable("sid") Integer sid) {
    		TTerminal object = terminalService.selectByPrimaryKey(sid);
    		return new Result().ok().setData(object);
    	}
    
    	@RequestMapping(value = "/deleteBySid/{sid}", method = RequestMethod.GET)
    	@ResponseBody
    	public Result deleteBySid(@PathVariable("sid") Integer sid) {
    		terminalService.deleteByPrimaryKey(sid);
    		return new Result().ok();
    	}
    
    	@RequestMapping(value = "/update", method = RequestMethod.POST)
    	@ResponseBody
    	public Result update(@RequestBody TTerminal terminal) {
    		int num = terminalService.updateByPrimaryKeySelective(terminal);
    		if (num > 0) {
    			return new Result().ok();
    		}
    		return new Result().error("更新失败");
    	}
    
    	@RequestMapping(value = "/insert", method = RequestMethod.POST)
    	@ResponseBody
    	public Result insert(@RequestBody TTerminal terminal) {
    		int num = terminalService.insertSelective(terminal);
    		if (num > 0) {
    			return new Result().ok();
    		}
    		return new Result().error("新增失败");
    	}
    }

效果展示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70 1][]

[20201122233435242.png]: https://img-blog.csdnimg.cn/20201122233435242.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201122234459478.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201122234525707.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n,size_16,color_FFFFFF,t_70