一个完整的网站服务架构包括:
1、web frame ---这里应用express框架
2、web server ---这里应用nodejs
3、Database ---这里应用monggoDB
4、前端展示 ---这里应用vue

首先我们要安装mongoDB(本例应用的mongoDB 3.4.7版本) 和 nodejs(本例应用的是nodejs v6.10.3) 具体安装步骤大家可以百度一下,网上安装示例很多,这里不过多讲解,以下我们重点讲解网站框架搭建操作。

对应以上要点一一作出解释及具体操作步骤:
第一步:创建mongoDB数据库
1、直接打开mongoDB安装目录下binmongod.exe文件,可见如下图,即为数据库服务启动成功

2、浏览器输入localhost:27017显示如下,证明数据库可用

第二步:生成vue框架
1、全局生成vue框架,输入指令
npm i -g vue-cli

2、创建自己的文件夹

3、项目初始化
执行以下命令,自动创建目录 E:/workspace/test

一路yes如下

生成目录结构如下:

执行命令,进行项目初始化:
cd test
npm install

4、在项目根目录src/main.js添加代码
import vueResource from 'vue-resource'
Vue.use(vueResource)
如图所示

5、由于上一步添加代码vue-resource,这里要引入vue-resource
执行命令如图所示

执行后显示如下,则为正常执行

第三步:生成expressm框架
1、执行命令npm install express,生成如下

第四步:搭建node服务器环境
1、在项目的根目录新建一个叫server的目录,用于放置Node的东西。进入server目录,再新建三个js文件:
index.js (入口文件)
db.js (设置数据库相关)
api.js (编写接口)

index.js文件代码:

// 引入编写好的api
const api = require('./api');
// 引入文件模块
const fs = require('fs');
// 引入处理路径的模块
const path = require('path');
// 引入处理post数据的模块
const bodyParser = require('body-parser')
// 引入Express
const 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.html
app.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;

2、对比node_modules目录缺少body-parser模块和mongoose模块,因此要添加这两个模块
执行命令:

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

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

5、这时,重新启动项目

我们在前端接口地址前加上/api,就会指向http://localhost:8088/api/,于是我们就能访问到后端的接口了!

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

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

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

MEVN 架构(MongoDB + Express + Vue + NODEJS)搭建的更多相关文章

  1. 【MEVN架构】mongodb+ express + vue + nodejs 搭建后台

    前端技术栈:vue2 + vuex + vue-router + webpack + ES6/7 + less + element-ui 服务端技术栈:nodejs + express + mongo ...

  2. MongoDB + express + node + bootstrap 搭建多人博客

    这篇博客讲述如何搭建一个多人博客,需要一定的基础知识,用于思路整理和备忘. 第一步: 新建文件夹 blog ,结构如下: bin --- 可执行二进制文件,最终的启动接口. models --- 存储 ...

  3. express + vue 项目搭建

    最近建了一个node服务端加vue前端的项目 安装node :npm install node 安装express :npm install express -g (-g全局安装) 构建express ...

  4. 【vue】MongoDB+Nodejs+express+Vue后台管理项目Demo

    ¶项目分析 一个完整的网站服务架构,包括:   1.web frame ---这里应用express框架   2.web server ---这里应用nodejs   3.Database ---这里 ...

  5. MongoDB + Express 环境搭建记

    最近项目需要使用 MongoDB,所以不得不搭建 MongoDB 环境,此文记录搭建过程及使用过程中需要了解的问题. Linux + Windows 混合搭建调试 MongoDB 记录 版本介绍 : ...

  6. vue+nodejs+express解决跨域问题

    nodejs+express解决跨域问题,发现网上的大部分都是误导人,花了不少时间,终于弄懂了, 我在vue+nodejs+express+mongodb的项目里面,发现本地用vue代理正常调用远程的 ...

  7. 使用nodejs+express+socketio+mysql搭建聊天室

    使用nodejs+express+socketio+mysql搭建聊天室 nodejs相关的资料已经很多了,我也是学习中吧,于是把socket的教程看了下,学着做了个聊天室,然后加入简单的操作mysq ...

  8. vue+nodejs+express+mysql 建立一个在线网盘程序

    vue+nodejs+express+mysql 建立一个在线网盘程序 目录 vue+nodejs+express+mysql 建立一个在线网盘程序 第一章 开发环境准备 1.1 开发所用工具简介 1 ...

  9. nodejs下express+ejs环境搭建

    nodejs下express+ejs环境搭建   分类: Nodejs 1.进入需要创建项目的目录    cd F:\nodeCode     2.创建一个带ejs模板工程,工程名为haha    e ...

随机推荐

  1. 操作Jexus

    jws.start等命令在Jexus V5.6.3中已经合并为一个单一命令,即"jws",这是一个shell脚本文件. 命令参数与对应的功效: jws start : 启动Jexu ...

  2. C语言刷数组题记录

    讲解:https://mp.weixin.qq.com/s/weyitJcVHBgFtSc19cbPdw 二分法: 704. 二分查找 int search(int* nums, int numsSi ...

  3. ROC/AUC以及相关知识点

    参考博文,特别的好!!!:https://www.jianshu.com/p/82903edb58dc AUC的计算: 法1:AUC为ROC曲线下的面积,那我们直接计算面积可得.面积为一个个小的梯形面 ...

  4. Objective-C 基础教程第六章,源文件组织

    目录 Object-C 基础教程第六章,源文件组织 0x00:前言 0x01:Xcode创建OC类 0x02:Xcode群组 0x03 Xcode跨文件依赖关系 @class关键字 导入和继承 小结 ...

  5. SQL Server的Linked Servers

    文章搬运自:SQL Server的Linked Servers(链接) 参考引用一下,感谢作者~ 我们在使用SQL Server时,有时会有这种需求,需要从一个SQL Server服务器A中,查询另一 ...

  6. 关于stationary 和non-stationary signals 的区别和定义

    结论:实际上在生活中是没有静态信号(stationary signals)的.而我们之所以把随机信号分为stationary and non-stationary 完全是根据信号产生的特征(chara ...

  7. NLP论文解读:无需模板且高效的语言微调模型(下)

    原创作者 | 苏菲 论文题目: Prompt-free and Efficient Language Model Fine-Tuning 论文作者: Rabeeh Karimi Mahabadi 论文 ...

  8. linux定时任务 - at定时任务

    at命令是一次性定时计划任务,at的守护进程atd会以后台模式运行,检查作业队列来运行作业.atd守护进程会检查系统上的一个特殊目录来获取at命令的提交的作业,默认情况下,atd守护进程每60秒检查一 ...

  9. Linux常用文件管理命令详解

    cat cat命令用于连接文件并打印到标准输出设备上. 命令语法:cat [参数] [文件名] 参数说明: 参数 说明 -n 由1开始对所有输出的行数进行编号. -b 由1开始对所有输出的行数进行编号 ...

  10. 手绘流程图,教你WSL2与Docker容器无缝互相迁移

    摘要:本文主要介绍WSL2与Docker容器无缝迁移镜像. 本文分享自华为云社区<WSL2与Docker容器,无缝互相迁移>,作者: tsjsdbd . 注:本文提到的WSL都是指WSL2 ...