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

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

时间:2024-11-03 20:50:12浏览次数:4  
标签: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

相关文章

  • 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......
  • 哔咔漫画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本章小......
  • (开题报告)django+vue校园二手交易app论文+源码
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景在当今数字化时代背景下,高校作为知识创新与人才培养的摇篮,其内部经济活动日益频繁,尤其是学生对于二手物品的交换需求日益增长。传统的线下......