vue - axios - koa2从前端都后台走通

最新推荐文章于 2023-05-30 15:17:55 发布
最新推荐文章于 2023-05-30 15:17:55 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： 框架技术 前端后台项目整合 vue axios koa2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41934908/article/details/106496563
版权
本文介绍了如何使用 Vue 脚手架、axios 和 Koa2 搭建前后端交互的基础。前端通过 npm 安装 vue、vue-router 和 axios，配置 axios 处理跨域请求。后端利用 Koa 搭建服务器，安装并使用 koa-router 和 koa-bodyparser 处理前端请求。通过示例详细说明了 GET 和 POST 请求的处理过程。
摘要由CSDN通过智能技术生成

前端准备

  • npm 安装 vue（我是用的脚手架，这还是方便的）
  • vue -router 安装前端路由

前端路由是用在前端页面需要跳转，并且不需要想服务器请求数据。

  • npm 安装 axios

axios 的作用是解决跨域请求资源问题，我们的项目是运行在本地的 8080 端口，而后台项目是运行在本地的 3000端口，所以你 vue 想要去拿到 koa 的数据， 你就肯定会跨域

在项目的入口文件 main.js 中引入
在这里插入图片描述
第二行是 vue 的配置，和 axios 没什么关系
第三行是配置 axios 的前缀，就是你每次请求都会给你加上这个前缀
第四行是全局配置 axios 为了方便使用，能够让你在其他的 vue 文件中能用到 axios

在这里插入图片描述
如这段代码，this.$router.push 就是前端路由跳转

this.$http.get(’/geta’)…这就是上边配置 axios 的作用了

this.$http 就是我们的 axios ，请求路径是 ‘/geta’，相当于你请求的路径是

http://localhot: 3000/geta

