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