vue怎样通过nodejs拿取数据库数据(vue要用到nodejs中的哪些知识)

在本期中，边肖将为您带来一些关于vue nodejs如何从多个表中获取数据的信息。文章内容丰富，从专业角度进行分析和描述。看完这篇文章，希望你能有所收获。

读取两个表的数据

用图像连接用户。

效果

00-1010修改关联时，前端将数组[number]传递给后端，后端将其存储为字符串。

此时，在前端采集数据时，需要循环处理成数字阵列。

模板

差异

El-table : data=' state . tabledata '边框

El-table-column prop=' Name ' label=' Name ' width=' 180 '/

El-table-column prop=' relational ' label=' relational ' width=' 180 '/El-table-column

el-table-columnprop='path '标签='path '

模板#default='作用域'

div-for='(项，索引)in scope . row . path ' : key=' index '

img

: src=' http://localhost :3000/' item . path '

/

不间断空格

;       </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"
                
                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
  }
})

上述就是小编为大家分享的vue+nodejs获取多个表数据的方法是什么了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注行业资讯频道。