• css毛玻璃效果/el-progress进度条渐变/axios的基本使用/跨域配置/关闭eslint验证

    css磨砂效果

    效果图

    在这里插入图片描述

    实现方法

    DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        overflow: hidden;
      }
      .container {
        height: 100vh;
        background-repeat: no-repeat;
      }
      .container,
      .box::before {
        background: url("xxx") 0 / cover fixed;
        z-index: -1;
      }
      .box {
        z-index: 5; /* 设置为最高层，不影响内容显示 */
        position: absolute;
        top: 30%;
        left: 35%;
        width: 500px;
        height: 370px;
        border-radius: 4%;
        text-align: center;
        background: hsla(0, 0%, 100%, 0.3);
        color: #f2e2e2;
      }

      .box::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        filter: blur(20px);
      }
    style>
  head>
  <body>
    <div class="container">
      <div class="box">div>
    div>
  body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55

    关键点

    /* 模糊处理 */
background: hsla(0, 0%, 100%, 0.3);
filter: blur(20px); 

    • 1
    • 2
    • 3

    HSLA(H,S,L,A)
    H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
    S：Saturation(饱和度)。取值为：0.0% - 100.0%
    L：Lightness(亮度)。取值为：0.0% - 100.0%
    A：Alpha透明度。取值0~1之间。

    filter: blur(radius)
    radius是半径，即屏幕上有多少像素相互融合，较大的值会产生更多模糊,单位px，不接受%

    只给边框背景设置hsla只有边框半透明的效果:

    在这里插入图片描述
    要有像毛玻璃那样背景模糊的效果需要在box的底下再加上模糊的底层:

     .box::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        filter: blur(20px);
      }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    el-progress进度条渐变

    效果图:

    在这里插入图片描述

    实现方法

    直接改内部样式:

    ::v-deep .el-bg-inner-running .el-progress-bar__inner {
  background: #9cecfb; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to left,
    #0052d4,
    #65c7f7,
    #9cecfb
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to left,
    #0052d4,
    #65c7f7,
    #9cecfb
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    axios的使用

    安装

    npm install axios
# 用于提交表单
npm install qs

    • 1
    • 2
    • 3

    配置

    没有就自己建个
    在这里插入图片描述

    import axios from 'axios'
import qs from "qs"
const request = axios.create({
  timeout: 10 * 1000,
  headers: {
  	// 这里取决于后端要哪种
    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
  }
})
export default {
  // post类型
  postLogin: (data) => {
    return axios.post('/api/login', qs.stringify(data))
  },
  // get类型
  recommendmovieforuser: (data) => {
    return axios.get('/api/recommendmovieforuser?', data)
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    使用

    在需要用到接口的页面引入
    在这里插入图片描述
    调用接口

     某个方法名 () { // 接口调用
      api.之前暴露出的接口名(要传的数据)
        .then((res) => {
          if (!res) {
            return
          }
          console.log('res.data=', res.data)
          if (res.data.status != 200) {
            this.$message({
              message: res.data.message || "请求失败",
              type: "error",
            })
            return
          }
          this.$message({
            message: "请求成功",
            type: "success",
          })
          console.log('res.data.data=', res.data.data)
        })
        .catch(() => {
          this.$message.error('资源获取错误！')
        })
    },

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    跨域配置

    修改vue.configs.js

    比如说请求接口:http://192.168.222.11:3000/login,在api那里地址要写/api/login
    在这里插入图片描述

     devServer: {
    host: 'localhost',
    port: 8080,
    proxy: {
      '/api': {
        target: "http://192.168.xxx.xxx:xx/",//后端地址
        changeOrigin: true,//确定跨域
        pathRewrite: {
          '^/api': ''//这个就是以在写请求的时候加上这个api,然后这里重写去掉api
        }
      }
    }
  }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    注意点: vue.configs.js修改后要再次yarn serve/npm run serve使其生效

    关闭eslint验证

    一般还是需要的，如果觉得没必要的话:

    1. 注释.eslintrc.js

    在这里插入图片描述
    2. 修改vue.config.js
    在这里插入图片描述

    transpileDependencies: true //

    • 1
  • 相关阅读:
    19c-rac环境安装AHF
    （附源码）计算机毕业设计SSM家政服务系统
    springboot 项目生成docker镜像
    当元宇宙碰上图扑国风设计，科技与文化的虚实融合
    web课程设计网页规划与设计 基于HTML+CSS+JavaScript制作智能停车系统公司网站静态模板
    学习笔记|计数器|Keil软件中 0xFD问题|I/O口配置|STC32G单片机视频开发教程（冲哥）|第十二集：计数器的作用和意义
    git删除文件提交，删除文件按后这个记录怎么提交？
    嘴蠢到爆表的代码：我不是写代码，我是写笑话
    标准流布局
    8.springboot的自定义配置（@value注解和@ConfigurationProperties）
  • 原文地址：https://blog.csdn.net/weixin_54218079/article/details/127850495