首页 编程语言正文

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

你猜 阅读：1358 2021-03-31 13:27:05 评论：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 之模型定义：

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

效果展示：

标签:VUE
声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

相关文章
关注我们

一个IT知识分享的公众号

友情链接IM LINKS