0
0

Vue+阿里云（继承mongoDB数据库）的增删改查

说明：

随着腾讯云的服务的收费规则的改变，我们（学生党）再用腾讯云开发时，是我们本不富裕的日子，雪上加霜。而我们可以发现，阿里云当前还是一个处于免费的状态！

被称为全球领先的阿里云

  1.     阿里云创立于2009年，是全球领先的云计算及人工智能科技公司，致力于以在线公共服务的方式，提供安全、可靠的计算和数据处理能力，让计算和人工智能成为普惠科技。阿里云服务着制造、金融、政务、交通、医疗、电信、能源等众多领域的领军企业，包括中国联通、12306、中石化、中石油、飞利浦、华大基因等大型企业客户，以及微博、知乎、锤子科技等明星互联网公司。在天猫双11全球狂欢节、12306春运购票等极富挑战的应用场景中，阿里云保持着良好的运行纪录  。
  3.     阿里云在全球各地部署高效节能的绿色数据中心，利用清洁计算为万物互联的新世界提供源源不断的能源动力，开服的区域包括中国（华北、华东、华南、香港）、新加坡、美国（美东、美西）、欧洲、中东、澳大利亚、日本。
  5.     2014年，阿里云曾帮助用户抵御全球互联网史上最大的DDoS攻击，峰值流量达到每秒453.8Gb  。在Sort Benchmark 2016 排序竞赛 CloudSort项目中，阿里云以1.44$/TB的排序花费打破了AWS保持的4.51$/TB纪录   。在Sort Benchmark 2015，阿里云利用自研的分布式计算平台ODPS，377秒完成100TB数据排序，刷新了Apache Spark 1406秒的世界纪录   。
  7.     2019年3月3日凌晨，阿里云深夜出现故障，阿里云官方回复，华北2地域可用区C部分ECS服务器等实例出现IO HANG 持续了三个小时左右， 经紧急排查处理后逐步恢复。2019年6月11日，阿里云入选“2019福布斯中国最具创新力企业榜”。

mangoDB

  1.     MongoDB是由c++编写的一个基于分布式文件存储 [1]  的数据库。由C++语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。
  3.     MongoDB是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。它支持的数据结构非常松散，是类似json的bson格式，因此可以存储比较复杂的数据类型。Mongo最大的特点是它支持的查询语言非常强大，其语法有点类似于面向对象的查询语言，几乎可以实现类似关系数据库单表查询的绝大部分功能，而且还支持对数据建立索引。

​

阿里云与mongoDB

阿里云数据库MongoDB版在部署架构的灵活性以及服务可用性、数据可靠性、安全性、运维成本等方面具有突出的优势。

** 产品研发方面，双方技术团队定期沟通，共同为阿里云上的MongoDB输出更多产品特性，如在MongoDB 4.4版本中，Hidden Index 就是阿里云和 MongoDB 官方共建的一个重大特性。双方携手为全球客户打造一流的云数据库产品能力。**

** 客户支持方面，MongoDB在中国专门设置了CPM（Cloud Partner Manager）团队，与阿里云在客户支持上展开专项合作，已为吉比特、广州餐道等数十家客户提供培训赋能或专业支持服务，让企业用户可以将更多精力聚焦业务的创新上。**

** 生态建设方面，阿里云数据库团队多名成员在MongoDB中文社区担任核心角色，参与官方技术文档翻译、分享技术博客，组织参与各城市站MongoDB技术沙龙和年度峰会，分享阿里云MongoDB技术创新和最佳实践议题。**

** 据悉，2020年、2021年，阿里云分别荣获MongoDB颁发的“年度最佳ISV伙伴奖”及“年度MongoDB最佳合作伙伴奖”，今年再次获颁“年度新兴市场最佳云合作伙伴奖”，这是对阿里云在亚太地区对MongoDB贡献的高度认可。**

** 阿里云自主研发了PolarDB、AnalyticDB、Lindorm等云原生数据库产品，并作为中国唯一的科技厂商连续两年成功进入Gartner全球数据库领导者象限。目前已服务政务、零售、金融、电信、制造、物流等多个领域的龙头企业。**

删除数据（批量）

删除之前

后端（阿里云端，云函数：one111）

index.js

  1. 'use strict';
  2. const db = uniCloud.database()
  3. exports.main = async (event, context) => {
  4.     let res = await db.collection('users').where({
  5.         age:'20'
  6.     }).remove()
  7.     return {
  8.         msg:'删除成功！',
  9.         res
  10.     };
  11. };

