教你用HBuilderX免费搭建一个网站

前言

如果你有vue的基础，那么HBuilderx工具将会是你更好的选择，他可以快速帮助你搭建网站，即使你只是一个人，利用DCloud你可以使用阿里云免费但受限的服务器资源，后续也可以花费资金升级服务器。而且不需要你学会复杂的数据库操作语句，是用官方提供的api就可以方便的对数据库进行操作，前后端对接也有提供的api方便传输数据，同时还可以帮你托管前端网页，即使你没有域名也可以进行发布。

如果你对html/js/vue都不怎么了解，可以先去学习html、js、css等网页所需的基础语言。这一步学习，你可以使用vsc（Visual Studio Code）完成基础的学习，以及vue相关的学习。

Visual Studio Code官网https://code.visualstudio.com/download

所需工具

1.HBuilderX

HBuilderX官网https://dcloud.io/hbuilderx.htmlHBuilderX，简称HX，是一款免费工具。

轻巧、极速，10M的绿色发行包，C++架构，启动速度、大文档打开速度、编码提示，都极速响应；

强大的语法提示，一流的ast语法分析能力，语法提示精准、全面、细致，转到定义、结构完善；

专为vue打造，提供比其他工具更优秀的vue支持，大幅提升你的vue开发效率；

清爽护眼，界面清爽简洁，绿柔主题经过科学的脑疲劳测试，最适合人眼长期观看的主题界面。保护手腕，减缓鼠标手；

高效极客操作，HBuilderX对字处理提供了更崇高的支持。更强大的多光标、只能双击、选区管理...让文字处理的效率大幅提升。比如你可以简单的选中想要处理的多端文字区块，方便的同时注释掉同行的一对tag或if块首尾行；

markdown优先，HB是唯一一个新建文件默认类型是markdown的编辑器，也是对md支持最强的编辑器，你甚至可以直接粘贴表格、图片进来。对于技术人员，我们强烈建议你以后不要使用记事本了，用markdown来代替txt。

2.微信开发者工具(可选)

微信开发者工具官方文档https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

微信小程序是一种不需要下载安装即可使用的应用，用户扫一扫或搜一下即可打开，具有“触手可及”的特点。

微信小程序已经覆盖了多个行业，拥有庞大的用户群体。据统计，微信小程序应用数量超过了一百万，日活用户达到两个亿，为开发者提供了广阔的市场空间。

微信小程序的开发文档完善，社区支持强大，使得开发者能够快速上手并解决问题。

3.HBuilderX与微信小程序的结合(可选)

在HBuilderX中，开发者可以方便地创建和配置微信小程序项目。通过简单的设置，开发者可以将项目运行到微信开发者工具中，实现实时预览和调试。

HBuilderX支持在线调试和真机调试，开发者可以在不同的设备上进行实时测试和调试，确保小程序的稳定性和兼容性。

HBuilderX的云端同步和代码版本控制功能，使得开发者可以在多个设备之间同步项目和文件，方便团队协作和版本管理。

1.创建HBuilderX项目

打开HBuilderX软件，以此点击“文件”-“新建”-“1.项目”，进入创建项目窗口，操作如下图

选择uni-app类型项目，输入项目名称和选定你的项目位置，选择默认模板，并勾选启用uniCloud且选用阿里云，操作如下图

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

我们选择uni-app项目进行演示，其他项目也可以自行尝试。

创建好项目后，你会看到以下这些文件夹以及文件，如下图

项目文件

uniCloud文件夹

存放uniCloud服务的特定文件和配置的目录。uniCloud是uniapp提供的一种云开发模式，它允许开发者在云端进行数据存储、云函数部署等操作，而无需关心底层的服务器运维工作

pages文件夹

存放所有页面的目录。每个页面都可以视为一个单独的组件，包含一个.vue文件和相关的资源文件。这些页面文件定义了应用的各个视图和功能。

static文件夹

存放各种静态资源的目录，如图片、字体、CSS样式文件等。这些资源可以在项目的各个页面中直接引用。

uni_modules文件夹

