axios的数据请求方式及跨域

  express 的三大功能:静态资源、路由、模板引擎

  app.use(express.static('www'));  只要是创建这个静态的目录,这个 www 的静态目录里面的文件就可以被访问

  数据的请求方式 axios

  get 的 请求方式   

  axios.get('url地址').then(function(success){  // 请求成功的回调函数

    console.log(success)

  }).catch(function(error){          // 请求失败的回调函数

    console.log(error)

  })

  post 的方式请求则与 get 的方式类似

  在 vue-cli 中,使用 axios 时,遇到跨域问题怎么办? 使用 proxyTable 服务代理来进行处理

    我们可以在 config 的文件中的 index.js 的配置文件中

    

    代码如下 

    module.exports = {

      dev: {

        assetsSubDirectory: 'static',

        assetsPublicPath: '/',

        proxyTable:{

          '/api':{

            target:'http://localhost:3000/',    // 当你要请求什么地址,这里改成什么地址即可

            changeOrigin:true,

            pathRewrite:{

              '^/api':''

            }

          }

        }

      }

    }

    在 vue-cli3 中 我们需要通过 vue.config.js 文件来写以上代码,之后重启服务器即可

  然后我们在使用 axios 的时候,处理跨域的写法

  

  这样我们便可以拿到后台的数据了

  还有,当我们通过 axios 来拿到后台的数据,我们在组件中的书写位置,以及在页面中的表现形式

  我们的请求数据是在 created(){} 中完成的 当我们在 created 中完成 axios 的请求操作,我们还需要在 data 中 定义一个变量 去 等于我们的 请求到的数据

  之后,我们就可以在页面中去使用 data 的变量了,这个变量就是我们请求到的数据了,但是注意:如果我们需要操作请求到的数据,我们只能在 updated(){}

  函数中完成,一定不允许在 mounted(){} 函数中 完成 操作,

  原因:

    ajax 是异步操作,而生命周期是同步操作,也就是说,我们请求完数据,说不定生命周期的一系列操作都都完了,其中包括了 mounted(){} 函数

    但是,我们在请求完数据后,一定会使用 data 对象中的属性  =  我们请求到的数据,来方便我们的操作,这就是一个数据改变的过程,所以,vue

    就会执行 beforeUpdate(){} 及 updated(){} 的函数,所以,我们在请求完数据后,还需要进行操作,就在 updated(){} 中来完成吧

    

  nodejs 中的页面的重定向

     这里的 Location 是设置的前端的路由,后端返回的东西,是没有跨域的限制的,并且需要 res.end() 

  否则,前端的页面没有响应,(301,302 都可以)

 

 

 

转载于:https://www.cnblogs.com/shangjun6/p/11310489.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/423760.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mybatis学习(41):使用逆向工程

新建一个项目,将逆向工程的生成的拷贝进来 配置文件 log4j.properties ### \u914D\u7F6E\u6839 ### log4j.rootLogger debug,console ,fileAppender,dailyRollingFile,ROLLING_FILE,MAIL,DATABASE### \u8BBE\u7F6E\u8F93\u51FAsql\u7684\u7EA7\u522B\uFF0C\u5176…

[Alg] 二叉树的非递归遍历

1. 非递归遍历二叉树算法 (使用stack) 以非递归方式对二叉树进行遍历的算法需要借助一个栈来存放访问过得节点。 (1) 前序遍历 从整棵树的根节点开始,对于任意节点V,访问节点V并将节点V入栈,并判断节点V的左子节点L是否为空。若L不为空&#…

[c++]访MSN浮出窗口的示例

【声明】严格来讲,这篇文章不属于我的原创。我在这里参考了codeproject上的国外作者的模仿MSN浮出窗口的C#代码。换句话说,可以认为我把C#代码翻译成了C代码。另外,为了简化代码,CloseButton我没有采用自己绘制,而是用…

mybatis学习(42):mybatis的一级缓存

