云函数，云数据库，云存储，uniapp，前端代码托管，域名配置

原创 已于 2024-04-18 16:35:50 修改 · 622 阅读 · 11 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#数据库 #uni-app #前端

于 2024-04-18 16:18:37 首次发布
本文介绍了如何使用uniapp进行前端开发，包括利用云函数作为后端接口，云数据库管理数据，云存储文件，以及前端代码的托管和域名配置。同时对比了VSCode和HBuilderX在开发环境中的优劣。

本文目的是让只会前端的同学完成完整的项目过程，代替到后端，数据库，服务器的一些繁琐的工作

后端=>云函数（类似后端接口，有点像用node操作mongdb）

数据库=>云数据库（在网站上直接创建数据库，表，字段等，在创建uniapp时右键关联你的账号下的数据库，就可以直接用云函数和特定的方法直接访问云数据库了）

云存储 => 可以将一些图片资源，文件等上传到云存储中 ，在通过链接的方式直接访问（利用自带的uni-file-picker插件，直接上传）

uniapp => 前端代码用vue2，3都行，写好后一键编译成小程序，app，web端等

前端代码托管=> 后端代码是云函数的，数据库也是云上的，前端代码写好后，也可以上传的云上的，后直接通过默认提供的域名就可以直接访问了

域名配置=> 代码托管提供的域名太难记了，可以自己在阿里云买个域名便宜的十多快钱1年，然后域名解析，配置cname，就可以直接通过自己的域名直接访问你的服务了

扩展=> 因为是云函数，前端代码托管等，如果是需要发上去，需要配置特定的域名白名单，否则接口无法访问

第一步创建一个项目，用hbuilderX，这个工具对于这个uniapp支持的比较好，移动端这个生态弄的也比较好。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

函数和数据库都可以选择提供的模版（会稍微复杂一些，相当于拿了一套成熟的后端代码api和数据库，直接写前端代码就行了）

在这里插入图片描述

具体怎么使用

在这里插入图片描述
在这里插入图片描述

写好的云函数传到云上去防止丢失（和git感觉差不多），在运行的过程中可以选择使用的是本地的函数还是云函数。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

这就是你数据库的数据，也可以手动添加，也可以增加索引

在这里插入图片描述

用uni-file-picker组件上传的文件会上传到这里

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

写好的前端代码可以一键上传到托管平台，也可以手动打包后上传，他会提供一个默认域名进行访问，也可以买一个域名用过cname指定后就可以用自己的专属域名访问了（可以在阿里云平台买域名也不贵就十几块钱，便宜的一年。注意有两个条件就是，买的域名需要公安备案，要不谁知道你的域名用来放什么了，放个黄色网站那不抓你。第二个就是，就是在unicloud，这里配置上你的域名，在阿里云上解析你的域名）

在这里插入图片描述
在这里插入图片描述
https://static-mp-34c98aff-779c-4ab7-a7f1-95e427155890.next.bspapp.com

vscode 和 hbuilderX 个人使用下来的区别

