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

作项目的时候会不会由于没有数据而烦恼？没有后端给接口而感到举步维艰？接下来，这些都不是问题，咱们全均可以本身作。

第一步 搭建本身的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…

app.use(bodyParser.urlencoded({     //使用body-parser中间件
  extended: false
}))
app.use(bodyParser.json())
复制代码

接下来，只要在server文件夹下，启动一个命令行，输入node index。这样一个简单的node服务就启动起来了。

第二步，建立一个接口，用来给前台来请求，下降难度，这里不使用路由，后续再说

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，这是一个简单的登陆验证的接口，会根据前台请求的数据判断数据库是否有对应的数据，若是有会返回一个权限等级，没有会提示帐号/密码错误。

第三步，前台请求接口准备工做

由于端口号不一样，会涉及到跨域，由于博主这里是使用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'
        });
      })
    },
复制代码

如何请求接口对你们都是小意思了，这里就再也不赘述。 好了，到这里，恭喜你，已经迈出了前端全栈的第一步了

Navicat破解版：连接：pan.baidu.com/s/1vaHpaa4l… 提取码：h6zt 复制这段内容后打开百度网盘手机App，操做更方便哦

mysql：连接：pan.baidu.com/s/1TTp6vo-P… 提取码：ptmy 复制这段内容后打开百度网盘手机App，操做更方便哦