后台准备

    最低0.47元/天 解锁文章
    靳公子
    关注
    专栏目录
    koa2实现小程序和app后端
    09-26
    这个是用koa2 实现的 小程序和app 的后端。 其中封装了，包括了安全验证，操作redis和mysql 的方法。 github地址：https://github.com/lizhilicctv/node_wechat 码云地址：https://gitee.com/lizhiliwo/node_wechat 现在还存在的问题，一，更好的封装数据库操作。二，图片的上传的处理 使用方法 git 下载下来 npm install 安装依赖 有问题可以一起学习，lizhilimaster@163.com
    koa2后端和php后端,# 基于koa2的前后端管理系统
    weixin_39867893的博客
    03-17 147
    koa2koa2框架，mongodb作为数据库，Es6/7语法编写，babel编译ES语法。增加ts语法支持，进行ing系统目前包含 文章发布管理系统、标签系统、评论系统、用户系统，四大模块技术栈使用koa+mongoose 开发;使用koa2.0作为开发框架mongoose作为数据库，保存数据使用jwt进行token的生成和校验通过Es6语法进行项目编写文件结构采用MC拆分babel-regis...
    koa2后端和php后端,Node.js+Koa框架实现前后端交互
    weixin_34123811的博客
    03-17 607
    前言对于一个前端工程师来说不仅仅要会前端的内容，后端的技术也需要熟练掌握。今天我就要通过一个案例来描述一下前端是如何和后端进行数据交互的。koa 是由 Express 原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架。使用 koa 编写 web 应用，通过组合不同的 generator，可以免除重复繁琐的回调函数嵌套，并极大地提升错误处理的效率。koa 不在内核方法中绑定任...
    node-koa2-axios:实现axios请求数据
    04-28
    node-koa2-axios 实现axios请求数据 本版本主要实现的有： 将路由文件单独分开--- index页面由多个子页面构成-----使用axios请求url获得数据，并将数据渲染到页面 ----增加内存缓存处理（减少页面的请求，加快请求速度） 运行程序：node server
    koa2 实现的 小程序和app 的后端
    两个人的幸福online
    09-26 522
    这个是用koa2 实现的 小程序和app 的后端。 其中封装了，包括了安全验证，操作redis和mysql 的方法。 github地址：https://github.com/lizhilicctv/node_wechat 码云地址：https://gitee.com/lizhiliwo/node_wechat 现在还存在的问题，一，更好的封装数据库操作。二，图片的上传的处理 使用方法 git...
    vue-axios的使用及其中get与post网络请求
    06-23
    import VueAxios from 'vue-axios' Vue.use(VueAxios, axios) ``` 现在，Vue-axios 已经集成到你的 Vue 实例中，你可以在任何组件中通过 `this.$axios` 调用它。 对于 GET 和 POST 请求，Vue-axios 提供了直观的...
    基于Vue+Vue-Router+Vuex+Element-ui+axios，高仿小米商城，实现的电商项目
    06-15
    本项目前后端分离，前端基于Vue+Vue-router+Vuex+Element-ui+Axios，参考小米商城实现。后端基于Node.js(Koa框架)+Mysql实现。前端包含了11个页面：首页、登录、注册、全部商品、商品详情页、关于我们、我的收藏、...
    基于vue+vue-router+vuex+element-ui+axios，参考小米商城，实现的电商项目，仿小米商城源代码
    最新发布
    03-23
    本项目前后端分离，前端基于`Vue`+`Vue-router`+`Vuex`+`Element-ui`+`Axios`，参考小米商城实现。后端基于`Node.js(Koa框架)`+`Mysql`实现。 前端包含了11个页面：首页、登录、注册、全部商品、商品详情页、关于...
    基于Vue+Vue-router+Vuex+Element-ui+Axios商城
    06-27
    本项目前后端分离，前端基于Vue+Vue-router+Vuex+Element-ui+Axios，参考小米商城实现。后端基于Node.js(Koa框架)+Mysql实现。 前端包含了11个页面：首页、登录、注册、全部商品、商品详情页、关于我们、我的收藏、...
    前端vue后端koa数据库采用的mysql开发完整的前后端项目
    08-09
    前端vue 后端koa，数据库采用的mysql，开发完整的前后端项目
    前后端数据交互(五)——什么是 axios？
    前端人的博客
    09-09 2758
    一、什么是 axios ? axios是基于 Promise 的 ajax 封装库，也是前端目前最流行的 ajax 请求库。简单地说发送 get、post 请求，是一个轻量级的库，使用时可直接引入。 二、axios 的特点 异步的 ajax 请求库。 在浏览器端和 node 端都可以使用。 支持 Promise API。 支持请求和响应拦截。 响应数据自动转换 JSON 数据。 支持请求取消。 可以批量发送多个请求。 客户端支持安全保护，免受 XSRF 攻击。 三、axios API
    vue2 通过 axios  访问koa2,从mysql 拿到数据更新vue2中的内容
    fyinthesky的专栏
    01-29 490
    vue2 通过 axios  访问koa2,从mysql 拿到数据更新vue2中的内容 axios 类似ajax   注意红色字体 node --inspect index.js （启用debug模式） node index.js （正常模式） ------index.js---- const Koa = require('koa')  const app = new Koa() co...
    从axios看前后端数据交互
    热门推荐
    遛狗的代码的博客
    10-28 1万+
    axios作为Vue生态系统中浓墨重彩的一笔，我学习这个东西也是花了一定的时间的。刚开始的时候，也是遇到了很多问题。 逐渐摸透了它的脾气。 首先说说FormData和Payload两种数据格式的区别： 先是提交一个FormData的请求试试看： 然后我们看后端： 然后我们提交一个以Payload传输数据的请求： 我们再切到后台： 这就是使用axios和
    koa2后端和php后端,koa2搭建的后端api项目，能否向前端那样用webpack进行build
    weixin_39520353的博客
    03-17 165
    // webpack.config.jsconst path = require('path')const webpack = require('webpack')const _externals = require('externals-dependencies')module.exports = {mode: 'production',devtool: 'source-map',cache: ...
    前后端交互系列之Axios详解（包括拦截器）
    zxdznyy的博客
    04-12 2910
    Axios是前端最流行的交互工具。所以本节内容将对Axios进行详细讲解。本节内容需要由Ajax的基础及Promise的基础。前端后端交互系列之原生Ajax的使用前后端交互系列之promise详解浅析axios原理与使用（包括axios的优雅写法与res的解构赋值）Axios是用于前后端交互的一种工具。其特点：发送Ajax请求、在nodejs中发送http请求、支持promise的相关操作、自动将结果转化为JSON数据、保护数据安全等等。下面就开始正式学习。
    Axios前后端异步请求库 后端人员这一篇就够了 从0-0.5的知识掌握~
    Alascanfu的博客
    01-29 1696
    本篇内容：Axios前后端异步请求库 后端人员这一篇就够了~ 文章专栏：前端知识（后端需掌握知识点） 最近更新：2022年1月29日 Axios前后端异步请求库 后端人员这一篇就够了~ 个人简介：一只二本院校在读的大三程序猿，本着注重基础，打卡算法，分享技术作为个人的经验总结性的博文博主，虽然可能有时会犯懒，但是还是会坚持下去的，如果你很喜欢博文的话，建议看下面一行~（疯狂暗示QwQ） 点赞 收藏 ⭐留言一键三连 关爱程序猿，从你我做起
    大前端之Koa2学习
    qq_34185872的博客
    05-30 2272
    Koa2是一个基于Node.js的Web框架，它使用了ES6的语法和async/await特性，使得编写异步代码更加简单和优雅。Koa2的核心思想是中间件，它允许开发者将应用程序拆分成小的、可重用的部分，从而使得代码更加模块化和易于维护。Koa2还提供了一些常用的中间件，如路由、静态文件服务、错误处理等，使得开发者可以更加快速地构建Web应用程序。总的来说，Koa2是一个轻量级、灵活、易于扩展的Web框架，适合用于构建中小型的Web应用程序。
    Vue + Koa2 写一个前后端分离的 动态“helloworld”
    lynnhgwang的博客
    06-27 828
    文章目录一、环境准备二、前端搭建三、后端搭建 记录自己用Vue 和 Koa2 框架实现前后端的demo。 一、环境准备 我的Node 和 NPM版本： C:\Users\lynnh>node -v v16.4.0 C:\Users\lynnh>npm -v 7.18.1 二、前端搭建 借助 vue-cli 4.0以上版本快速搭建前端Vue 环境。 先卸载老的vue-cli版本（指4.0以下） 若没有老的版本，此步骤可跳过。 npm install -g vue-cli 安装新版本
    评论 4
    添加红包

    请填写红包祝福语或标题

    个

    红包个数最小为10个

    元

    红包金额最低5元

    当前余额3.43元 前往充值 >
    需支付：10.00元
    成就一亿技术人!
    领取后你会自动成为博主和红包主的粉丝 规则
    hope_wisdom
    发出的红包
    实付元
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明：

    1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
    2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

    余额充值