前端（客户端）vue

index.vue

  1. <template>
  2.     <view class="flex">
  3. <!--         <view v-for="item in usersALL" :key="item._id">
  4.             <view>姓名：{{item.name}}</view>
  5.             <view>年龄：{{item.age}}</view>
  6.         </view> -->
  7.         <button @click="shanchu">批量删除的数据记录</button>
  8.     </view>
  9. </template>
  11. <script>
  12.     export default {
  13.         data() {
  14.             return {
  15.                 title: 'Hello',
  16.                 // usersALL:[]
  17.             }
  18.         },
  19.         onLoad() {
  20.             // uniCloud.callFunction({
  21.             //     name:'one111',
  22.             //     data:{}
  23.             // }).then(res=>{
  24.             //     console.log(res)
  25.             //     this.usersALL=res.result.data
  26.             // })
  27.         },
  28.         methods: {
  29.             shanchu(){
  30.                 uniCloud.callFunction({
  31.                     name:'one111',
  32.                 }).then(res=>{
  33.                     console.log(res)
  34.                 })
  35.             }
  36.         },
  37.     }
  38. </script>
  39. <style>
  40.     .flex{
  41.         display: flex;
  42.         flex-direction:row;
  43.         justify-content: space-around;
  44.     }
  45.     .zhanshi{
  46.         background: pink;
  47.         width: 100%;
  48.         height: 500px;
  49.     }
  50.     .flex{
  51.         display: flex;
  52.         flex-direction: row;
  53.         justify-content: space-around;
  54.         align-items: center;
  55.     }
  56.     .content {
  57.         display: flex;
  58.         flex-direction: column;
  59.         align-items: center;
  60.         justify-content: center;
  61.     }
  63.     .logo {
  64.         height: 200rpx;
  65.         width: 200rpx;
  66.         margin-top: 200rpx;
  67.         margin-left: auto;
  68.         margin-right: auto;
  69.         margin-bottom: 50rpx;
  70.     }
  72.     .text-area {
  73.         display: flex;
  74.         justify-content: center;
  75.     }
  77.     .title {
  78.         font-size: 36rpx;
  79.         color: #8f8f94;
  80.     }
  81. </style>

删除之后

修改数据（批量）

修改之前

后端（阿里云端，云函数：one111）

index.js

  1. 'use strict';
  2. const db = uniCloud.database()
  3. exports.main = async (event, context) => {
  4.     let res = await db.collection('users').where({
  5.         age:'20'
  6.     }).update({
  7.         keaidu:'100%'
  8.     })
  9.     return {
  10.         msg:'修改成功！',
  11.         res
  12.     };
  13. };

前端（客户端）vue

index.vue

  1. <template>
  2.     <view class="flex">
  3. <!--         <view v-for="item in usersALL" :key="item._id">
  4.             <view>姓名：{{item.name}}</view>
  5.             <view>年龄：{{item.age}}</view>
  6.         </view> -->
  7.         <button @click="shanchu">批量修改的数据记录</button>
  8.     </view>
  9. </template>
  11. <script>
  12.     export default {
  13.         data() {
  14.             return {
  15.                 title: 'Hello',
  16.                 // usersALL:[]
  17.             }
  18.         },
  19.         onLoad() {
  20.             // uniCloud.callFunction({
  21.             //     name:'one111',
  22.             //     data:{}
  23.             // }).then(res=>{
  24.             //     console.log(res)
  25.             //     this.usersALL=res.result.data
  26.             // })
  27.         },
  28.         methods: {
  29.             shanchu(){
  30.                 uniCloud.callFunction({
  31.                     name:'one111',
  32.                 }).then(res=>{
  33.                     console.log(res)
  34.                 })
  35.             }
  36.         },
  37.     }
  38. </script>
  39. <style>
  40.     .flex{
  41.         display: flex;
  42.         flex-direction:row;
  43.         justify-content: space-around;
  44.     }
  45.     .zhanshi{
  46.         background: pink;
  47.         width: 100%;
  48.         height: 500px;
  49.     }
  50.     .flex{
  51.         display: flex;
  52.         flex-direction: row;
  53.         justify-content: space-around;
  54.         align-items: center;
  55.     }
  56.     .content {
  57.         display: flex;
  58.         flex-direction: column;
  59.         align-items: center;
  60.         justify-content: center;
  61.     }
  63.     .logo {
  64.         height: 200rpx;
  65.         width: 200rpx;
  66.         margin-top: 200rpx;
  67.         margin-left: auto;
  68.         margin-right: auto;
  69.         margin-bottom: 50rpx;
  70.     }
  72.     .text-area {
  73.         display: flex;
  74.         justify-content: center;
  75.     }
  77.     .title {
  78.         font-size: 36rpx;
  79.         color: #8f8f94;
  80.     }
  81. </style>

