uni |
您所在的位置：网站首页 › java后端项目代码 › uni |
uni
|
uni-app 开发项目怎么和后端交互？
2023年09月13日 api, 后端开发, 网络请求 987
本文罗列了多种 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或者 在 标签直接引入 用法示例 // 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 的云端数据库中的数据，并绑定在界面上进行渲染。使用非常简单，直接在 Vue 文件里的 中使用组件（这是全局组件不需要引入），只需要给组件设置要参数，就可以读取数据并且渲染到界面： {{ data.title}} {{ data.author}}这种方法很适用于列表、详情等展示型页面，可以大幅度提升开发效率。 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 来编写业务代码，如果你学习了前端开发，好像进一步学习后端，让自己实现“全栈工程师”的梦想，现在完全可以入坑。 api后端开发网络请求 |
【本文地址】
今日新闻 |
推荐新闻 |