vscode 使用下来感觉快捷键，插件啥的下来用的都比较舒服，以及项目的node_modules，package文件 看起来都比较清晰，因为都是一个文件夹嘛，可以随时点开看代码，安装插件也是直接打开控制太直接npm安装
hbuilderX 对uniapp 移动端，以及打包发布，云函数，小程序等等支持的比较好 ； hbuilderX 和 uniapp 是一家的当然好了，例如发布的时候可以一键勾选直接发布到对象的账号的前端代码托管，云存储可以直接用提供的组件，不需要做什么配置，直接发到储存平台
uniapp和平常的项目感觉最主要的区别就是没有node_modules文件夹，你用什么插件hbuilderX就自动安装了（安装到那里了我也不知道，全局？，有知道的大佬麻烦留个言感谢）用什么组件也是右键一键安装就行了
【教程】配置uniCloud前端页面托管并自定义域名全流程
a862360493的博客
07-24 6828
前段时间使用uniCloud前端页面托管上传自己写的页面，上传成功后发现有“域名自定义”功能，在uniCloud里叫“配置网站域名”，心想这个要是配上自己的域名那不是酷炫屌炸天了吗，因为uniCloud生成的“默认域名”是一大串，非常不好记，故产生了非常强烈的想法，配置属于自己的域名！于是上网搜了一圈，发现还有挺多教程的，但是教程都不是整套流程的，这里一块那里一块的，也有些东西网上搜不到，让我中间踩了好多坑，现在自己已经把整套流程走完了，所以来分享一下，让大家更好的去配置属于自己的网站！
前端面经-uniapp与小程序
qq_45723302的博客
04-28 633
onLoad（页面加载时触发）、onShow（页面显示时触发）、onReady（页面初次渲染完成时触发）、onHide（页面隐藏时触发）、onUnload（页面卸载时触发）等。：在 HBuilderX 中，点击菜单栏的 “发行”，选择对应的平台进行打包，如发行到 App、小程序等，按照向导完成配置和打包操作。：使用 Chrome 开发者工具、HBuilderX 的性能分析工具等，找出性能瓶颈所在，如加载慢的资源、执行时间长的代码等。使用组件：在需要使用组件的页面中引入并注册组件。
uniCloud云函数url化自定义域名绑定-云对象-微信小程序云开发-开启ssl免费证书-咸虾米
嗨，大家好，我是爱搞知识的咸虾米
01-12 6312
做过微信小程序云开发或者uni-app的uniCloud云开发的同学，肯定知道云函数url化，非常的方便，写好的云函数可以通过生成的url地址，外部的应用如：APP、微信小程序、web端项目等就可以使用uniCloud的云服务了，uniCloud的url化默认的url地址非常的长难以记忆，有没有办法可以让url地址更优雅更好记，方法是有的。 视频地址：https://www.bilibili.com/video/BV1Xe4y1V7Lw
uni-app前端网页托管 域名无法解析
asmspread的专栏
07-06 506
2：这个时候还需要配置主机记录值是*和@，记录类型都是CNAME，记录值填写uni-app后台分配的CNAME就可以。1：配置网站域名的时候基本是按照说明只配置了www，用阿里云域名检测会提示无法解析。3：www、*、@配置的CNAME是同一个值。配置完成后等待1分钟就可以解析了。
uniapp云托管前端网页
最新发布
ike_yu的博客
07-17 265
实名认证。
uniapp前端网页托管配置网站域名详细操作
m0_64213914的博客
03-15 4118
uniapp前端网页托管配置网站域名详细操作
uniCloud介绍及实战
小马甲
11-07 2087
是 联合阿里云、腾讯云，为开发者提供的基于 模式和 编程的云开发平台。 的 web控制台地址：https://unicloud.dcloud.net.cn对于程序员：用熟悉的，轻松搞定前后台整体业务。对于开发商：因为共享大资源池，云服务厂商的成本大幅下降，开发者无需为闲置资源付费，云函数被调用才计费。从技术原理上就有明显成本优势，所以租用比租用传统云要便宜的多。在传统云的世界里，有大量的收费产品。防的高防套餐，每个月至少几万元。而这些费用，在中无需支付。为什么不用买高防也不害怕：由于阿里云和腾讯云的有
云开发谁是卧底线下小游戏发牌助手微信小程序源码.rar
06-23
源码包含了"合法域名.txt"和"谁是卧底"两个文件，可能分别对应着小程序的合法域名配置和核心业务代码。合法域名文件用于配置小程序允许访问的服务器域名，以确保数据请求的安全性。"谁是卧底"可能是JavaScript或...
uniapp 云开发笔记
yunbabac的博客
05-14 1051
云存储文件权限分为公共权限与私有权限，如果是公共权限表示长期有效，我们可以根据fileID拼接成http。非关系型数据库，nosql，可以通过可视化操作，通常通过编辑器操作，创建表后，每一条记录都是json。使用uni ui的FilePicker组件 选择文件后，会自动上传到云存储，不需要任何代码，也可以关闭自动上传，手动上传。图片处理：选择文件后缩略图没必要放原图，可以使用阿里云与腾讯云的处理，收费，但是能减少大小。对于不同字段需求（顺序，必填，错误提示，取值范围，默认值等），参考配置文档。
UNI-APP使用云开发跨全端开发实战讲解
TCB_CloudBase的博客
12-09 1468
UNI-APP 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。 本文为大家讲解如何采用云开发官方JS-SDK，接入云开发后端服务并支持UNI-APP全部端（不止于微信小程序） JS-SDK和UNI-APP适配器 1.JS-SDK和适配器 云开发官方提供的@cloudbase/js-sdk，主要用来做常规WEB、H5等应用（浏览器运行）的云开发资源调用，也是
云数据
沔水
01-22 926
云计算这几年很火，国内国外狼烟四气，各大公司都在布局自己的云计算，确实有着很好的前景，首先他对资源的整合起到了很好的作用，借助云的大数据存储与个人数字终端的结合，它将有一个很广阔的应用，你可以把你的数据部署在云端，在国内或国外某一台服务器上的云空间，你可以在任何地方使用你的数字终端（手机）或带有浏览器的设备链接服务器，存取你的云端数据或应用。云应用采用B/w模式来开发应用变得高效和快捷，而且维护也
uniapp云函数
mowangyou520的博客
04-18 3196
云函数即在云端（服务器端）运行的函数。从 HBuilderX 3.4起，新增了云函数的扩展版，云对象。开发者无需购买、搭建服务器，只需编写代码并部署到云端即可在客户端（App/Web/小程序等）调用，同时云函数之间也可互相调用。一个云函数的写法与一个在本地定义的JavaScript方法无异，代码运行在云端Node.js中。当云函数被客户端调用时，定义的代码会被放在Node.js运行环境中执行。开发者可以如在Node.js环境中使用JavaScript。
云函数(wx.cloud.callFunction)求和的完整代码
weixin_54957314的博客
04-21 1891
onLoad:function(options){ wx.cloud.callFunction({ name:'add', data:{ x:1, y:2, } }).then(res=>{res.result this.setData({ sum:res.result} ) }).catch(err=>{}) ...
uni-app项目配置公共服务器域名
青衫折扇的博客
05-13 6040
在项目根目录创建一个config文件夹主要放一些项目公共配置管理 在config文件夹下创建一个index.config.js文件 const CONFIG = { // 开发环境配置 development: { assetsPath: '/static', // 静态资源路径 baseUrl: '', // 后台接口请求地址 hostUrl: '', // H5地址(前端运行地址) websocketUrl: '', // websocket服务端地址 weixinAppI
uniapp合法域名配置
A12536365214的博客
09-21 2496
request 写入域名前缀即可 => 完成。首先打开微信开发者平台。找到服务器域名=>修改。
【uni-app】【02】请求域名的全局配置。
萌狼蓝天の技术栈
04-23 1501
关于uni-app的请求问题，可以访问官方文档 https://uniapp.dcloud.net.cn/api/request/request.html 值得注意的一个点就是全局配置域名的问题。 因为本地测试是localhost，但是实际部署前后端分离的，域名就不是localhost了，端口号什么的也可能要变，要是不用一个全局变量来代替域名，那后期总不能一个个改吧…… 那么怎么设置全局变量呢。...
uniapp 实战 -- 创建 uni-admin 项目，部署到 uniCloud 前端网页托管（免费云空间）
朝阳39的博客
01-12 3363
可见只能创建一个超级管理员，创建过后，登录页将不再显示注册管理员账号。
uni-app学习笔记之config配置(域名||白名单||statusCode)
紫微斗数象法奥义ZWDStudy
01-15 3550
//common/config.js const baseUrl = 'https://api.shop.eduwork.cn'; export default { "baseUrl": baseUrl, "whiteList": ["/api/auth/register", "/api/auth/login", "/api/index" ].map(x => baseUrl + x) } //import config from "./config.js";
网易云自动打卡签到全新云函数升级教程
云函数是一种无服务器计算服务，允许开发者编写小段代码而不必担心服务器的搭建、配置、扩展以及管理。云函数允许运行单个任务，也叫作“函数即服务”（FaaS），用户只需编写函数代码，而将代码运行所需的计算资源...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值