在vue中的form表单中下拉框中的数据来自数据库查询到的数据

简介: 这篇文章介绍了如何在Vue框架的表单中将下拉框的数据通过后端接口从数据库动态查询并加载,包括前端HTML代码、JavaScript数据处理、后端接口实现以及表单提交的完整流程。

文章目录

    • 1、实现的效果:
    • 2、前端html代码
    • 3、js中的代码
    • 4、后端的方法

1、实现的效果:

在这里插入图片描述
在这里插入图片描述
增加一个新的类型到数据库
在这里插入图片描述
在这里插入图片描述

2、前端html代码

需要注意的部分:prop后边是表单中的字段
v-model:绑定的数据

      <el-form-item label="上架时间" required>
            <el-col :span="11">
              <el-form-item prop="date">
                <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>

          <el-form-item  label="汽车类型" prop="type" >
            <el-select v-model="ruleForm.type" placeholder="请选择">
              <el-option v-for="item in options" :key="item.id"  :value="item.type">
                {
  
  {item.type}}
              </el-option>
            </el-select>

          </el-form-item>

3、js中的代码

这里的数据可以写死、也可以从数据库获得。(这里使用数据库中的数据)

 options: [
          // {
          //   id: '选项1',
          //   type: '黄金糕'
          // }, {
          //   id: '选项2',
          //   type: '双皮奶'
          // }
        ], //列表数据

js中的方法部分
调用后台的接口,将查询到的数据返回给下拉列表
对返回值没有做太多的处理(这里应该根据返回状态执行下一步操作。这里省略)

      //选择下拉框
      getOptions(){
        axios.get("/car/cartypelist").then(res => {
          console.log(res)
          this.options = res.data.data.cartypeList;
        });
      },

提前加载数据

 created() {
      this.getOptions()
    }

4、后端的方法

    @RequestMapping(value = "/car/cartypelist", method = RequestMethod.GET)
    public Result findCarType() {
        List<CarType> carList = carService.findCarType();
        if (carList != null) {
            return Result.ok().data("cartypeList", carList);
        } else {
            return Result.error();
        }
    }

然后执行提交
这里是提交form表单的按钮

   <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>

调用后台的方法

      //提交表单
      submitForm() {

        let _this = this;

        alert(_this.ruleForm.imageUrl)
        axios.post('/car/addcar',this.ruleForm).then(resp => {

          if(resp.data.code==200){

            // alert("添加成功") 跳转的路由
            _this.$alert('《'+_this.ruleForm.name+'》添加成功', '消息', {
              confirmButtonText: '确定',
              callback: action => {
                _this.adddialogVisible=false
                _this.showAllUsers();
              }
            });

          }

        });
      },

在这里插入图片描述

相关文章
|
2天前
|
SQL 监控 数据处理
SQL数据库数据修改操作详解
数据库是现代信息系统的重要组成部分,其中SQL(StructuredQueryLanguage)是管理和处理数据库的重要工具之一。在日常的业务运营过程中,数据的准确性和及时性对企业来说至关重要,这就需要掌握如何在数据库中正确地进行数据修改操作。本文将详细介绍在SQL数据库中如何修改数据,帮助读者更好
18 4
|
2天前
|
SQL 存储 安全
SQL查询数据库:基础概念与操作指南
在数字化时代,数据库已成为信息管理的重要工具之一。作为管理和操作数据库的核心语言,SQL(结构化查询语言)已成为数据管理和查询的关键技能。本文将全面介绍SQL查询数据库的基本概念、语句和操作指南,以帮助初学者快速上手,同时为进阶用户提供有价值的参考。一、数据库与SQL简介数据库是一种存储、管理和检索
16 3
|
3天前
|
SQL 存储 缓存
SQL数据库查询详解
数据库是现代信息社会的基石,它们存储和管理着大量的数据。而SQL(StructuredQueryLanguage)作为一种强大的数据库查询语言,广泛应用于各种数据库系统中。本文将详细介绍SQL数据库查询的基本概念、语法、常用操作以及优化策略。一、SQL数据库查询概述SQL是一种用于管理关系数据库的标
23 3
|
3天前
|
存储 人工智能 Cloud Native
云栖重磅|从数据到智能:Data+AI驱动的云原生数据库
阿里云瑶池在2024云栖大会上重磅发布由Data+AI驱动的多模数据管理平台DMS:OneMeta+OneOps,通过统一、开放、多模的元数据服务实现跨环境、跨引擎、跨实例的统一治理,可支持高达40+种数据源,实现自建、他云数据源的无缝对接,助力业务决策效率提升10倍。
|
4天前
|
关系型数据库 MySQL 数据库
使用Docker部署的MySQL数据库,数据表里的中文读取之后变成问号,如何处理?
【10月更文挑战第1天】使用Docker部署的MySQL数据库,数据表里的中文读取之后变成问号,如何处理?
22 3
|
3天前
|
测试技术 API 数据库
云数据库之添加数据
云数据库之添加数据
12 1
|
1天前
|
存储 SQL 数据库
深入理解数据库索引:提升查询性能的关键
数据库索引是优化查询性能的重要工具。本文将带你深入探索索引的内部结构和工作原理,揭示如何通过合理使用索引来加速数据库查询,同时避免常见的索引陷阱。
|
2天前
|
SQL 数据处理 数据库
SQL语句优化与查询结果优化:提升数据库性能的实战技巧
在数据库管理和应用中,SQL语句的编写和查询结果的优化是提升数据库性能的关键环节
|
2天前
|
缓存 算法 关系型数据库
Mysql(3)—数据库相关概念及工作原理
数据库是一个以某种有组织的方式存储的数据集合。它通常包括一个或多个不同的主题领域或用途的数据表。
17 3
Mysql(3)—数据库相关概念及工作原理
|
5天前
|
SQL 关系型数据库 MySQL