基于 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。

一、项目结构

    基于 vue+vue-router+vuex+axios+koa+koa-router 本地开发全栈项目_第1张图片

二、安装框架

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/ ,代码具体如下:

  基于 vue+vue-router+vuex+axios+koa+koa-router 本地开发全栈项目_第2张图片

四、axios

  因为涉及到的接口较多,所以这里在目录 /src/utils/request.js 对axios进行封装,封装的内容如下:

    基于 vue+vue-router+vuex+axios+koa+koa-router 本地开发全栈项目_第3张图片

五、vuex

  这里也不讲语法了,详细语法看文档:https://vuex.vuejs.org/ 

1、在 /src/vuex/interface/admin.js 中引入刚刚所写的axios封装代码,然后统一导出接口,代码如下所示:

  基于 vue+vue-router+vuex+axios+koa+koa-router 本地开发全栈项目_第4张图片

2、在 /src/vuex/mudules/admin.js 中写vuex代码,并导出,代码如下:

    基于 vue+vue-router+vuex+axios+koa+koa-router 本地开发全栈项目_第5张图片

3、页面中的步骤

(1)首先引入vuex模块的方法

  

(2)分发action ,和store.dispatch()是一样的

   

(3)最后直接调用接口

       基于 vue+vue-router+vuex+axios+koa+koa-router 本地开发全栈项目_第6张图片

  注意的是要在main.js引入store,不然会报没有dispatch方法的错误,如下所示:

  基于 vue+vue-router+vuex+axios+koa+koa-router 本地开发全栈项目_第7张图片

六、koa 和 koa-router

  koa是node.js的框架,这里只写很简单的接口,接口的代码如下:

  基于 vue+vue-router+vuex+axios+koa+koa-router 本地开发全栈项目_第8张图片

七、配置环境

1、在 /front-end/config/index.js 目录配置目标服务器的ip地址,如下所示:

    基于 vue+vue-router+vuex+axios+koa+koa-router 本地开发全栈项目_第9张图片

还要在package.json 文件中 把inline改为host 0.0.0.0 (因为是本地的服务器),如下:

    

八、启动项目

  可以在vs code同时开启2个cmd命令行,如下

  

  

1、前端启动vue项目

  npm run dev 

2、后台启动koa服务

  npm start 

九、效果

  最后接口传过来的数据如下,perfect!

基于 vue+vue-router+vuex+axios+koa+koa-router 本地开发全栈项目_第10张图片

转载于:https://www.cnblogs.com/threepigs/p/10537901.html

你可能感兴趣的:(前端,json,javascript,ViewUI)