vue+node+mysql实现先后端分离

随着node的出现大前端愈来愈火  火到能够写后端了 将来是前端的天下  哈哈哈 牛被我吹远了，下面来看下如何运用node实现先后端分离的开发 彷佛这种分离我的以为只适合小型项目 大型的还需后端的弟兄们支持那咱们来看看如何实现：

1.搭建vue框架  比较懒得人  菜鸟教程已经提供快速搭建的教程了  具体地址参看

http://www.runoob.com/vue2/vue-install.html

这样咱们就搭建一个官方的带有webpack的vue框架   

 

2.安装MySQL  具体看教程 很简单 

http://www.runoob.com/mysql/mysql-install.html安装好数据库  能够安一个数据库管理的客户端  方便连接 方便操做数据库 我用的是dbforge

3.安装node  进入node官方网站下载一个  安装好以后 在安装一个npm的包管理器

4.进入cmd 的黑窗口   mac我没有 只知道window的  mac的具体百度去吧

cd到刚才建立的vue框架的目录里 执行npm  install  此步骤是安装vue的依赖包和运行包

5.继第四步  上面安装的是前端的包  除此以外还要安装node后端相关的包

后端采用的是express4.x的框架  执行node install express --save-dev，

安装mysql驱动包  npm  install MySQL --save-dev  这样咱们就安装好后端基本的包了 下面开始编写后端代码

6.在vue的框架下 新建一个serve的文件夹  在新建一个app.js后端运行的主要入口文件

app.js的代码以下

注意 我用的是express的router做为路由 全部的路由放在一个router.js的文件里

/api的意思就是当访问/api的时候会匹配到这里method.getALL是回调函数 写在一个method的独立文件里

额 写到这里感受写反了 忘记数据库的配置   那么咱们来看下数据库的配置  首先是密码帐号 写在一个独立的文件里data.base.config.js 的文件  写在这里是为了方便管理

sql的编写 写在sql.js里

这样 以来 咱们就搭建好简单的后端服务 那么下面看看如何和前端交互

前端运行在本地的8080端口上  咱们能够看wepack 下的config文件的index.js文件 就能够知道了

后端是运行在本地的3000端口上  考虑到跨域  咱们要用webpack自带的代理访问3000端口的服务，因此如图 proxtable里能够加入代理的设置以及匹配方式  这样咱们就能够开启先后端交互了 

在vue框架里的某个界面里写一个请求 好比

而后运行vue框架 咱们会发现比没有连上去  那是由于 node服务没有运行 

因此要打开cmd 运行 node serve/app.js  

此处本人作了个优化 每次都要运行两次 一个是前端的 一个是后端的  非常麻烦 太懒 没办法能不能一次运行就能跑项目呢  因而乎找到了node 并行两个命令的方法  就是用 

concurrently

这个能够一次运行两个命令  那么咱们就能够改写package.json了  写成这样

这样就方便多了  

到此为止  先后端分离就完成了 哈哈 ，本人前端菜鸟一枚