Vue MySQL Express小demo

1.用vue-cli脚手架工具创建一个基于webpack的Vue项目

前提：安装node环境

首先全局安装： npm install -g vue-cli,然后创建一个项目文件夹，进入项目目录执行：vue init webpack my-project(my-project是项目名)。安装完成之后可以执行 npm install 安装依赖，执行 npm run dev进行开发时调试。

安装 vue-resource依赖,一种安装方式先在package.json中对应地方添加，然后执行npm install

"dependencies": {
    "vue": "^2.1.0",
    "vue-router": "^2.0.3",
    "vue-resource": "^1.0.3"
  },

main.js

import VueResource from 'vue-resource'

Vue.use(VueResource)

2.添加Express服务端目录。

前提：电脑安装mysql数据库

在项目根文件夹下创建一个server文件夹。然后里面创建app.js

const express = require('express');
const http=require('http');
const mysql = require('mysql');
const pool = mysql.createPool({
    connectionLimit: 10,
    host: '127.0.0.1',
    user: 'root',
    password: '',
    database: 'blog'
});
const app=express();
http.createServer(app).listen(8000,"127.0.0.1");
console.log("success in listen(8000,\"127.0.0.1\")")

// app.use(express.static("public"));
// app.get("/", function (req,res) {
//     res.sendFile(__dirname+"/public/index.html")
// });
app.get("/getUser", function (req,res) {
    pool.getConnection(function (err, connection) {
        // Use the connection
        connection.query('SELECT * FROM user', function (error, results, fields) {
            // And done with the connection.
            res.json(results);
            connection.release();
            // Handle error after the release.
            if (error) throw error;
            // Don't use the connection here, it has been returned to the pool.
        });
    });
});

此时在server文件夹下执行node index（这里也可以加载package.json中，然后使用npm执行）看到success in listen(8000,\"127.0.0.1\")

即服务端启动成功。

3.编写vue测试文件

由于这里只是为了测试，所以直接在vue-cli生成的Hello.vue中编写即可。

<template>
  <div class="hello">
    <h1 class="am-text-center">获取blog中用户登录信息</h1>
    <div class="am-container">
      <table class="am-table am-table-bordered am-table-hover am-table-striped">
        <thead>
        <tr class="am-success ">
          <th class="am-text-center">用户名</th>
          <th class="am-text-center">密码</th>
          <th class="am-text-center">昵称</th>
        </tr>
        </thead>
        <tbody class="am-text-center">

        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
  import $ from 'jquery'
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted (){
    this.getUser()
  },
  methods:{
    getUser (){
//      this.$http.get('/getUser')
//        .then((res)=>{
//        console.log(res)
//        },(err)=>{
//        console.log('err')
//        })
      $.ajax({
        url:"/getUser",
        type:"get",
        success: function (data,xhr) {
          console.log(xhr)
          console.log(data)
        }
      });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

4.设置代理与跨域

打开config文件夹下的index.js,配置proxyTable：

proxyTable: {
  '/getUser': {
    target: 'http://127.0.0.1:8000/getUser',
    changeOrigin: true,
    pathRewrite: {
      '^/getUser': ''
    }
  }

即请求/getUser时就代表http://127.0.0.1:8000/getUser(这里要写ip，不要写localhost)，changeOrigin参数接收一个布尔值，如果为true，这样就不会有跨域问题了。

好了，到这里，基本上完成了，可以去添加一个数据试试了。

最终项目目录结构

|-- build
|-- config
|-- node_modules
|-- server
  |-- app.js
|-- src
  |-- assets
  |-- components
    |-- Hello.vue
  |-- App.vue
|-- static
|-- .babelrc
|-- .editorconfig
|-- .gitignore
|-- index.html
|-- package.json