国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

MEVN 架構(MongoDB + Express + Vue + NODEJS)搭建

Lsnsh / 2741人閱讀

摘要:連接數據庫如果不自己創建默認數據庫會自動生成地址跟第一步的地址對應?,F在回過頭來看里面的入口文件最后,我們在瀏覽器輸入,就會跳到。到此為止,我們就完成了整個前后端各自開發到正式部署的流程。

一個完整的網站服務架構包括:
1、web frame ---這里應用express框架
2、web server ---這里應用nodejs
3、Database ---這里應用monggoDB
4、前端展示 ---這里應用vue

首先我們要安裝mongoDB(本例應用的mongoDB 3.4.7版本) 和 nodejs(本例應用的是nodejs v6.10.3) 具體安裝步驟大家可以百度一下,網上安裝示例很多,這里不過多講解,以下我們重點講解網站框架搭建操作。

對應以上要點一一作出解釋及具體操作步驟:
第一步:創建mongoDB數據庫
1、直接打開mongoDB安裝目錄下binmongod.exe文件,可見如下圖,即為數據庫服務啟動成功

2、瀏覽器輸入localhost:27017顯示如下,證明數據庫可用

第二步:生成vue框架
1、全局生成vue框架,輸入指令
npm i -g vue-cli

2、創建自己的文件夾

3、項目初始化
執行以下命令,自動創建目錄 E:/workspace/test

一路yes如下

生成目錄結構如下:

執行命令,進行項目初始化:
cd test
npm install

4、在項目根目錄src/main.js添加代碼
import vueResource from "vue-resource"
Vue.use(vueResource)
如圖所示

5、由于上一步添加代碼vue-resource,這里要引入vue-resource
執行命令如圖所示

執行后顯示如下,則為正常執行

第三步:生成expressm框架
1、執行命令npm install express,生成如下

第四步:搭建node服務器環境
1、在項目的根目錄新建一個叫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;

2、對比node_modules目錄缺少body-parser模塊和mongoose模塊,因此要添加這兩個模塊
執行命令:

3、至此我們的后端代碼就編寫好了,進入server目錄,敲上 node index命令,node就會跑起來,這時在瀏覽器輸入http://localhost:8088/api/log...就能訪問到這個接口了,執行命令如下:

4、現在我們的本地開發環境的 web server的接口是 index.js 里的8088,但是本地的webpack生成的網頁端口是8080,這兩個不一致。需要進行代理(proxy)在config/index.js 中修改

5、這時,重新啟動項目

我們在前端接口地址前加上/api,就會指向http://localhost:8088/api/,于是我們就能訪問到后端的接口了!

第五步:前后端開發完成,最后一步,前端打包,后端部署。
1、前端打包就很簡單了,一個命令:
npm run build 這就生成了一個dist目錄,里面就是打包出來的東西。
現在回過頭來看server里面的入口文件index.js

最后,我們在瀏覽器輸入http://localhost:8088/,就會跳到index.html。

到此為止,我們就完成了整個前后端各自開發到正式部署的流程。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/88382.html

相關文章

  • Node +MongoDB 搭建后臺的全過程

    摘要:搭建后臺的全過程近期基于搭建前端項目,搭建后臺,遇到了不少問題,總結博客如下,有什么不正確的地方,請大家批評指正是非關系型數據庫。是用來啟動的,是的命令行客戶端。 Node + mongoDB 搭建后臺的全過程 近期基于 vue-cil 搭建前端項目, express + mongoose 搭建后臺,遇到了不少問題,總結博客如下,有什么不正確的地方,請大家批評指正^?_?^! mong...

    voidking 評論0 收藏0
  • NodeJS+Express搭建個人博客-環境搭建(一)

    摘要:本項目持續更新中,開源免費與各位愛好技術達人共勉,注現階段仍在開發中。。。。。 NodeJS+Express+MongoDb開發的個人博客 NodeJS+Express搭建個人博客-環境搭建(一)NodeJS+Express搭建個人博客-gulp自動化構建工具使用(二)NodeJS+Express搭建個人博客-Express+Mongodb組合架構介紹(三)NodeJS+Express...

    Clect 評論0 收藏0
  • vue搭建的個人博客介紹----mapblog小站

    摘要:后端主要使用的框架,數據庫采用。后臺管理登錄采用與后端進行登陸狀態的確認。本文首發于小站,這是一個積累和分享知識的個人博客 這篇文章擱置了很長時間,最終決定還是把它寫出來,給剛開始學習vue并且想用vue寫個人博客的同學一個參考。因為當初我也是參考了其他人分享的知識,從一個vue小白變成了一個入門級選手,并最終完成了這個個人博客的搭建工作,代碼已托管在Github-justJokee。...

    Ashin 評論0 收藏0

發表評論

0條評論

Lsnsh

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<