基于 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!
基于 vue+vue-router+vuex+axios+koa+koa-router 本地开发全栈项目的更多相关文章
- Vue、Node全栈项目~面向小白的博客系统~
个人博客系统 前言 ❝ 代码质量问题轻点喷(去年才学的前端),有啥建议欢迎联系我,联系方式见最下方,感谢! 页面有啥bug也可以反馈给我,感谢! 这是一套包含前后端代码的个人博客系统,欢迎各位提出建议 ...
- vue 组件开发、vue自动化工具、axios使用与router的使用(3)
一. 组件化开发 1.1 组件[component] 在网页中实现一个功能,需要使用html定义功能的内容结构,使用css声明功能的外观样式,还要使用js定义功能的特效,因此就产生了一个功能先关的代码 ...
- 一个关于vue+mysql+express的全栈项目(三)------ 登录注册功能的实现(已经密码安全的设计)
本系列文章,主要是一个前端的视角来实现一些后端的功能,所以不会讲太多的前端东西,主要是分享做这个项目学到的一些东西,,,,, 好了闲话不多说,我们开始搭建后端服务,这里我们采用node的express ...
- 基于vue2.0 +vuex+ element-ui后台管理系统:包括本地开发调试详细步骤
效果演示地址, github地址: demo演示: 1.About 此项目是 vue2.0 + element-ui + node+mongodb 构建的后台管理系统,所有的数据都是从 ...
- 一个关于vue+mysql+express的全栈项目(五)------ 实时聊天部分socket.io
一.基于web端的实时通讯,我们都知道有websocket,为了快速开发,本项目我们采用socket.io(客户端使用socket.io-client) Socket.io是一个WebSocket库, ...
- 一个关于vue+mysql+express的全栈项目(二)------ 前端构建
一.使用vue-cli脚手架构建 <!-- 全局安装vue-cli --> npm install -g vue-cli <!-- 设置vue webpack模板 --> vu ...
- 全栈项目|小书架|服务器开发-Koa全局路由实现
什么是路由 路由就是具体的访问路径,指向特定的功能模块.一个api接口是由ip(域名)+端口号+路径组成,例如 :https://www.npmjs.com/package/koa-router就是一 ...
- 一个关于vue+mysql+express的全栈项目(四)------ sequelize中部分解释
一.模型的引入 引入db.js const sequelize = require('./db') sequelize本身就是一个对象,他提供了众多的方法, const account = seque ...
- vue开发东京买菜,全栈项目,前端django,带手机GPS精准定位,带发票系统,带快递系统,带微信/支付宝/花呗/银行卡支付/带手机号一键登陆,等等
因为博客园不能发视频,所以,完整的视频,开发文档,源码,请向博主索取 完整视频+开发文档+源码,duanshuiLu.com下载 vue+django手机购物商城APP,带支付,带GPS精准定位用户, ...
随机推荐
- JavaScript原生秒表、计时器
可以开始.暂停.清除. 效果图: 下面贴代码: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- FineUIPro v3.5.0发布了,减少 90% 的上行数据量,15行代码全搞定!
一切为客户着想 一切的一切还得从和一位台湾客户的沟通说起: 客户提到将ViewState保存在服务器端以减少上行数据量,从而加快页面的回发速度. 但是在FineUI中,控件状态都保存在FState中, ...
- Python 学习 第十三篇:数据的读写-文件、DataFrame、json
Python的文件是一个重要的对象,使用open()函数来打开文件,创建文件对象,进行文件的读写操作.当数据用于交换信息时,通常需要把数据保存为有格式的文本数据,可以保存为有特定的行分隔符和列分隔符的 ...
- 剑指offer 第十一天
46.扑克牌顺子 LL今天心情特别好,因为他去买了一副扑克牌,发现里面居然有2个大王,2个小王(一副牌原本是54张^_^)...他随机从中抽出了5张牌,想测测自己的手气,看看能不能抽到顺子,如果抽到的 ...
- 模块的语法 import ,from...import....
------------------------积极的人在每一次忧患中都看到一个机会, 而消极的人则在每个机会都看到某种忧患 1. 认识模块 模块可以认为是一个py文件. 模块实际上是我们的py文件运 ...
- Linux进程与线程的区别
进程与线程的区别,早已经成为了经典问题.自线程概念诞生起,关于这个问题的讨论就没有停止过.无论是初级程序员,还是资深专家,都应该考虑过这个问题,只是层次角度不同罢了.一般程序员而言,搞清楚二者的概念, ...
- 聊一聊跨域,Vue向Django请求数据的一些问题
1.做前后端分离 前端使用Vue程序,后端使用Django配合rest-framework. 那么前端Vue通过API接口拿到数据会出现跨域的问题,JSONP只是在get中会用到的,所以这里使用cor ...
- beego 自定义控制器与路由
框架浅析 这是之前使用bee创建的webapp目录层级结构: ├── conf 配置文件 │ └── app.conf ├── controllers 控制器 │ └── default.go ├── ...
- PHP中stdClass的意义
在WordPress中很多地方使用stdClass来定义一个对象(而通常是用数组的方式),然后使用get_object_vars来把定义的对象『转换』成数组. 如下代码所示: 1 2 3 4 5 ...
- lumen 5.6 设置APP_KEY为32位长的随机字符串
在 App\Console\Commands下 添加以下内容的KeyGenerateCommand.php文件 <?php namespace App\Console\Commands; use ...