Vue+node+mongodb实战————web全栈

Vue+node+mongodb实战————web全栈

学node，学vue，还有学mongodb数据库就是为了做全栈开发！！

不想做全栈开发的前端，不是好前端！

注：需要的依赖包和安装啥的这里就不细说了。

node使用（express）：

准备工作：（端口，静态文件，跨域问题，依赖引入。）

var express = require('express')
var app = express();
app.set('view engine', 'ejs');
app.listen(3000); //悄无声息的3000链接。
console.log("http://localhost:3000")
app.use('/static', express.static('public')) //静态文件引入
//跨域问题
const cors = require('cors');
app.use(cors({
	origin: ['http://localhost:8080'],
	methods: ['GET', 'POST'],
}));

mongodb使用（mongoose）：

const mongoose = require('mongoose');
const DB_URL = 'mongodb://localhost:27017/fullweb';
// mongodb://yijiebuyi:yijiebuyi@127.0.0.1:27017/admin", {auto_reconnect: true}, done);
// 连接
mongoose.connect(DB_URL, {
  useNewUrlParser: true
});
// 连接成功
mongoose.connection.on('connected', function () {
  console.log('Mongoose connection open to ' + DB_URL);
})
// 连接异常
mongoose.connection.on('error', function (err) {
  console.log('Mongoose connection error ' + err);
})
// 连接断开
mongoose.connection.on('disconnected', function () {
  console.log('Mongoose connection disconnected ');
})
/**
 * 用户信息
 */
// 定义数据库表存储结构————————定义数据
const Schema = mongoose.Schema;
const UserSchema = new Schema({
  username: { type: String }, // 用户名
  password: { type: String }, // 用户密码
  age: { type: String }, // 用户年龄
  lastLoinDate: { type: Date } // 最近登录一次时间
})
// 生成Model
module.exports = mongoose.model('User', UserSchema);

//引入到主程序：

//数据库（db.js用来放数据库的链接）
const db = require('./db');

前端vue的使用：

对于vue来说，有两种形式，一种html的引入，另一种就是vue-cli搭建的项目。

初学建议就引入就完事了，搭建的会出现routes路由，组件，一些问题。

我这边就先搭建。

//搭建的axios需要全局化才可以使用。
import Vue from 'vue'
import axios from 'axios'
import App from './App'
import router from './router'
Vue.prototype.axios=axios

我这边简单介绍下vue构造：（只看src里的文件）

main主文件：用来放引用。(有些引用需要全局化，不然组件用不了。)

App.vue主视图文件：牵一发而动全身，它的改动会影响整个视图。

assets资源库：放资源的（图，视频等）

router路由：没有路由，什么组件都用不了，可以看作组件的连接中转站！

components组件库：存放组件，操作的主要对象。

components/index.vue:(基本组件，涵盖了视图，数据，样式)超级齐全的。

<template>
	<div>
		
	</div>
</template>
<script>
	export default {
		name:"index",
		data(){//这种写法只在组件中。
			return {//return,的使用会让变量只在当前页面起作用不会影响其他的组件，不会造成变量污染。
				msg: '12345',
			};
		},
		methods:{
			
		}
	}
</script>
<style scoped>
</style>

最后回归正题：index.vue————前端跟后端要数据！

<template>
	<div class="hello">
		<h1>{{ msg }}</h1><!-- 这是普通的引用数据 --> 		
		<button v-on:click="goback">获取数据</button>
		<ul v-for="(item, index) in results">
			<li>
				<div>id:{{ item._id }}</div>
				<div>用户名:{{ item.username }}</div>
				<div>密码:{{ item.password }}</div>
				<div>年龄:{{ item.age }}</div>
				<div>创建时间:{{ item.lastLoinDate }}</div>
			</li>
		</ul>
	</div>
</template>

<script>
export default {
	name: 'hello',
	data() {
		return {
			msg: 'Welcome to Your Vue.js App',
			results: []
		};
	},
	methods: {
		goback: function() {
			console.log('hah');
			this.axios//全局引用的。要写成this.axios。
				.post('http://localhost:3000/product') //把url地址换成你的接口地址即可
				.then(res => {
					console.log(res.data.data);
					this.results = res.data.data;//从后端拿到的数据
				})
				.catch(err => {
					alert('请求失败');
					console.log(err);
				});
		}
	}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>

全栈开发，vue—【post】→node—【mongoose】→mongodb