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:[email protected]: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