Vue+Alibaba cloud (inheriting mongoDB database) addition, deletion, modification and inspection

 

Table of contents

illustrate: 

Known as the world's leading Alibaba Cloud

mangoDB       

Alibaba Cloud and mongoDB

delete data (bulk)

before deleting

Backend (Alibaba Cloud, Cloud Function: one111)

 Front-end (client-side) vue

after delete

 Modify Data (Batch)

before modification

 Backend (Alibaba Cloud, Cloud Function: one111)

 Front-end (client-side) vue

after modification

 Add data (specify data)

before adding

  Backend (Alibaba Cloud, Cloud Function: one111)

 Front-end (client-side) vue

After adding

Add data (user can add data to database)

before adding

Backend (Alibaba Cloud, Cloud Function: one111)

Front-end (client-side) vue

 After adding 

 Lookup data (render to front-end page)

Backend (Alibaba Cloud, Cloud Function: one111)

Front-end (client-side) vue

Effect display


 

 illustrate: 

With the change of the charging rules for Tencent Cloud's services, when we (the student party) used Tencent Cloud to develop, it was a day when we were not rich, which made things worse. And we can find that Alibaba Cloud is still in a free state!

 Known as the world's leading Alibaba Cloud

        Founded in 2009, Alibaba Cloud is the world's leading cloud computing and artificial intelligence technology company . It is committed to providing safe and reliable computing and data processing capabilities in the form of online public services , making computing and artificial intelligence an inclusive technology . Alibaba Cloud serves leading enterprises in many fields such as manufacturing, finance, government affairs , transportation, medical care , telecommunications , and energy, including China Unicom , 12306 , Sinopec , PetroChina , Philips , Huada Gene and other large enterprise customers, as well as Weibo , Zhihu and other large enterprises. , Hammer Technology and other star Internet companies. Alibaba Cloud has maintained a good operating record in challenging application scenarios such as Tmall Double 11 Global Carnival and 12306 Spring Festival ticket purchases.

Alibaba Cloud deploys high-efficiency and energy-saving green data centers         around the world , and uses clean computing to provide a steady stream of energy for the new world of Internet of Everything. The service regions include China (North China, East China, South China, Hong Kong), Singapore, and the United States (United States). East, America and West), Europe, Middle East, Australia, Japan.

        In 2014, Alibaba Cloud helped users defend against the largest DDoS attack in the history of the global Internet, with a peak traffic of 453.8Gb per second  . In the Sort Benchmark 2016 sorting competition CloudSort project, Alibaba Cloud broke the AWS record of 4.51$/TB with a sorting cost of 1.44$/TB   . At Sort Benchmark 2015, Alibaba Cloud used its self-developed distributed computing platform ODPS to sort 100TB of data in 377 seconds, breaking the Apache Spark world record of 1406 seconds.

        In the early morning of March 3, 2019, Alibaba Cloud failed in the middle of the night. Alibaba Cloud officially replied that IO HANG occurred on ECS servers and other instances in Part C of Availability Zone C in North China 2.lasted about three hours,Gradually recovered after emergency investigation. On June 11, 2019, Alibaba Cloud was included in the " 2019 Forbes China Most Innovative Companies List ".

mangoDB       

        MongoDB is a database based on distributed file storage [1] written in C++  . Written in C++ language. It aims to provide scalable high-performance data storage solutions for WEB applications.

        MongoDB is a product between relational databases and non-relational databases. It is the most feature-rich and most like relational databases among non-relational databases. The data structure it supports is very loose and is a JSON -like bson format, so it can store more complex data types. The biggest feature of Mongo is that the query language it supports is very powerful. Its syntax is somewhat similar to the object-oriented query language. It can almost realize most functions similar to single-table query in relational databases, and it also supports indexing of data .

Alibaba Cloud and mongoDB

 

