用一个登录demo贯穿vue+node+mongoDB前后端分离的开发方式

这篇文章记录一下如何使用vue+node+mongoDB开发出一个登录的小demo。从而打通前端到后端一整条技能树。
文章会先从介绍后端创建API接口连接mongoDB数据库,到前端用vue-cli创建页面调用接口,最后用一个login的demo穿起来。

这篇文章首先介绍一下后端部分,连接mongoDB,创建数据接口等...

1、安装MongoDB数据库

第一步从mongoDB的官网下载安装包,完成之后安装也比较容易,一路next,注意一下安装路径,应该不会有太大问题。
然后是创建数据库文件存放的位置与log存放的位置,在你安装的mongoDB文件夹下创建data文件夹,然后在data下再创建db和log两个文件夹,比如我的mongoDB直接安装在了D盘,创建完之后就是多了下面两个文件夹:
D:MongoDBdatadb
D:MongoDBdatalog
接下里试着启动一下mongoDB服务,打开cmd命令行,进入mongoDB的bin目录,输入以下命令启动服务mongod --dbpath D:MongoDBdatadb
在浏览器输入http://localhost:27017 (27017是mongodb的端口号)查看,如不出意外,会看到如下的内容,表示已经成功启动了mongoDB服务了。

用一个登录demo贯穿vue+node+mongoDB前后端分离的开发方式

一般如果不成功,可以试着看看端口号是否被占用等问题。
我们还是希望在本地windows“服务”中,有配置上mongodb 服务。需要在Mongodb新建配置文件mongo.config文件,在编辑器中打开该文件,
dbpath=D:MongoDBdatadb
logpath=D:MongoDBdatalogmongo.log
保存。
管理员方式运行cmd,跳转到 D:MongoDBbin目录下。

输入:mongod --config "D:Mongodbmongo.config" --install --serviceName "MongoDB"
完成后,查看本地的服务。会多出个mongoDB的服务,这样我们就能设置开机自启动等功能啦。

有了数据库,自然而然就会想要一个像navcat那样的可视化的数据库工具,我这边使用的是Robo 3T,安装一下这个软件,

2、创建express应用

我们使用express框架来搭建我们的后台,首先要安装node,安装完成之后我们使用express的应用生成器快速创建一个应用的骨架

全局安装express-generator

$ npm install express-generator -g
2、在当前目录下创建一个名为myapp的应用,
$ express myapp
完成之后正常打开,安装依赖
$ cd myapp 
$ npm install

用npm start启动应用,在浏览器中输入 http://localhost:3000/ ,正常情况下出现

用一个登录demo贯穿vue+node+mongoDB前后端分离的开发方式

表示express应用正确创建,然后我们依此来进行mongoDB的连接以及操作数据库接口的创建。

3、mongoose操作数据库

我们使用mongoose来进行数据库的连接,首先安装mongoose
npm install mongoose –-save-dev

我们需要搞清楚mongoose的几个概念:
Schema: 一种以文件形式存储的数据库模型骨架,不具备数据库的操作能力
Model: 由Schema发布生成的模型,具有抽象属性和行为的数据库操作对
Entity: 由Model创建的实体,他的操作也会影响数据库

我们创建接口的方式是通过express的Router,而接口里面操作数据库就要用到mongoose进行数据库的连接,创建Schema,通过Schema创建model,再通过model进行数据库的增删改查。

4、数据接口的创建

我们现在已经有了mongoDB数据库,也会创建express应用,大概知道怎么使用mongoose连接操作数据库了,那我们就来建一个简单的demo,来把这些东西组合起来,创建一个接口吧。

首先我们不妨先看一下之前我们创建的express应用,访问一下http://localhost:3000/users。发现居然是有这一个页面的,就说明应用为我们处理了users这个路由,跳转到了指定的页面。
我们看一下项目的目录结构。
用一个登录demo贯穿vue+node+mongoDB前后端分离的开发方式

里面有一个routes文件夹有users,打开如下所示,

