vue信息管理系统web项目通过基于unicloud阿里云云开发为后端的云函数获取云服务器的数据库数据信息

本文链接：https://blog.csdn.net/weixin_57177381/article/details/139033062

目标：vue网页前端从阿里云unicloud云函数获取到unicloud云开发的数据库数据，基于前后端分离技术。

开发工具：vscode（vue前端项目）、hbuilder X（编写云函数）、unicloud阿里云云开发

背景：uniapp通过云开发去构建客户端小程序，vue前端项目开发后台管理系统

1、首先是unicloud后台云开发的数据库中有这么一个表叫product表，意思为商品表

这里我就不教如何开通uniapp中unicloud云开发，另外我会写文章再详细说明。

2、unicloud后台开放跨域配置

因为是在本地localhost访问vue项目，vue前端项目需要调用到这个unicloud的后端接口

3、在HbuilderX开发工具编写云函数

因为我用uniapp写了小程序项目文件，我直接在cloudfunctions写了叫get_product的云函数，意思为获取product数据库表所有的商品数据。至于为什么要写云函数？因为如果前后端分离项目，后端又是用的云开发，通过http形式调用云函数，再间接地操作云数据库。

云函数代码:

4、在unicloud后台查看云函数，配置http的path接口部分文字

用于区分各个云函数关于http传输的接口名字。

5、vue项目通过axios第三方网络请求库请求商品数据

在vue对应product组件中，在生命周期mounted挂载后请求数据，并赋值给tableData变量

<template>
  <el-table v-loading="loading" :data="tableData" style="width: 100%">
    <el-table-column fixed prop="pm" label="品名" width="150" />
    <el-table-column prop="bt" label="标题" width="120" />
    <el-table-column prop="jg" label="价格" width="120" />
    <el-table-column prop="td" label="特点" width="120" />
    <el-table-column prop="jhl" label="净含量" width="120" />
    <el-table-column prop="bz" label="包装" width="120" />
    <el-table-column prop="cd" label="产地" width="120" />
    <el-table-column prop="bzrq" label="保质日期" width="120" />
    <el-table-column prop="syff" label="食用方法" width="120" />
    <el-table-column prop="plb" label="配料表" width="300" />
    <el-table-column prop="zmwz" label="致敏物质" width="120" />
    <el-table-column prop="zctj" label="贮存条件" width="120" />
    <el-table-column prop="wxts" label="温馨提示" width="120" />
    <el-table-column prop="tp" fixed="right" label="首图" width="120">
      <template v-slot="scope">
        <el-image v-if="scope && scope.row" style="width: 100px; height: 100px" :src="scope.row.tp[0]" />
        <span v-else>无图片</span>
      </template>
    </el-table-column>
  </el-table>
</template>


<script>
const axios = require('axios');
import { ref } from 'vue'
const loading = ref(true)

export default {
  name: 'App',
  data() {
    return {
      loading,
      tableData: [],
      src: "https://th.bing.com/th/id/OIP.OhUOhPbzdELTIt6QY9fV0AHaEo?rs=1&pid=ImgDetMain"
    }
  },

  mounted() {
    this.getData()
  },

  methods: {
    getData() {
      var that = this
      this.loading = true
      axios.get('/api/product')
        .then(function (response) {
          console.log("查询商品信息");
          console.log(response);
          var list = response.data.data
          that.tableData = list

          for (let i = 0; i < list.length; i++) {

            var tp = list[i].tp

            // 去除外层双引号，然后将 \" 替换为 "
            const fixedStr = tp.replace(/^"|"$/g, '').replace(/\\"/g, '"');

            // 将字符串解析为对象数组
            const objArray = JSON.parse(fixedStr);
            that.tableData[i].tp = objArray

          }
          that.loading = false
        })
        .catch(function (error) {
          console.log(error);
        })
        .finally(function () {
          // 总是会执行
        });
    },
    getFirstPicture(row) {
      console.log(row);
      console.log("渲染每一层图片", row);
      if (row.pictures && row.pictures.length > 0) {
        return row.pictures[0];
      } else {
        return 'https://www.keaitupian.cn/cjpic/frombd/2/253/2107631312/3178897554.jpg'; // 或者你认为合适的默认图片地址
      }
    }
  }
}
</script>

此时就可以在页面查看云数据表中数据了，当然这里组件用了element-plus，各位可以用自己的组件去渲染。