全栈之路起步:Vue+Node+Express+MongoDB

最近在学习全栈方面的知识,把自己近来所学的搭建全栈的基础结构说一下:

前端:Vue;后端:Node+Express;数据库:MongoDB;其中最重要的是Node:包管理工具,我们需要它来下载我们构建所需要的一些包或者模块。Node安装教程网上都有,我安装的是8.10.0。然后在安装MongoDB,Vue的安装因为我们用的不是webpack-cli脚手架开发,所以vue的引进我用的是网上提供的cdn;

目录结构:

contactList(文件夹)

       |---public(文件夹)

       |-------|--index.html(文件)

       |---server.js(文件)

首先搭建后台服务:server.js

//server.js
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
app.use(bodyParser.json());
var mongojs = require('mongojs');
var db = mongojs('contactList',['contactList']);
//设置静态文件目录
app.use(express.static(__dirname+"/public"));
//查询数据
app.get('/contactList', function(req,res,){
	console.log('I received a get request');
	db.contactList.find(function(err,docs){
		res.json(docs);
	});
	
});
//添加数据
app.post('/contactList', function(req,res){
	console.log("this is a port request");
	console.log(req.body);
	db.contactList.insert(req.body);
	db.contactList.find(function(err,docs){
		res.json(docs);
	});
});
//删除数据
app.delete('/contactList/:id', function(req,res){
	var id = req.params.id;
	console.log(id);
	db.contactList.remove({_id: mongojs.ObjectId(id)}, function(err,docs){
		res.json(docs);
	});
});
//得到对应id的数据
app.get('/contactList/:id', function(req,res){
	var id = req.params.id;
	db.contactList.findOne({_id: mongojs.ObjectId(id)}, function(err,docs){
		res.json(docs);
	});
});
//更新数据库数据
app.put('/contactList/:id', function(req,res){
	var id = req.params.id;
	db.contactList.findAndModify({
		query: {_id: mongojs.ObjectId(id)},
		update: {$set: {name: req.body.name, email: req.body.email, number: req.body.number}},
		new: true
	}, function(err, doc){
		res.json(doc);
	});
})
app.listen(3000);
console.log("Server running on prot 3000");

 然后通过控制台进入contactList目录,启动目录下的server.js文件,这就是我们的后台服务文件,你的node必须配置环境变量才能运行这些命令,配置环境变量网上有教程。通过命令node server.js启动服务。控制台会输出:Server running on port 3000。在运行server.js文件前,首先本地要有相应需要的包,如:express,mongojs,body-parser,可以通过npm install express、npm install mongojs、npm install body-parser进行安装。安装完成后,在node 默认安装目录下可以找到,我的是在:

C:\Users\用户名\node_modules目录下。

然后是前端代码:index.html







contace List App

	

contace List App

Name Email Number Action
{{contact.name}} {{contact.email}} {{contact.number}}

MongoDB数据库的创建可以去参考菜鸟教程上讲解,不需要懂的很多,只需要懂创建数据库、创建集合、文档操作(CRUD)。有了数据库之后,server.js中才能连接数据库进行数据操作。

启动server.js,在浏览器中输入:localhost:3000,即可进入主页。界面如下:

全栈之路起步:Vue+Node+Express+MongoDB_第1张图片

可以进行CRUD操作,数据库中的数据会相应改变,各个按钮对应的事件写在index.html中的

你可能感兴趣的:(vue,node,vue连接node,node,node+mongodb)