css frosted glass effect/el-progress progress bar gradient/basic use of axios/cross-domain configuration/turn off eslint verification

css matte effect

renderings

insert image description here

Implementation

<!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>Document</title>
    <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>

key point

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

HSLA(H,S,L,A)
H: Hue (hue). 0 (or 360) means red, 120 means green, 240 means blue, and other values can also be used to specify the color. Values: 0 - 360
S: Saturation (saturation). Values: 0.0% - 100.0%
L: Lightness (brightness). Values: 0.0% - 100.0%
A: Alpha transparency. The value is between 0 and 1.

filter: blur(radius)
radius is the radius, that is, how many pixels on the screen are blended with each other, a larger value will produce more blur, the unit is px, % is not accepted

Only set hsla for the border background and only have the border translucent effect:

insert image description here
To have a background blur effect like frosted glass, you need to add a blurred bottom layer under the box:

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

el-progress progress bar gradient

Renderings:

insert image description here

Implementation

Change the internal style directly:

::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+ */
}

Use of axios

Install

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

configuration

If not, build one yourself
insert image description here

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)
  }
}

use

Introduce
insert image description here
the call interface on the page that needs to use the interface

 某个方法名 () {
    
     // 接口调用
      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('资源获取错误！')
        })
    },

cross-domain configuration

Modify vue.configs.js

For example, the request interface: http://192.168.222.11:3000/login, the address in the api should be written/api/login
insert image description here

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

Points to note : After vue.configs.js is modified, yarn serve/npm run serve must be executed again to make it take effect

Turn off eslint verification

Generally still needed, if you think it is not necessary:

annotation.eslintrc.js

insert image description here
2. Modify vue.config.js

transpileDependencies: true //