MEVN 架构（MongoDB + Express + Vue + NODEJS）制作网站

2024-04-27 15:12:25

字体：大中小

来源：转载

供稿：网友

MEVN 架构（MongoDB + ExPRess + Vue + NODEJS）制作网站

MEVN 架构是 MongoDB + Express + Vue + NODEJS 搭建的网站架构。四个部分都可以用javaScript实现。

一个完整的网站服务架构包括web frame, web server, Database, 以及前端展示实现。这里有一篇知乎答案，讲一个网站的整个访问流程，讲的很清晰。

在这个架构里，web server 就是nodejs，webframe 就是express，database是mongoDB，前端展示用了vue。我们一个一个来搭建。

我们在这里模拟实现一个登录功能。

功能很简单，填写完账号密码点击登录按钮，就把账号密码插入数据库，并且查出现在已经有哪些数据。

Database MongoDB

安装

brew install mongodb

启动

mongod --config /usr/local/etc/mongod.conf

这时只是启动了Mogod，链接数据库需要再另外的窗口执行

mongo

输出

MongoDB shell version v3.4.1connecting to: mongodb://127.0.0.1:27017MongoDB server version: 3.4.1Welcome to the MongoDB shell.

这个地址mongodb://127.0.0.1:27017就是我们本机的mogo数据库地址

使用 Vue-cli 生成一个vue框架

安装Vue-Cli

npm i -g vue-cli

去到你想要放置项目的目录，进行初始化

vue init webpack XXX（你想要项目的名字）

按提示一直下一步，完成后按提示

cd XXX

npm install （这里建议使用淘宝镜像cnpm，不然墙外的东西……）

npm run dev

由于需要使用http请求，安装一个vue-resource工具。

在main.js中使用

import vueResource from 'vue-resource'Vue.use(vueResource)EXPRESS

使用npm安装

npm install express –save搭建node服务器环境

在项目的根目录新建一个叫server的目录，用于放置Node的东西。进入server目录，再新建三个js文件：

index.js （入口文件） db.js （设置数据库相关） api.js （编写接口）

index.js

// 引入编写好的apiconst api = require('./api'); // 引入文件模块const fs = require('fs');// 引入处理路径的模块const path = require('path');// 引入处理post数据的模块const bodyParser = require('body-parser')// 引入Expressconst express = require('express');const app = express();app.use(bodyParser.json());app.use(bodyParser.urlencoded({extended: false}));app.use(api);// 访问静态资源文件这里是访问所有dist目录下的静态资源文件app.use(express.static(path.resolve(__dirname, '../dist')))// 因为是单页应用所有请求都走/dist/index.htmlapp.get('*', function(req, res) { const html = fs.readFileSync(path.resolve(__dirname, '../dist/index.html'), 'utf-8') res.send(html)})// 监听8088端口app.listen(8088);console.log('success listen…………');

db.js

// Schema、Model、Entity或者Documents的关系请牢记，Schema生成Model，Model创造Entity，Model和Entity都可对数据库操作造成影响，但Model比Entity更具操作性。const mongoose = require('mongoose');// 连接数据库如果不自己创建默认test数据库会自动生成mongoose.connect('mongodb://127.0.0.1:27017'); // 地址跟第一步的地址对应。// 为这次连接绑定事件const db = mongoose.connection;db.once('error',() => console.log('Mongo connection error'));db.once('open',() => console.log('Mongo connection successed'));/************** 定义模式loginSchema **************/const loginSchema = mongoose.Schema({ account : String, passWord : String});/************** 定义模型Model **************/const Models = { Login : mongoose.model('Login',loginSchema)}module.exports = Models;

api.js

// 可能是我的node版本问题，不用严格模式使用ES6语法会报错"use strict";const models = require('./db');const express = require('express');const router = express.Router();/************** 创建(create) 读取(get) 更新(update) 删除(delete) **************/// 创建账号接口router.post('/api/login/createAccount',(req,res) => { // 这里的req.body能够使用就在index.js中引入了const bodyParser = require('body-parser') let newAccount = new models.Login({ account : req.body.account, password : req.body.password }); // 保存数据newAccount数据进mongoDB newAccount.save((err,data) => { if (err) { res.send(err); } else { res.send('createAccount successed'); } });});// 获取已有账号接口router.get('/api/login/getAccount',(req,res) => { // 通过模型去查找数据库 models.Login.find((err,data) => { if (err) { res.send(err); } else { res.send(data); } });});module.exports = router;

至此我们的后端代码就编写好了，进入server目录，敲上 node index命令，node就会跑起来，这时在浏览器输入http://localhost:8088/api/login/getAccount就能访问到这个接口了

现在我们的本地开发环境的 web server的接口是 index.js 里的8088，但是本地的webpack生成的网页端口是8080，这两个不一致。需要进行代理（proxy）在config/index.js 中修改

proxyTable: { '/api': { target: 'http://localhost:8088/api/', changeOrigin: true, pathRewrite: { '^/api': '' } } }

这时，我们在前端接口地址前加上/api，就会指向http://localhost:8088/api/，于是我们就能访问到后端的接口了！让我们来点击一下登录按钮，会发现接口请求成功了！再去数据库看看！也插入了一条新数据！成功！

前后端开发完成，最后一步，前端打包，后端部署。前端打包就很简单了，一个命令： npm run build 这就生成了一个dist目录，里面就是打包出来的东西。现在回过头来看server里面的入口文件index.js

// 访问静态资源文件这里是访问所有dist目录下的静态资源文件

app.use(express.static(path.resolve(__dirname, ‘../dist’)))

// 因为是单页应用所有请求都走/dist/index.html

app.get(‘*’, function(req, res) {

const html = fs.readFileSync(path.resolve(__dirname, '../dist/index.html'), 'utf-8')res.send(html)

})

// 监听8088端口