【MEVN架构】mongodb+ express + vue + nodejs 搭建后台
¶准备工作
2.mongodb的下载及安装配置 (其中包含了NoSQL for MongoDB 的使用方式)
3.【vue】后台管理项目搭建Demo (另一篇:【vue】vue.js安装教程/vue项目搭建 ) 俩个所选的技术栈稍微不同
4.生成express框架
进入项目目录,输入命令 npm install express 即可
¶搭建node服务器环境
(可参考地址 与我想要的完整 后台搭建 用料一样 :第4步起)
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;
db.js注释
2、对比node_modules目录缺少body-parser模块和mongoose模块,因此要添加这两个模块
执行命令:(因为在项目初设时选择yarn ,所以之后的安装都可以用yarn add *执行)
①npm install body-parser 或 yarn add body-parser
②npm install mongoose 或 yarn add mongoose
以上,后端服务器配置成功。进入server目录,输入命令 node index.js ,node就会跑起来,这时在浏览器输入http://localhost:8088/api/log...就能访问到这个接口了,执行命令启动项目如下:
¶统一服务器server端口与webpack生成的client端口
以上配置中我们的本地开发环境的 web server的接口是 index.js 里的8088,但是本地的webpack生成的网页端口是8080(默认),这两个不一致。需要进行代理(proxy)在config/index.js 中修改:
此处端口不是默认的8080是因为在 项目初始配置时 有更改过
¶重启项目(同上步2)
在前端接口地址前加上/api (格式参照: http://localhost:8088/api/log...),就会指向http://localhost:8088/api/,于是我们就能访问到后端的接口了!
¶前后端开发
开始项目的coding
¶项目打包
前后端开发完成后,最后一步,前端打包,后端部署。
1、前端打包就很简单了,一个命令:
npm run build 这就生成了一个dist目录,里面就是打包出来的东西。
现在回过头来看server里面的入口文件index.js
最后,我们在浏览器输入http://localhost:8088/,就会跳到index.html。
以上,就是整个前后端各自开发到正式部署的流程。
项目启动/数据连接命令 【MongoDB】MongoDB与项目搭配启动进程
【MEVN架构】mongodb+ express + vue + nodejs 搭建后台的更多相关文章
- MEVN 架构(MongoDB + Express + Vue + NODEJS)搭建
一个完整的网站服务架构包括:1.web frame ---这里应用express框架2.web server ---这里应用nodejs3.Database ---这里应用monggoDB4.前端展示 ...
- 保姆级别的vue + ElementUI 搭建后台管理系统教程
vue + ElementUI 搭建后台管理系统记录 本文档记录了该系统从零配置的完整过程 项目源码请访问:https://gitee.com/szxio/vue2Admin,如果感觉对你有帮助,请点 ...
- MongoDB + express + node + bootstrap 搭建多人博客
这篇博客讲述如何搭建一个多人博客,需要一定的基础知识,用于思路整理和备忘. 第一步: 新建文件夹 blog ,结构如下: bin --- 可执行二进制文件,最终的启动接口. models --- 存储 ...
- VUE+ElementUI 搭建后台项目(一)
前言 之前有些过移动端的项目搭建的文章,感觉不写个pc端管理系统老感觉少了点什么,最近公司项目比较多,恰巧要做一个申报系统的后台管理系统,鉴于对vue技术栈比较熟悉,所以考虑还是使用vue技术栈来做: ...
- express + vue 项目搭建
最近建了一个node服务端加vue前端的项目 安装node :npm install node 安装express :npm install express -g (-g全局安装) 构建express ...
- vue+element搭建后台管理界面(支持table条件搜索)
代码地址(如果有帮助,请点个Star) vue:https://github.com/wwt729/ElementUIAdmin-master.git springboot后端:https://git ...
- Vue+element搭建后台管理系统-二、安装插件
我们继续上一章的内容,上一章讲到我们已经能将项目成功跑起来了,那么我们接下来把项目必用的东西完善一下. 一.安装elementUI 终于到了我们的男二了,继续在VSCode中新建一个终端,然后通过这个 ...
- vue+elementui搭建后台管理界面(1登录)
1 node环境安装 从 node官网下载安装包 2 vue-cli npm install vue-cli -g 3 新建项目 vue init webpack vue-project 可保持默认, ...
- vue+elementui搭建后台管理界面(8 同步/异步获取数据渲染table)
elementui已经封装好了 el-table 组件,只需要指定 data 数据源即可,因此通常在 vue 实例生命周期的 created 阶段,从数据库获取数据,再将返回的数据绑定到 data 如 ...
随机推荐
- 高并发情况下,如何生成分布式全局id
1.使用UUID生成全局id,不占用宽带 2.基于数据库自增或者序列生成全局id,占用宽带,设置自增步长实现集群,但可扩展性差 3.基于redis生成全局id,占用宽度,设置自增步长实现集群,性能比数 ...
- Jquery 清除空白字符
$.grep(“jQuery数组”, function(n) { return $.trim(n).length > 0; }); /*仅过滤空数组,不过滤相同数组*/
- Java 根据出生日期计算年龄
1.把出生日期字符串转换为日期格式. public static Date parse(String strDate) throws ParseException { SimpleDateFormat ...
- 自定义data-*
HTML5的自定义属性data-*详细介绍和JS操作实例 < div id="user" data-id="123456" data-name=" ...
- 完美的nginx图片防盗链设置详解
一般,我们做好防盗链之后其他网站盗链的本站图片就会全部失效无法显示,但是您如果通过浏览器直接输入图片地址,仍然会显示图片,仍然可以右键图片另存为下载文件!依然可以下载?这样就不是彻底的防盗链了! [r ...
- 白盒测试实践-day....
时间:2017.12.22 地点:软件学院 参与人员:张双双.张玉.周静.赵天宇 会议内容:对代码测试的内容进行总结,总结任务由赵天宇完成,其余同学提出自己的看法和意见. 总结内容分为了五个阶段,不同 ...
- 团队项目个人进展——Day10
一.昨天工作总结 冲刺第十天,与小组成员任务合并,并解决结合后的一些问题. 二.遇到的问题 界面还是不太和谐 三.今日工作规划 对页面的布局.wxss做了一些修改
- python基础知识回顾之列表
在python 中,主要的常用数据类型有列表,元组,字典,集合,字符串.对于这些基础知识,应该要能够足够熟练掌握. 如何创建列表: # 创建一个空列表:定义一个变量,然后在等号右边放一个中括号,就创建 ...
- oracl数据库中的substr()函数的用法
substr:字符串截取. 1.substr:(字符串 | 列 ,开始点):从开始一直截取到结尾. select substr(zym,2) from bqh4 2.substr:(字符串 | 列 , ...
- 实现CTreeCtrl父子节点的联动选择
本文实现了下面的功能: 当选中父节点时, 其所有子节点全部选中. 当取消选中父节点时, 其所以子节点全部取消选中. 点击子节点时, 根据子节点与其兄弟节点的选中状态, 自动设置父节点的选中状态. 通过 ...