基于 vue+vue-router+vuex+axios+koa+koa-router 本地开发全栈项目
因为毕业设计要做基于Node服务器的项目,所以我就想着用刚学的vue作为前端开发框架,vue作为Vue.js应用程序的状态管理模式+库,axios基于promise用于浏览器和node.js的http客户端,koa框架是node.js的框架,主要开发后台代码。编辑器用的是Visual Studio Code,这里就不讲如何创建vue项目了,度娘有一大堆。当然此项目的前提是本地安装了node和npm。
一、项目结构
二、安装框架
1、在front-end目录下安装如下
npm install --save vuex axios vue-router
2、在back-end目录下安装如下
npm install --save koa
三、vue-router
首先在目录 /src/router/index.js 引入vue-router和编写路由器,语法可查阅详细的文档:https://router.vuejs.org/zh/ ,代码具体如下:
四、axios
因为涉及到的接口较多,所以这里在目录 /src/utils/request.js 对axios进行封装,封装的内容如下:
五、vuex
这里也不讲语法了,详细语法看文档:https://vuex.vuejs.org/
1、在 /src/vuex/interface/admin.js 中引入刚刚所写的axios封装代码,然后统一导出接口,代码如下所示:
2、在 /src/vuex/mudules/admin.js 中写vuex代码,并导出,代码如下:
3、页面中的步骤
(1)首先引入vuex模块的方法
(2)分发action ,和store.dispatch()是一样的
(3)最后直接调用接口
注意的是要在main.js引入store,不然会报没有dispatch方法的错误,如下所示:
六、koa 和 koa-router
koa是node.js的框架,这里只写很简单的接口,接口的代码如下:
七、配置环境
1、在 /front-end/config/index.js 目录配置目标服务器的ip地址,如下所示:
还要在package.json 文件中 把inline改为host 0.0.0.0 (因为是本地的服务器),如下:
八、启动项目
可以在vs code同时开启2个cmd命令行,如下
1、前端启动vue项目
npm run dev
2、后台启动koa服务
npm start
九、效果
最后接口传过来的数据如下,perfect!