node+express+mongoDB寫簡單介面，Vue獲取介面

生成後台服務

通過應用生成器工具 express-generator 可以快速創建一個應用的骨架。

npm install express-generator -g

1

創建server後台服務文件server

express --view=pug server

1

可以看expresss官網:http://www.expressjs.com.cn/starter/generator.html

express後端服務架構，編寫後端路由（介面)。不同介面提供不同的服務

安裝mongoose

npm install mongoose

1

開始寫介面

1.在利用express框架新建的(伺服器)文件夾後面，創建models文件夾，在models文件夾里新建goods.js

var mongoose =require("mongoose")//載入模塊

var Schema =mongoose.Schema;

//定義Schema,描述該集合有哪些欄位，哪些類型，只有定義過的才能被放入資料庫

var produtSchema =new Schema({

"productId":String,

"productName":String,

"prodcutPrice":String,

"prodcutImg":String

})

module.exports =mongoose.model("goods",produtSchema)

//goods 是我們的匹配的資料庫內部創建的collection名，但它不用一模一樣，因為mongoose內部創建的collection

//時將我們傳遞的資料庫名小寫化，同時如果小寫化的名稱後面沒有字母s，

// 會針對我們剛建的collection，命名加s

1

2

3

4

5

6

7

8

9

10

11

12

13

14

2.創建路由(router 文件夾內創建 goods.js)

var express = require("express");//載入模塊

var router = express.Router();//引用router

//引用數據模塊

var mongoose = require("mongoose");

var Goods = require("../models/goods")

//連接資料庫

mongoose.connect("mongodb://localhost:27017/shop", {useNewUrlParser: true})

//下面就進行判斷，（連接成功，連接失敗，連接斷開）

mongoose.connection.on("connected", function () {

console.log("連接成功");

})

mongoose.connection.on("error", function () {

console.log("連接失敗");

})

mongoose.connection.on("disconnected", function () {

console.log("斷開連接");

})

//路由獲取

router.get("/", function (req, res, next) {

//查詢mongoDB的goods數據

Goods.find({}, function (err, doc) {

if (err) {

res.json({

status: "1",

msg: err.message

})

} else {

res.json({

list:doc,

count:doc.length

})

}

})

});

module.exports = router;//暴露路由

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

3.修改入口文件app.js

var goodsRouter =require("./routes/goods")

1

app.use("/goods",goodsRouter)

1

注意：我們的後台server文件下的，bin/www.js的埠號是不是

var port = normalizePort(process.env.PORT || "3000");

app.set("port", port);

1

2

4.啟動項目

MongoDB啟動

可以介紹倆種方式啟動

（1）管理員模式下，net start （mongodb的名字）

（2）此電腦右擊管理=》服務，這裡也可以查看有沒有啟動。

node也需要啟動

瀏覽器運行http://localhost:3000/goods

引用axios

在用腳手架搭建的項目下的src/main.js中，全局註冊axios

import axios from "axios" //引入axios

1

Vue.prototype.$ajax=axios // 在vue的原型上增加方法

1

在要用的組件上就可以

created() {

this.$ajax.get("/goods").then((res) => {

this.alldata = res.data.list[0].result

})

}

1

2

3

4

5

然後就能把數據渲染到頁面上了。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！