MEVN 架构(MongoDB + Express + Vue + NODEJS)制作网站

MEVN 架构(MongoDB + Express + Vue + NODEJS)制作网站

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

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

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

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

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

  1. Database MongoDB

安装

启动

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

输出

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

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

安装Vue-Cli

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

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

cd XXX

npm install (这里建议使用淘宝镜像cnpm,不然墙外的东西……)

npm run dev

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

在main.js中使用

  1. EXPRESS

使用npm安装

  1. 搭建node服务器环境

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

  • index.js (入口文件)
  • db.js (设置数据库相关)
  • api.js (编写接口)

index.js

db.js

api.js

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

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

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

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

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

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

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

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

})

// 监听8088端口

app.listen(8088);

这里的关键是express.static,利用 Express 托管静态文件。于是我们才能访问到前端打包出来的静态页面index.html。

最后,我们在浏览器输入http://localhost:8088/,就会跳到index.html。

到此为止,我们就完成了整个前后端各自开发到正式部署的流程。

版权属于: 三个前端 | 积累知识,分享经验,交流心得
原文地址: http://web3ge.com/archives/308
欢迎转载,请以链接形式注明原始出处及本声明。

Be the first to comment

发表评论