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

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

一、本地鏈接MongoDB數據庫

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

docker ps -a 查看全部正在運行的容器

docker exec -it some-mongo bash運行mongodb數據庫容器

mongo 鏈接mongoDB數據庫

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

show dbs 顯示當前全部數據庫

二、編寫代碼鏈接數據庫

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

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

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

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

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

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

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

四、新建data數據

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

在接口中複製數據到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評分倒序排列。

八、配置遠程數據庫

（1）鏈接遠程服務器：ssh root@雲服務器地址，輸入密碼。

（2）先在雲服務器上安裝node.js和npm

sudo yum install nodejs

安裝完成後***node -v***查看一下當前版本。

（1）在雲服務器上安裝mongoDB數據庫

具體參考這篇文章：www.cnblogs.com/web424/p/69…

這裏說一下主要操做步驟

<1>建立yum源文件：

執行：vim /etc/yum.repos.d/mongodb-org-3.4.repo

<2>添加如下內容：

[mongodb-org-3.4]

name=MongoDB Repository

baseurl=https://repo.mongodb.org/yum/redhat/$releasever/mongodb-org/3.4/x86_64/

gpgcheck=1

enabled=1

gpgkey=https://www.mongodb.org/static/pgp/server-3.4.asc

i表明INSERT寫入，複製上面內容粘貼後按esc，輸入：（冒號）wq！（感嘆號），保存並退出

<3>安裝MongoDB：yum -y install mongodb-org

<4>安裝完成後,查看mongo安裝位置 whereis mongod

<5>啓動mongodb ：systemctl start mongod.service

<6>查到mongodb的狀態：systemctl status mongod.service，顯示active（running）說明已經成功開啓。

<7>中止防火牆*** systemctl stop firewalld.service***

<8>禁止防火牆開機啓動*** systemctl disable firewalld.service***

<9>設置開機啓動*** systemctl enable mongod.service***

<10>執行完以上操做步驟後輸入命令：mongo，查看數據庫***show dbs***。

<11>設置mongodb遠程訪問,設置完以後能夠在本地鏈接數據庫

註釋bindIp,並重啓mongodb.

輸入***vim /etc/mongod.conf*** 編輯mongod.conf配置文件，找到bindIP，在前面輸入#註釋掉，:wq!保存退出。

<12>重啓mongodb：systemctl restart mongod.service

八、配置遠程數據庫

（1）在本地終端輸入***mongo 服務器地址:27017***，鏈接遠程數據庫，***show dbs***查看數據庫。

（2）修改config中的index.js文件，將localhost改爲服務器地址。

（3）***nodemon index.js***執行插入操做，顯示插入成功，在數據庫中執行***show dbs***查看數據庫，顯示my數據庫已成功創建。

九、將接口上傳遠程數據庫

（1）將index.js中的插入語句註釋

（2）FileZilla本地FTP軟件中遠程鏈接數據庫，並在根目錄下新建目錄my-interface

（3）將除了node_modules的其餘文件夾上傳到遠程服務器my-interface目錄中

（4）服務器終端中輸入***cd /my-interface***進入my-interface目錄下，***npm install***安裝node_modules模塊

（5）安裝成功後，運行***node index.js***

（6）打開瀏覽器，將localhost改成服務器地址，訪問遠程接口

十、全局安裝pm2 工具

PM2是node進程管理工具，能夠利用它來簡化不少node應用管理的繁瑣任務，如性能監控、自動重啓、負載均衡等。

全局安裝pm2:npm install -g pm2

輸入***pm2 start index.js***命令啓動index.js，以便本地終端關閉，外部依然能夠訪問數據。

至此你的數據接口就能夠被遠程訪問了。

順便補充一些Pm2 經常使用命令：

Pm2 start js文件名 開啓進程

Pm2 list 查看全部進程狀態

Pm2 stop 進程id 中止指定進程

Pm2 stop all 中止全部進程

Pm2 restart 進程id 重啓指定進程

Pm2 restart all 重啓全部進程

Pm2 delete 進程id 移除指定進程

Pm2 delete all 移除全部進程