教程系列之：前端全栈入门，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，操作更方便哦

转载于:https://juejin.im/post/5cc6b604f265da039955e7c5