目录结构 com.geyao.mybatis.mapper BlogMapper类 package com.geyao.mybatis.mapper;import java.util.List; import java.util.Map;import org.apache.ibatis.annotations.Param;import com.geyao.mybatis.pojo.Blog;public interface BlogMapper {Blog selectBlog(Integer…

防止ASP.NET按钮多次提交的办法

方法一<asp:Button ID"btnSumbit" runat"server" UseSubmitBehavior"false" OnClientClick"this.valueSumbit;this.disabledtrue; " Text"Sumbit" OnClick"btnSumbit_Click" /> 方法二1<html xmlns"…

mybatis学习(43):一级缓存被刷新情况

目录结构 com.geyao.mybatis.mapper BlogMapper类 package com.geyao.mybatis.mapper;import java.util.List; import java.util.Map;import org.apache.ibatis.annotations.Param;import com.geyao.mybatis.pojo.Blog;public interface BlogMapper {Blog selectBlog(Integer…

python文件读写小结

读文件 打开一个文件用open()方法(open()返回一个文件对象&#xff0c;它是可迭代的)&#xff1a; >>> f open(test.txt, r) r表示是文本文件&#xff0c;rb是二进制文件。&#xff08;这个mode参数默认值就是r&#xff09; 如果文件不存在&#xff0c;open()函数就会…

mybatis学习(44):二级缓存1

目录结构 com.geyao.mybatis.mapper BlogMapper类 package com.geyao.mybatis.mapper;import java.util.List; import java.util.Map;import org.apache.ibatis.annotations.Param;import com.geyao.mybatis.pojo.Blog;public interface BlogMapper {Blog selectBlog(Integer…

HDU6089 恐怖分子(变形线段树)

题目描述 n*m的平面内有K个不安全点&#xff0c;Q个询问位置在(x,y)的人能走到多少个点&#xff1f;从(x,y)走到(x,y)是合法的&#xff0c;当且仅当(x,y)和(x,y)之间的矩形中不包含不安全点。 题解 问题相当于平面中有若干障碍点&#xff0c;询问以某一个点为四个角之一的不包含…

mybatis学习(45):开启二级缓存

目录结构 com.geyao.mybatis.mapper BlogMapper类 package com.geyao.mybatis.mapper;import java.util.List; import java.util.Map;import org.apache.ibatis.annotations.Param;import com.geyao.mybatis.pojo.Blog;public interface BlogMapper {Blog selectBlog(Integer…

【读书笔记】重要的东西

以上摘自一本叫做《大道至简》的小册子&#xff0c;有关介绍可以参考下面的链接 http://www.china-pub.com/34356转载于:https://www.cnblogs.com/chenxizhang/archive/2008/08/11/1264917.html

七夕秀恩爱新姿势!这波操作我给十分!

一、前言 像每一滴酒回不了最初的葡萄&#xff0c;我回不到年少。爱情亦是如此&#xff0c;这就是写一篇小程序的初衷&#xff0c;用来记录我和她最美的恋爱。什么是最美恋爱&#xff1f;就是繁忙之余的一封书信&#xff0c;一起奋斗的目标&#xff0c;精彩的瞬间&#xff0c;旅…

mybatis学习(46):二级缓存被刷新的情况

目录结构 com.geyao.mybatis.mapper BlogMapper类 package com.geyao.mybatis.mapper;import java.util.List; import java.util.Map;import org.apache.ibatis.annotations.Param;import com.geyao.mybatis.pojo.Blog;public interface BlogMapper {Blog selectBlog(Integer…

python 主函数 输入

python 主函数 输入 看一段主函数调用函数的小程序&#xff1a; 1 import sys2 def Fuc():3 print hello4 5 if __name__ __main__:6 if len(sys.argv) ! 3:7 print Usage: python input_name output_name8 exit(1)9 f_input sys.argv[1] 10…

mybatis学习(47):嵌套查询--一对一

数据库 目录结构 映入jar包和junit单元测试 com.geyao.mybatis.mapper AuthorMapper类 package com.geyao.mybatis.mapper;import com.geyao.mybatis.pojo.Author; public interface AuthorMapper {Author selectAuthorById(Integer id); } BlogMapper类 package com.gey…

element-ui select

1. 组合 label <!DOCTYPE html> <html><head><meta charset"UTF-8"><!-- import CSS --><link rel"stylesheet" href"https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </head><body>…

WEBSERVICE 之WSDL

使用WSDL生成SOAP请求 转载于:https://www.cnblogs.com/canlove/archive/2008/08/18/1270099.html

mybatis学习(48):列表信息查询

数据库 目录结构 映入jar包和junit单元测试 com.geyao.mybatis.mapper AuthorMapper类 package com.geyao.mybatis.mapper;import com.geyao.mybatis.pojo.Author; public interface AuthorMapper {Author selectAuthorById(Integer id); } BlogMapper类 package com.gey…

Pycharm中运行Python代码的几种方式

Pycharm中运行Python代码的几种方式 在pycharm中的Python代码运行会出现各种奇葩的问题&#xff0c;比如&#xff0c;密码输入时不显示或没有提示&#xff0c;给我们带来一些麻烦&#xff0c;下面介绍几种代码运行的几种方式&#xff1a; 一、直接运行&#xff08;Run按钮或者快…

mybatis学习(49):嵌套查询--一对多

数据库表 数据库叫blog_gp1701 author表 数据 blog表 数据 comment表 数据 post表 数据 目录结构 jar包导入 先给对应的jar包导入 建立一个junit单元测试 配置文件 log4j.properties ### \u914D\u7F6E\u6839 ### log4j.rootLogger debug,console ,fileAppender,dailyRo…