一個完整的網站服務架構包括:
一、web frame ---這裏應用express框架
二、web server ---這裏應用nodejs
三、Database ---這裏應用monggoDB
四、前端展現 ---這裏應用vuehtml
首先咱們要安裝mongoDB(本例應用的mongoDB 3.4.7版本) 和 nodejs(本例應用的是nodejs v6.10.3) 具體安裝步驟你們能夠百度一下,網上安裝示例不少,這裏不過多講解,如下咱們重點講解網站框架搭建操做。前端
對應以上要點一一做出解釋及具體操做步驟:
第一步:建立mongoDB數據庫
一、直接打開mongoDB安裝目錄下binmongod.exe文件,可見以下圖,即爲數據庫服務啓動成功
vue
二、瀏覽器輸入localhost:27017顯示以下,證實數據庫可用
node
第二步:生成vue框架
一、全局生成vue框架,輸入指令
npm i -g vue-cliwebpack
二、建立本身的文件夾
web
三、項目初始化
執行如下命令,自動建立目錄 E:/workspace/test
一路yes以下
生成目錄結構以下:
mongodb
執行命令,進行項目初始化:
cd test
npm install
vue-cli
四、在項目根目錄src/main.js添加代碼
import vueResource from 'vue-resource'
Vue.use(vueResource)
如圖所示
數據庫
五、因爲上一步添加代碼vue-resource,這裏要引入vue-resource
執行命令如圖所示
執行後顯示以下,則爲正常執行
express
第三步:生成expressm框架
一、執行命令npm install express,生成以下
第四步:搭建node服務器環境
一、在項目的根目錄新建一個叫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;
二、對比node_modules目錄缺乏body-parser模塊和mongoose模塊,所以要添加這兩個模塊
執行命令:
三、至此咱們的後端代碼就編寫好了,進入server目錄,敲上 node index命令,node就會跑起來,這時在瀏覽器輸入http://localhost:8088/api/log...就能訪問到這個接口了,執行命令以下:
四、如今咱們的本地開發環境的 web server的接口是 index.js 裏的8088,可是本地的webpack生成的網頁端口是8080,這兩個不一致。須要進行代理(proxy)在config/index.js 中修改
五、這時,從新啓動項目
咱們在前端接口地址前加上/api,就會指向http://localhost:8088/api/,因而咱們就能訪問到後端的接口了!
第五步:先後端開發完成,最後一步,前端打包,後端部署。
一、前端打包就很簡單了,一個命令:
npm run build 這就生成了一個dist目錄,裏面就是打包出來的東西。
如今回過頭來看server裏面的入口文件index.js
最後,咱們在瀏覽器輸入http://localhost:8088/,就會跳到index.html。
到此爲止,咱們就完成了整個先後端各自開發到正式部署的流程。