修改之后

keaidu都变成了100%

增加数据（指定数据）

添加前

后端（阿里云端，云函数：one111）

index.js

  1. 'use strict';
  2. const db = uniCloud.database()
  3. exports.main = async (event, context) => {
  4.     let res = await db.collection('users').add({
  5.         name:'小崽崽',
  6.         age:'1',
  7.         keaidu:'100%'
  8.     })
  9.     return {
  10.         msg:'添加成功！',
  11.         res
  12.     };
  13. };

前端（客户端）vue

index.vue

  1. <template>
  2.     <view class="flex">
  3. <!--         <view v-for="item in usersALL" :key="item._id">
  4.             <view>姓名：{{item.name}}</view>
  5.             <view>年龄：{{item.age}}</view>
  6.         </view> -->
  7.         <button @click="shanchu">添加的数据记录</button>
  8.     </view>
  9. </template>
  11. <script>
  12.     export default {
  13.         data() {
  14.             return {
  15.                 title: 'Hello',
  16.                 // usersALL:[]
  17.             }
  18.         },
  19.         onLoad() {
  20.             // uniCloud.callFunction({
  21.             //     name:'one111',
  22.             //     data:{}
  23.             // }).then(res=>{
  24.             //     console.log(res)
  25.             //     this.usersALL=res.result.data
  26.             // })
  27.         },
  28.         methods: {
  29.             shanchu(){
  30.                 uniCloud.callFunction({
  31.                     name:'one111',
  32.                 }).then(res=>{
  33.                     console.log(res)
  34.                 })
  35.             }
  36.         },
  37.     }
  38. </script>
  39. <style>
  40.     .flex{
  41.         display: flex;
  42.         flex-direction:row;
  43.         justify-content: space-around;
  44.     }
  45.     .zhanshi{
  46.         background: pink;
  47.         width: 100%;
  48.         height: 500px;
  49.     }
  50.     .flex{
  51.         display: flex;
  52.         flex-direction: row;
  53.         justify-content: space-around;
  54.         align-items: center;
  55.     }
  56.     .content {
  57.         display: flex;
  58.         flex-direction: column;
  59.         align-items: center;
  60.         justify-content: center;
  61.     }
  63.     .logo {
  64.         height: 200rpx;
  65.         width: 200rpx;
  66.         margin-top: 200rpx;
  67.         margin-left: auto;
  68.         margin-right: auto;
  69.         margin-bottom: 50rpx;
  70.     }
  72.     .text-area {
  73.         display: flex;
  74.         justify-content: center;
  75.     }
  77.     .title {
  78.         font-size: 36rpx;
  79.         color: #8f8f94;
  80.     }
  81. </style>

添加后

增加数据（用户可添加数据到数据库）

添加前

后端（阿里云端，云函数：one111）

index.js

  1. 'use strict';
  2. const db = uniCloud.database()
  3. exports.main = async (event, context) => {
  4.     let {name,age} = event;
  5.     let res = await db.collection('users').add({
  6.         name,
  7.         age
  8.     }
  9.     )
  10.     return {
  11.         res
  12.     };
  13. };

前端（客户端）vue

