本文记录如何使用vue+node+mongoDB开发一个登录小demo。从而打通了从前端到后端的一整棵技能树。文章将从介绍后端创建连接mongoDB数据库的API接口，到前端使用vue-cli创建页面调用接口，最后使用登录demo进行穿搭。本文首先介绍后端部分，连接mongoDB，创建数据接口等...1.安装MongoDB数据库。第一步是从mongoDB官网下载安装包。完成后，安装比较容易。接下来注意安装路径，应该问题不大。然后创建数据库文件存放位置和日志存放位置。在你安装的mongoDB文件夹下创建一个data文件夹，然后在data下创建db和log两个文件夹。比如我的mongoDB是直接安装在D盘的，创建之后多了两个文件夹：D:MongoDBdatadbD:MongoDBdatalog接下来尝试启动mongoDB服务，打开cmd命令行，进入mongoDB的bin目录，输入下面命令启动服务mongod--dbpathD:MongoDBdatadb在浏览器中输入http://localhost:27017（27017是mongodb的端口号）查看。如果不出意外，你会看到如下内容，说明mongoDB服务已经启动成功。一般如果不成功，可以试试看端口号有没有被占用。我们还是希望在本地的windows“服务”中配置mongodb服务。需要在Mongodb中新建一个配置文件mongo.config文件，在编辑器中打开该文件，保存dbpath=D:MongoDBdatadblogpath=D:MongoDBdatalogmongo.log。以管理员模式运行cmd，跳转到D:\MongoDBbin目录。输入：mongod--config"D:Mongodbmongo.config"--install--serviceName"MongoDB"完成后查看本地服务。会多出一个mongoDB服务，方便我们设置开机自启动等功能。有了数据库，自然会想要navcat这样的可视化数据库工具。我在这里使用Robo3T。安装此软件。2.创建一个快速应用程序。我们使用express框架来构建我们的背景。首先，我们必须安装节点。安装完成后，我们使用expressapplicationgenerator快速创建应用骨架。全局安装express-generator$npminstallexpress-generator-g2。在当前目录中创建一个名为myapp的应用程序。$expressmyapp完成后正常打开，安装依赖$cdmyapp$npminstall用npmstart启动应用，在浏览器中输入http://localhost:3000/，如果正常情况下出现，说明express应用创建正确，接下来我们将相应的连接mongoDB并创建操作数据库接口。3、Mongoose操作数据库。我们使用mongoose连接数据库。首先，安装mongoosenpminstallmongoose--save-dev。我们需要了解mongoose的几个概念：Schema：以文件形式存储的数据库模型骨架，不带数据库操作能力Model：Schema发布生成的模型，具有抽象属性和行为的数据库操作Entity：创建的实体模型，其操作也会影响数据库。我们创建接口的方式是通过express的router，在接口内部要操作数据库，需要使用mongoose连接数据库，创建Schema，通过Schema创建模型，然后使用模型添加、删除、修改和查询数据库。4.数据接口的创建我们现在有一个mongoDB数据库，我们还要创建一个express应用。我们大概知道如何使用mongoose来连接和操作数据库。然后我们将构建一个简单的演示来组合这些东西并创建一个界面。酒吧。首先我们不妨看一下我们之前创建的express应用，访问http://localhost:3000/users。发现有这样一个页面，说明应用已经帮我们处理了users路由，跳转到了指定页面。让我们看一下项目的目录结构。里面有users的routes文件夹，打开如下图，varexpress=require('express');varrouter=express.Router();router.get('/',function(req,res,next){res.send('响应资源');});module.exports=router;我们看到我们看到的页面就是在这个地方生成的。那么它叫哪里呢？varusersRouter=require('./routes/users');app.use('/users',usersRouter);app.js里面有两句，查了文档就知道这其实是一个路由级别的中间件。效果是发送给用户的get请求可以在路由中处理。知道后，我们按照这个方法，在routes目录下新建一个路由test.js，并写一个简单的获取内容的请求，在app.js中使用。test.js:varexpress=require('express');varrouter=express.Router();router.get('/',function(req,res,next){res.send('test');});module.exports=router;app.js添加：vartestRouter=require('./routes/test');app.use('/test',testRouter);我们访问http://localhost:3000/test，ok，页面出现了test。接下来就是操作数据库了。首先，在Robo3T中创建一个名为login_db的新数据库。Robo3T中有一个名为Collections的文件夹。其实类似表格的数据都会存放在这个文件夹中。安装猫鼬是绝对必要的。我们知道mongoose使用Schema和model来操作数据库，所以我们在application中新建三个文件夹：config（用于连接数据库）、schemas（创建schema）、models（创建模型）。新的目录结构如下：首先在app.js中导入mongoose://introducemongoose，连接数据库varmongoose=require('./config/mongoose');变种分贝=猫鼬（）；在新建的config中创建config.js和mongoose.js分别提供数据库的地址和连接数据库。如下：config.js://数据库地址：'mongodb://用户名:密码@ip地址:端口号/数据库';module.exports={mongodb:'mongodb://root:root@localhost:27017/login_db'}mongoose.js:constmongoose=require('mongoose');constconfig=require('./config');模块.exports=()=>{mongoose.connect(config.mongodb);//连接mongodb数据库vardb=mongoose.connection;//实例化连接对象db.on('error',console.error.bind(console，'连接错误：'））;db.once('open',(callback)=>{console.log('MongoDB连接成功！！');});returndb;}然后在schemas下创建userSchema.js：varmongoose=require('mongoose');varSchema=mongoose.Schema;//创建模式varuserSchema=newSchema({username:String,password:String});module.exports=userSchema;在模型下创建User.js：varmongoose=require('mongoose');varUserSchema=require('../schemas/UserSchema');//创建模型，其中login_user对应mongodb数据库中login_users的collectionvarUser=mongoose.model('login_user',UserSchema);module.exports=用户;最后，我们回到路由，在test.js中，使用varUser=require('../models/User')引入模型，在get方法中使用模型操作数据库。我们从方法中获取参数并将它们插入到数据库中。这里可以参考mongoose官网。代码如下：router.get('/',function(req,res,next){letuser=newUser({username:req.query.username,});user.save(function(err){if(err){res.send({status:0})returnconsole.error(err);}else{res.send({status:1})return;}});});ok，至此，应该可以通过get请求正常插入数据了，我们重启服务器吧。哇，连接失败。..看一下，好像是权限问题。回头看，我们在config.js中使用root/root连接，数据库可能没有这个用户。好的，让我们创建它。在数据库上运行以下语句。db.createUser({user:"root",pwd:"root",roles:["readWrite"]})启动吧……ok，数据库连接成功！直接在浏览器中发送get请求：http://localhost:3000/test?username=adminok，返回{"status":1}。再去数据库里看，果然有一条数据。以上是创建简单界面的方法。
