摘要：本使用創建本地服務器，在就能完成全部流程，并不需要線上服務器。路徑要與后端接口一致。后端返回成功后，前端數據中對應的元素也要刪掉，更新視圖。控制器里拿一個方法出來說一下吧，完整的代碼都在。讀取操作完成后調用釋放連接。

本文只是本人學習過程的一個記錄，并不是什么非常嚴謹的教程，希望和大家一起共同進步。也希望大家能指出我的問題。適合有一定基礎，志在全棧的前端初學者學習，從點擊按鈕提交ajax到獲得服務器response，然后更新頁面，這其中到底發生了什么？下面我們就來實現一個小demo，以前后端分離的方式獨立跑通一個簡單的增刪改查流程，邁出全棧第一步。

用到的一些技術棧

數據庫：mysql mysqlfront(數據庫gui工具)

后端：node express mysqljs(node數據庫模塊)

前端: vue(mvvm框架) elment-ui(快速搭建前端頁面) axios(ajax) webpack(構建工具)

后端負責提供接口，操作數據庫提供前端所需的數據和狀態。
前端負責調用接口，將數據展示給用戶，并對用戶的一些操作轉發給后端處理。
數據庫當然是負責存儲數據啦，關于數據庫，網上很多教程都是使用mongodb，通過mongoose操作mongdb的確比mysql便捷很多，不過實際工作中還是使用mysql的多，技術還是得回歸實際應用才能體現出價值。

本demo使用node創建本地服務器，在localhost就能完成全部流程，并不需要線上服務器。雖然功能非常簡單，但是用的的模塊和工具還是蠻多的，建議大家把注意力放在從前到后的這個流程上，一些工具和庫的使用我也不詳細介紹了，大家自己google，要成為全棧這點學習能力還是要有的。

先上github倉庫地址吧

大致介紹下項目結構，前后端在不同的文件夾下面，互不影響。前端使用webpack構建，利用webpack-dev-server開發，前端入口是localhost:8888/dist/index.html。后端使用express框架，利用nodemon自動重啟，主機是localhost:9999。使用webpack-dev-server和express分別創建了兩個服務器，用同一個端口會沖突，so這里會有跨域問題，不過用devserver可以輕松解決，后面會說到具體解決辦法。如果是線上服務器的話放一個里面就行了。

首先用vue-cli生成項目模板就行了，用webpack-simple就夠了，改相關配置方便點。

我們的頁面很簡單，主要有兩個組件list.vue(展示所有數據和相關操作)，一個form.vue(新增及修改商品)，這么一個頁面各位前端估計啪啪幾下就搞定了吧，至于你用不用element-ui都無所謂，用的話速度快點顏值高點。大家請無視我項目里使用的pug(jade)模板、餓了么主題文件、登錄組件等，這只是為了方便以后擴展。前端index.html用一個空殼就行了。

配置一下前端路由，/admin下有兩個子頁面，list和form，默認為list(一般默認是個后臺概況頁)

export default new Router({
    routes: [
        {
            path: "/admin",
            redirect: "/admin/list",
            name: "admin",
            component: Admin,
            children: [
                {
                    path: "/admin/list",
                    name: "list",
                    component: List,
                },
                {
                    path: "/admin/form",
                    name: "form",
                    component: Form,
                },]
        },
    ]
});

靜態部分基本完成了，下面來編寫組件中的數據流轉邏輯

列表的數據是從后端來的，所以list組件的created鉤子里應有一個獲取全部數據的ajax。先不急著上，要用ajax的地方很多，那么我們先對ajax方法做一個封裝吧。

// pubulic/func.js

import axios from "axios";

export default {
    ajaxGet (api, cb) {
        axios.get(api)
            .then(cb)
            .catch(err => {
                console.log(err);
            })
    },
    ajaxPost (api, post, cb) {
        axios.post(api, post)
            .then(cb)
            .catch(err => {
                console.log(err);
            })
    },
}

這里我們使用的axios模塊來進行ajax請求，寫法是promise的鏈式操作，封裝一個get和一個post就夠用了。

// pubulic/api.js

let host = "/api";

export default {
    goodsList: host + "/goods-list",
    goodsDetail: host + "/goods-detail",
    goodsDelete: host + "/goods-delete",
    goodsAdd: host + "/goods-add",
}

同樣在public文件夾下創建一個api.js把所有的接口信息都寫在一起，方便后續修改。路徑要與后端接口一致。

下面解決跨域問題，配置一下devserver.proxy就能輕松搞定，按照下面的配置，路徑以/api開頭的請求就會被node服務器轉發到9999端口，關于webpack的一些東西可以看看我的另一篇文章關于webpack的一點小心得

// webpack.config.js
// ...

devServer: {
    port: 8888,
    historyApiFallback: true,
    stats: "minimal",  // 輸入精簡信息
    overlay: true, // 將錯誤顯示在html之上
    proxy: {
        "/api": {
            target: "http://localhost:9999",
            secure: false,
            changeOrigin: true,
        }
    }
},

終于要進入組件中寫具體的業務邏輯了，我們在created里拿到數據，渲染進表格。雖然后端還沒開始呢，但我們期望res.data是一個包含所有商品的數組(如果數據大了還要分頁哦)，數據之后在后端中處理，實際項目中可以使用mock模擬數據。

