vue-cli+node搭建简单的增删改查

vue-cli+node搭建简单的增删改查

首先先声明一下，本人对vue并不是很熟悉，尚且在学习中，由于特别好奇vue这个框架是怎么和后端进行数据交互的，所以我查询了很多资料去搭建，这里只能把我知道的记录一下，至于细节，我也尚在研究。首先呢vue前端框架和后端进行数据交互少不了webpack这个东西，webpack如果想了解，就直接去官网吧！这里我不多说，因为我了解的也不够深刻，怕误导别人和自己。现在开始记录vue-cli+node是如何进行增删改查的吧！

1. 第一步配置node环境，没有配置好的请看这里：https://blog.csdn.net/wenxiukeke/article/details/87916809

2. 第二步搭建vue-cli，打开cmd，输入命令npm install -g vue-cli，这是全局安装vue-cli，安装完毕后，创建一个文件夹，cmd进入该文件夹，输入命令vue init webpack test，（里面需要输入yes和no，自己去找一篇完整的文章看自己是否yes或者no吧）然后就成功的创建了一个项目名为test的vue-cli项目。

3. 第三步在vue-cli的基础上，改动三个文件夹，这里我先截图说明一下需要改动哪三个，

4. ok，上面不仅展示了需要在vue-cli默认的哪三个文件上面操作，同时还可以看出多了一个VueResource，这里安装好这个插件吧，打开cmd进入vue-cli这个项目中，输入命令npm install --save vue-resource，然后打开package.json，安装成功是这样：

5. 好，默认安装插件成功，下面我按顺序截图展示需要修改哪些文件：

6. 这里主要去百度一下proxyTable这个东西，高大上的跨域问题，（小白请看）在这里简单的展示了一下：

7. 下面我主要声明了一个show方法，然后在data这里声明了一个test对象，将show这个方法中获得数据放在了test这个对象中，这个this.$http.get，必须要在创建vue-resource这个插件完之后，才能使用，否则会报错

8. ok，前端操作已经完毕，想必看到这里，后面两张图可以看出来，配置好端口之后前端只需要调用后端提供的接口就可以了。（先不要运行前端，后端完成后一起运行）

9. 好了然后就创建一个nodejs的服务端吧，打开cmd，创建一个文件夹，输入命令npm init，然后生成一个package.json文件。

10. 创建一个express模块，输入命令npm install express --save ，创建一个mysql模块，输入命令npm install mysql --save

11. 好了然后截图看我的目录结构吧：

12. app.js这个是我测试用的，可不看，supervisor这个模块可不看，我是用npm install supervisor --save安装的（小白请不要直接在里面打supervisor）这两个东西可忽略不看，不影响项目的使用。

13. 下面直接截图展示cakeList.js和db.js和index.js这三个文件：（前提是数据库安装完毕，创建一个vue-admin数据库，接着创建一个cake表，字段cakeId，cname，meterial，price）

14. 

15. 

16. ok,代码搬砖完毕，接着打开cmd，进入后端node项目下的server这个文件中，输入命令node index，成功显示：

17. 不要关闭这个窗口，重新打开一个窗口，进入前端项目中，输入命令npm run dev，显示：

18. 然后在浏览器输入localhost：8080，就能运行了。然后点击按钮成功显示数据：

19. 好了，成功了，这只是了解一下大概流程，作为一个记录，里面很多具体的vue细节的东西呀，webpack的东西，本人还不是很了解，只是大概知道一下前后端是怎么进行数据分离的。