Vue过渡 & nanoid && 代理服务器

1. 过渡

使用vue的transition标签结合css样式完成动画

页面

    
    
    
       我一定会好好学习的
    
    
    
    
    
      {{item.id}}-{{item.name}}

给列表添加动画或过渡效果，用transition-group ↑

样式

//进入时样式 和 离开时样式
// 过滤的持续时间
.box-enter-active,
.box-leave-active {
  transition: all 1s;
}
// 开始进入样式 和 离开完成样式
// 过渡的具体动作
.box-enter,
.box-leave-to {
  transform: translateX(10px);
  // 注意：这里只能设置透明为0
  opacity: 0;
}

2. nanoid

安装

npm install nanoid

导入nanoid函数

import { nanoid } from 'nanoid'

使用

let goods = {
        // nanoid()方法，每次返回一个全球唯一的id
        id:nanoid(),
        name:'商品'
      }

3. 服务器

新建一个server文件夹，在终端管理器下载一个包的描述文件

npm init -y

安装express

npm i express

在新建一个index.js为一号服务器

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

//配置中间件，拦截所有的请求
app.use((req, res, next) => {
  //允许ajax请求跨域
  //默认情况下：ajax请求必须要遵循同源策略：协议名，主机名，端口号一致。
  // 允许一台指定的服务器跨域
  // res.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");
  // 不限制跨域
  // 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);
});

4. 配置代理

配置一个vue.config.js文件

module.exports = {
  lintOnSave: false,
  //devServer是脚手架中的开发服务器
  devServer: {
    //配置主机名
    host: "localhost",
    //配置端口号
    port: "8080",
    //注意：在开发阶段，通过向当前开发服务器发送ajax请求，当前服务器会将请求转发给配置的代理服务器地址。
    //这里只能配置一个代理服务器
    // proxy:'http://localhost:7788',
    // 配置多个代理服务器地址
    proxy: {
      // /stu是前缀
      "/stu": {
        //代理的地址
        target: "http://localhost:5566",
        //路径重写，因为向真实的后台发送请求时，不需要加前缀
        pathRewrite: {
          //将地址中，/stu替换成空
          // ajax向http://localhost:8080/stu/list发送请求
          // 代理服务器会帮我们向http://localhost:5566/stu/list发送请求
          // 但是http://localhost:5566服务器的真实地址应该是http://localhost:5566/list，没有/stu前缀
          // 所以在向真实的后台发送请求时，要将路由中的前缀删除掉。
          "^/stu": "", //将/stu替换成空
        },
      },
      "/car": {
        //代理的地址
        target: "http://localhost:7788",
        pathRewrite: {
          "^/car": "",
        },
      },
    },
  },
};

ajax请求数据，必须要遵循同源策略，什么是同源策略？
请求地址的协议名，主机名(域名或ip地址)，端口号，必须跟当前地址相同，否则就是跨域请求。
解决跨域有两种途径：1.后端允许跨域，2.前端想办法骗过后端实现跨域（jsonp技术，代理服务器技术）

methods: {
    // 加载学生信息的方法
    loadStudent() {
      // 向当前服务器发请求，当前服务器会作为代理服务器，在通过原生http的方式向后台服务器发请求
      // ajax请求默认要遵循同源策略：协议名，主机名，端口号要一致。
      // 注意：这里的/list，其实是http://localhost:8080/list
      axios.get("/stu/list").then(({ data }) => {
        this.stus = data;
      });
    },
    // 加载车辆信息的方法
    loadCar() {
      axios.get("/car/list").then(({ data }) => {
        this.cars = data;
      });
    },
  },