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 来编写业务代码，如果你学习了前端开发，好像进一步学习后端，让自己实现“全栈工程师”的梦想，现在完全可以入坑。