详解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    },    tup() {        const state = reactive({            tabledata:[],            dialogvisible:fal,            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 = tr四书指什么ue;            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 = fal                    init()                 }el{                    elmessage.error(res.msg)                }            })        }        init()        init1()        return {            state,            edit,            commit        }    }寻找身边的感动})</script>

后端实现

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

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注www.887551.com的更多内容!