node.js(express)+MongoDB快速搭建后端---新手教程

前言:

Node.js是一个基于 Chrome V8引擎的JavaScript运行环境,是对于前端工程师来说学习成本最小的后端实现方法,本篇文章总结如何从0-1写一个后端的登录接口

一、检查node环境

先检查自己的node是否安装

一般来说前端工程师的电脑环境肯定有装node吧,没有的可以去查下安装教程,非常简单,这边建议可以安装nvm,可以做到多个node版本切换 

二、创建express项目

express:

  • 一个可以快速搭建web项目的nodejs框架。
  • 初始化项目时,会自动创建项目所需各种文件夹以及文件,并配置基本的服务器信息
1、准备好一个空文件夹,用来放后端程序
2、下载安装express
npm i express-generator -g
3、创建express项目
express 项目名称
express test
注意:

如果创建项目失败,找到系统的Windows PowerShell,用管理员身份运行,打开脚本命令行窗口,输入set-ExecutionPolicy RemoteSigned回车,如果选项中有A则输入A,没有A选项,则输入y,回车后,关闭窗口,重启VSCode。

此刻可以看到文件夹里面已经生成了express框架的文件:

项目的文件解释:
  • bin:存放服务器配置文件。

      www:服务器配置文件,在其中编写服务器配置信息(没特殊情况,不允许修改)。

  • public:存放项目的公共资源。

                公共资源:可以被用户访问的资源(浏览器可以从服务器上直接请求到的资源)。

                比如:html、css、js、图片等。

  • routes:存放路由配置文件。

                 存放后端程序代码。

  • views:存放模板文件。
  • app.js:项目启动入口文件。执行该文件后,可以启动服务器,服务器启动后,项目资源就可被用户访问(浏览器请求)。
  • package.json:管理项目包的配置文件。
4、下载express项目依赖的第三方包

(这一步需要在package.json文件所属的上层文件夹中执行,需要进入刚刚创建的项目)

cd test
npm i

5、配置启动信息:
  • 删除app.js中最后一行:module.exports = app;
  • app.js中最后部分添加以下代码:(查看系统端口占用情况netstat -ano):
app.listen(端口号,服务器启动成功时调用的函数);
app.listen(3000,function(){
    console.log('服务器启动成功!端口号为3000');
});
6、启动服务器
node app.js
7、通过浏览器可以访问服务器资源
  • http://主机:端口号/资源路径
    • 本机:可以使用localhost127.0.0.1
    • 查看自己电脑的IPipconfig
  • http://127.0.0.1:3000/html/index.html
  • 注意:如果没指定资源路径,服务器会默认从public文件夹中查找index文件作为请求资源;
8、安装nodemon
  • 一个命令工具包,会自动检测项目中文件修改,重启服务器;

npm i nodemon -g

 以后我们启动服务器就可以用

nodemon app.js

三、准备数据库MongoDB

MongoDB是一个基于分布式文件存储的数据库,是非关系数据库。由C++语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。

它支持的数据结构非常松散,是类似jsonbson格式,因此可以存储比较复杂的数据类型。Mongo最大的特点是它支持的查询语言非常强大,其语法有点类似于面向对象的查询语言,几乎可以实现类似关系数据库单表查询的绝大部分功能,而且还支持对数据建立索引。

存储数据的方式:

  • 一个对象以一个文档的形式存在;
    • 张三的数据以一个文档形式存储;
    • 李四的数据以一个文档形式存储;
  • 一个集合负责管理存储一类对象数据。
    • 所有学生数据是以一个集合形式存储;
    • 所有班级数据是以一个集合形式存储;
1、安装数据库
  • 下载网址https://www.mongodb.com/try/download/enterprise
  • 安装mongodb时,在最后一个安装界面install MongoDB compass,去掉前面的多选框的;
2、安装图形化界面软件 Navicat

可以搜一个安装破解navicat的教程,网上很多

3、下载好navicat后建一个数据库

填入连接名,因为demo是本机运行的所以填入localhost或者127.0.0.1都可以

双击连接名后会发现颜色变了,那就证明连接成功,然后右键单击,选择新建数据库,输入你要建立的数据库名,我这里写的是test2

双击之后刚刚建好的数据库

右键集合,选择新建集合,然后点左上角的保存会弹窗,填入集合名user

然后展开集合就有了刚刚建的user ,双击user后点击左下角的加号,然后输入要建的表头

这样集合就建好了,可以自己添加,_id是集合保存时就会自动添加,这样看着虽然是表的形式,但是MongoDB是文档的形式储存的,显示成表格是为了更好操作

 右键单击每一列,可以设置该项的值类型,我们这里都设置成字符串类型

 4、在项目中安装mongoose
  • mongoose是一个可以在Nodejs环境下操作mongodb的第三方包
  • 安装mongoose后,可以使用其提供的API对mongodb数据库中的数据进行增删查改(CRUD)操作。
npm i mongoose
5、连接数据库:

新建JavaScript文件,并添加以下JavaScript代码,并配置目标数据库名称

//建立数据库连接代码
//引入mongoose模块
let mongoose=require('mongoose');
//连接数据库
//数据库的URL
let dbURL='mongodb://127.0.0.1:27017/数据库名称';
mongoose.connect(dbURL,{
    useNewUrlParser:true,
    useUnifiedTopology:true
});
//设置连接成功时要执行的回调函数
mongoose.connection.on('connected',function(){
    console.log('数据库连接成功!');
});

