vue express mysql_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 页面

{{ msg }}

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);

})

}

}

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，记住：之前的启动服务器千万不要关闭，再开一个终端运行

image.png

这是我的结果，说明连接后端成功啦，可以继续完成更多的api和页面啦

此项目地址：https://github.com/ortion/vue2mycake