首页 > 其他分享 >本地uni-app链接阿里云esc实例上的mongo

本地uni-app链接阿里云esc实例上的mongo

时间:2024-11-03 20:50:12浏览次数:3  
标签:const mongo app db server esc ESC js 数据库

1. 准备工作

1.1 获取阿里云ESC实例

1.2 连接到ESC实例

这里参考阿里云自带的文档们
阿里云ESC文档<–点这里看文档
给esc开3000端口<–点击看如何开端口
开出方向3000
或者你觉得无所谓开0000也行

2. 在ESC上安装Node.js

curl -fsSL https://rpm.nodesource.com/setup_lts.x | sudo bash -
sudo yum install -y nodejs

3. 本地uni-app准备

  • 推荐使用HBuilderX
  • 点我去下HBuilderX
  • 安装HBuilderX后,打开并创建新项目
  • 左上角文件在这里插入图片描述
  • 创建 uni-app组件
    在这里插入图片描述
    输入文件名默认组件。然后创建
    在这里插入图片描述

4. MongoDB的使用

4.1 安装必要的npm包

npm install express mongoose cors

4.2 MongoDB基本操作

  1. 查看所有数据库

    show dbs
    
  2. 创建/使用数据库

    use mydatabase
    
  3. 查看集合

    show collections
    
  4. 插入数据

    db.mycollection.insertMany([
      { name: "Alice", age: 25 },
      { name: "Bob", age: 30 },
      { name: "Charlie", age: 35 }
    ]);
    
  5. 查看数据

    db.mycollection.find()
    
  6. 更漂亮的带空格查看数据

    db.mycollection.find().pretty()
    

4.3怎么创建数据库

  • 创建数据库:use 数据库名
  • 注意:不做集合的话,use别的数据库,它会给你直接删了
  • 所以创建数据库和插入数据要一起执行

4.4 找不到你的刚刚插入的数据了

  1. use 你的每个数据库
  2. 然后show collection
  3. 看看是不是差错数据库了
  4. or(表并列)看看是不是没有权限

提升权限:

use admin;
db.updateUser(
    'admin',
    {
        roles: [
            { role: 'readWrite', db: '你的新数据库' },
            { role: 'userAdminAnyDatabase', db: 'admin' }
        ]
    }
);

或直接赋予root权限:

db.updateUser("admin", {
  roles: [ { role: "root", db: "admin" } ]
})

4.5 退出MongoDB

  • 输入 exit() 或按 Ctrl+C

5. 建立Node.js与MongoDB的连接

5.1 创建服务器文件

mkdir /my-project
cd /my-project
touch server.js
vi server.js

5.2 编辑server.js

留意mydatabase 和mycollection是不是你想要的
不过你从上过流程到下面就无所谓
在你想链接别的数据库和集合注意

// server.js
const express = require('express');
const mongoose = require('mongoose');
const app = express();
const port = 3000;

mongoose.connect('mongodb://localhost:27017/mydatabase', {//看看这个mydatabase,链接其他数据库改这里就ok
  useNewUrlParser: true,
  useUnifiedTopology: true
});

const Schema = mongoose.Schema;
const chatSchema = new Schema({
  Chating: {
    fistGreeting: {
      name: String,
      age: String
    }
  }
});

const ChatModel = mongoose.model('Chat', chatSchema, 'mycollection');//看看这个mycollection

app.get('/api/chat', async (req, res) => {
  try {
    const chatData = await ChatModel.findOne();
    if (!chatData) {
      console.log("No data found in database");
      res.status(404).send('No data found');
    } else {
      res.json(chatData);
    }
  } catch (err) {
    console.error("Error fetching data from database:", err);
    res.status(500).send('Error fetching data from database');
  }
});

app.listen(port, () => {
  console.log(`Server listening at http://localhost:${port}`);
});

5.3 使用PM2管理Node.js应用

安装PM2:

npm install pm2@latest -g

启动一下

pm2 start server.js

在浏览器输入

你esc的公网ip:3000/api/chat 

看一下有没有返回数据
如果没有多半是server.js有问题
从头走到尾是没问题的
pm2会在后台一直运行,这样你就不用因为前台被node server.js占据无法做操作了
停止服务:

pm2 stop server.js
你esc的公网ip:3000/api/chat 

显示断开连接时正常的

现在先打开,然后下一步

pm2 start server.js

6. uni-app前端开发

在HBuilderX中,打开index.uvue文件,添加以下代码:

<template>
  <view>
    <h1>Users List</h1>
    <view v-for="user in users" :key="user._id">
      <p>Name: {{ user.name }}</p>
      <p>Age: {{ user.age }}</p>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      users: []
    };
  },
  onl oad() {
    this.fetchUsers();
  },
  methods: {
    async fetchUsers() {
      try {
        const [error, response] = await uni.request({
          url: 'http://你的ESC公网IP:3000/api/users',
          method: 'GET'
        });
        if (response.statusCode === 200) {
          this.users = response.data;
        } else {
          console.error("Failed to fetch users:", response);
        }
      } catch (error) {
        console.error("Error fetching users:", error);
      }
    }
  }
};
</script>

