一.写在开头
身为一名前端的学习者，我们需要不断地进行练习，来加深自己对Vue知识点的理解。当然Vue项目就必不可少。有些人可能想练习一些项目，比如小米官网，茶七网等项目。却不知道如何获取数据来进行练习。接下来我就分享一下步骤，仅供学习参考。
二.写在中间
- 第一步设置代理。在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")
}
}
}
}
})
- 在/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")
}
- 在需要的页面导入即可
<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>
三.写在最后
学习是一件循序渐进的事，我们的付出终会有收获。