精华内容
下载资源
问答
  • 本文所用vue-cli是3.0版本的,所以首先需要创建一个vue.config.js文件,然后配置axios,就可以请求接口获取数据了。 1.main.js文件中: import axios from 'axios' Vue.prototype.$axios = axios axios.defaults...

    本文所用vue-cli是3.0版本的,所以首先需要创建一个vue.config.js文件,然后配置axios,就可以请求接口获取数据了。
    一 简单实现前端调用后端接口:
    1.main.js文件中:

    import axios from 'axios'
     
    Vue.prototype.$axios = axios
     
    axios.defaults.baseURL = '请求地址';//后端开发环境地址
    axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';//配置请求头信息。
    //axios.defaults.headers.common['accessToken'] = 'FA4C308D5E8F6409E01344ADDAEB4C71';
    

    2.vue.config.js文件完整代码

    module.exports = {
      /* 部署生产环境和开发环境下的URL:可对当前环境进行区分,baseUrl 从 Vue CLI 3.3 起已弃用,要使用publicPath */
      /* baseUrl: process.env.NODE_ENV === 'production' ? './' : '/' */
      publicPath: process.env.NODE_ENV === 'production' ? '/public/' : './',
      /* 输出文件目录:在npm run build时,生成文件的目录名称 */
      outputDir: 'dist',
      /* 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 */
      assetsDir: "assets",
      /* 是否在构建生产包时生成 sourceMap 文件,false将提高构建速度 */
      productionSourceMap: false,
      /* 默认情况下,生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存,你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变) */
      filenameHashing: false,
      /* 代码保存时进行eslint检测 */
      lintOnSave: true,
      /* webpack-dev-server 相关配置 */
      devServer: {
        /* 自动打开浏览器 */
        open: false,
        /* 设置为0.0.0.0则所有的地址均能访问 */
        host: '0.0.0.0',
        port: 9528,
        https: false,
        hotOnly: false,
        /* 使用代理 */
        proxy: {
          '/api': {
            target: '请求地址',
            secure: false,  // 如果是https接口,需要配置这个参数
            ws: true,//是否代理websockets
            changeOrigin: true,
            pathRewrite: {
              '^/api': ''
            }
          }
        }
      },
    }
    

    3.在login.vue中使用

    this.$axios({
            method: "post",
            url: "/user/login",
            contentType: "application/json;chart=utf-8",
            dataType: "json",
            data,
          }).then((res) => {
            if (res.data.status === "1") {
              this.$Message.info("登录成功!");
              this.logining = false;
              window.sessionStorage.setItem("userSession", res.data.data.id);
              window.sessionStorage.setItem("userName", res.data.data.userName);
              this.$router.push({ path: "/open/default" });
            } else {
              this.$Message.info("登录失败!");
              this.logining = false;
              this.modelLogin.password = "";
            }
          });
    

    以上 即可实现前端调用后端接口。

    二 实现拦截器和路由登录拦截功能
    以下为进阶版,将所有的接口调用放在一个user.js文件中(该文件处于http文件夹下)以后其他接口均可放在里面:

    import axios from '../interceptors.js'
    
    // 登录
    export const login = (data) => {
      return axios({
        url: '/user/login',
        method: 'post',
        data
      })
    }
    
    // 查看用户有没有登录
    export const getSession = (data) => {
        return axios({
          url: '/user/getSession',
          method: 'post',
          data
        })
      }
    

    Vue+axios(interceptors) 实现http拦截 + router路由拦截 (双拦截)!!!(论文中可写,可见https://www.jianshu.com/p/115b4c79a75d)
    首先建文件夹http 文件夹下简历一个文件interceptors.js:

    /*拦截器*/
    import axios from 'axios'
    import Vue from 'vue'
    
    import {
      Message,
      LoadingBar
    } from 'view-design'
    
    Vue.prototype.HOST = '/api'
    // Vue.prototype.$http = axios
    Vue.prototype.$axios = axios
    axios.defaults.baseURL = 'http://localhost:8080/c';//后端开发环境地址
    axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';//配置请求头信息
    
    // 超时时间
    axios.defaults.timeout = 12000
    // http请求拦截器
    axios.interceptors.request.use(config => {
      LoadingBar.start();
      return config
    }, error => {
      LoadingBar.error();
      Message.error({
        message: '加载超时'
      })
      return Promise.reject(error)
    })
    // http响应拦截器
    axios.interceptors.response.use(data => { // 响应成功关闭loading
      LoadingBar.finish();
      return data
    }, error => {
      LoadingBar.error();
      Message.error({
        message: '加载失败'
      })
      return Promise.reject(error)
    })
    
    export default axios
    

    main.js文件不需要再引入axios了。(以上初级版是在main.js中引入的)
    在需要使用接口的vue文件中如此用:

    import { login } from '../http/api/user'
    login()
     {
       const { userName, password } = this.modelLogin;
          if (!userName) {
            this.$Message.info("用户名不能为空");
            return;
          }
          if (!password) {
            this.$Message.info("密码不能为空");
            return;
          }
          this.clearLocalStorage();
          this.logining = true;
          let data = {
            userName: this.modelLogin.userName,
            password: this.modelLogin.password,
          };
          login(data).then(res => {
              if (res.data.status === "1") {
                this.$Message.info("登录成功!");
                this.logining = false;
                window.localStorage.setItem("userSession", res.data.data.id);
                window.localStorage.setItem("userName", res.data.data.userName);
                this.$router.push({ path: "/open/default" });
              } else {
                this.$Message.info("登录失败!");
                this.logining = false;
                this.modelLogin.password = "";
              }
            })
            .catch(() => {
              this.logining = false;
            })
     }
    

    登录路由拦截功能(某些页面需登录才可以看):
    router文件夹下的index.js文件中:

    import Vue from 'vue'
    import Router from 'vue-router'
    import Home from '../components/Home.vue'
    import Login from '../components/Login.vue'
    Vue.use(Router)
    
    const router = new Router({
      routes: [{
          path: '/',
          meta: {
            requireAuth: false, // 添加该字段,为true表示进入这个路由是需要登录的
          },
          component: Home,
          redirect: '/open/default'
        },
        {
          path: '/open/default', //到时候地址栏会显示的路径
          meta: {
            requireAuth: true, // 添加该字段,为true表示进入这个路由是需要登录的
          },
          name: 'Home',
          component: Home // Home是组件的名字,这个路由对应跳转到的组件。。注意component没有加“s”.
        },
        {
          path: '/open/Login',
          meta: {
            requireAuth: false,
          },
          name: 'Login',
          component: Login
        }
      ],
      mode: "hash"
    })
    
    router.beforeEach((to, from, next) => {
      if (to.meta.requireAuth) { // 判断是否需要登录权限
        if (localStorage.getItem('userSession')) { // 判断是否登录
          next()
        } else { // 没登录则跳转到登录界面
          next({
            path: '/open/Login',
            query: {
              redirect: to.fullPath
            }
          })
        }
      } else {
        next()
      }
    })
    
    export default router
    
    

    以上即可实现路由登录检查;

    三 解决 Vue 重复点击相同路由,出现 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation 问题
    只需要在以上router文件夹的index.js中增加:

    const VueRouterPush = Router.prototype.push
    Router.prototype.push = function push (to) {
      return VueRouterPush.call(this, to).catch(err => err)
    }
     
    
    展开全文
  • 文章目录前言一、axios的安装二、使用axios封装工具类utils/request.js三、在api.js中调用工具类请求接口数据四、将所有结构挂载到$api对象上五、 在页面中调用 前言 Axios 是一个基于 promise 的 HTTP 库,可以...


    前言

    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
    它的主要特性包括:

    1. 从浏览器中创建 XMLHttpRequests
    2. 从 node.js 创建 http 请求
    3. 支持 Promise API
    4. 拦截请求和响应
    5. 转换请求数据和响应数据
    6. 取消请求
    7. 自动转换 JSON 数据
    8. 客户端支持防御 XSRF

    一、axios的安装

    使用 npm:
    $ npm install axios
    使用 cdn:
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    二、使用axios封装工具类utils/request.js

    1. 在项目的src->utils新建request.js
    2. 在request.js文件中添加
      import axios from 'axios'
      import 其他需要的
      // import { Message, Notification, Loading } from 'element-ui'
      // import store from '@/store'
      // import { getToken } from '@/utils/auth'
      
      // 创建axios实例
      const service = axios.create({
      	// baseURL将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。
      	baseURL: '',  // url = base url + request url 
      	headers: '', // 请求头
      	data: {}, //参数
      	...
      	})
      // 添加请求拦截器
      service.interceptors.request.use(
      	config => {
      	   // 在发出请求前做点什么
      	   ...
      	   return config
      	},
      	error => {
      	   // 处理请求错误
      	   console.log(error) // for debug
      	})
      // 添加响应拦截器.
      
      service.interceptors.response.use(
      	response => {
      	// 对响应数据做点什么
      		console.log(response);	 
      	},
      	error => {
      	// 对响应错误做点什么
      		return Promise.reject(error);
      	})	
      

    三、在api.js中调用工具类请求接口数据

    1. 在项目的src->api新建api.js
    2. 在api.js文件中添加
    	import request form '@/utils/request'	
    	//获取xx数据列表
    	//1.get方法
    	export function 函数名(params){
    		return request({
    			url:'',
    			method:'get',
    			params
    		})
    	}
    	//2.post方法
    	export function 函数名(data){
    		return request({
    			url:'',
    			method:'post',
    			data
    		})
    	}
    	//导出方法
    	exoprt default{
    		函数名
    	}
    

    四、将所有结构挂载到$api对象上

    1. 在项目的src->api新建index.js
    2. 在index.js文件中添加
    // 导入所有接口
    	import apiList from './api'
    	const install = Vue => {
    	  if (install.installed) {
    	    return
    	  }
    	  install.installed = true
    	Object.defineProperties(Vue.prototype, {
    	   // 注意哦,此处挂载在 Vue 原型的 $api 对象上
    	   $api: {
    	     get() {
    	       return apiList
    	    }
    	  },
    	 })
    	}
    	export default install
    

    五、 在页面中调用

    	函数名(){
    		this.$api.(api.js中对应的函数名)({
    			传入参数
    		})
    		.then((re) => {
    			this.xxxdata = re.Result;
    		})
    		.catch(() => {});
    	}
    	// this.xxxdata中即保存了接口数据	
    
    展开全文
  • vue项目使用axios请求后端数据

    千次阅读 2019-04-02 21:23:33
    项目使用到的向后端请求和提交数据的方式,axios请求; 在使用axios时,需要先安装axios npm install axios 安装完成后在main.js中引入 import axios from 'axios' //为了使用方便在定义为全局方法 vue....

    在项目中使用到的向后端请求和提交数据的方式,axios请求;

    在使用axios时,需要先安装axios

    npm install axios

    安装完成后在main.js中引入

    import axios from 'axios'
    //为了使用方便在定义为全局方法
    vue.prototype.$http=axios

    完成后在vue文件中直接使用(在此使用get请求)

    无参数请求:

    this.$http.get(url)
    .then(response=>{
        console.log(response.data);
    })
    .catch(Error=>{
        console.log(Error);
    })

    有参数请求:

    this.$http.get(url,{
        params{
            id:1//此处设定参数为1
        }
    })
    .then(response=>{
        console.log(response.data);
    })
    .catch(Error=>{
        console.log(Error);
    })

     

    展开全文
  • vue项目如何打包部署到后端

    千次阅读 2021-04-04 23:38:37
    一、项目完善之后需要注意 1)注意axios的请求代理前缀 置为‘’ // 配置代理 proxyTable: { "/api":{ target:'http://localhost:3000', changeOrigin:true,//允许 pathRewrite:{ //重写 把当前链接地址的api...

    一、项目完善之后需要注意
    1)注意axios的请求代理前缀 置为‘’

     // 配置代理
        proxyTable: {
            "/api":{
                target:'http://localhost:3000',
                changeOrigin:true,//允许
                pathRewrite:{ //重写 把当前链接地址的api设置成 '' url地址上就不会出现http:/api/banner
                    "^/api":""
                }
            }
        },
    
    

    2)运行npm run build 自动生成一个dist目录
    在这里插入图片描述

    3)将dist目录下的文件取出放入后端的指定位置 (不同的后端指定不同:例如nodejs放在public目录下)
    在这里插入图片描述

    4)重启后端服务即可
    在这里插入图片描述

    展开全文
  • 主要介绍了vue后端做Excel导出功能返回数据流前端的处理操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue商城+php后端+mysql数据库完整版,可用于二次开发,或参考学习.
  • 技术栈: 前端项目技术栈: Vue Vue-router Element-UI Axios Echarts 后端项目技术栈: NodeJs express jwt Mysql sequelize
  • Vue使用axios调用后端接口的坑

    千次阅读 2020-09-28 03:17:50
    问题场景:Vue.js工程中使用axios调用后端接口(SpringBoot构建)出现后端接口无法获得数据的情况,因此总结了如下场景: @RequestParam用来处理application/x-www-form-urlencoded编码(HTTP协议请求头中不指定...
  • axios:前端通信框架,因为vue的边界很明确,...在 Vue 的开发过程中能实现发送网络请求的方式有很多种,下面详细看一下每种方式和选 axios 的原因:1、传统的 Ajax 是基于 XMLHttpRequest(XHR)因为在项目开发中封...
  • vue项目配置后端服务器地址

    千次阅读 2021-08-10 09:00:22
    vue项目配置后端服务器地址 内容精选换一换查询负载均衡器状态树。可通过该接口查询负载均衡器关联的监听器、后端云服务器组、后端云服务器、健康检查、转发策略、转发规则的主要信息,了解负载均衡器下资源的拓扑...
  • 整个项目前后端分离开发,前端基于Vue全家桶进行渲染,后端由NodeJs+MongonDB提供服务。整个项目前后端由本人独自开发,基本实现了一个商城应有的功能!本项目仅供学习及交流,禁止商用及其它营利目的,如需商用,请...
  • 后端java代码: ** * 导出失败数据excel */ @Override public void exportFailExcel(BlackListUpload blackListUpload) { log.info("下载失败导入失败的数据{}", blackListUpload); String blackListUploadId = ...
  • vue项目集成websocket以及后端spring boot的实现创建后端spring boot工程创建vue的前端工程 创建后端spring boot工程 打开我们的IDEA创建一个空的工程,空的工程名字叫vue-websocket-spring-boot-demo,接着在该空的...
  • 废话不多说直接上代码,由于前后端交互,所以使用axios发送请求 如饼图: 一,安装vue中安装echarts,axios和vue-axios npm install echarts -S npm install axios npm install --save vue-axios 二,全局引入echarts和...
  • Vue动态路由使用后端控制)

    千次阅读 2020-07-18 18:20:10
    使用VUE开发后台管理系统 完全由后端控制左边菜单项思路 在传统开发后台管理系统时,都会涉及权限控制这一功能需求 即:根据不同登录的角色账号来使用该账号拥有的功能,也就是说系统左边的菜单栏不是固定不变的,...
  • 创建vue项目并访问课程1的springboot项目 创建vue项目 安装前端环境 首次安装vue前,需提前下载安装node.js(>=6.x,首选8.x),npm(3+ 无需额外安装,node.js安装后就有了) 管理员打开cmd 输入npm ...
  • Vue 项目 前端和后端接口之间的跨域问题 是
  • 一个基于vue2.x编写的后端管理项目 SenAdmin
  • vue项目调用后端用localhost成功,ip地址则后端接收不到 当需要写明ip+端口号,再调用后台时,配置如下可以实现: 1. .env/development文件 # just a flag ENV = 'development' #ip+端口号时需要设置 VUE_APP_BASE_...
  • 这是主要是因为在vue.config.js中使用了跨域代理,但是跨域里面的的target字段为空就会出现此报错 解决: proxy: { //配置跨域 '/api': { target: '139.198.180.240:8199', // 接口的域名 这个一定要配置 //
  • 主要介绍了详解基于Vue-cli搭建的项目如何和后台交互,小编觉得挺不错的,现在分享给大家,也给大家个参考。一起跟随小编过来看看吧
  • 请求头的添加需要放在请求拦截器里边。在项目中向后端发起请求时会先进入到请求拦截器中,通过之后,才能通过axios发请求,请求的字段需要看后端的字段,这里的字段是我后端给的时token,config.headers.token ...
  • 前端请求后端接口时处理跨域: 1、修改config下index.js文件: dev: { assetsSubDirectory: 'static', assetsPublicPath: '/', host: 'localhost', port: 8080, autoOpenBrowser: false, errorOverlay: ...
  • 今天小编就为大家分享一篇Vue调用后端java接口的实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • }, // 不携带在url中的url参数 使用字符串拼接的形式传递参数 // 若要求参数携带在url中 可以通过 `` 包裹后端地址,使用${}在url中携带对应参数 (4)put请求 const { data: res } = await this.$http.put(`...
  • 1.1 App.vue 整体的样式可以在这个文件的 <style>这里修改 <template> <div id="app"> <router-view/> </div> </template> <script> export default { name: '...
  • vue搭建的前端项目中运用axios实现前后台数据交互及开发过程中跨域问题的解决:https://blog.csdn.net/qq_40773976/article/details/82496940 使用vue-cli+axios配置代理进行跨域访问数据:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 63,065
精华内容 25,226
关键字:

vue项目用什么做后端

vue 订阅