<style scoped>
h1 { 
  font-size: 24px; 
  margin-bottom: 16px; 
}
p { 
  margin: 10px 0; 
}
</style>

然后查看内置浏览器或者运行到任意浏览器
在这里插入图片描述
就可以看见数据了

注意

  • 确保ESC端口开了。
  • 推荐开3000
  • 记得换"你的ESC公网IP"

参考资源

标签:const,mongo,app,db,server,esc,ESC,js,数据库
From: https://blog.csdn.net/2302_79973803/article/details/143366273

相关文章

  • TypeScript 中的函数与类重载
    TypeScript中的函数与类重载在TypeScript中,函数和类的重载允许我们根据不同的参数类型和数量来调用相同的函数或构造函数。这种特性使得代码更加灵活和可读。本文将详细介绍如何在TypeScript中实现函数和类的重载。1.普通函数重载示例以下是一个普通函数重载的简单示例:......
  • 博客园美化-Awescnb主题
    本文主要记录安装Awescnb皮肤的安装过程,以及我做的配置,作为备份。一、安装皮肤安装超级简单,根据官方文档,一分钟就搞定。首页HTML:<divid="loading"><divclass="loader-inner"></div></div>页面定制CSS:#loading{bottom:0;left:0;position:fixed;right:0;top:0;z-index:9......
  • centos7,yum安装mongodb
    yum安装mongodb1.配置MongoDB的yum源2.安装Mongodb3.启动Mongodb4.配置远程访问5.设置mongo密码1.配置MongoDB的yum源1.创建yum源文件,输入命令:vim/etc/yum.repos.d/mongodb-org-5.0.repo然后在文件中输入以下内容并保存:[mongodb-org-5.0]name=MongoDBReposit......
  • Fluent Editor 富文本开源2个月的总结:增加格式刷、截屏、TypeScript 类型声明等新特性
    你好,我是Kagol,个人公众号:前端开源星球。FluentEditor是一个基于Quill2.0的富文本编辑器,在Quill基础上扩展了丰富的模块和格式,框架无关、功能强大、开箱即用。2024年8月12日,FluentEditor正式开源!源码:https://github.com/opentiny/fluent-editor/官网:https://openti......
  • 哔咔漫画app安装IOS下载安装完美攻略
    哔咔漫画在C++是一种多范式编程语言,支持多种编程范式。这些范式包括但不限于过程式编程、面向对象编程、泛型编程和函数式编程。下面详细介绍每种编程范式在C++中的应用和特点:1.过程式编程(ProceduralProgramming)哔咔漫画过程式编程是一种基于过程调用的编程范式,强调程序的......
  • uniapp使用uni.createInnerAudioContext()播放指定音频并且切换
    uniapp使用uni.createInnerAudioContext()播放指定音频并且切换因为做的小程序或者h5需要视频讲解或者音乐组件的默认展示播放按钮,当点击播放的时候显示暂停音乐这样的一个效果。在unipp中我们直接只用uni.createInnerAudioContext()代替audio,使用更加方便,更加简洁,unia......
  • 最新毕设-SpringBoot-作业管理系统-42854(免费领项目)可做计算机毕业设计JAVA、PHP、爬
    springboot作业管理系统摘  要在信息化社会中,人们需要针对性的信息获取途径。然而,由于不同角度和偏好的存在,人们经常只能获得特定类型的信息,这也是技术攻克难题之一。为了解决作业管理系统等问题,本研究通过分析和研究,设计开发了作业管理系统。作业管理系统主要功能模块包......
  • 【最新原创毕设】基于SSM的体育赛事管理系统+74454(免费领源码)可做计算机毕业设计JAVA
    目录1绪论1.1选题背景与意义1.2国内外研究现状1.3论文结构与章节安排2平台分析2.1可行性分析2.1.1技术可行性2.1.2经济可行性2.1.3操作可行性2.2系统功能分析2.2.1功能性分析2.2.2非功能性分析2.3 系统用例分析2.4业务流程分析2.5本章小......
  • 【UWP】让 UWP 自己托管自己 —— Windows App SDK 篇
    众所周知,UWP使用的窗口模型是CoreWindow,但是UWP本身只是一个应用模型,所以完全可以创建win32窗口,那么我们可以不可以创建一个win32窗口,然后像XAML岛(XAMLIslands)一样把XAML托管上去呢?本篇将讲述如何利用WAS(WindowsAppSDK,俗称WinUI3)在UWP创建一个XAML岛......
  • (开题报告)django+vue校园二手交易app论文+源码
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景在当今数字化时代背景下,高校作为知识创新与人才培养的摇篮,其内部经济活动日益频繁,尤其是学生对于二手物品的交换需求日益增长。传统的线下......