node+mongoDb+Vue+elementUI实现资金管理后台系统(二)---node连接数据库和编写注册接口

  1. 使用express搭建服务器
    在D盘下面创建一个文件夹node-app,并在cmd中运行。
    node+mongoDb+Vue+elementUI实现资金管理后台系统(二)---node连接数据库和编写注册接口_第1张图片
    初始化文件,在cmd中输入npm init,选项直接回车键就可以了。
    node+mongoDb+Vue+elementUI实现资金管理后台系统(二)---node连接数据库和编写注册接口_第2张图片
    使用的编辑工具是vscode,在cmd中直接输入code .可以快速打开该文件
    node+mongoDb+Vue+elementUI实现资金管理后台系统(二)---node连接数据库和编写注册接口_第3张图片
  2. 建立server.js和安装express

在node-app下新建一个server.js并且通过npm安装express
node+mongoDb+Vue+elementUI实现资金管理后台系统(二)---node连接数据库和编写注册接口_第4张图片
server.js
node+mongoDb+Vue+elementUI实现资金管理后台系统(二)---node连接数据库和编写注册接口_第5张图片
3. 设置根路由和安装nodemon模块
在代码中设置根路由,便于浏览器能够访问到我们的服务器,在cmd中输入node server.js
node+mongoDb+Vue+elementUI实现资金管理后台系统(二)---node连接数据库和编写注册接口_第6张图片
在浏览器中输入localhost:3000,便可以看到以下画面
node+mongoDb+Vue+elementUI实现资金管理后台系统(二)---node连接数据库和编写注册接口_第7张图片
其实我们可以按照第三方模块nodemon,可以让我们每次修改代码页面能够自动保存和刷新功能,在终端中输入 npm install nodemon -g等待安装完成即可。
在这里插入图片描述
4. 修改pack.json中配置
在pack.json添加两行代码,添加以后,我们可以直接通过输入npm run server运行程序。
node+mongoDb+Vue+elementUI实现资金管理后台系统(二)---node连接数据库和编写注册接口_第8张图片
5. node连接mongoDB数据库
这里采用的是mongoose模块来链接mongoDB,下面是mongoose的中文文档
https://cn.mongoosedoc.top/docs/guide.html

安装mongoose模块
node+mongoDb+Vue+elementUI实现资金管理后台系统(二)---node连接数据库和编写注册接口_第9张图片
在robo3t创建数据库
node+mongoDb+Vue+elementUI实现资金管理后台系统(二)---node连接数据库和编写注册接口_第10张图片
node+mongoDb+Vue+elementUI实现资金管理后台系统(二)---node连接数据库和编写注册接口_第11张图片
node+mongoDb+Vue+elementUI实现资金管理后台系统(二)---node连接数据库和编写注册接口_第12张图片
server.js中连接数据库
在根目录下创建一个config/keys.js用来存放数据库的基本配置
node+mongoDb+Vue+elementUI实现资金管理后台系统(二)---node连接数据库和编写注册接口_第13张图片
server.js
node+mongoDb+Vue+elementUI实现资金管理后台系统(二)---node连接数据库和编写注册接口_第14张图片
在控制台中看到‘connect’,说明数据库连接成功.

  1. 搭建路由和数据模型
    在根路径下创建routes/api文件夹和创建user.js,user.js用来创建用户的注册与登陆
    user.js
    node+mongoDb+Vue+elementUI实现资金管理后台系统(二)---node连接数据库和编写注册接口_第15张图片
    在server.js引入和使用user.js
    node+mongoDb+Vue+elementUI实现资金管理后台系统(二)---node连接数据库和编写注册接口_第16张图片
    在浏览器中输入http://localhost:3000/api/users/test, 看到以下画面说明访问成功。
    node+mongoDb+Vue+elementUI实现资金管理后台系统(二)---node连接数据库和编写注册接口_第17张图片
    在根目录下创建models/User.js,用来创建user模型
    node+mongoDb+Vue+elementUI实现资金管理后台系统(二)---node连接数据库和编写注册接口_第18张图片
    搭建注册接口
    因为注册是需要用到post提交的方式,所以我们要安装body-parser模块
    在这里插入图片描述
    server.js中引入和使用body-parser模块
    node+mongoDb+Vue+elementUI实现资金管理后台系统(二)---node连接数据库和编写注册接口_第19张图片
    在routes/api/user.js
    node+mongoDb+Vue+elementUI实现资金管理后台系统(二)---node连接数据库和编写注册接口_第20张图片
    使用postman测试注册接口
    node+mongoDb+Vue+elementUI实现资金管理后台系统(二)---node连接数据库和编写注册接口_第21张图片
    在下面看到有数据返回,则说明我们的注册接口是相通的。

你可能感兴趣的:(前端框架,nodejs,vue)