css磨砂效果

效果图

实现方法

关键点

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

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

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

axios的使用

安装

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

配置

没有就自己建个

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

使用

在需要用到接口的页面引入

调用接口

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

跨域配置

修改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}}}}

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

关闭eslint验证

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

1. 注释.eslintrc.js

2. 修改vue.config.js

transpileDependencies: true //