目标: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,各位可以用自己的组件去渲染。
至于为什么后端要用unicloud云开发,可能对要写小程序,且前端的伙伴比较友好吧。
如果这篇文章对你有所帮助,麻烦给个小赞赞👍吧~❀