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

2022-09-09 11:06:43

前端模块

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 之模型定义：

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("新增失败");
	}
}

效果展示：

  • 作者：在奋斗的大道
  • 原文链接：https://blog.csdn.net/zhouzhiwengang/article/details/109968602
    更新时间：2022-09-09 11:06:43