Vue-cli——代理服务器&nanoid

一、过渡

(1)transition组件

Vue提供了transition的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡
条件渲染(使用v-if)
条件展示(使用v-show)
动态组件
组件根节点
https://cn.vuejs.org/v2/guide/transitions.html
使用方法:用transition标签套在加过渡效果的外层,标签属性name就相当于普通标签中的class
添加样式
**-enter-active **leave-active
**-enter **leave-to

    

过渡效果

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

(2)transition-group组件

transition-group组件,属性也有name,可以和其他组件重名。
tag属性值为ul时,可以当ul标签使用(也可以写box等)。当tag属性值为空时,默认为span标签

    
    
      
  • {{item.id}}-{{item.name}}
  • .box-enter-active, .box-leave-active{ transition: all 1s; } .box-enter, .box-leave-to{ transform: translateX(10px); opacity: 0; }

    二、nanoid

    之前设置唯一id我们都使用Date.now,但是如果在1毫秒内重复点击两个整个列表就会报错,所以不是最好的方案。
    那就是nanoid,会帮我们形成全球唯一id(长度不一)
    当我们要使用唯一编号或字符串的时候可以使用nanoid

    下载nanoid库
    
    npm i nanoid
    
    引入nanoid
    
    import { nanoid } from 'nanoid'
    
    使用
    
    

    三、代理服务器

    新建server文件,终端打开初始化包npm init -y,下载服务器框架 npm i express。
    默认情况下:ajax请求必须要遵循同源策略:协议名、主机名,端口号一致。
    如果跨域设置为任何请求都可以请求会很不安全,别人会实时抓取信息数据。
    如果跨域设置指定的一台服务器允许,多台会无法实现,这时就需要代理服务器。
    前端架起一台代理服务器,代理服务器向服务器发送原生请求,通过向代理服务器发送请求就是本地。

    服务器1
    // 导入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);
    });
    
    配置代理服务器3

    proxy配置代理服务器,多个以对象的形式
    后缀名相同可以添加前缀,以对象的形式进行详细配置,代理的地址,和路径重写(对象)

    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": "",
            },
          },
        },
      },
    };
    
    
    代理服务器.png
    页面
     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;
         });
       },
     },
    

    四、Bootstrap框架

    https://v3.bootcss.com/
    简单示范table基础使用方法
    在html页面头部中引入后在tabel标签添加class样式为table

    
    
    

    你可能感兴趣的:(Vue-cli——代理服务器&nanoid)