Vue移动端项目数据

一.写在开头

身为一名前端的学习者，我们需要不断地进行练习，来加深自己对Vue知识点的理解。当然Vue项目就必不可少。有些人可能想练习一些项目，比如小米官网，茶七网等项目。却不知道如何获取数据来进行练习。接下来我就分享一下步骤，仅供学习参考。

二.写在中间

1. 第一步设置代理。在vue.config.js里面设置代理。特别需要注意设置完需要重启服务器，不然会报错。“/getHostRecomendList”是标识符，这个必须是唯一的，需要找一个特殊的词作为标识符。
   

const {
	defineConfig
} = require('@vue/cli-service')
module.exports = defineConfig({
	transpileDependencies: true,
	// 本地服务器配置
	devServer: {
		// 代理
		proxy: {
			"/getHotsRecommendList": {
				// 代理目标地址
				target: "https://api.juooo.com",
				// 改变源
				changeOrigin: true,
				onProxyReq(req) {
					req.setHeader("referer", "https://api.juooo.com")
				}
			},
			"/getTheatreList": {
				// 代理目标地址
				target: "https://api.juooo.com",
				// 改变源
				changeOrigin: true,
				onProxyReq(req) {
					req.setHeader("referer", "https://api.juooo.com")
				}
			},
			"/getVipHomeSchedular": {
				// 代理目标地址
				target: "https://api.juooo.com",
				// 改变源
				changeOrigin: true,
				onProxyReq(req) {
					req.setHeader("referer", "https://api.juooo.com")
				}
			},
			"/getList": {
				// 代理目标地址
				target: "https://api.juooo.com",
				// 改变源
				changeOrigin: true,
				onProxyReq(req) {
					req.setHeader("referer", "https://api.juooo.com")
				}
			},
			"/getShowList": {
				// 代理目标地址
				target: "https://api.juooo.com",
				// 改变源
				changeOrigin: true,
				onProxyReq(req) {
					req.setHeader("referer", "https://api.juooo.com")
				}
			},
			"/getClassifyHome": {
				target: "https://api.juooo.com",
				// 改变源
				changeOrigin: true,
				onProxyReq(req) {
					req.setHeader("referer", "https://api.juooo.com")
				}
			}
		}
	}
})

2. 在/api/home.js里面进行配置，配置的内容需要进行区分。尤其注意方法是post还是get,后面的网址填除了.com之后的内容。你可以进到项目的官网查看网络下方的标头，里面有请求的网址以及方法

// 导入二次封装好的请求工具
import request from '@/utils/request.js'
import {
	stringify
} from '@/utils/utils.js'

// 导出并创建获取首页信息的方法

export function GetHomePage(data) {
	// 导出request.post 请求的结果（promise的实例）
	// 数据转换为url编码的形式
	return request.post("/v1/home/page", stringify(data), {
		headers: {
			// 添加url编码的请求头
			"Content-Type": "application/x-www-form-urlencoded"
		}
	});
}
export function GetHotsRecommendList() {
	return request.get("/home/index/getHotsRecommendList?city_id=0&version=6.1.81&referer=2")
}
export function GetClassifyHome() {
	return request.get("/home/index/getClassifyHome?city_id=0&abbreviation=&version=6.1.81&referer=2")
}

3. 在需要的页面导入即可

<script>
	import GalleryCom from '@/components/GalleryCom.vue'
	import ClassifyList from '@/components/ClassListCom.vue'
	import GetVipHome from '@/components/GetVipHome.vue'
	import GetListCom from '@/components/GetListCom.vue'
	import GetShowListCom from '@/components/GetShowListCom.vue'
	import {
		// GetHotsRecommendList,
		GetClassifyHome,
		GetVipHomeSchedular,
		GetList,
		GetShowList
	} from '@/api/home.js'
	export default {
		components: {
			ClassifyList,
			GalleryCom,
			GetVipHome,
			GetListCom,
			GetShowListCom
		},
		data() {
			return {
				classify_list: [],
				slide_list: [],
				discountList: [],
				list: [],
				lists: []
			}
		},
		created() {
			// GetHotsRecommendList()
			// 	.then(res => {
			// 		// console.log("GetHotsRecommendList", res.data);
			// 		// this.classify_list = res.data.data.classify_list;
			// 	}),
			GetClassifyHome()
				.then(res => {
					// console.log("GetClassifyHome", res.data);
					this.classify_list = res.data.data.classify_list;
					this.slide_list = res.data.data.slide_list;
				}),
				GetVipHomeSchedular()
				.then(res => {
					// console.log("GetVipHomeSchedular", res.data);
					this.discountList = res.data.data.discountList;
				}),
				GetList().then(res => {
					// console.log("GetList", res.data);
					this.list = res.data.data.list;
				}),
				GetShowList().then(res => {
					console.log("GetShowList", res.data);
					this.lists = res.data.data.list;
				})
		}
	}
</script>

三.写在最后

学习是一件循序渐进的事，我们的付出终会有收获。