教程系列之：前端全棧入門，node+express+mysql+vue+axios

時間 2019-11-17

標籤教程系列前端入門 node+express+mysql+vue+axios node express mysql vue axios 欄目 MySQL 简体版

原文原文鏈接

作項目的時候會不會由於沒有數據而煩惱？沒有後端給接口而感到舉步維艱？接下來，這些都不是問題，咱們全均可以本身作。javascript

第一步搭建本身的node服務，建立一個server文件夾

cnpm i express body-parser mysql

注意：這裏要求，電腦上安裝了mysql數據庫。博主使用的Navicat Premium鏈接的數據庫，若是須要下面有國產版連接

這三個分別是node的框架express，解析post請求數據的body-parser中間件，鏈接數據庫的中間件mysql。前端

//index.js
const express = require('express')
const bodyParser = require('body-parser')
const mysql = require('mysql')

let db = mysql.createPool({     //這裏建議使用createPool，這樣可使用多個服務，默認10個，能夠本身設置
  host: 'localhost',
  user: 'root',
  password: 'root',
  database: 'property_system'
})

let app = express()         //使用express啓動一個服務，監聽3000端口
app.listen(3000, () => {
  console.log('正在運行...')
})
複製代碼

不瞭解mysql中間件的配置項的戳這裏：npm.taobao.org/package/mys…vue

app.use(bodyParser.urlencoded({     //使用body-parser中間件
  extended: false
}))
app.use(bodyParser.json())
複製代碼

接下來，只要在server文件夾下，啓動一個命令行，輸入node index。這樣一個簡單的node服務就啓動起來了。java

第二步，建立一個接口，用來給前臺來請求，下降難度，這裏不使用路由，後續再說

app.post('/api/login', (req, res) => {
  console.log(req.body)
  req.db.query(`SELECT * FROM admin_table WHERE admin='${req.body.admin}'`, (err, data) => {
    if (err) {
      console.log(err)
      res.status(500).send('數據庫有問題了')
    } else {
      console.log(data)
      if (data.length > 0 && req.body.password === data[0].password) {
        console.log(`驗證完畢，權限爲${data[0].power_id}`)
        res.send({
          power_id: data[0].power_id
        })
      } else {
        console.log('帳號密碼有誤')
        res.send('帳號/密碼錯誤')
      }
    }
  })
})
複製代碼

這裏咱們建立好了一個post請求的接口，路徑是/api/login，這是一個簡單的登陸驗證的接口，會根據前臺請求的數據判斷數據庫是否有對應的數據，若是有會返回一個權限等級，沒有會提示帳號/密碼錯誤。node

第三步，前臺請求接口準備工做

由於端口號不一樣，會涉及到跨域，由於博主這裏是使用vue腳手架起的項目，直接在config/index.js文件中，配置了一個服務器代理。代碼以下：

proxyTable: {
      '/api': {                 //使用/api代理對3000端口服務的請求
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api'
        }
      },
    },
複製代碼

前臺使用cnpm i axios -S 安裝axios模塊，項目通常不少地方都會有請求，咱們能夠直接在main.js中將其註冊到vue實例的原型上。

import axios from 'axios'
Vue.prototype.$http = axios
複製代碼

到這裏，已經完成了全部準備工做，咱們只須要，在對應的組件內去請求接口就行了

go_login () {
      console.log(this.account)
      this.$http.post('/api/login', { 
        admin: this.account,
        password: this.password
      }).then(res => {
        console.log(res)
        if (res.data.power_id) {
          this.$global.power_limit = res.data.power_id
          this.$router.push('/home')
        } else {
          console.log('錯誤')
          this.$notify({
            message: '帳號/密碼錯誤',
            type: 'warning'
          });
        }
      }).catch(rej => {
        this.$notify({
          message: rej,
          type: 'warning'
        });
      })
    },
複製代碼