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

2019独角兽企业重金招聘Python工程师标准>>>

随着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了  写成这样

这样就方便多了  

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

 

 

 

转载于:https://my.oschina.net/u/3198493/blog/1540510