项目的总结

最新推荐文章于 2024-05-17 14:32:46 发布

冷倾笑

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量620

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/qq_58424302/article/details/127575606

版权

数据访问

可以使用axios访问
在vue项目中

import axios from 'axios'//引入axios
export function GetCart() {
return axios.get("http://dida100.com:8888/api/cart",{//使用
	loading:"true"
})

}

跨域问题

由于同源策略的存在，浏览器限制了跨域获取cookie，也限制了跨域DOM节点的访问，有效的防止的CRSF攻击。当然发起CRSF攻击还有其它手段，所以才要跨域。

封装访问方法

const {
defineConfig
} = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
// 本地服务器配置
devServer: {
	// 代理
	proxy: {	
		"/v1": {
			// 代理目标地址
			target: "https://m.mi.com/",
			// 改变源
			changeOrigin: true,
			// 绕过小米的限制(欺骗小米的服务器，就是小米的网页访问的小米服务器)
			// 实际是localhost访问
		 onProxyReq(req) {
				// 当localhost请求的时候添加请求头refere 值https://m.mi.com/
				req.setHeader("referer", "https://m.mi.com/")
			}
		},	
	}}
})

进行二次封装
在utils下面创建bus.js

// 导入vue
import Vue from 'vue'

// 导出vue创建的空实例
var bus  = new Vue();
export default bus;

文件api下面创建home.js

// 导入二次封装好的请求工具
import request from  '@/utils/request.js'
export function GetHomePage(data){
// 导出request.post 请求的结果（promise的实例）
// 数据转换为url编码的形式
return request.post("/v1/home/page",{
	headers:{
		// 添加url编码的请求头
		"Content-Type":"application/x-www-form-urlencoded"
	}
});
}
}

v-if和v-for什么时候用

这个是我个人认为遇到的问题
简单来说就是
遍历用v-for
判断用v-if

v-for遍历用

因为访问到的数据很多，当出现数组的时候，大多数都是需要遍历，得到里面所有的对象，在得到对象中某个数据，在vue中这个必须有key值。当然这只是个人理解，并不是完全正确。

v-if判断用

这个的用处就是判断，判断数据是否含有某小数据，得到包含有这个小数据的大数据。

v-show(也是显示问题)

v-if与v-show的区别：
v-if：当条件为false时，包含v-if的指令元素，不在html（dom中）
v-show：当条件为false时，v-show给元素添加了一个行内元素：display：none（达到隐藏的效果）

首页的数据

这可能是我自己的问题
第一屏中有一个选项卡，
先说明情况，我首屏中的商品内容，选项卡第一屏访问的商品数据跟选项卡第二屏的访问数据的路径不一样，里面的数据内容格式也大部分不一样。
我的解决方法
我的就是点击其他选项的时候就会重新访问数据，让后判断当是第一个的时候访问第一个数据也只显示这个，当其他的时候就会显示其他数据，这个难得的就是，两次访问的内容格式不一样，很多内容都需要重新写。