在app.js文件中引入新建的JavaScript文件

require('新建的JavaScript文件路径');

我是在新建了util文件夹,在里面写了连接数据库的js文件:

 运行后可以发现控制台输出连接成功:

四、编写后端代码 

1、编写代码前需要知道一些基础的概念:
 1.1Restful风格:

restful是一种接口的编程风格,接口的路径只用于确定操作的目标资源,以请求类型来确定对目标资源进行操作的类型。

1.2请求类型:
  • GET:获取资源
  • POST:添加资源
  • DELETE:删除资源
  • PUT:修改资源
1.3传参方式:

query、body、params:

  • query用于获取URL传参(?键1=值1&键2=值2);

  • body用于获取请求正文传参;

  • params用于获取请求路径传参;

2、准备一个简单的前端页面

简单写一个可以填入账号密码的登录框

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  </head>
  <body>
    <form action="" id="loginForm">
      <label for="acc">账号:</label>
      <input type="text" id="acc" placeholder="请输入登录账号" /><br />
      <label for="pwd">密码:</label>
      <input type="password" id="pwd" placeholder="请输入登录密码" /><br />
      <input type="submit" />
    </form>
  </body>
</html>
 3、关联目标数据库集合

新建db文件夹,然后新增userModel.js

这个userModel.js需要建立起与数据库集合内的关系

  • 引入mongoose模块

let mongoose=require('mongoose');
  • 创建目标集合的模型对象(系统自动生成的_id不需要声明)

let 模型名称=new mongoose.Schema({
属性名称:属性类型(类型的首字母大写),
......
});
  • 建立模型对象与数据库中数据集合的关联关系

let 变量名称=mongoose.model('名称',模型对象,'目标集合名称');

对照我们之前创建的user集合就可以写成:

//引入mongoose
let mongoose = require("mongoose");
//创建目标模型对象
let userSchema = new mongoose.Schema({
  name: String,
  pwd: String,
});
//建立模型对象与集合的关联关系
let userModel = mongoose.model("userModel", userSchema, "user");
4、操作集合

先删除routes里面之前的js文件,咱们自己新建一个user.js,写一个简单的登录接口

代码如下:

这里写的是一个get请求,然后拿到前端在url上拼接的账号和密码去数据库进行校验

.find是根据指定属性值查询

var express = require("express");
var router = express.Router();

//引入mongoose
let mongoose = require("mongoose");

//登录
router.get("/:acc/:pwd", async function (req, res) {
  let { acc, pwd } = req.params;
  console.log(acc, pwd);
  //根据账号查询用户数据
  let re = await mongoose.model("userModel").find({
    name: acc,
  });
  // console.log(re);
  if (re.length < 1) {
    res.send({
      code: 260,
      message: "账号不存在!请先注册!",
    });
  } else {
    if (re[0].pwd == pwd) {
      res.send({
        code: 200,
        message: "登录成功!",
      });
    } else {
      res.send({
        code: 250,
        message: "密码错误!",
      });
    }
  }
});
module.exports = router;
5、app.js引入并配置一级路由

将我们刚刚写好的集合模型创建代码(userModel.js)和后端模块代码(users.js)都需要引入app.js里面才可以有效,

之前删掉的routes文件夹里面原来的文件,需要在app.js里面也删掉引入他们的代码

代码如下:

//引入集合模型创建代码文件
require("./db/userModel");


//引入后端模块
var usersRouter = require("./routes/users");

//配置一级路由
app.use("/users", usersRouter);

6、前端调用写好的后端接口


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script>
      $(function () {
        $("#loginForm").on("submit", function (event) {
          event.preventDefault();
          // console.log('登录');
          $.ajax({
            url: `http://127.0.0.1:3000/users/${$("#acc").val()}/${$(
              "#pwd"
            ).val()}`,
            type: "get",
            success: function (data) {
              alert(data.message);
            },
          });
        });
      });
    </script>
  </head>
  <body>
    <form action="" id="loginForm">
      <label for="acc">账号:</label>
      <input type="text" id="acc" placeholder="请输入登录账号" /><br />
      <label for="pwd">密码:</label>
      <input type="password" id="pwd" placeholder="请输入登录密码" /><br />
      <input type="submit" />
    </form>
  </body>
</html>

需要注意我们写的url上的端口号需要对应在app.js中的端口号,端口号后面是写后端已经定义好的一级路由,最后拼接账号和密码

6、解决跨域

此时大概流程就走通了,运行前端页面看看效果:

点击提交后会发现接口报错了,显示跨域

解决办法:

app.js中,在引入后端模块后设置CORS允许跨域:

var app = express();
//引入后端模块
var usersRouter = require("./routes/users");
// 设置 CORS 允许跨域
var allowCrossDomain = function (req, res, next) {
  // 设置允许哪一个源(域)可以进行跨域访问,* 表示所有源
  res.header("Access-Control-Allow-Origin", "*");
  // 设置允许跨域访问的请求头
  res.header(
    "Access-Control-Allow-Headers",
    "X-Requested-With,Origin,Content-Type,Accept,Authorization"
  );
  // 设置允许跨域访问的请求类型
  res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE");
  // 设置允许 cookie 发送到服务器
  res.header("Access-Control-Allow-Credentials", "true");
  next();
};
app.use(allowCrossDomain);
//配置一级路由
app.use("/users", usersRouter);

至此我们再去页面看一下效果

这样一个简易的后端接口就做好了!

  • 29
    点赞
  • 31
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值