從零搭建一個全棧項目（二）—— 接口調試

1、內容簡介

本章主要實現先後端接口調試：前端能夠經過axios調用後端接口，返回數據庫（mysql）中的數據的基本功能。因爲大部分的功能接口會在後面單獨詳細說明，因此這章只實現一個測試接口。

2、接口結構搭建

上一章已經實現node啓動後端服務，當時在http.createServer() 中有一個回調函數serverHandle:

/server/app.js

const handleBlogRouter = require('./router/blog')
const handleUserRouter = require('./router/user')
const mime = require('./util/mime')

const serverHandle = (req, res) => {
  const url = req.url
  res.setHeader('Content-type', mime(url))
  req.path = url.split('?')[0]
  const blogData = handleBlogRouter(req, res)
  const userData = handleUserRouter(req, res)
  if (url.match('api')) {
    if (blogData) {
      blogData.then(data => {
        res.end(JSON.stringify(data))
      })
      return
    }
    if (userData) {
      userData.then(data => {
        res.end(JSON.stringify(data))
      })
      return
    }
  }
  res.end()
}

module.exports = serverHandle
複製代碼

在serverHandle中咱們能夠經過判斷req.path來判斷不一樣類型的接口，這裏我加了url.match('api')來校驗路徑中是否含有api，若是有則證實是請求接口的路徑，假如後面有其餘功能能夠在else中補充。假如請求路徑命中了blog.js或者說blogData有對應返回，則直接給前端返回blogData返回的值。
能夠看到對應的blogData對應了一個方法，這是由於可能咱們的接口有不一樣類型，爲了方便後續維護，使代碼結構更清晰，因此新建了一個router文件夾，在這個文件夾中能夠根據不通的類型來分紅幾個不一樣的模塊，好比：blog.js、user.js等。這裏咱們就用blog.js中獲取博客列表接口舉例：

/server/router/blog.js

const { getList } = require('../controller/blog')
const { SuccessModel, ErrorModel } = require('../model/index')

const handleBlogRouter = (req, res) => {
  const method = req.method
  // 獲取博客列表
  if (method === 'GET' && req.path === '/api/blog/list') {
    return getList().then(list => {
      return new SuccessModel(list)
    })
  }
}

module.exports = handleBlogRouter
複製代碼

getList實際上就是經過sql語句獲取博客列表的一個方法，直接返回數據庫數據，這裏咱們後面詳細說明，假如咱們請求的path爲/api/blog/list而且是get請求，那麼就說明咱們是博客列表接口，getList返回了一個列表數組list，能夠看到我並非直接將list直接返回到前端，而是經過SuccessModel， ErrorModel來對數據進行一個封裝，這是因爲一般咱們請求接口都會有code，若是code爲0證實返回成功，不然說明失敗，因此咱們也專門寫了兩個方法，對數據庫的數據進行了一次封裝：

/server/model/index.js

class BaseModel {
  constructor (data, message) {
    if (typeof data === 'string') {
      this.message = data
      data = null
      message = null
    }
    if (data) {
      this.data = data
    }
    if (message) {
      this.message = message
    }
  }
}

class SuccessModel extends BaseModel {
  constructor (data, message) {
    super(data, message)
    this.code = 0
  }
}

class ErrorModel extends BaseModel {
  constructor (data, message) {
    super(data, message)
    this.code = -1
  }
}

module.exports = {
  SuccessModel,
  ErrorModel
}
複製代碼

SuccessModel， ErrorModel實際就是簡單的對數據進行了封裝，data是實際數據，code判斷接口是否請求成功。到這裏咱們後端接口的邏輯就已經基本完成了。下面就是後端經過node連接mysql和使用簡單的sql語句獲取數據庫數據。

3、接口數據獲取

首先，要在項目中安裝mysql:npm install mysql。 在本身電腦上也須要安裝mysql和一個可視化的mysql工具，我安裝的可視化工具是workbench,官網都有相關的下載，就很少介紹了。
安裝好mysql以後，咱們能夠打開workbench,點擊圖中標記按鈕新建一個數據庫myblog

新建數據庫後能夠再新建一個blogs表：

而後編輯表，能夠添加一些自定義的字段，我目前添加的都是一些比較經常使用的字段：文章id，標題，內容，建立時間，做者等。

