vue项目创建及利用axios跨域

最新推荐文章于 2024-08-02 00:06:36 发布
最新推荐文章于 2024-08-02 00:06:36 发布
阅读量4.5k 收藏 5
点赞数 3
分类专栏： js 文章标签： vue axios跨域
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gaoqiang1112/article/details/79726726
版权

由于有另外一篇很详细的博客 所以这篇就挑选主要和精华的操作记录 方便那些想快速学习的人看

1.先下载vue-cli     npm install -g  vue-cli      如果没有npm 请先去安装node  里面包含的npm

2.vue init webpack  myvue    创建webpack版本的项目   然后根据需求选择  我这里vue-router选择的y 后面的验证都是n

3.npm install  读取package.json 里面记录的要求的模块 然后利用工具，我用的是hbulider 去打开一下这个项目 ，然后项目结构就是这个样子

4.跑一下项目看看  在cmd的项目路径下输入  npm run dev   后看到下图，说明你的项目已经跑起来了，在地址栏输入localhost：8080看看吧

5.打开页面后  你能看到图片和一堆连接  这里 项目结构 和为什么会显示这个 请参考另一篇我的另一篇博客

6.修改路由 我们想显示自己的主页  你会发现其实页面就是app.vue里面的内容，上面的img是logo 下面的router-view是内容

7.之所以内容是一堆连接是在路由中接了第一次的请求  /  所以我们修改请求  然后自己建一个新的首页，下面是对应文件的内容和项目结构，修改后你的首页就变了

8.然后我在我们的home页面模拟一个假数据  准备做2个连接 利用路由去完成跳页

先测试一个跳会app首页的  我们进行如下编辑  在home下添加假的json数据 然后利用router-link将代码包裹 变成超链接，然后修改路由文件，根节点加入一个新的路由 去接phone的请求 然后查看页面效果  发现页面整个替换  ，依旧是单页应用 只不过一直替换app.vue文件中的router-view  （这里我在路由下的index.js里添加了mode：history，是为了让我的请求不在有/# 当然 你这么做势必最造成和后台对接的问题，记住做个404页面就行，遇到我们再截图啦）

然后我们再测试一个 在home下的嵌套页面，（啥意思？刚才是替换app.vue的东西 也就是把home都换了，现在是在home里换他自己身上的东西）请求都是从home页面送出去的 现在 我在我的router路由文件夹下的home路由下添加子路由 /user,然后在home页面添加一个router-view  那么这个子路由就会在当前home页面去寻找router-view 如果找到就显示  找不到就不出来 但却不是去替换全局的app.vue下的router-view

9.好了 路由与子路由 还有路由的跳转就完事了 当然我们有的时候路由还要传递参数  所以 我们可以利用phone那个例子传递一下参数  请求页多写部分请求  路由页用：id方式起json的key   最终页面用{{$route.params.gq}}在页面接值，或者如果想在js里面接值 就用变量接一下   jsData：this.$route.params.gq

10 接传值也搞定后  我们说说跨域取值

我利用nodejs的express框架 写了一个项目 有一个/user/userList的接口 可以返回一堆user数据  这里我们使用vue2推荐的axios去跨域请求    先下载axios 然后在main.js里引入axios  然后Vue.prototype.$ajax=axios去组装到vue上

然后在页面创建钩子函数created  调用methods里的方法  发送ajax请求  这里的请求需要做跨域处理   因为我们想自己开发前后台分离的项目   所以我从另一个ip下的端口下去取数据  配置代理的方法在后面

下图我们再config下的index.js里配置代理  其中web是我们自己起的别名  相当于用web去代替target里的地址  第二个参数表示是否开启跨域 true是开启   然后后面是要替换的地方  就是把所有/web开头的地方都弄没 然后换上target里的

到这里  我们的项目就接到了另一个项目的数据 下图的控制台 我们的data里就是另一个项目的数据  

11 利用element-ui 将数据循环  拆分组件  后面就是你项目部分了  

下载elementui   npm install  element-ui@legacy --save

然后在main.js里引入elementUi 并使用

页面循环数据 利用element

然后我们添加一个添加的方法 新建一个组件添加  addPage.vue

下面的this.$emit("user",user)是触发自己模板上的user时间 并传参给他 所以我们的user页面上要有这个事件