用于存放uniapp项目的各种依赖文件，通常是uni-app的插件模块化规范，支持直接封装为项目模板。

App.vue文件

项目的根组件，是所有页面的入口文件。它包含了应用的一些全局配置。所有的页面都是在App.vue下进行切换的。

index.html文件

uni-app项目的入口HTML文件。虽然在实际开发中，你很少会直接修改这个文件，但它对于项目的启动和页面渲染有着重要的作用。这个文件通常包含了页面的基本结构、引入的CSS和JavaScript文件，以及Vue实例的挂载点。

main.js文件

项目的入口文件，主要用于初始化Vue实例和引入必要的插件。它是项目的启动点，负责加载和配置Vue应用。

manifest.json文件

应用的配置文件，用于指定应用的名称、图标、权限等基本信息。这个文件包含了应用的基本设置，如应用的显示名称、版本信息、是否允许全屏显示、是否允许下拉刷新等。同时，它还可以配置应用的原生模块权限，如访问相册、相机等。

pages.json文件

uni-app项目的页面配置文件，用于配置页面路由、导航栏、选项卡等页面类信息。这个文件定义了应用的页面结构，包括页面的路径、标题、样式等。同时，它还支持配置全局的导航栏样式、底部的选项卡等。通过配置这个文件，你可以轻松定义应用的页面跳转和导航逻辑。

uni.promisify.adaptor.js文件

是uni-app提供的一个辅助文件，用于将uni-app的API转换为Promise形式，使得异步操作更加简洁和易于管理。在uni-app中，很多API都是基于回调函数实现的，而Promise则是一种更加现代和优雅的异步编程方式。这个文件通过封装uni-app的API，使得你可以使用Promise来调用这些API，提高代码的可读性和可维护性。

uni.scss文件

内置样式文件，用于方便整体控制应用的风格。这个文件里预置了一批scss变量，可以方便地在项目中统一设置样式。

2.关联云服务空间或项目

右键“uniCloud文件夹”选择“关联云服务控件或项目”，

你可以看到这么一个窗口，由于我已经事先购买了免费的云服务空间，和你看到的可能不一样，但是不影响，我们点击右上角的新建，前往DCloud服务空间，购买阿里云免费的服务空间

右上角新建选择“新建服务空间”

选择“阿里云”的免费付费方式，即可购买期限1个月的免费服务空间，你可以理解为为服务器。在这里我就不能演示了。

当你购买完成后，就可以在uniCloud文件夹右键进行关联云服务控件了，uniCloud文件夹后面会显示你关联的服务器空间名称，随后我们可以尝试运行项目

3.手动操作云数据库和云储存

右键uniCloud文件夹，选择“打开uniCloud Web控制台”，你可以看到关于你的服务空间的基本信息和资源状况

随后在云数据库里新建数据表，并且向表里添加记录，操作如下图

随后我们可以在前端页面尝试获取云数据表里的数据

1.创建云函数

点开uniCloud文件夹，右键其中的cloudfunctions文件夹，选择“创建云函数/云对象”，输入名字后，创建

创建成功后，你会看到如下文件内容

'use strict';
exports.main = async (event, context) => {
	//event为客户端上传的参数
	console.log('event : ', event)
	
	//返回数据给客户端
	return event
};

参数event是你从前端页面传进来的参数，可见里面的代码只是输出了event然后便返回了event给前端页面，我们写几个简单的代码去获取数据表里的数据

'use strict';
exports.main = async (event, context) => {
	//event为客户端上传的参数
	console.log('event : ', event)
	const db = uniCloud.database();
	const result = await db.collection("test").get()
	console.log('result : ', result)
	//返回数据给客户端
	return result
};

输入“cdb”即可快速补全这一行代码，这一行代码是获取数据库实例，

const db = uniCloud.database();

随后可输入这一行代码对数据表进行获取，这一行代码通过 db.collection(name) 可以获取指定数据表的引用，在此基础上可以进行写入，读取，引用，计数，你还可以写where条件筛选出匹配的记录，以及排序等等，你可以参考官方文档，如下

const result = await db.collection("test").get()