index.vue

  1. <template>
  2.     <view class="flex">
  3.         <form @submit="onsubmit">
  4.             <input type="text" name="name"/>
  5.             <input type="text" name="age"/>
  6.             <button form-type="submit">添加</button>
  7.         </form>
  8.     </view>
  9. </template>
  11. <script>
  12.     export default {
  13.         data() {
  14.             return {
  15.                 title: 'Hello',
  16.                 usersALL:[]
  17.             }
  18.         },
  19.         onLoad() {
  20.             // uniCloud.callFunction({
  21.             //     name:'one111',
  22.             //     data:{}
  23.             // }).then(res=>{
  24.             //     console.log(res)
  25.             //     this.usersALL=res.result.res.data
  26.             // })
  27.         },
  28.         methods: {
  29.             onsubmit(e){
  30.                 console.log(e)
  31.                 let obj = e.detail.value;
  32.                 
  33.                 uniCloud.callFunction({
  34.                     name:"one111",
  35.                     data:obj
  36.                 }).then(res=>{
  37.                     console.log(res)
  38.                 })
  39.             }
  40.         },
  41.     }
  42. </script>
  43. <style>
  44.     .flex{
  45.         display: flex;
  46.         flex-direction:row;
  47.         justify-content: space-around;
  48.     }
  49.     .zhanshi{
  50.         background: pink;
  51.         width: 100%;
  52.         height: 500px;
  53.     }
  54.     .flex{
  55.         display: flex;
  56.         flex-direction: row;
  57.         justify-content: space-around;
  58.         align-items: center;
  59.     }
  60.     .content {
  61.         display: flex;
  62.         flex-direction: column;
  63.         align-items: center;
  64.         justify-content: center;
  65.     }
  67.     .logo {
  68.         height: 200rpx;
  69.         width: 200rpx;
  70.         margin-top: 200rpx;
  71.         margin-left: auto;
  72.         margin-right: auto;
  73.         margin-bottom: 50rpx;
  74.     }
  76.     .text-area {
  77.         display: flex;
  78.         justify-content: center;
  79.     }
  81.     .title {
  82.         font-size: 36rpx;
  83.         color: #8f8f94;
  84.     }
  85. </style>

添加后

查寻数据(渲染到前端页面)

** 数据库中一共由四条数据，我们把他们的值都查询出来并渲染在前端页面显示！**

后端（阿里云端，云函数：one111）

index.js

  1. 'use strict';
  2. const db = uniCloud.database()
  3. exports.main = async (event, context) => {
  4.     let res = await db.collection('users').get()
  5.     return {
  6.         res
  7.     };
  8. };

前端（客户端）vue

index.vue

  1. <template>
  2.     <view >
  3.         <view v-for="item in usersALL" :key="item._id">
  4.             <view>姓名：{{item.name}}</view>
  5.             <view>年龄：{{item.age}}</view>
  6.         </view>
  7.         <!-- <button @click="shanchu">添加的数据记录</button> -->
  8.     </view>
  9. </template>
  11. <script>
  12.     export default {
  13.         data() {
  14.             return {
  15.                 title: 'Hello',
  16.                 usersALL:[]
  17.             }
  18.         },
  19.         onLoad() {
  20.             uniCloud.callFunction({
  21.                 name:'one111',
  22.                 data:{}
  23.             }).then(res=>{
  24.                 console.log(res)
  25.                 this.usersALL=res.result.res.data
  26.             })
  27.         },
  28.         methods: {
  29.             // shanchu(){
  30.             //     uniCloud.callFunction({
  31.             //         name:'one111',
  32.             //     }).then(res=>{
  33.             //         console.log(res)
  34.             //     })
  35.             // }
  36.         },
  37.     }
  38. </script>
  39. <style>
  40.     .flex{
  41.         display: flex;
  42.         flex-direction:row;
  43.         justify-content: space-around;
  44.     }
  45.     .zhanshi{
  46.         background: pink;
  47.         width: 100%;
  48.         height: 500px;
  49.     }
  50.     .flex{
  51.         display: flex;
  52.         flex-direction: row;
  53.         justify-content: space-around;
  54.         align-items: center;
  55.     }
  56.     .content {
  57.         display: flex;
  58.         flex-direction: column;
  59.         align-items: center;
  60.         justify-content: center;
  61.     }
  63.     .logo {
  64.         height: 200rpx;
  65.         width: 200rpx;
  66.         margin-top: 200rpx;
  67.         margin-left: auto;
  68.         margin-right: auto;
  69.         margin-bottom: 50rpx;
  70.     }
  72.     .text-area {
  73.         display: flex;
  74.         justify-content: center;
  75.     }
  77.     .title {
  78.         font-size: 36rpx;
  79.         color: #8f8f94;
  80.     }
  81. </style>

效果显示

标签： 阿里云 腾讯云 云计算
本文转载自: https://blog.csdn.net/lbcyllqj/article/details/127335915
版权归原作者 lqj_本人 所有， 如有侵权，请联系我们删除。
登录后发布评论

“Vue+阿里云（继承mongoDB数据库）的增删改查”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？