uni-app 开发项目怎么和后端交互?

2023年09月13日 , , 1,003

本文罗列了多种 uni-app 前端项目和后端进行数据交互的方式,根据你的需要来选择吧。

为什么会有这个疑问

uni-app 是目前国内前端开发领域很火热的开发工具,特别是在小程序领域,首选都是 uni-app,很多刚刚学完 uni-app 的开发者,这时候很容易产生疑问,布局知识我都会了,页面也能写了,那怎么和服务器后端进行数据交互呢?

uni-app 项目和后端交互
uni-app 项目和后端交互

方式一:使用 uni.request()

这是一个 uni-app 官方提供的向后端发送请求的 API,要使用这个 API,只需要后端开发者提供请求的 url 以及需要前端发送的参数,就可以返回所需要的数据。我们前端使用的代码类似于下面这样:

用法示例

uni.request({
    url: 'https://www.xxxx.com/api/v2/getBook', // 此网址后端开发人员提供
    data: {
        bookId: 'a1234' // 比如要查询一本书的信息,要传 bookId 参数
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息,问问后端是否需要
    },
    success: (res) => {
        console.log(res.data); // 得到后端返回的数据
    }
});

注意事项

uni.request() 是一个多端通用的 API,无论是开发 APP、小程序还是 H5,都可以直接使用。但一定要注意一些参数在不同平台是不一样的。比如如果是开发 APP,如果 uni-app 版本低于 3.3.7 时, data 参数是不支持 ArrayBuffer 类型的,具体的用法可以查看官方的文档

如果开发小程序,上线前还需要把后端的服务 url 添加到微信小程序管理后台的白名单,否则请求会失败。

方式二:APP Vue 和 H5 使用 Axios

如果你开发的是 H5,完全可以使用 Axios 来请求后端接口。Axios 是一个在 web 端非常流行的 JavaScript 网络请求库,无论是用法还是兼容性,都很不错,而且 Axios 还是 Vue.js 官方推荐的请求库,我也少罗嗦了,看东西:

安装 Axios

$ npm install axios

或者

在 <script> 标签直接引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

用法示例

// get 请求
axios.get('/book?id=12345')
  .then(function (response) {
    console.log(response); // 得到后端数据
  })
  .catch(function (error) {
    console.log(error); // 错误处理
  });

// post 请求
axios.post('/book', {
    bookId: '1234'
  })
  .then(function (response) {
    console.log(response); // 得到后端数据
  })
  .catch(function (error) {
    console.log(error);
  });

更详细的用法可以参考官方文档

注意事项

开发 APP 时如果使用 Vue 页面来开发(不是 nvue 页面),也是可以用 Axios 的,因为 Vue 页面本身也是运行在网页中的。

方式三:使用 uniCloud

前面两种方式都需要后端开发人员来提供接口,而 uni-app 官方还提供 uniCloud 这种类似于云开发的方式,可以让前端开发者直接去读取后端,甚至还可以用 JavaScript 来编写后端代码,这也是我目前最喜欢的和后端交互的方法。

使用 uniCloud 的前提是,uni-app 项目开通 uniCloud 空间,并且使用他们的云端数据库来保存数据。

不参与后的开发,只是读取数据

uniCloud 提供了两种方法给前端直接读取数据库,前端调用非常方便,可以根据页面的需求,自定义读取数量、返回字段等,全程不需要和后端人员沟通。

1.使用 <unicloud-db> 组件

这是用组件方式直接获取 uniCloud 的云端数据库中的数据,并绑定在界面上进行渲染。使用非常简单,直接在 Vue 文件里的 <template> 中使用组件(这是全局组件不需要引入),只需要给组件设置要参数,就可以读取数据并且渲染到界面:

<unicloud-db v-slot:default="{data, loading, error, options}" collection="books" field="field1" :getone="true" where="id=='1234'">
  <view class="book-header">
    <text class="book-title"> {{ data.title}} </text>
    <text class="book-author"> {{ data.author}} </text>
  </view>
</unicloud-db>

这种方法很适用于列表详情等展示型页面,可以大幅度提升开发效率。

2.使用 uniCloud JS API 来读取数据

除了在页面组件中使用,uniCloud 还提供了 API,这样我们就可以更灵活地写在 JS 代码中了,使用方法如下:

// 获取 uniCloud 数据库引用
const db = uniCloud.database();
// 指定数据库名 books 和查询条件 id
db.collection('books')
	.where('id=="1234"')
	.get()
	.then((res)=>{
          // res.data 就是从数据库查询到的数据
	}).catch((err)=>{
	  console.log(err.message); // 打印错误信息
  })

使用也非常简单,除了可以读取数据,我们还可以直接让前端更新数据库上传文件,全程都是不需要后端人员参与的,详细的用法可以阅读官方的文档

参与后端开发,编写后端业务代码

如果你还想自己写代码,完全可以学习 uniCloud 的云函数云对象开发,除了可以读取数据,还可以在后端处理业务,比如有些操作安全性比较高,需要验证,又比如有些内容是付费用户才能观看,这时候就不是简单的读取数据了,需要进一步判断权限,这时候就需要编写后端业务代码来实现。

uniCloud 提供云函数和云对象来让我们用 JavaScript 来编写业务代码,如果你学习了前端开发,好像进一步学习后端,让自己实现“全栈工程师”的梦想,现在完全可以入坑。