详解vue+nodejs获取多个表数据的方法
更新时间:2021年12月21日 08:21 点击:329 作者:原莱_
读取两个表的数据
将用户及图像联系在一起
效果
前端实现
修改关联的时候,前端向后端传入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 } })
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注猪先飞的更多内容!
原文出处:https://blog.csdn.net/qq_40934617/article/details/121974105
上一篇: JavaScript基础之函数详解
下一篇: 基于Python进行年龄和性别检测
相关文章
- 下面本文章来给大家介绍在php中成员变量的一些对比了,文章举了四个例子在这例子中分别对不同成员变量进行测试与获取操作,下面一起来看看。 有如下4个代码示例,你认...2016-11-25
- php 获取用户IP与IE信息程序 function onlineip() { global $_SERVER; if(getenv('HTTP_CLIENT_IP')) { $onlineip = getenv('HTTP_CLIENT_IP');...2016-11-25
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
- php获取一个文件夹的mtime的程序了,这个就是时间问题了,对于这个问题我们来看小编整理的几个例子,具体的操作例子如下所示。 php很容易获取到一个文件夹的mtime,可以...2016-11-25
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 获取网站icon,常用最简单的方法就是通过website/favicon.ico来获取,不过由于很多网站都是在页面里面设置favicon,所以此方法很多情况都不可用。 更好的办法是通过google提供的服务来实现:http://www.google.com/s2/favi...2014-06-07
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了postgresql 实现多表关联删除操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-01-02
- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解,这个教程非常适合初学者,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30- 主要功能:获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 :$(window).width(); 获取页面的文档高度 $(document).height(); 获取页面的文档宽度 :$(document).width();...2015-10-21