刪除操作把要刪除的商品id post至指定接口，然后在回調里判斷返回的狀態，這個status應該是約定好的，我就設為201是成功好了。后端返回成功后，前端數據中對應的元素也要刪掉，更新視圖。

// list.vue

import func from "../../public/func";
import api from "../../public/api";
// ...省略代碼若干行

methods: {
    // 刪除
    handleDelete(row) {
        func.ajaxPost(api.goodsDelete, {id: row.Id}, res => {
            if (res.status === 201) {
                let index = this.tableData.indexOf(row);
                this.tableData.splice(index, 1);
                this.$message.success("刪除成功");
            }
        });
    },

    // 修改
    handleEdit (row) {
        this.$router.push({name: "form", query: {id: row.Id}});
    },
},

created () {
    func.ajaxGet(api.goodsList, res => {
        this.tableData = res.data;
    });
},

list頁的修改操作就是路由跳轉到form頁了，同時把id以query形式傳過去。在form的created鉤子里判斷，如果有query.id的話就說明是在修改商品，沒有的話就是添加，這樣就可以復用這個form組件咯。不愛偷懶的程序員不是好程序員。這個修改操作也可以用vuex把商品數據傳遞過來，不過頁面刷新就沒有了，還是用ajax穩妥。

// form.vue

// ...省略代碼若干行

created () {
    let id = this.$route.query.id;
    console.log(id);
    if (id) {
        func.ajaxPost(api.goodsDetail, {id}, res => {
            this.form = res.data;
        });
    }
},

其他的一些操作不具體說了，都挺簡單的，讓我們進入久違的后端吧。

來到后端第一步就是創建一個數據庫，這里我用的是phpstudy附帶的，當然你也可以自己裝，畢竟這個附帶的還是老舊的5.5版本。sql語句我玩不來啊就用phpstudy附帶的mysqlfront這個gui工具來擼了。建一個叫vue-admin的庫，然后一張goods的表，只有id,name,price,create_time這四個字段，簡單明了。

終于玩到node了，首先全局安裝nodemon幫我們自動重啟，然后裝好express等包，新手不推薦使用express-generator創建項目。看到這里請大家先去預習一下mysqljs這個模塊。

我們把數據庫的配置寫在多帶帶的文件中，抽離配置文件是一個好習慣。然后在控制器中使用mysql.createPool(db)創建連接池。

// db.js

module.exports = {
    host: "localhost",
    port: 3306,
    user: "root",
    password: "root",
    database: "vue-admin"
};

// controls/goods.js

let pool = mysql.createPool(db);

下面編寫增刪改查等路由接口，與前端的api.js中的路徑保持一致，get還是post根據情況而定，回調函數不寫在這里寫進控制器goods.js中。在入口文件中use router，這時候我們的接口路徑就是/api/goods-list

// router.js

router.get("/goods-list", goods.getGoodsList);
router.post("/goods-detail", goods.getOneGoods);
router.post("/goods-add", goods.addGoods);
router.post("/goods-delete", goods.deleteGoods);

module.exports = router;

// app.js

let router = require("./routes/router");
app.use("/api", router);

控制器中同樣是增刪改查四個方法，首先我們把一些可復用的sql語句封裝起來。這是mysqljs中的語法，？就是變量，雙??是表名或字段名，單?則為value。insert和update就不封裝了，涉及到具體字段，直接寫好了。

// sql.js

module.exports = {
    queryAll: "SELECT * FROM ??",
    queryById: "SELECT * FROM ?? WHERE id=?",
    del: "DELETE FROM ?? WHERE id=?",
};

控制器里拿一個方法出來說一下吧，完整的代碼都在github。使用pool.getConnection方法從連接池建立連接，SELECT * FROM goods獲取goods表中所有數據，res.json將數據以json格式傳給前端。讀取操作完成后調用release()釋放連接。rows及前端拿到的res的數據格式大家可以console看一下，都是數組類型。

// 獲取商品列表
    getGoodsList (req, res) {
    pool.getConnection((err, conn) => {
        conn.query(sql.queryAll, "goods", (err, rows) => {
            if (err) throw err;

            rows = formatDate(rows);
            res.json(rows);

            conn.release();
        });
    });
},

// formatDate函數利用moment.js將數據庫中的時間戳格式轉化為年月日的格式
function formatDate(rows) {
    return rows.map(row => {
        let date = moment(row.create_time).format("YYYY-MM-DD");
        return Object.assign({}, row, {create_time: date});
    });
}

寫后端接口的時候還跑去前端提交請求比較蛋疼，這里推薦大家使用postman這個工具來測試接口，提高效率。postman可以以chrome插件的形式安裝，十分方便。

后端接口跑通后，前后端協調修改一下，從前端調用接口，到后端從數據庫中讀取數據，最后返回給前端，整個流程至此就跑通了。

我們只是完成了一個web應用最最基本的功能，新手可能一臉懵逼，大牛可能一臉蔑視，全棧之路還遠著呢。接下來需要去增加登錄等模塊，更復雜的業務邏輯，還有安全方面的考慮，讓程序健壯起來，大家一起加油吧。