Vue2+Express+MySQL构建前后端分离项目

需要用到

前端：
Vue-cli 快速构建项目，开发前端页面
Vue-Resource 与后端交互
后端：
Node + Express 仅用于编写API给前端提供数据
MySQL 创建数据库

开始准备工作

安装Vue-Cli
http://www.jianshu.com/p/5c9b489d4103
之前已经写过关于Vue的安装，点击连接
直到npm run dev运行起来
vue2本身是基于nodeJs的，此时node也已经安装好了
Express 是基于 Node.js平台，快速、开放、极简的 web 开发框架，待会再安装相关依赖

搭建后端Express服务器

在根目录下创建server文件
1、db.js 数据库mysql连接配置
// 数据库连接配置

module.exports = {
    mysql: {
        host: 'localhost',     //mysql地址127.0.0.1
        user: 'root',     //连接mysql的用户名和密码
        password: '',
        database: 'mycake',   //数据库名
        port: '3306',   //mysql端口号
    }
}

如果以上信息不太清楚，或者还未安装mysql，请参考
http://www.jianshu.com/p/023f3a758c05
2、index.js Express 服务器入口文件

// node 后端服务器
const cakeList = require('./api/cakeList');
const addUser= require('./api/addUser');
const express = require('express');
const app = express();
// 后端api路由
app.use('/api/cake', cakeList);
app.use('/api/user', addUser);
// 监听端口
app.listen(3000);
console.log('success listen at port:3000......');

3、创建api文件夹
cakeList.js 关于cake查询所有数据的api

var models = require('../db');
var express = require('express');
var router = express.Router();
var mysql = require('mysql');
// 连接数据库
var conn = mysql.createConnection(models.mysql);
conn.connect();
// 增加cakelist接口
router.get('/cakelist', (req, res) => {
    var sql ="select * from cake";
    conn.query(sql, (err, result)=>{
        if (err) {
            console.log(err);
        }
        if (result) {
            console.log(result);
            res.json(result);
        }
    })
});
module.exports = router;

4、安装express+mysql的依赖
在根目录下

npm install express mysql  --save

注意：--save安装后并将其保存到依赖列表中，如果不保存依赖列表可以忽略不写，不写--save就是临时安装某个依赖
此时进入 server 文件夹下
执行 node index
看到 success listen at port:3000……即服务端启动成功。

编写前端vue

1、Hello.vue 页面

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    } 
  },
  created:function (){
        this.$http.get('/api/cake/cakelist')
       .then((response) => {
        console.log(response.data);
      })
    }
}
</script>

2、安装vue-resource
vue-resource相当于jquery中的ajax
只有安装vue-resource，$http.get才能生效，不然就会报错

npm install vue-resource --save

在main.js中引入vue-resource

import VueResource from 'vue-resource'
Vue.use(VueResource)

来看一下完成后的目录结构

image.png

从图上可以看出，前后端是完全分离式开发
此时还不能运行，因为服务器在3000端口上，8081端口访问不到，这样运行就会报Not Found 404错误

配置跨域

config／index.js
proxyTable参数，用来设置地址映射表

  dev: {
    env: require('./dev.env'),
    port: 8081,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://127.0.0.1:3000/api/',
        changeOrigin: true,
        pathRewrite: {
            '^/api': ''
        }
      }
    },

即请求/api时就代表‘http://localhost:3000/api/’，
注意：这里最好使用http://127.0.0.1，因为我写http://localhost也会报同样的错误
现在我们可以运行啦npm run dev，记住：之前的启动服务器千万不要关闭，再开一个终端运行