欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-22 10:17:20
目录效果前端实现后端实现总结读取两个表的数据将用户及图像联系在一起效果前端实现修改关联的时候,前端向后端传入array[number],后端存为字符串这时在前端获取数据时,需要循环处理为数字数组<...

读取两个表的数据

将用户及图像联系在一起

效果

详解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
  }
})

总结

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