搭建自己的网站，node，mongodb，react，内网穿透都是从0到1

最终实现效果，在自己的电脑上起服务（也可以用nginx起服务，但是需要打包部署），可以在任意手机端和pc端访问自己的页面

效果图 最后有项目代码(可以直接访问http://quyongqing.cn/在线查看，第一次加载会很慢，免费的内网穿透服务，可以了；（服务器太贵了，而且还要打包部署，作者嫌麻烦)（因为是访问本人电脑，本人电脑有可能关机，访问不到，见谅哈，哈哈哈）

实现了最简单的登录注册功能

首页截图

手机效果展示

具体技术实现

第一步 mongodb

• 安装

下载地址 https://www.mongodb.com/try/download/community
下载之后安装到本地就一直next
安装好目录是这样的

其中data目录和data下的db目录是我自己创建的用于存放数据(mongodb是文档型数据库，所有的数据都以文件的形式存储)

原本这个文件夹是空的，当你启动后生成的

• 启动

在bin目录下执行 mongod --dbpath=…\data\db
如果你的电脑不认识 mongod 的话 自行去加环境变量 （在环境变量里的path内把你mongodb安装的地址加上）

第二步 node

无非就是连接数据库和增删改查。为了更好的实现上面所说的，去安装一些轮子来实现，什么跨域啊等等
首先 用 webpack 创建项目

• 第一步 安装依赖

npm init
在安装依赖
npm install nodemon - g
npm install koa koa-json koa-bodyparser @koa/router @koa/cors mongoose

// 我的package.json文件
{
  "name": "vite-react-node",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "dev": "nodemon app.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@koa/cors": "^5.0.0",
    "@koa/router": "^12.0.1",
    "koa": "^2.15.0",
    "koa-bodyparser": "^4.4.1",
    "koa-json": "^2.0.2",
    "mongoose": "^8.0.3"
  }
}

• 第二步 创建表

我这里创建了一个最简单的user表 里面有username和password字段 然后所有的增删改查都是利用这里导出的modelUser上的api实现，后面有贴图

• 第三步 连接数据库

这样启动后就可以用自己的ip加18900端口访问了
127.0.0.1::18900/api/login 访问了

• 第四步 写增删改查

 查询关键字
// $gt 大于
// $gte 大于等于
// $lt 小于
// $lte 小于等于
// $ne 不等于
// $in 包含
// $nin 不包含
// $or 或者
// $and 并且
// $not 取反
// $exists 是否存在
// $regex 正则匹配
// $all 包含多个
// $size 数组长度
// $elemMatch 匹配数组中的元素
// $mod 取模
// $near 邻域查询
// $nearSphere 邻域查询（球面）
// $inc 增加
// $set 设置
// $unset 删除
// $push 追加
// $pushAll 追加多个
// $addToSet 追加到集合
// $pop 弹出
// $pull 删除匹配的
// $pullAll 删除匹配的多个
// $rename 修改字段名称
// $bit 位操作
// $isolated 隔离操作
// $comment 查询注
// $maxScan 最大扫描数
// $min 最小值
// $max 最大值
// $showDiskLoc 显示盘符位置
// $hint 强制使用索引
在这里插入代码片

第三步 前端（作者是前端，这次是react写的，代码可能并不是那么规范 全靠copilot和浏览器webTab 内置的chatGPT3.5，真心好用，整个代码给它让它写注释优化。哈哈哈哈）、 前端node版本16.16.0

调取接口实现登录注册功能

第四步 买域名

域名的作用就是找到特定的ip，ip那么长不好记忆，用域名得就方便多了，可以理解为是别名。
域名不单单可以绑定ip，还可以绑定邮箱，其他域名等等等。

• 第一步去一些域名注册平台，买你相中的域名例如 阿里云平台 花生壳
• 第二步去解析也就是将域名和ip绑定，ip 你先要了解一下什么是公网ip和内网ip
  公网ip，每个接入网络的设备都会有个公网ip，互联网就可以通过这个公网ip找到你。一般情况下都是动态公网ip，每过一段时间就会变化的。像一般服务器都是有个固定ip的，不会变的，所有可以直接绑定上公网ip，如果是动态的就需要每变一次就重新绑定
  总结起来，你的家庭网络使用光纤网络接入，拥有一个动态的公网地址（可以联系运营商给个固定的ip，但是有点麻烦）用于连接互联网，并通过分配动态内网 IP（可以设置固定的内网ip） 地址来连接内部设备。
  下面是一些公网 IP 和内网 IP 的例子：

公网 IP 地址：

203.0.113.65
216.58.217.46
104.26.14.79
内网 IP 地址（私有 IP 地址）：

192.168.0.1
10.0.0.1
172.16.0.1

第五步 内网穿透

看第四步 域名只能绑定固定的公网ip，每次发上去都是要发到服务器上，才可以访问。
内网穿透其实就是域名绑定内网ip（内网ip也要设定固定）我这里用的是第三方工具 花生壳

这是我配置的 （需要客户端哈，这样才能获取你的内网端口的数据） 好了到目前为止我只要启动我上面写的192.168.31.71:80 服务 我的域名就直接可以访问了（内两个映射内网穿透，前端一个，后端一个。再多就需要花钱了）

项目地址

node项目地址
react项目地址