Datos del proyecto móvil de Vue

1. Escribe al principio

Como aprendiz de front-end, debemos practicar constantemente para profundizar nuestra comprensión de los puntos de conocimiento de Vue. Por supuesto, el proyecto Vue es fundamental. Es posible que algunas personas quieran practicar algunos proyectos, como el sitio web oficial de Xiaomi, Chaqiwang y otros proyectos. Pero no sé cómo conseguir que los datos practiquen. A continuación, compartiré los pasos como referencia de aprendizaje únicamente.

2. Escribe en el medio

1. El primer paso es configurar el proxy. Configure el proxy en vue.config.js. Se debe prestar especial atención a la necesidad de reiniciar el servidor después de la configuración; de lo contrario, se informará un error. "/getHostRecomendList" es un identificador, que debe ser único y necesita encontrar una palabra especial como identificador.
   

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. Configure en /api/home.js, es necesario distinguir el contenido de la configuración. Preste especial atención a si el método es publicar u obtener y complete el contenido después de .com en la siguiente URL. Puede ir al sitio web oficial del proyecto para ver el encabezado debajo de la red, que contiene la URL y el método solicitados.

// 导入二次封装好的请求工具
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. Simplemente impórtalo en la página requerida.

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

3. Escribe al final

El aprendizaje es algo gradual y nuestros esfuerzos eventualmente darán sus frutos.