vue小知识

---

1.动态绑定图片加载失败，设置一个默认的图片

//用三元运算符来保证图片在加载失败的时候加载一张设置的默认图，同理背景图片也是一样的 <img :src='avatar.url?avatar.url:defaultImg'/> export default { data(){ return { defaultImg :require('图片的路径') } } }

2.动态绑定背景图片

<div class="right-con" :style="{backgroundImage: 'url('+ (coverImgUrl ? coverImgUrl : baseImg) + ')', backgroundSize:'contain'}"> </div>

3.在 vue-cli 创建的文件中使用 jquery

a. 这是一种比较麻烦的方法

安装依赖 npm install jquery --save 在 Vue.config.js 文件中配置 (在 3.0 以上,webpack.base.conf.js 文件中的设置改到在 vue.config.js 文件中设置),如果你的项目中没有 vue.config.js 文件，请你在 package.json 文件的同级目录新建一个 vue.config.js 文件 配置代码如下： const webpack = require('webpack'); module.exports = { //configureWebpack 是Vue CLI3.0 中用于配置 webpack 插件参数的地方，你在这里设置，会新建或者覆盖 webpack 默认配置。 //webpack ProvidePlugin 的含义是创建一个全局的变量，使这个变量在 webpack 各个模块内都可以使用。这里的配置含义是创建 '$'、'jQuery'、'window.jQuery' 三个变量指向 jquery 依赖，创建 'Popper' 变量指向 popper.js 依赖。 configureWebpack: { plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery', Popper: ['popper.js', 'default'], }), ], }, }; 在要使用的文件中导入 ,然后正常使用就正常的使用 jquery 可以了 import $ from 'jquery';

b. 直接引入 jquery 文件

在 vue-cli 框架生成的目录结构中，有一个 public 文件夹，下面有一个.html 的文件，然后直接引入 cdn 或者在 cdn 把源码下载到本地，然后再引入也是可以的 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

4.在 vue 里面使用 axios 发送请求更换图片

//html //设置属性的样式隐藏 <input id="uploadFile" type="file" style="display:none" @click="clickChangeFile" /> <img id="uploadImg" src="defaultImg" alt="我是默认图片" @click="clickChangeImg" /> //vue import $ from 'jquery'//在这里我演示引入jquery的这种方法 import {post} from 'utils.js'//我是直接封装引用的，具体的封装看下面 export default { data(){ return { defaultImg:"../../../assests/img.jpg" } }, methods:{ //点击图片，触发上传文件的点击事件 clickChangeImg() { $("#uploadFile").click(); }, clickChangeFile() { //上传文件自带的方法，change $("#uploadFile").change(function(event) { var formData = new FormData(); formData.append("file", event.currentTarget.files[0]); let config = { //配置请求头 headers: { "Content-Type": "multipart/form-data" } }; //后台给的接口 post( "http://127.0.0.1:3000/api/v1/file_uploads", formData, config ).then(res => { //获取传到后台的src路径，显示出来，后台只保存路径，不保存图片 $("#uploadImg").attr("src", "http://localhost:3000" + res.data.info); }); }); } } } //untils.js import axios from 'axios';//首先引入axios、 const instance = axios.create({ timeout: 3000, }); // 创建一个实例 设置请求的超时时间 export const post = (url, data, config) => instance.post(url, data, config);//定义并且导出

具体的配置详见 axios，github 官网

5.vue 全局请求拦截和全局响应拦截

//全局请求拦截，就是在所有的请求之前，对你的请求进行判断拦截，如果满足条件，才会发送请求，否则则不 //全局响应拦截，在服务器响应阶段，对响应进行响应的处理，例如 登录成功产生的token过期，可以进行拦截，跳转到登录页面 import axios from 'axios'; const instance = axios.create({ timeout: 5000, }); // 全局请求拦截 instance.interceptors.request.use( function(config) { // 如果每次请求都需要带配置请求头的话，可以这样设置，这样的话就不用没用都在请求中添加配置了 config.headers.authorization = `Bearer ${localStorage.getItem('token')}`; return config; }, function(error) { // Do something with request error return Promise.reject(error); } ); // 全局响应拦截 instance.interceptors.response.use( function(response) { return response; }, function(error) { //对服务器的响应，进行拦截，如果报错，进行响应的处理 if (error.response && error.response.status === 401) { //如果报错码是401，就跳转到登录页面 window.location.href = '#/login'; } return Promise.reject(error); } );

具体的配置详见 axios，github 官网

6.用 nodejs 解决跨域的问题

a.首先介绍一下什么是跨域

指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对 javascript 施加的安全限制。

b.具体操作代码如下

b-1.安装 express

基于 Node.js 平台，快速、开放、极简的 Web 开发框架

npm install express --save

b-2.安装 axios.发送请求使用

npm install axios --save

b-3.安装 cors

npm install cors

CORS 是一个 W3C 标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出 XMLHttpRequest 请求，从而克服了 AJAX 只能同源使用的限制。目前，所有浏览器都支持该功能，IE 浏览器不能低于 IE10。

const express = require('express'); const cors = require('cors'); // 用于解决跨域请求 const axios = require('axios').default; const app = express(); // https 请求问题解决，如果出现请求问题，可以加上这两行代码 const instance = axios.create({ httpsAgent: new https.Agent({ rejectUnauthorized: false, }), }); // app.use(cors()); app.use(express.urlencoded()); // 格式化body中的数据 url编码的 app.use(express.json()); // 格式化body中的数据 json形式 app.post('/api/v1/proxy', async (req, res) => { const result = await axios.get(req.body.url); res.json(result.data); }); //我监听的是8000端口 app.listen(8000, () => console.log('服务器运行于8000端口'));

b-4 使用方式

export function HotMovies() { return post('http://localhost:8000/proxy/api/v1/proxy', { url: 'https://api-m.mtime.cn/Showtime/LocationMovies.api?locationId=290', }); } axios .post('http://localhost:8000/proxy/api/v1/proxy', { url: 'https://api-m.mtime.cn/Showtime/LocationMovies.api?locationId=290', }) .then(res => { const data = res.data; //然后对数据进行处理就行了 });