结合Bomb制作交互网站

最新推荐文章于 2024-04-05 02:09:37 发布
最新推荐文章于 2024-04-05 02:09:37 发布
阅读量497 收藏 1
点赞数
分类专栏： Web前端开发 文章标签： jquery 数据库 mvc
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Mr_peng13/article/details/120835119
版权

一、前言

  1. 在前端开发往往只能做一些死的页面，没有数据交互效果。若想搭一个动态网站需要后端技术或后端的工程师辅助开发。
  2. 本文将结合 Bomb 后端云、jQuery 开发一个小型的动态网站。

二、Bomb 后端云介绍

  1. 官网：

    https://www.bmob.cn/

  2. 特点

    1. 轻松搭建应用数据库，支持可视化操作
    2. 支持各种文件上传和存储，CDN 加速更快更稳定
    3. 可在线编写和调试代码，让逻辑实现更加灵活容易
    4. 定时任务，以一定间隔自动完成指定动作
    5. 自定义应用站点，打造属于自己的应用宣传网站

  3. 支持功能

  4. 请注册 Bomb 后使用。

三、创建项目及数据表

  1. 创建项目

    1. 在 Bomb 官网顶部可进入 Bomb 控制台

    2. 在控制台中创建项目

    3. 这里小编事先以把项目创建好，下面的代码将以上图最上面的 “Web” 项目为主。

  2. 创建数据表

    1. 点击云数据库进入 “Web” 项目。

    2. 第一次进入项目后，系统会默认有一个 _User 的表，不用管它，我们自己玩。

    3. 点击左上角的添加表按钮，可创建新的数据表。

    4. 在这里创建一个 shop 表，用来存储数据。这里要注意一下，数据表的名字要严格遵守提示的命名规则，否则无法创建。

    5. 数据表创建成功后，默认会有几个字段（如下图），这些字段不可以删除。同时，在页面的上边有一排操作数据表的功能按钮，接线来我们用这些按钮创建一个我们想要的表。

  3. 添加字段

    1. 表结构

    2. 根据表结构添加列

  4. 添加数据

    1. 这里我们在京东上找一些商品，把数据存进去。

    2. 这里小编存放了 20 条数据。

四、创建 web 项目

  1. 下载文件

    1. 下载 jquery.js 和 Bomb.js 文件
    2. 文件下载地址：https://www.aliyundrive.com/s/2Hm7xbTLFhs

  2. 创建文件

    1. 创建 index.html、index.css、index.js、tool.js 文件。

    2. 将 jquery.js 和 Bomb.js 文件放到项目中。

    3. 在 index.html 文件中引入这几个文件，注意引入的顺序。

      index.html

      <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Bomb商城</title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/Bomb.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/index.js" type="module" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		
	</body>
</html>

      目录结构

  3. tool.js 文件

    1. tool.js 文件是一个 JS 工具类文件。这个文件主要写一些数据库增删改查的代码。
    2. 在 index.html 中不需要引入。

五、开发 tool 工具类

  1. 初始化文件

    1. 在 index.js 文件中对 Bomb 进行初始化。同时引入 tool 类。

      Bmob.initialize("你的Secret Key", "你的API 安全码");
import {tool} from './tool.js';

    2. 你的 Secret Key 在 Bomb 平台的设置 – 引用秘钥中可以找到，如下图。

    3. 你的 API 安全码在设置 – 安全验证中可以自定义，如下图。

    4. 初始化 tool.js 文件

      // 工具类
let tool = {

}

export {
    tool
}

  2. 创建测试表

    1. 在云平台添加一个测试表 test

    2. 表结构：

    3. 平台截图：

  3. 向数据库中添加数据

    1. 编辑 tool.js 文件

      // 工具类
let tool = {
	
	/**
	 * 添加数据
	 * @param {string} table 表名
	 * @param {Array} data 数据，对象数组，key-字段名，value-字段值
	 * 例：data: [{key: 'name',value: 'Bmob'},{key: 'phone',value: '13122223333'}]
	*/
	add: (table,data) => new Promise((t,f) => {
	    const query = Bmob.Query(table);
	    for(let prop of data) query.set(prop.key,prop.value);
	    query.save().then(res => {
	        t(true);
	    })
	}),

}

