详解vue+nodejs获取多个表数据的方法

目录
  • 效果
  • 前端实现
  • 后端实现
  • 总结

读取两个表的数据

将用户及图像联系在一起

效果

前端实现

修改关联的时候,前端向后端传入array[number],后端存为字符串

这时在前端获取数据时,需要循环处理为数字数组

<template>
    <div>
        <el-table :data="state.tableData" border style="width: 100%">
            <el-table-column prop="name" label="Name" width="180" />
            <el-table-column prop="relation" label="Relation" width="180" ></el-table-column>
            <el-table-column prop="path" label="Path">
                <template #default="scope">
                    <div v-for="(item, index) in scope.row.path" :key="index" style="display:inline-block">
                        <img
                            :src="'http://localhost:3000//' + item.path"
                            style="width: 100px;height:100px;margin:0 10px"
                        />
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="Operations" width="120">
                <template #default="scope">
                    <el-button
                        type="text"
                        size="small"
                        @click.prevent="edit(scope.row)"
                    >
                        <el-icon>
                            <edit />
                        </el-icon>
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog v-model="state.dialogVisible" width="80%">
            <el-transfer
                v-model="state.rightValue"
                style="text-align: left; display: inline-block"
                filterable
                :titles="['Source', 'Target']"
                :button-texts="['To left', 'To right']"
                :format="{
                noChecked: '${total}',
                hasChecked: '${checked}/${total}',
                }"
                :data="state.data"
            >
                <template #default="{ option }">
                    <span>{{ option.key }} - {{ option.label }}</span>
                </template>
            </el-transfer>
            <p>
                <el-button
                    type="primary"
                    size="medium"
                    @click.prevent="commit"
                >提交
                </el-button>
            </p>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import {defineComponent, reactive} from 'vue'
import {relationlist,uploadorder,editrelation} from '../utils/api'
import {
    ElMessage, ElDialog
} from 'element-plus';
import { Edit } from '@element-plus/icons';
export default defineComponent({
    name : 'relation',
    components:{
        Edit, ElMessage, ElDialog
    },
    setup() {
        const state = reactive({
            tableData:[],
            dialogVisible:false,
            data:[],
            rightValue:[],
            editdata:{}
        })
        const init = function(){
            relationlist().then((res)=>{
                if (res.code === 200) {
                    res.list.forEach((ele)=>{
                        if(ele.relation){
                            ele.relation = ele.relation.split(',')
                            for (let i = 0; i < ele.relation.length; i++) {
                                ele.relation[i] = Number(ele.relation[i]);
                            }
                        }
                    })
                    state.tableData = res.list
                }
            })
        }
        const init1 = function(){
             uploadorder().then(res => {
                if (res.code === 200) {
                    let data = []
                    res.list.forEach(ele => {
                        data.push({
                            key:ele.id,
                            label:ele.name
                        })
                    });
                    state.data = data
                }
            })
        }
        const edit = function(row){
            state.editdata = row;
            state.dialogVisible = true;
            state.rightValue = row.relation||[];
        }
        const commit = function(){
            let data = {
                rightvalue:state.rightValue,
                ...state.editdata
            }
            editrelation(data).then((res)=>{
                if(res.code === 200){
                    ElMessage.success(res.msg)
                    state.dialogVisible = false
                    init()
                }else{
                    ElMessage.error(res.msg)
                }
            })
        }
        init()
        init1()
        return {
            state,
            edit,
            commit
        }
    }
})
</script>

后端实现

//获取关联列表
router.get('/relationlist',async (req,res,next)=>{
  const result = await db.select(`SELECT * FROM user`)
  for (let i = 0; i < result.length; i++) {
    let ele = result[i];
    let uploadres = await db.select(`SELECT path FROM upload where id in (${ele.relation})`)
    ele.path = uploadres
  }
  res.send(Success(result));
})
//修改关联列表
router.post('/editrelation',async (req,res,next)=>{
  let {id,rightvalue} = req['body']
  console.log(rightvalue);
  if(!id || !rightvalue){
    res.send(MError('请选择后再提交'))
    return
  }
  const result = await db.update('user', { relation:rightvalue}, ` WHERE id = ${id}`);
  if(result){
    res.send(Success(result))
    return
  }else{
    res.send(MError('修改失败,请再次尝试'))
    return
  }
})

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注我们的更多内容!

(0)

