zoukankan      html  css  js  c++  java
  • VueCli3项目中模拟数据及配置代理转发

    Vue项目在本地模拟数据

    vue-cli里面通过devservers进行模拟数据。
    一般会在vue.config.js里面设置,在vue-cli3里面默认隐藏了这个文件。我们需要在根目录下新建vue.config.js文件,其实这里写的是express代码

    // vue.config.js
    module.exports = {
        devServer: {
            before(app) {
                // app是一个express实例
                app.get('/api/courses', (req, res) => {
                    setTiemout(() => {
                        res.json([{ name: 'web' }])
                    }, 1000)
                })
            }
        }
    }
    
    // 模拟的接口可以通过路径进行本地访问查看
    locallhost:8080/api/courses
    

    使用axios进行调用

    import axios from 'axios'
    export function getCourses() {
        return axios.get('/api/courses').then(res => res.data)
    }
    

    代理转发

    设置开发服务器代理选项可以有效避免调用接口时出现的跨域问题

    // vue.config.js
    module.exports = {
        devServer: {
            // 设置主机地址
            host: 'localhost',
            // 设置默认端口
            port: 8080,
            // 设置代理
            proxy: {
            	// 监听一个别名,下面替换掉
                '/api': {
                    // 目标 API 地址
                    target: 'http://192.168.1.1:8080', // 后台接口地址
                    ws: true, // 代理 websockets
                    secure: false, // 如果是https接口
                    changeOrigin: true, // 是否跨域
                    pathRewrite: {
                        '^/api': '/screen' // 替换
                    }
                }
            }
        }
    }
    

    本地开一个服务用来测试代理转发

    在项目的根目录下新建server文件夹,新建api.js文件

    // 安装依赖包 npm i express 
    const express = require('express')
    const app = express()
    
    app.get('/api/courses', (req, res) => {
    	setTiemout(() => {
    		res.json([{ name: 'web' }])
    	}, 1000)
    })
    
    // 监听端口
    app.listen(3000)
    
    // 在命令行中启动
    node .serverapi.js
    
  • 相关阅读:
    2 实现第一个Django网站 博客
    jeecms支持的freemaker标签大全
    dao 获取表最大排序实现
    spring对数据库特殊字段的支持
    hibernate id生成器配置
    Long与long的比较
    jquery validation ajax 验证
    swfupload用法总结
    oracle对序列的操作
    jquery.layout框架分割线
  • 原文地址:https://www.cnblogs.com/yuxi2018/p/14639343.html
Copyright © 2011-2022 走看看