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

最新推荐文章于 2023-11-02 16:03:22 发布

xikeqian

最新推荐文章于 2023-11-02 16:03:22 发布

阅读量624

点赞数 1

分类专栏： vue node 文章标签： vue连接node node node+mongodb

本文链接：https://blog.csdn.net/qq_37626545/article/details/85914555

版权

vue 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

node

1 篇文章 0 订阅

订阅专栏

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

前端：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

<!DOCTYPE>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<title>contace List App</title>
<boty>
	<div class="container" id="app">
		<h1>contace List App</h1>
		<table class="table">
			<thead>
			  <tr>
				<th>Name</th>
				<th>Email</th>
				<th>Number</th>
				<th>Action</th>
			  </tr>
			</thead>
			<tbody>
				<tr>
					<td><input class="form-control" v-model="name"></td>
					<td><input class="form-control" v-model="email"></td>
					<td><input class="form-control" v-model="number"></td>
					<td><button class="btn btn-primary" v-on:click="addContact">Add Contact</button></td>
					<td><button class="btn btn-info" v-on:click="update(update_id)">Update</button></td>
				</tr>
				<tr v-for="contact in contactList">
					<td>{{contact.name}}</td>
					<td>{{contact.email}}</td>
					<td>{{contact.number}}</td>
					<td><button class="btn btn-primary" v-on:click="deleteContact(contact._id)">Remove Contact</button></td>
					<td><button class="btn btn-warning" v-on:click="edit(contact._id)">Edit</button></td>
				</tr>
			</tbody>
		</table>
	</div>
	<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
	<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
	<script>
		var vue = new Vue({
			el: '#app',
			data: {
				contactList: [],
				update_id: '',
				name:'',
				email:'',
				number:''
			},
			methods: {
				getInfo: function(){
					this.$http.get('/contactList')
						.then(function(res){
							// console.log(res.body);
							this.contactList = res.body;
						});
				},
				addContact: function(){
					console.log("addContact button was clicked");
					// console.log(this.contactList);
					this.$http.post('/contactList',{
						name: this.name,
						email: this.email,
						number: this.number
					}).then(function(res){
						console.log(res.body);
						this.contactList = res.body;
						console.log(this.contactList.length);
					});
				},
				deleteContact: function(item_id){
					console.log(item_id);
					console.log("deleteContact button was clicked");
					this.$http.delete('/contactList/'+item_id);
					this.refresh();
				},
				refresh: function(){
					this.$http.get('/contactList')
						.then(function(res){
							// console.log(res.body);
							this.contactList = res.body;
							this.name = '';
							this.email = '';
							this.number = '';
							this.update_id = '';
						});
				},
				edit: function(id){
					console.log(id);
					this.update_id = id;
					this.$http.get('/contactList/'+id)
						.then(function(res){
							this.name = res.body.name;
							this.email = res.body.email;
							this.number = res.body.number;
						});

				},
				update: function(id){
					this.$http.put('/contactList/'+id, {
						name: this.name,
						email: this.email,
						number: this.number
					});
					this.refresh();
				}
			},
			created(){
				this.getInfo();
			}
		});
	</script>
</boty>
</html>

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

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

可以进行CRUD操作，数据库中的数据会相应改变，各个按钮对应的事件写在index.html中的<script>中。如果看不懂vue机制的可以先去https://vuejs.bootcss.com/v2/guide/去学习一下。事件响应后会向监听该端口的后台发送请求，然后后台进行处理返回响应数据。前端可以对返回的数据进行想要操作。

xikeqian

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
全栈之路起步:Vue+Node+Express+MongoDB

最近在学习全栈方面的知识，把自己近来所学的搭建全栈的基础结构说一下：前端：Vue；后端：Node+Express；数据库：MongoDB；其中最重要的是Node:包管理工具，我们需要它来下载我们构建所需要的一些包或者模块。Node安装教程网上都有，我安装的是8.10.0。然后在安装MongoDB，Vue的安装因为我们用的不是webpack-cli脚手架开发，所以vue的引进我用的是网上提供的c...
复制链接

扫一扫