不會寫API數據接口的前端攻城獅不是好程序猿

時間 2021-04-09

標籤 html 前端 node web mongodb docker 數據庫 express npm json 欄目 HTML 简体版

原文原文鏈接

最近小組開發項目，須要經過後臺提供的數據接口來獲取數據，比較坑爹的是咱們沒有後端，只能本身從網上扒數據，上傳服務器，請求JSON數據，完成前端頁面的渲染。中間遇到了很多坑，不過多操做幾回也都一一解決了，把過程簡單整理下，文中以貓眼電影數據爲例，主要用到了ECS雲服務器、MongoDB數據庫、Nodejs、express框架、pm2進程管理工具，程序使用Javascript語言編寫。

一、本地鏈接MongoDB數據庫

執行命令：（經過docker鏈接）html

docker ps -a 查看全部正在運行的容器
docker exec -it some-mongo bash運行mongodb數據庫容器
mongo 鏈接mongoDB數據庫前端

（如何經過docker鏈接mongodb數據庫請參考往期文章：教你徒手用Docker部署MongoDB數據庫）node

show dbs 顯示當前全部數據庫
web

二、編寫代碼鏈接數據庫

新建config文件夾，建立index.js文件，引入mongoose模塊，先鏈接本地數據庫，建立數據庫名字叫my（貓眼）。mongodb

const db = require("mongoose")
db.connect("mongodb://localhost:27017/my");
module.exports = db;

三、在網站上找到開放api接口

打開貓眼移動端網站，在網絡（Network）中找到XHR，是能夠訪問到數據的。
docker

點擊複製Request URL，在網頁中查看JSON數據。
數據庫

此處須要安裝一個JSONView瀏覽器插件，能夠格式化查看JSON代碼，後續也能夠幫助咱們方便的複製JSON數據。
express

如下即是這個接口返回給咱們的數據
npm

四、新建data數據

新建data文件夾，建立my_index_movies.js文件，module.export = []導出一個數組。
json

在接口中複製數據到js文件中，保存，關閉。

這裏注意下導出的數據格式，數組裏面嵌套一個對象，不要多層嵌套。

五、建立集合

新建collections文件夾，建立my_index_movies.js文件，引入mongoose模塊，設置Schema規範，須要與原先的數據一一對應，最後導出一個名爲indexMovies的集合。

//引入mongoose模塊
const db = require("../config")
//設置Schema規範
const mySchema = new db.Schema({
    id: Number,
    haspromotionTag: Boolean,
    img: String,
    version: String,
    nm: String,
    preShow:Boolean,
    sc: Number,
    globalReleased: Boolean,
    wish:Number,
    star: String,
    rt: Date,
    showInfo: String,
    showst: Number,
    wishst: String
})
//建立一個名稱爲indexMovies的集合
module.exports = db.model("indexMovies", mySchema)

六、執行插入操做

新建index.js文件，引入collection集合，引入相關數據data，執行插入操做，安裝express模塊監聽端口，配置路由。

//引入collection集合
const my_index_movies = require("./collections/my_index_movies");

//1.引入Movies相關數據
let indexMoviesData = require("./data/my_index_movies");

//2.插入多條語句
my_index_movies.insertMany(indexMoviesData,err=>{
    if(!err){
        console.log("my_index_movies插入成功！")
    }
})

var express = require('express')
var app = express();
//設置監聽9000端口
app.listen(9000, "0.0.0.0")
//建立路由
var router = express.Router()
app.use("/my", router)
//localhost:9000/my/movies
router.get("/movies", (req, res, next) => {
    moviesModel = my_index_movies.find({})
    moviesModel.exec((err, doc) => {
        if (err) {
            res.json({
                status: '-1',
                msg: err.message
            })
        } else {
            res.json({
                status: '1',
                data: {
                    total: doc.length,
                    object_list: doc
                }
            })
        }
    })
})

先根據paskage.json文件安裝node_modules模塊，在終端中執行cnpm i。

再新建終端，執行node index.js，出現my_index_movies插入成功！

在本地查看一下數據是否插入成功，執行show dbs，顯示my數據庫已經插入成功，執行use my命令，跳轉到my數據庫，執行db.getCollectionNames()，顯示當前的全部集合名稱，執行db.indexmovies.find()命令顯示當前集合下的全部數據，能夠看到數據已經插入成功。

在瀏覽器中輸入咱們監聽的端口：http://localhost:9000/my/movies，訪問一下數據。

cnpm install -g nodemon全局安裝一下nodemon方便後續實時編譯。

七、設置分頁、條數、排序功能

在index.js文件中配置路由/movies/list，依次設置page頁數、limit條數、sort排序，容許用戶傳入參數。

// 查詢/my/movies/list?page=2&limit=4&sort=1
//page頁數  limit條數 sort排序
router.get("/movies/list", (req, res, next) => {
    // 接受前端傳來的參數
    let page = parseInt(req.param('page')) || 1 //頁數 默認爲1
    let pageSize = parseInt(req.param('limit')) || 10 //每頁顯示的條數 默認爲10
    //按照sort來排序 
    let sort = req.param("sort")
    let skip = (page - 1) * pageSize//1*10
    let params = {};

    let hotsModel = my_index_movies.find(params).skip(skip).limit(pageSize)
    let len = 0;
    my_index_movies.find(params, (err, result) => {
        len = result.length;
        //能夠按照sc評分來排序 用戶傳入sort=1正序排列
        hotsModel.sort({ 'sc': sort })
        hotsModel.exec((err, doc) => {
            if (err) {
                res.json({
                    status: '-1',
                    msg: err.message
                })
            } else {
                res.json({
                    status: '1',
                    data: {
                        total: len,
                        current_total: doc.length,
                        object_list: doc
                    }
                })
            }
        })
    })
})

在終端中執行nodemon index.js編譯數據庫，注：在以後的編譯中須要將插入數據操做註釋，不然會重複插入數據！

在瀏覽器中測試，輸入http://localhost:9000/my/movies/list?page=1&limit=5&sort=-1 顯示第一頁數據，條數限制爲5條，按照sc評分倒序排列。