下面调用后 发送ajax去调用另一个项目的接口

如果你觉得我帮到你了，买个肥宅快乐水，怎么样？哈哈哈哈哈哈

gaoqiang1112
关注
专栏目录
「VUE架构」Vue2.0插件之三：使用vue-axios插件
AIGC大前端小王子
02-01 2万+
本文只要介绍vue-axios基本用法与常见的问题 一、vue-axios插件的安装 使用 npm: $ cnpm install axios 二、vue-axios插件的引用 出于页面的优雅考虑，使用vue2.0 vue-cli脚手架的代码风格去实现。 1、创建引用文件： 用ide打开项目文件，在src目录下创建文件夹axios，后在文件夹内创建index.js。...
Vue-axios
qq_67801847的博客
08-12 79
3.配置代理服务器:在vue-config-js中配置。1.安装 npm i axios。前缀配置到端口号后面。
解决 Vue 使用 Axios 进行跨域请求的方法详解
最新发布
繁依Fanyi的博客
08-02 2278
跨域请求是指浏览器从一个域向另一个域发送请求。这种请求会被浏览器的同源策略阻止，除非目标域明确允许跨域请求。不同的域名（例如从请求不同的端口（例如从请求不同的协议（例如从http请求https跨域请求问题是前后端分离开发中常见的问题，可以通过在后端配置 CORS、在开发环境中使用代理以及其他方法来解决。最优的解决方案是配置后端服务器以允许必要的跨域请求，从而保证应用的安全性和稳定性。希望本文能帮助你全面了解和解决 Vue 项目中使用 Axios 发起跨域请求时遇到的问题。
Vue axios
Auto
09-18 2614
文章目录Vue axios#0 GitHub#1 需求#2 环境#2.1 安装axios2.2 配置#3 开始#3.1 最简单的Demo#3.1 POST请求在这里插入图片描述#4 模块化处理#4.1 axios.js#4.2 api.js#4.3 开始使用20190918225302-image.png Vue axios #0 GitHub https://github.com/Coxhuan...
vue的axios
qq_51476492的博客
03-24 3605
使用vue发请求给后端，它提交表单数据的方式和jQuery的.get、.get、.get、.post类似，需要使用axios,使用post提交请求的话，参数是以application/json的方式提交给后端，控制层接受参数时，可以使用几个参数接收，如果使用对象的话必须加@Requestbody注解。 步骤： （1）安装axios依赖 npm install --save axios （2）在main.js中引入依赖（注意：修改了.js文件要重启项目） （3）发送请求 post方法的第一个参数是后端项目的
vue中的 axios
weixin_49555741的博客
06-11 772
目录1. vue 中的 ajax 请求库2. ajax 跨域问题2.1 配置代理法一：devServer.proxy2.1 配置代理法二：path: options3. 插槽3.1 默认插槽3.2 具名插槽3.3 作用域插槽发送ajax请求库的方法：vue.config.js文件配置 可以访问public 里面的全部文件 缺点：只能配置一个端口的代理；不能灵活的控制是否代理（不代理就是使用public文件夹） 优点：配置简单，请求资源时直接发给前端（8080）即可。 工作方式：若按照上述配置代
Vue 3.x+axios跨域方案的踩坑指南
10-16
跨域问题是在开发过程中不可避免的，特别是在前端使用Vue3.x框架结合axios库进行开发时。跨域请求是指前端代码试图从不同的域（协议、域名或端口）访问资源，出于安全原因，浏览器默认禁止这种行为。 在开发环境下...
在vue项目中,使用axios跨域处理
08-27
总的来说，在Vue项目中，使用axios跨域处理的关键步骤包括：正确配置`vue.config.js`中的`proxyTable`，在Vue组件中使用axios发送请求，并确保在生产环境中与后端服务器配合设置CORS策略。这样，即使API与前端应用不...
Vue.js 中 axios 跨域访问错误问题及解决方法
10-17
这篇文档详细介绍了在Vue.js项目中使用axios时遇到的跨域问题及其解决方法。 首先，跨域问题通常发生在前端应用尝试向与当前应用不在同一域名下的服务器发送请求时。同源策略是一种安全机制，它要求浏览器的脚本...
vue-axios（一）
莫莫
06-28 2494
vue-axios认识及使用Axios 简介Axios 引入方式安装 axios导入 axios使用 axios 的三种方法---GET,POST,FILEAxios 中 GET方法Axios 中 POST请求的三种方式POST的第一种----urlencoded方法POST的第二种----json数据方法POST的第三种----qs序列化Axios 中的---file方法--文件上传案例---上传文件，显示进度条通过axios 构造方法获取数据---就是直接使用axios不适用注册原型的方法Axios 配
Vue-Axios
MoYu's Blog
04-20 1503
Vue-Axios 什么是Axios Axios是一个开源的可以用在浏览器端和NodeJs的异步通信框架，她的主要作用就是实现AJAX异步通信，其功能特点如下： 从浏览器中创建XMLHttpRequests从node.js创建http请求 支持Promise API[JS中链式编程] 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换JSON数据 客户端支持防御XSRF（跨站请求伪造） GitHub：https://github.com/gxios/axios 中文文档：http://www.a
VUE axios发送跨域请求需要注意的问题
08-30
本篇文章主要介绍了VUE axios发送跨域请求需要注意的问题，在实际项目中前端使用到vue，后端使用php进行开发。前端使用axios请求请求遇到的问题，有兴趣的可以了解一下
vue-axios
qq_42433644的博客
08-18 239
// Vue 请求数据方式有：vue-resource、axios、fetchJsonp三种。其中，vue-resource 是 Vue官方提供的插件，axios 与 fetchJsonp 是第三方插件。 //第一种,vue-resource官方提供的插件 // 安装：npm install vue-resource // main.js中引入 import vue from 'vue' import vueResource from 'vue-resource' vue.use(vueResource
7.Vue+axios 天气查询应用
qq_34620296的博客
11-30 247
效果如下 代码如下 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l...
vue项目中axios跨域的问题
hello world.
11-02 2678
2017-11-06更新： 终于解决了404问题： target后面注释的接口是完整地址， pathRewrite下写重定向的地址。接着在组件内请求的地址如下： 看了网上的在config/index.js里添加proxyTable代理的方法，结果在我的测试项目里总是报404错误，最终在知乎上看到有位答主说用谷歌浏览器下载一个叫 Moesif Origin & CORS Changer 的
axios在vue中的使用
热门推荐
前端报刊
03-26 3万+
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0, name:'小明', age:20, sex:'男' }, getters: { doneTodos(state) { return state.count; }, mapName(state){ .
nginx 配置vue dist文件访问及axios跨域
05-18
要在nginx中配置vue dist文件访问，您需要将nginx配置修改为以下内容： ``` server { listen 80; server_name yourdomain.com; # 静态文件目录，这里指向vue打包后的dist目录 root /var/www/yourdomain.com/dist; # index.html作为默认页面 index index.html; # 处理静态文件的请求 location / { try_files $uri $uri/ /index.html; } } ``` 上面的代码将静态文件目录设置为`/var/www/yourdomain.com/dist`，这是您打包Vue项目后生成的dist目录。此外，我们还使用`try_files`指令来处理静态文件请求，这将使nginx尝试查找请求的文件，如果找不到，则重定向到index.html。 接下来，让我们来看看如何在nginx中配置axios跨域。 ``` server { listen 80; server_name yourdomain.com; # 静态文件目录，这里指向vue打包后的dist目录 root /var/www/yourdomain.com/dist; # index.html作为默认页面 index index.html; # 处理静态文件的请求 location / { try_files $uri $uri/ /index.html; } # 处理跨域请求 location /api/ { proxy_pass http://your.api.server; add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS, DELETE, PUT'; add_header Access-Control-Allow-Headers 'Content-Type, Authorization, Accept'; } } ``` 上面的代码将/api/路径下的所有请求代理到http://your.api.server，并添加了一些跨域响应头，包括`Access-Control-Allow-Origin`、`Access-Control-Allow-Methods`和`Access-Control-Allow-Headers`。 注意，如果您的Vue应用程序使用了Vue Router，那么您需要将router的模式设置为history模式，以便nginx正确地处理路由。您可以在Vue Router中进行如下配置： ``` const router = new VueRouter({ mode: 'history', routes: [...] }) ``` 希望这些信息能够帮助您！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值