uniCloud云函数通过传统方式操作数据库https://doc.dcloud.net.cn/uniCloud/cf-database.html#get-collection这个代码的逻辑是，获取数据表里的数据，并且返回给前端，接下来我们要在前端页面进行调用云函数

2.在前端调用云函数

我们去到page里找到默认生成的index页面

我们可以使用自带的api(uniCloud.callFunction)去调用云函数，并且渲染到页面中，代码如下

<script>
	export default {
		data() {
			return {
				title: 'Hello',
			}
		},
		onLoad() {
			this.getTestData()
		},
		methods: {
			getTestData(){
				uniCloud.callFunction({
					name:"getTestData",
					data:{
						//这里你可以输入参数，比如 id:123	name:"test"等等
					},
					success: (result) => {
						console.log("调用云函数成功后返回的结果",result);
						this.title = result.result.data[0].name
					},
					fail: (result) => {
						console.log("调用云函数失败后返回的结果",result);
					},
					complete: (result) => {
						console.log("调用云函数无论成功与否都会执行该complete函数",result);
					}
				})
			}
		}
	}
</script>

首先在methods里写一个getTestData函数，用于调用云函数获取数据，其中uniCloud.callFunction的作用是调用云函数，name是你的云函数的名称（一般会自动提示），data是你要传给云函数的参数，就是上面提到的event，你的参数将会在event对象里，其中写了三中结果函数，分别是success和fail和complete，代码中均有提示，此处不在赘述。

其中代码的赋值“result.result.data[0].name”是根据云函数返回的数据结构去写的，并不是乱写，也不是完全写死的，你可以在云函数里自定义一个对象去调整数据的结构

this.title = result.result.data[0].name

这是运行结果

可以看到，图标下方的'Hello'已经被渲染成了我们在云数据表里存下的字符串，我们可以回过头看看uniCloud控制台的输出（查看云函数的运行）

可以看到请求参数是空的，因为我们没有穿任何参数，同时有两个console.log的数据，就是开头是event：和result：的那两条输出。最后就是返回结果，里面也提示了你返回的数据结构是怎么样的

3.使用云储存

在uniCloud Web控制台里，我们可以在云储存中，上传你想要储存的文件等等，如下图

上传成功后，你可以刷新一下该页面，然后查看文件的详情，你可以看到他提供另一个网络路径，没错，这个路径其实就相当于网络图片的路径，如下图

我们可以复制那个“下载地址”，将他粘贴到我们云数据表test里的name字段里（就是手动更改name的内容）

我们回到运行的页面，刷新看可以看到拿到了这个链接

那我们知道，上面说过这个其实就是网络图片的地址，那我们岂不是可以在前端页面进行渲染出来，我们可以进行尝试，代码如下

<image :src="title" mode=""></image>

因为咱们上面已经获取了这个路径，只需写这个标签，并绑定在src上，即可进行渲染，效果如下

到这，已经完成了从云数据库，云储存，到云函数（后端），再到前端页面的编写。

云函数代码如下：

'use strict';
exports.main = async (event, context) => {
	//event为客户端上传的参数
	console.log('event : ', event)
	const db = uniCloud.database();
	const result = await db.collection("test").get()
	console.log('result : ', result)
	//返回数据给客户端
	return result
};

前端页面代码如下：

<template>
	<view class="content">
		<!-- <image class="logo" src="/static/logo.png"></image> -->
		<image :src="title" mode=""></image>
		<view class="text-area">
			<!-- <text class="title">{{title}}</text> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
			}
		},
		onLoad() {
			this.getTestData()
		},
		methods: {
			getTestData(){
				uniCloud.callFunction({
					name:"getTestData",
					data:{
						//这里你可以输入参数，比如 id:123	name:"test"等等
					},
					success: (result) => {
						console.log("调用云函数成功后返回的结果",result);
						this.title = result.result.data[0].name
					},
					fail: (result) => {
						console.log("调用云函数失败后返回的结果",result);
					},
					complete: (result) => {
						console.log("调用云函数无论成功与否都会执行该complete函数",result);
					}
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

4.发布网站