export {
    tool
}

    2. 在 index.js 文件中调用 add 方法，测试一下。

      1. 代码：

        Bmob.initialize("你的Secret Key", "你的API 安全码");
import {tool} from './tool.js';

//  测试 add 添加数据方法
let data = [
	{ key: 'name',value: '张三' },
	{ key: 'age',value: 20 },
];
tool.add('test',data).then(res => {
	console.log(res)
})

      2. 运行 index.html

      3. 查看 Bomb 平台的 test 表

  4. 修改数据

    1. 编辑 tool.js 文件

      // 工具类
let tool = {
	
	/**
	 * 添加数据
	 * @param {string} table 表名
	 * @param {Array} data 数据，对象数组，key-字段名，value-字段值
	 * 例：data: [{key: 'name',value: 'Bmob'},{key: 'phone',value: '13122223333'}]
	*/
	add: (table,data) => new Promise((t,f) => {
	    const query = Bmob.Query(table);
	    for(let prop of data) query.set(prop.key,prop.value);
	    query.save().then(res => {
	        t(true);
	    })
	}),
	
	/**
	 * 修改数据
	 * @param {string} table 表名
	 * @param {*} id 字段ID
	 * @param {Array} data 数据，key-字段名，value-字段值
	 */
	edit: (table,id,data) => new Promise((t,f) => {
	    const query = Bmob.Query(table);
	    query.set('id', id)
	    for(let prop of data) query.set(prop.key,prop.value);
	    query.save().then(res => {
	        t(true);
	    })
	}),

}

export {
    tool
}

    2. 在 index.js 文件中调用 edit 方法，测试一下。

      1. 代码：

        Bmob.initialize("你的Secret Key", "你的API 安全码");
import {tool} from './tool.js';

//  测试 edit 修改数据方法
let data = [
	{ key: 'name',value: '李四' },
	{ key: 'age',value: 40 },
];
tool.edit('test','ba29605a05',data).then(res => {
	console.log(res)
})

      2. 运行 index.html

      3. 查看 Bomb 平台的 test 表

  5. 查询数据

    1. 编辑 tool.js 文件

      // 工具类
let tool = {
	
	/**
	 * 添加数据
	 * @param {string} table 表名
	 * @param {Array} data 数据，对象数组，key-字段名，value-字段值
	 * 例：data: [{key: 'name',value: 'Bmob'},{key: 'phone',value: '13122223333'}]
	*/
	add: (table,data) => new Promise((t,f) => {
	    const query = Bmob.Query(table);
	    for(let prop of data) query.set(prop.key,prop.value);
	    query.save().then(res => {
	        t(true);
	    })
	}),
	
	/**
	 * 修改数据
	 * @param {string} table 表名
	 * @param {*} id 字段ID
	 * @param {Array} data 数据，key-字段名，value-字段值
	 */
	edit: (table,id,data) => new Promise((t,f) => {
	    const query = Bmob.Query(table);
	    query.set('id', id)
	    for(let prop of data) query.set(prop.key,prop.value);
	    query.save().then(res => {
	        t(true);
	    })
	}),
	
	/**
	 * 查询数据
	 * @param {string} table 表名
	 * @param {array} data 条件	[{key: 字段名,rela: 条件(> <……),value: 值}]
	 * @param {string} order 排序字段
	*/
	get: (table,data=[],order='') => new Promise((t,f) => {
	    const query = Bmob.Query(table);
	    for(let prop of data) query.equalTo(prop.key,prop.rela,prop.value);
	    query.order(order);
	    query.find().then(res => {
	        t(res)
	    });
	})

}

export {
    tool
}

    2. 在 index.js 文件中调用 get 方法，测试一下。

      1. 代码：

        Bmob.initialize("你的Secret Key", "你的API 安全码");
import {tool} from './tool.js';

