美文网首页
Vue——代理服务器、Bootstrap

Vue——代理服务器、Bootstrap

作者: 云瑶糖糖 | 来源:发表于2021-12-26 15:03 被阅读0次

Vue开发模式跨域解决与代理服务器配置
我们从服务器拿数据,跨域的拿不到,于是搭建个代理服务器,中转一下,就可以解决跨域问题了。

1号服务器

// 导入express
let express = require("express");
// 创建一个服务器对象
let app = express();
// 开启一个端口号
app.listen(5566, () => {
  console.log("服务器成功开启!端口号5566");
});

//配置中间件,拦截所有的请求
app.use((req, res, next) => {
  //允许跨域
  // res.setHeader("Access-Control-Allow-Origin", "*");
  next();
});

//学生数组
let stus = [
  {
    no: "1001",
    name: "张三",
    age: 20,
    sex: "男",
  },
  {
    no: "1002",
    name: "李四",
    age: 22,
    sex: "女",
  },
  {
    no: "1003",
    name: "王五",
    age: 24,
    sex: "男",
  },
]

// 定义一个get请求接口
app.get("/list", (req, res) => {
  res.send(stus);
});

2号服务器

// 导入express
let express = require("express");
// 创建一个服务器对象
let app = express();
// 开启一个端口号
app.listen(7788, () => {
  console.log("服务器成功开启!端口号7788");
});

//配置中间件,拦截所有的请求
app.use((req, res, next) => {
  //允许跨域
  // res.setHeader("Access-Control-Allow-Origin", "*");
  next();
});

//汽车数组
let cars = [
    {
      id: "1001",
      name: "奔驰"
    },
    {
      id: "1002",
      name: "宝马"
    },
    {
      id: "1003",
      name: "奥迪"
    },
  ]

// 定义一个get请求接口
app.get("/list", (req, res) => {
  res.send(cars);
});

配置代理

module.exports = {
    //取消eslint语法检查
    lintOnSave:false,
    //devServer是脚手架中的开发服务器
    devServer:{
        //配置主机名
        host:'localhost',
        //配置端口号
        port:'8080',
        //在开发服务器中,配置一个代理服务器地址。
        //注意:在开发阶段,通过向当前开发服务器发送ajax请求,当前服务器会将请求转发给配置的代理服务器地址。
        // proxy:'http://localhost:5566'
        // 配置多个代理服务器地址
        proxy:{
            // /stu是前缀
            '/stu':{
                //代理的地址
                target:'http://localhost:5566',
                //路径重写,因为向真实的后台发送请求时,不需要加前缀
                pathRewrite:{
                    //将地址中,/stu替换成空
                    '^/stu':''
                }
            },
            '/car':{
                target:'http://localhost:7788',
                pathRewrite:{
                    '^/car':''
                }
            }
        }
    },
}

Bootstrap

全局 CSS 样式
Bootstrap 将设置全局的 CSS 样式。HTML 的基本元素均可以通过 class 设置样式并得到增强效果。还有先进的栅格系统。

这是官网,直接link就可以用css样式

https://v3.bootcss.com/css/

相关文章

网友评论

      本文标题:Vue——代理服务器、Bootstrap

      本文链接:https://www.haomeiwen.com/subject/nxesqrtx.html