Alibaba Cloud Database MongoDB has outstanding advantages in flexibility of deployment architecture, service availability, data reliability, security, and operation and maintenance costs.

 

        In terms of product research and development, the technical teams of both parties communicated regularly to jointly output more product features for MongoDB on Alibaba Cloud. For example, in MongoDB 4.4 version, Hidden Index is a major feature jointly built by Alibaba Cloud and MongoDB. The two parties will work together to build first-class cloud database product capabilities for global customers.

        In terms of customer support, MongoDB has specially set up a CPM (Cloud Partner Manager) team in China, and has launched special cooperation with Alibaba Cloud in customer support, and has provided training empowerment or professional support services for dozens of customers such as Gigabit and Guangzhou Meal Road. , so that enterprise users can focus more on business innovation.

        In terms of ecological construction, several members of the Alibaba Cloud database team play core roles in the MongoDB Chinese community, participate in the translation of official technical documents, share technical blogs, organize and participate in MongoDB technical salons and annual summits in various city stations, and share Alibaba Cloud's MongoDB technology innovations and best practices. practice issues.

        It is reported that in 2020 and 2021, Alibaba Cloud will be awarded the "Best ISV Partner of the Year" and "The Best MongoDB Partner of the Year" by MongoDB respectively. This is a high recognition of Alibaba Cloud's contribution to MongoDB in the Asia-Pacific region.

        Alibaba Cloud has independently developed cloud-native database products such as PolarDB, AnalyticDB, and Lindorm, and has successfully entered the Gartner Global Database Leaders Quadrant for two consecutive years as the only technology manufacturer in China. At present, it has served leading enterprises in government affairs, retail, finance, telecommunications, manufacturing, logistics and other fields.

 

delete data (bulk)

before deleting

Backend (Alibaba Cloud, Cloud Function: one111)

index.js

'use strict';
const db = uniCloud.database()
exports.main = async (event, context) => {
	let res = await db.collection('users').where({
		age:'20'
	}).remove()
	return {
		msg:'删除成功!',
		res
	};
};

 Front-end (client-side) vue

index.view

<template>
	<view class="flex">
<!-- 		<view v-for="item in usersALL" :key="item._id">
			<view>姓名:{
   
   {item.name}}</view>
			<view>年龄:{
   
   {item.age}}</view>
		</view> -->
		<button @click="shanchu">批量删除的数据记录</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				// usersALL:[]
			}
		},
		onLoad() {
			// uniCloud.callFunction({
			// 	name:'one111',
			// 	data:{}
			// }).then(res=>{
			// 	console.log(res)
			// 	this.usersALL=res.result.data
			// })
		},
		methods: {
			shanchu(){
				uniCloud.callFunction({
					name:'one111',
				}).then(res=>{
					console.log(res)
				})
			}
		},
	}
</script>
<style>
	.flex{
		display: flex;
		flex-direction:row;
		justify-content: space-around;
	}
	.zhanshi{
		background: pink;
		width: 100%;
		height: 500px;
	}
	.flex{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}
	.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>

after delete

 Modify Data (Batch)

before modification

 Backend (Alibaba Cloud, Cloud Function: one111)

index.js

'use strict';
const db = uniCloud.database()
exports.main = async (event, context) => {
	let res = await db.collection('users').where({
		age:'20'
	}).update({
		keaidu:'100%'
	})
	return {
		msg:'修改成功!',
		res
	};
};

 Front-end (client-side) vue

index.view

<template>
	<view class="flex">
<!-- 		<view v-for="item in usersALL" :key="item._id">
			<view>姓名:{
   
   {item.name}}</view>
			<view>年龄:{
   
   {item.age}}</view>
		</view> -->
		<button @click="shanchu">批量修改的数据记录</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				// usersALL:[]
			}
		},
		onLoad() {
			// uniCloud.callFunction({
			// 	name:'one111',
			// 	data:{}
			// }).then(res=>{
			// 	console.log(res)
			// 	this.usersALL=res.result.data
			// })
		},
		methods: {
			shanchu(){
				uniCloud.callFunction({
					name:'one111',
				}).then(res=>{
					console.log(res)
				})
			}
		},
	}
</script>
<style>
	.flex{
		display: flex;
		flex-direction:row;
		justify-content: space-around;
	}
	.zhanshi{
		background: pink;
		width: 100%;
		height: 500px;
	}
	.flex{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}
	.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>

after modification

