Vue连接MySql数据库

一、vue-cli2

1. 全局安装

npm install vue-cli -g

1. 局部安装项目

vue init webpack 项目名称

例如：vue init webpack demo1

二、express-generator

1.全局安装

npm install express-generator -g

2.express --view=ejs 项目名称

例如：express --view =ejs server

3.安装数据库

npm install mysql

三、server部署步骤

注意：先下载mysql，开启

【1.进入前端目录根目录安装server】

【2.创建db文件夹-> 创建sql.js】

var mysql   =  require('mysql')
// 连接数据库
var connection = mysql.createConnection({
    host: 'localhost',
    user: 'miao',
    password: 'miao',
    database: 'myemployees'
})


module.exports = connection;

【3.server->routes->index.js】

var express = require('express');
var router = express.Router();
var connection = require('../db/sql.js')


router.get('/api/userInfo', function(req, res, next) {
   connection.query("select * from departments",function(error,results,fields){
     console.log(results)
     res.json(results)
   })
});


router.get('/api/info', function(req, res, next) {
  res.json(
      [
        {
          name:"小明",
          age:20,
          address:'北京'
        },
        {
          name:"小敏",
          age:23,
          address:'上海'
        }
      ]
    );
});


module.exports = route

四、前端vue部署步骤

跨域需改代理

【1.该代理：vue前端目录->config->index.js】

// 代理
    proxyTable: {
      '/api': {
        target: 'http://localhost:3000',  // 目标地址
        changeOrigin:true, // 是否跨域 默认false
        PathRewrite: {   // 重写路径
          '^/api': ''   // 此处为问题原因，正确写法应为：   '^/api': '/api'
        }
      }
    },

【2.安装axios】

cnpm i axios -v
[main.js全局引用]
import axios from 'axios'
Vue.prototype.$axios =axios // 全局注册，使用方法为：this.$axios

【3.组件引用】

 mounted(){
    this.$axios.get('/api/userInfo').then ((res) => {
      console.log(res)
    })
  }