相关推荐

  • Vue如何获取数据列表展示

    这个例子从 Github 的 API 中获取了最新的 Vue.js 提交数据,并且以列表形式将它们展示了出来.你可以轻松地切换 master 和 dev 分支. 一.展示 二.源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=de

  • nodejs获取表单数据的三种方法实例

    前言 nodejs作为服务端语言,在开发中注册登录等需通过form表单向后端发送数据进行判断,那作为服务端语言的nodejs通过哪些方法可以接收调用form表单的post请求值呢. 常见的会用到以下三种,让我们对着例子看看具体用法. 后端我们使用express插件,需要对express有所了解的才便于阅读哦~ 1.首先npm初始化,下载express包,导入模块后创建服务对象 //导入express模块 const express = require("express"); // 创建

  • vue获取form表单的值示例

    这里使用的是Element-ui组件 html: <el-input placeholder="请输入手机号" id="phone" prop="phone" v-model="phone" clearable></el-input> JS: var phone = this.phone; var password = this.password; var that = this; var phone

  • Nodejs获取网络数据并生成Excel表格

    Nodejs的模版中有很多关于Excel表格的,这里我简单介绍一下我使用过的一个模块的使用. 首先,先安装Excel的模块: npm install node-xlsx 然后,在代码中引入模块: var xlsx = require('node-xlsx'); 最后,获取数据并写入Excel: var fs = require('fs'); var xlsx = require('node-xlsx'); var ajax = require('./ajax.js'); start(); fun

  • Vue获取表单数据的方法

    目录 需求 获取数据并提交 模板过滤器 过滤器的使用场景 总结 需求 使用Vue收集如下用户数据: 获取数据并提交 代码实现: 将value的值与变量属性进行绑定 v-model.trim = 'username' ; 去除两端空格 v-model.number = 'age':将字符串转为数值 v-model.lazy = 'age' : 不是立即收集,而是切换焦点后收集 <!DOCTYPE html> <html lang="en"> <head>

  • 详解vue+nodejs获取多个表数据的方法

    目录 效果 前端实现 后端实现 总结 读取两个表的数据 将用户及图像联系在一起 效果 前端实现 修改关联的时候,前端向后端传入array[number],后端存为字符串 这时在前端获取数据时,需要循环处理为数字数组 <template> <div> <el-table :data="state.tableData" border style="width: 100%"> <el-table-column prop="

  • 详解vue中v-model和v-bind绑定数据的异同

    vue的模板采用DOM模板,也就是说它的模板可以当做DOM节点运行,在浏览器下不报错,绑定数据有三种方式,一种是插值,也就是{{name}}的形式,一种是v-bind,还有一种是v-model.{{name}}的形式比较好理解,就是以文本的形式和实例data中对应的属性进行绑定.比如: var app = new Vue({ el: '#app', template: '<div @click="toggleName">{{name}}</div>', data

  • 详解C#编程获取资源文件中图片的方法

    详解C#编程获取资源文件中图片的方法 本文主要介绍C#编程获取资源文件中图片的方法,涉及C#针对项目中资源文件操作的相关技巧,以供借鉴参考.具体内容如下: 例子: using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Reflection; using System.Drawing; namespace CL { public class RES { /

  • 详解vue项目中调用百度地图API使用方法

    步骤一:申请百度地图密钥: JavaScript API v1.4以及以前的版本无序申请秘钥(ak),自v1.5版本开始需要先申请秘钥(ak),才可以使用,如需获取更高的配额,需要申请  认证企业用户.百度地图API 链接地址:http://lbsyun.baidu.com/apiconsole/key 步骤二:在index.html中添加百度地图JavaScript API接口: <script src="http://api.map.baidu.com/api?v=1.4"

  • 详解js实时获取并显示当前时间的方法

    本文实例为大家分享了js实时获取并显示当前时间l的具体代码,供大家参考,具体内容如下 js部分如下: <script type="text/javascript"> window.onload = function() { var show = document.getElementById("show"); setInterval(function() { var time = new Date(); // 程序计时的月从0开始取值后+1 var m

  • 详解ASP.NET提取多层嵌套json数据的方法

    本文实例讲述了ASP.NET利用第三方类库Newtonsoft.Json提取多层嵌套json数据的方法,具体例子如下. 假设需要提取的json字符串如下: {"name":"lily","age":23,"addr":{"city":guangzhou,"province":guangdong}} 先引用命名空间: using Newtonsoft.Json; using Newtons

  • 详解Vue返回值动态生成表单及提交数据的办法

    目录 主要解决的问题 一.后端返回的数据,提交到后端的数据格式如下: 二.vue前端代码如下: 总结 主要解决的问题 1.vue在循环的时候需要动态绑定不同的v-model:vue动态的表单,数据怎么绑定呢? 2.动态表单上所有name属性对应的键值对的形式提交到后端 一.后端返回的数据,提交到后端的数据格式如下: // 后端返回的数据,根据返回类型用对应的组件 [ { "componentType": "input", "componentName&qu

  • 详解vue中引入stylus及报错解决方法

    前提条件是已经有了vue项目,如果没有,请先建立,具体方法看这里https://cn.vuejs.org/v2/guide/installation.html 安装stylus 好了,建立好项目后我们来安装stylus npm install stylus stylus-loader --save-dev 这样就安装上了stylus. 接下来就可以使用了,使用方式分两种.一种是在.vue文件的style块中使用,一种是引用.styl文件的形式 在.vue文件的style块中使用 这个很简单,只要

  • 详解Vue.js v-for不支持IE9的解决方法

    最近一个小项目,在最后的测试阶段出现了问题,使用了Vue,在Chrome.Firefox.Safari.IE11下都可以访问,唯独IE9下无法正常显示,排除程序问题后,最终判断是Vue的锅,替换版本后解决.经过测试,2.16.2.17 在IE9下无法使用 v-for 导致的. 写了一个简单的demo,在IE9下无法显示列表,运行结果如下: 测试代码如下: <!DOCTYPE html> <html lang=zh-CN> <head> <meta charset=

  • 详解在Docker容器内外互相拷贝数据的方法

    如何在Docker容器内外互相拷贝数据?  从容器内拷贝文件到主机上 复制代码 代码如下: docker cp <containerId>:/file/path/within/container /host/path/target 从主机上拷贝文件到容器内 1.用-v挂载主机数据卷到容器内 docker run -v /path/to/hostdir:/mnt $container 在容器内拷贝 cp /mnt/sourcefile /path/to/destfile 2.直接在主机上拷贝到容

随机推荐