keaidu has become 100%

 Add data (specify data)

before adding

  Backend (Alibaba Cloud, Cloud Function: one111)

index.js

'use strict';
const db = uniCloud.database()
exports.main = async (event, context) => {
	let res = await db.collection('users').add({
		name:'小崽崽',
		age:'1',
		keaidu:'100%'
	})
	return {
		msg:'添加成功!',
		res
	};
};

 Front-end (client-side) vue

index.view

<template>
	<view class="flex">
<!-- 		<view v-for="item in usersALL" :key="item._id">
			<view>姓名:{
   
   {item.name}}</view>
			<view>年龄:{
   
   {item.age}}</view>
		</view> -->
		<button @click="shanchu">添加的数据记录</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				// usersALL:[]
			}
		},
		onLoad() {
			// uniCloud.callFunction({
			// 	name:'one111',
			// 	data:{}
			// }).then(res=>{
			// 	console.log(res)
			// 	this.usersALL=res.result.data
			// })
		},
		methods: {
			shanchu(){
				uniCloud.callFunction({
					name:'one111',
				}).then(res=>{
					console.log(res)
				})
			}
		},
	}
</script>
<style>
	.flex{
		display: flex;
		flex-direction:row;
		justify-content: space-around;
	}
	.zhanshi{
		background: pink;
		width: 100%;
		height: 500px;
	}
	.flex{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}
	.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>

After adding

Add data (user can add data to database)

before adding

Backend (Alibaba Cloud, Cloud Function: one111)

index.js

'use strict';
const db = uniCloud.database()
exports.main = async (event, context) => {
	let {name,age} = event;
	let res = await db.collection('users').add({
		name,
		age
	}
	)
	return {
		res
	};
};

Front-end (client-side) vue

index.view

<template>
	<view class="flex">
		<form @submit="onsubmit">
			<input type="text" name="name"/>
			<input type="text" name="age"/>
			<button form-type="submit">添加</button>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				usersALL:[]
			}
		},
		onLoad() {
			// uniCloud.callFunction({
			// 	name:'one111',
			// 	data:{}
			// }).then(res=>{
			// 	console.log(res)
			// 	this.usersALL=res.result.res.data
			// })
		},
		methods: {
			onsubmit(e){
				console.log(e)
				let obj = e.detail.value;
				
				uniCloud.callFunction({
					name:"one111",
					data:obj
				}).then(res=>{
					console.log(res)
				})
			}
		},
	}
</script>
<style>
	.flex{
		display: flex;
		flex-direction:row;
		justify-content: space-around;
	}
	.zhanshi{
		background: pink;
		width: 100%;
		height: 500px;
	}
	.flex{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}
	.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>

 After adding 

 

 Lookup data (render to front-end page)

 There are a total of four pieces of data in the database, and we query their values ​​and render them on the front-end page!

Backend (Alibaba Cloud, Cloud Function: one111)

index.js

'use strict';
const db = uniCloud.database()
exports.main = async (event, context) => {
	let res = await db.collection('users').get()
	return {
		res
	};
};

Front-end (client-side) vue

index.view

<template>
	<view >
		<view v-for="item in usersALL" :key="item._id">
			<view>姓名:{
   
   {item.name}}</view>
			<view>年龄:{
   
   {item.age}}</view>
		</view>
		<!-- <button @click="shanchu">添加的数据记录</button> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				usersALL:[]
			}
		},
		onLoad() {
			uniCloud.callFunction({
				name:'one111',
				data:{}
			}).then(res=>{
				console.log(res)
				this.usersALL=res.result.res.data
			})
		},
		methods: {
			// shanchu(){
			// 	uniCloud.callFunction({
			// 		name:'one111',
			// 	}).then(res=>{
			// 		console.log(res)
			// 	})
			// }
		},
	}
</script>
<style>
	.flex{
		display: flex;
		flex-direction:row;
		justify-content: space-around;
	}
	.zhanshi{
		background: pink;
		width: 100%;
		height: 500px;
	}
	.flex{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}
	.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>

Effect display

 

Guess you like

Origin blog.csdn.net/lbcyllqj/article/details/127335915