新建完成後能夠執行一條簡單的sql語句添加一條數據：
use myblog;
insert into blogs (title, content, createtime, author) values ('博客標題', '博客內容', '123', 'lisi');
select * from blogs;

單獨選中某一行點擊也能夠只執行那一行語句，這是應該會看到數據庫blogs表的數據：

到這裏後說明數據庫中已經存了幾條數據，在咱們的服務端代碼能夠連接數據庫獲取這幾條數據：
鏈接接數據庫：

/server/db/mysql.js

const mysql = require('mysql')
const { MYSQL_CONF } = require('../conf/db')

// 建立連接對象
const con = mysql.createConnection(MYSQL_CONF)

// 開始連接
con.connect()

// 統一執行sql函數
function exec(sql) {
  return new Promise((resolve, reject) => {
    con.query(sql, (err, res) => {
      if (err) {
        reject(err)
        return
      }
      resolve(res)
    })
  })
}

module.exports = {
  exec
}

// MYSQL_CONF mysql的相關配置
const env = process.env.NODE_ENV // 環境參數

let MYSQL_CONF
// 開發環境下
if (env === 'dev') {
  MYSQL_CONF = {
    host: 'localhost',
    user: 'root',
    password: 'selfpassword',
    port: '3306',
    database: 'myblog'
  }
}
// 生產環境下
if (env === 'production') {
  MYSQL_CONF = {
    host: 'localhost',
    user: 'root',
    password: 'selfpassword',
    port: '3306',
    database: 'myblog'
  }
}

module.exports = {
  MYSQL_CONF
}
其中password爲本身設置的密碼
複製代碼

這部分爲一個封裝的執行sql語句的方法和mysql相關的配置。下面回到以前說的getList獲取博客列表的方法：

/server/controller/blog.js

const { exec } = require('../db/mysql')
const getList = () => {
  // 返回假數據
  const sql = 'select * from blogs;'
  return exec(sql)
}

module.exports = {
  getList
}
複製代碼

select * from blogs; 就是博客列表中須要獲取數據庫數據的sql語句，固然後面若是有篩選搜索等功能，這個sql語句會相應修改，目前是一個最簡單的語句用於測試咱們的數據庫是否已經鏈接成功。
如今咱們能夠試一下，運行咱們的服務端代碼，npm run server, 在瀏覽器輸入： http://localhost:3000/api/blog/list， 看下數據庫中的數據是否返回：

看到咱們的接口已經能夠返回數據庫的博客列表了。

4、前端調試接口

如今咱們要準備調試前端請求，前端的解決就更容易了，首先咱們的前端代碼是在80端口，直接使用axios會跨域，直接在webpack的devServer中設置proxy代理便可：

devServer: {
    contentBase: path.resolve(__dirname, '../dist'),
    historyApiFallback: true,
    port: 8080,
    inline: true,
    hot: true,
    host: 'localhost',
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: {'^/' : ''}
      }
    }
  }
複製代碼

而後咱們在/pages/blog/index.js中寫一個簡單的請求方法便可：

import './index.css'
import axios from 'axios'
axios
  .get('/api/blog/list')
  .then(function(response) {
    console.log(response)
  })
  .catch(function(error) {
    console.log(error)
  })
複製代碼

就是這麼最簡單的axios語法便可，由於咱們目前只是把先後端請求接口的邏輯調試清楚，代碼相關的優化尚未作，因此在這個js中直接寫了axios原生的方法來測試，後面可能會封裝成一個請求方法。
如今咱們運行一下項目， npm run start， 打開http://localhost:8080/html/blog.html

已經能夠看到前端console出了博客列表數據。

5、總結

本章介紹了後端如何鏈接數據庫，並經過接口返回給前端數據；前端如何調試接口獲取後端數據：

1. 後端構建接口接口，規定接口路徑；
2. 後端鏈接mysql數據庫，經過sql語句獲取數據；
3. 前端調用接口獲取後端數據；

下一章主要內容:
1.優化前端公用代碼（js、css）；
2.實現項目登陸註冊功能；

6、最後

GitHub地址：戳這裏

本項目僅爲學習交流使用，若是有小夥伴有更好的建議歡迎提出來你們一塊兒討論，另外感興趣的小夥伴就點個star吧！ ^_^