//  在测试表里添加第二条数据
let data = [
	{ key: 'name',value: '张三' },
	{ key: 'age',value: 20 },
];
tool.add('test',data).then(res => {
	if(res)
	{
        // 测试 get 获取数据方法
		tool.get('test',[
			{ key: 'age',rela: '<',value: 30 }
		]).then(res => {
			console.log(res);
		})
	}
})

      2. 运行 index.html

      3. 查看 Bomb 平台的 test 表

  6. 删除数据

    1. 编辑 tool.js 文件

      // 工具类
let tool = {
	
	/**
	 * 添加数据
	 * @param {string} table 表名
	 * @param {Array} data 数据，对象数组，key-字段名，value-字段值
	 * 例：data: [{key: 'name',value: 'Bmob'},{key: 'phone',value: '13122223333'}]
	*/
	add: (table,data) => new Promise((t,f) => {
	    const query = Bmob.Query(table);
	    for(let prop of data) query.set(prop.key,prop.value);
	    query.save().then(res => {
	        t(true);
	    })
	}),
	
	/**
	 * 删除数据
	 * @param {string} table 表名
	 * @param {*} id 字段ID
	*/
	del: (table,id) => new Promise((t,f) => {
	    const query = Bmob.Query(table);
	    query.destroy(id).then(res => {
	        t(true);
	    })
	}),
	
	/**
	 * 修改数据
	 * @param {string} table 表名
	 * @param {*} id 字段ID
	 * @param {Array} data 数据，key-字段名，value-字段值
	 */
	edit: (table,id,data) => new Promise((t,f) => {
	    const query = Bmob.Query(table);
	    query.set('id', id)
	    for(let prop of data) query.set(prop.key,prop.value);
	    query.save().then(res => {
	        t(true);
	    })
	}),
	
	/**
	 * 查询数据
	 * @param {string} table 表名
	 * @param {array} data 条件	[{key: 字段名,rela: 条件(> <……),value: 值}]
	 * @param {string} order 排序字段
	*/
	get: (table,data=[],order='') => new Promise((t,f) => {
	    const query = Bmob.Query(table);
	    for(let prop of data) query.equalTo(prop.key,prop.rela,prop.value);
	    query.order(order);
	    query.find().then(res => {
	        t(res)
	    });
	})

}

export {
    tool
}

    2. 在 index.js 文件中调用 del 方法，测试一下。

      1. 代码：

        Bmob.initialize("你的Secret Key", "你的API 安全码");
import {tool} from './tool.js';

// 测试 del 删除数据方法
tool.del('test','ed8aeba879').then(res => {
	console.log(res)
})

      2. 运行 index.html

      3. 查看 Bomb 平台的 test 表

    3. 以上就是 tool 工具类里四个操作数据库的方法

六、画页面

  1. index.html 文件

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Bomb商城</title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/Bomb.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/index.js" type="module" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<div class="box">
			<ul class="list"></ul>
		</div>
	</body>
</html>

  2. index.css 文件

    *
{
	margin: 0;
	padding: 0;
}

li
{
	list-style: none;
}

.wh
{
	width: 100%;
	height: 100%;
}

.box
{
	width: 1600px;
	height: 900px;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	overflow: auto;
	padding: 10px;
	box-sizing: border-box;
	border-radius: 10px;
	box-shadow: 0 0 10px 0 #e0ddd6;
}

.box::-webkit-scrollbar
{
	border-width:1px;
}