var express = require('express');
var router = express.Router();
router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});
module.exports = router;

我们看到我们看到的页面是在这个地方生成了。那么又是在什么地方调用的呢?

var usersRouter = require('./routes/users');
app.use('/users', usersRouter);

在app.js里有这么两句,查了下文档会知道这其实是路由级中间件,效果就是能够让发到users的get请求在路由中处理。知道这些之后我们就仿照这种方式,在routes目录下创建一个新的路由test.js,内容也就写个简单的get请求,并在app.js中使用一下。

test.js:

var express = require('express');
var router = express.Router();
router.get('/', function(req, res, next) {
  res.send('test');
});
module.exports = router;

app.js增加:

var testRouter = require('./routes/test');
app.use('/test', testRouter);

我们访问一下http://localhost:3000/test,ok,页面里面出现了test。

接下来就是操作数据库了,首先在Robo 3T 里新建一个叫做login_db的数据库,里面有一个叫Collections的文件夹,实际上这个里面将会存放类似于表的数据。

安装mongoose肯定是必须的,我们知道mongoose操作数据库使用的是Schema和model,那我们就在应用里新建三个文件夹:config(用于连接数据库)、schemas(创建schema)、models(创建model)。新的目录结构如下

用一个登录demo贯穿vue+node+mongoDB前后端分离的开发方式

首先在app.js里引入mongoose:

//引入mongoose,进行数据库的连接
var mongoose = require('./config/mongoose');
var db = mongoose();

在新创建的config里面创建config.js和mongoose.js分别提供数据库的地址和对数据库进行连接。如下:
config.js:

// 数据库地址: 'mongodb://用户名:密码@ip地址:端口号/数据库';
module.exports = {
    mongodb : 'mongodb://root:root@localhost:27017/login_db'
}

mongoose.js:

const mongoose = require('mongoose');
const config = require('./config');
module.exports = ()=>{
    mongoose.connect(config.mongodb);//连接mongodb数据库
    var db = mongoose.connection;// 实例化连接对象
    db.on('error', console.error.bind(console, '连接错误:'));
    db.once('open', (callback) => {
        console.log('MongoDB连接成功!!');
    });
    return db;
}

然后再去schemas下创建userSchema.js:

var mongoose = require('mongoose');
var Schema = mongoose.Schema;
//创建Schema
var userSchema = new Schema({
    username:String,
    password:String
});
module.exports = userSchema;

在models下创建User.js:

var mongoose = require('mongoose');
var UserSchema = require('../schemas/UserSchema');
//创建model,这个地方的login_user对应mongodb数据库中login_users的conllection
var User = mongoose.model('login_user',UserSchema);
module.exports = User;

最后,我们回到路由的test.js中,使用 var User = require('../models/User')引入模型。
在get方法中通过模型去操作数库。我们从方法中取参数,然后插入到数据库中,这里可以参考下mongoose官网。代码如下:

router.get('/', function(req, res, next) {
    let user = new User({
        username: req.query.username,
    });
    user.save(function (err) {
        if (err){
            res.send({
                status: 0
            })
            return console.error(err);
        }else{
            res.send({
                status: 1
            })
            return;
        }
    });
});

ok,到此,应该就能正常通过get请求对数据进行插入了,我们重启一下服务器。
哇,连接失败了。。。

用一个登录demo贯穿vue+node+mongoDB前后端分离的开发方式

我们看一下,貌似是权限的问题,回顾一下,我们在config.js里用的是root/root去连接的,而数据库可能没这个用户,好的,我们去创建。
在数据库上运行下面这句。
db.createUser({user:"root",pwd:"root",roles:["readWrite"]})

在启动一下...ok,数据库连接成功!
在浏览器里直接发个get请求:http://localhost:3000/test?username=admin
ok,返回了{"status":1}。再去数据库里看下,果然有了一条数据。

用一个登录demo贯穿vue+node+mongoDB前后端分离的开发方式

以上,就是创建一个简单接口的方式。

相关推荐