.list
{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.item
{
	width: 300px;
	height: 400px;
	margin-bottom: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #e1ddd6;
	border-radius: 10px;
}

.item img
{
	width: 100%;
}

.title
{
	width: 100%;
	margin: 10px 0;
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	line-clamp: 2;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.price
{
	color: red;
	font-weight: bold;
	font-size: 22px;
}

  3. index.js 文件

    Bmob.initialize("你的Secret Key", "你的API 安全码");
import {tool} from './tool.js';

// 利用工具类里的 get 方法获取数据
tool.get('shop').then(res => {
    
	// 利用 jquery 将数据渲染到页面中   
	for(let prop of res)
	{
		$(".list").append(`
			<li class="item">
				<img src="${prop.image}" >
				<div class="title">
					<p>${prop.title}</p>
				</div>
				<p class="price">${prop.price}</p>
			</li>
		`)
	}
    
})

  4. 运行效果

七、小结

  1. 利用 Bomb 开发 Web 是一个不错的选择，Bomb 是云端一体化互联网中间件服务，为我们提供了实时数据与文件存储功能，轻松实现应用“云与端”的数据连通。
  2. Bomb 还提供了很多相关的功能，例如短信验证、云函数等。
  3. 小编在这里推荐大家去玩一玩。
BOMB快速入门
PersonSky的博客
09-16 2769
注册Bmob帐号 在网址栏输入www.bmob.cn或者在百度输入Bmob进行搜索，打开Bmob官网后，点击右上角的“注册”，在跳转页面填入你的姓名、邮箱、设置密码，确认后到你的邮箱激活Bmob账户，你就可以用Bmob轻松开发应用了。 网站后台创建应用 登录账号进入bmob后台后，点击后台界面左上角“创建应用”，在弹出框输入你应用的名称，然后确认，你就拥有了一个等待开
Web安全攻防
S1942177831的博客
04-07 3504
Bmob 与 html 、javascript 结合 :做一个《时间轴日记》网页
qq_095的博客
09-04 1361
时间轴日记 时间轴日记 网址：http://120.78.191.175/timediary/ Bmob js 文档网址：http://doc.bmob.cn/data/wechat_app_new/index.html 代码如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;时间轴日记&lt;/t...
Bomb第三方支付
fengge_fly的博客
05-07 1755
Bomb第三方支付应用内接入支付流程： 第一步： 官网注册http://www.bmob.cn/ 创建应用得到application_id 实名认证（一个小时就可审核通过） 下载支付sdk：http://www.bmob.cn/downloads 第二步： 在开发工具Android studio中创建应用Module 将下载好的sdk解压将libs文件夹下BmobPay_v2.7_160
Bomb后端云使用
weixin_30276935的博客
05-12 540
Bomb是后台云托管工具，在Bomb官网注册会员，即可免费使用后台数据库服务。https://www.bmob.cn/app/list 创建应用后，在设置里获取密钥。根据官方文档集成。 在集成后运行时工程总是报如下错误，后面百思不得其解。 反复找原因后，发现是工程的Enable BitCode设置为YES ，而 Bomb SDK 不支持 Enable BitCode导致的。所以讲...
JavaScript 调用Bomb后端云
黑天鹅的博客
05-09 1950
用简单的代码 展示代码的魅力 Bmob 是后端云全方位一体化的后端服务平台 提供可靠的 Serverless 云服务 轻松拥有开发中需要的各种后端能力 主要用于后端数据库，微信小程序，微信小游戏，Android后端测试用 官网链接http://doc.bmob.cn/ 我们现在需要...
实战演练：手把手教你制作数字炸弹游戏
文章进一步结合实战经验，详述了开发环境的搭建、游戏核心逻辑编码、用户界面与交互实现，并探讨了游戏测试与调试的方法和技巧。此外，本文还涵盖了游戏发布、运营支持以及社区管理等方面的策略与实践，旨在为读者...
探索《愤怒的小鸟》第2.5阶段的类继承和图像
然后，“Red”、“Chuck”、“Bomb”等作为子类，它们继承“Bird”类，并可能添加或覆盖某些属性或方法，比如“Bomb”可能拥有爆炸的行为。 ### JavaScript JavaScript是一种高级的、解释型的编程语言，常用于网页...
J2ME平台Java游戏《梦幻炸弹人》源代码解析
结合标题、描述和标签，我们可以得知本游戏属于一款使用J2ME技术开发的Java游戏。游戏的主题是传统的炸弹人游戏，并且在游戏设计上有所创新，比如提升了BOSS的能力，增加了蜈蚣和蝙蝠两种新的BOSS角色。此外，游戏的...
开源游戏《Escape Route》：智破敌阵，解锁逃脱之谜
游戏的开发可能使用了动画图像来丰富游戏体验，而通过HTML和JavaScript等技术制作了可交互的游戏界面。项目可能已经提供了完整的文档和说明，使得有兴趣的开发者可以轻松地获取源代码，贡献代码或进行定制。
Bomb安卓云数据库学习之添加一条数据
tiankong150的博客
05-11 1699
直接入正题 先进行准备工作-Bomb安卓云数据库学习之准备工作1. 在你第一个启动的activity初始化bomb SDKBmob.initialize(this, "你的 Application ID");2.登陆bmob 进入 我的控制台-进入你自己的应用 - 点击添加一个表test-test表添加一列name。3.在项目中创建一个类命名为test。按alt+ins可以添加get...
Android:使用云服务Bomb服务简单案例
Cat的专栏
10-07 6992
我承认我是被慕课网的一个介绍所吸引过去的，介绍就是：作为一个移动平台开发者，你是否曾因为不会搭建服务端程序而苦恼，是否因为服务器端性能优化、功能实现而四处学习？现在，有了Android移动后端服务（Baas），所有苦恼即将不在，数据存储、消息推送、数据分析等种种功能，Baas已全部帮你搞定，心动不如行动，快快学起来吧!。我一看，这Bmob到底是什么牛逼的技术啊，赶紧去膜拜了一下。 不过还好，如同其他
通过Bmob云后端来实现一个完整的app
热门推荐
丿一朵遗憾的博客
03-22 1万+
不知不觉就好久没有写过博客了，一直打算写，但是总由于各种原因耽搁了，最近先开个内容，然后慢慢写着吧。 我们现在要自己做一个app，但是不像做公司项目，会有专门的人配合我们去给我们写后台。所以我们用到一个第三方的后台—-bmob云服务平台我们项目中会用到的东西： bmob云服务平台 采用MVP模式开发 首页侧边菜单DrawerLayout 首页下方4个tab键，fragment，viewpager，
Bomb云demo
最新发布
2401_84132381的博客
04-05 448
91011124 初始化BombSDK：可以在启动的Activity或者我们的Application 中的onCreate方法中去初始化。1234567891011121314155 上面4中初始化需要的applicationid所在的位置：登录、注册、退出登录、修改密码用户是一个应用程序的核心。对于个人开发者来说，自己的应用程序积累到越多的用户，就会给自己带来越强的创作动力。因此Bmob提供了一个专门的用户类——BmobUser来自动处理用户账户管理所需的功能。
Bmob的使用
weixin_44275194的博客
05-13 5098
Bmob的使用一.Bmob云服务简介二.入门与BmobSDK集成1.快速入门2.SDK集成三.Bmob数据库的增删查改1.添加数据2.删除数据3.查询数据4.修改数据四.简单的登录注册案例 一.Bmob云服务简介 Bomb是一个移动后端云服务平台，提供了后端服务器的数据服务，文件服务，推送服务等，让开发者可以专注客户端的开发，从而达到快速构建一个APP的目的。 二.入门与BmobSDK集成 1.快...
Bomb安卓云数据库学习之准备工作
tiankong150的博客
05-11 1635
直接讲！首先注册一个bmob帐号，www.bmob.cn。然后  我的控制台-创建应用-进入应用-左边列表最下面的设置-查看应用秘钥。android studio用户自动导入(推荐)：1.在 Project 的 build.gradle 文件中添加 Bmob的maven仓库地址buildscript { repositories { jcenter() ...
Bomb云demo，腾讯字节等大厂面试真题汇总
m0_55030688的博客
03-26 139
最后为了帮助大家深刻理解Android相关知识点的原理以及面试相关知识，这里放上相关的我搜集整理的14套腾讯、字节跳动、阿里、百度等2020面试真题解析，我把技术点整理成了视频和PDF（实际上比预期多花了不少精力），包知识脉络 + 诸多细节。网上学习 Android的资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。希望这份系统化的技术体系对大家有一个方向参考。
Bomb后端云exception9015,请检查网络是否可用!
qq_45482289的博客
04-14 198
【代码】Bomb后端云exception9015,请检查网络是否可用!
CSAPP bomblab实验：二进制炸弹解除指南
CSAPP bomblab实验报告 CSAPP bomblab是卡内基梅隆大学（CMU）CSAPP课程实验lab系列中的一个实验，旨在帮助学生理解汇编语言和使用gdb调试工具。实验的主要目的是让学生通过反汇编和逆向工程来确定六个字符串，从而...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

iGma_e

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值