文章目录
0.目录和package.json依赖1.src/assets/iconfont(文件夹)2.src/components/tabbar.vue3.router/index.js4.store/index.js(略)5.views5.1.Film/comingSoon.vue5.2.Film/nowPlaying.vue5.3.Film.vue5.4.Cinema.vue和Center.vue5.5.Detail.vue5.6.Login.vue6.App.vue7.eventbus.js8.main.js0.目录和package.json依赖
目录:
依赖:
"dependencies": {"axios": "^1.1.3","core-js": "^3.6.5","element-ui": "^2.15.10","save": "^2.9.0","store": "^2.0.12","swiper": "^5.4.5","vue": "^2.6.11","vue-router": "^3.2.0","vuex": "^3.6.2"},
1.src/assets/iconfont(文件夹)
2.src/components/tabbar.vue
<template><footer><ul><router-link to="/Film" custom v-slot="{navigate,isActive}"><li @click="navigate" :class="isActive?'myactive':''"><i class="iconfont icon-dianying">热映电影</i></li></router-link><router-link to="/Cinema" custom v-slot="{navigate,isActive}"><li @click="navigate" :class="isActive?'myactive':''"><i class="iconfont icon-yingyuan">附近影院</i></li></router-link><router-link to="/Center" custom v-slot="{navigate,isActive}"><li @click="navigate" :class="isActive?'myactive':''"><i class="iconfont icon-yingyuan">个人中心</i></li></router-link></ul></footer></template><script>export default {};</script><style lang="scss" scoped>footer{position: fixed;bottom: 0;left: 0;width: 100%;height: 2.722222rem;background: white;ul{display: flex;//父元素设置弹性盒li{//子元素都设置flex: 1:子元素平分并占满父盒子flex:1;line-height: 2.722222rem;text-align: center;}}}</style>
3.router/index.js
import vueRouter from "vue-router"// 引入路由import Film from "@/views/Film"import Cinema from "@/views/Cinema"import Center from "@/views/Center"import comingSoon from "@/views/Film/comingSoon"import nowPlaying from "@/views/Film/nowPlaying"import Login from "@/views/Login"import Detail from "@/views/Detail"// 配置路由// 创建路由对象routerconst router = new vueRouter({// mode: "history",routes: [{path: "/Film",component: Film,children: [{//写法一:写相对路径,省略Filmpath: "nowPlaying",component: nowPlaying}, {//写法二:写绝对路径,保留Filmpath: "/Film/comingSoon",component: comingSoon}, {// 重定向到Film/nowPlaying页path: "",redirect: "nowPlaying"}]},{path: "/Cinema",component: Cinema},{path: "/Center",component: Center},{// 动态路由path: '/Detail/:id',//命名路由name: 'renameDetail',component: Detail},{path: "/Login",component: Login},{// 路由重定向path: "*",redirect: "/Film"}],});const checkUser = {isLogin() {return true;}};router.beforeEach((to, from, next) => {console.log(to.path);if (to.path == "/Center") {console.log("正在检查登录状态...");;if (checkUser.isLogin()) {//是否已登录console.log("您已登陆!");next(); //登录:放行} else {console.log("您未登陆!正在跳转到登录页面...");next("/Login"); //未登录:跳转至Login页}} else {next();}});// 导出路由export default router;
4.store/index.js(略)
5.views
5.1.Film/comingSoon.vue
<template><div>comingSoon...</div></template>
5.2.Film/nowPlaying.vue
<template><div>nowPlaying...<ul><li v-for="data in datalist" :key="data.filmId" @click="handleChangePage(data)"><!-- {{data.name}} --><!-- 获取电影海报 --><img :src="data.poster" alt=""><!-- 获取电影标题 --><h3>{{data.name}}</h3><!-- 获取观众评分 --><p>观众评分{{data.grade}}</p><!-- 获取导演和主演信息:此处要处理一下数组data.actors(过滤) --><p>{{data.actors | actorfilter}}</p></li></ul></div></template><script>import axios from "axios"// 注册过滤器需要用到Vue,所以引入vue:在哪使用就在哪引入import Vue from "vue"Vue.filter('actorfilter',function(data){//回顾map的用法:// console.log([0,1,2].map(item=>`我是第${item+1}名`));// 处理data.name数组var newList=data.map(item=>item.name);// console.log(newList);return newList.join(' ');});export default {data(){return{// datalist:["1111","2222","3333"]datalist:[]}},methods:{handleChangePage(id){console.log(id);this.$router.push({name:'renameDetail',params:{id:id}});}},mounted(){// 网络>复制>复制链接地址// axios.get("/gateway?cityId=310100&pageNum=1&pageSize=10&type=1&k=2318535")// 使用axios的完整写法配置字段/*字段获取:网络>标头>请求标头>X-Client-Info: {"a":"3000","ch":"1002","v":"5.2.1","e":"16662641254110824868151297"}X-Host: mall.film-ticket.film.list */axios({url:"/gateway?cityId=310100&pageNum=1&pageSize=10&type=1&k=2318535",headers:{'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"16662641254110824868151297"}',' X-Host': 'mall.film-ticket.film.list'}}).then(res=>{console.log("获取数据data:",res.data);// console.log("获取数据data:",res.data.data.films);this.datalist=res.data.data.films;})}}</script><style lang="scss" scoped>ul{li{padding:10px;overflow:hidden;img{float: left;width: 100px;}}}</style>
5.3.Film.vue
<template><div><!-- 在Film中插入一个轮拨 --><swiper></swiper><router-view></router-view></div></template><script>// 导入Swiper.vue组件import swiper from "./Film/Swiper"export default {components:{// 注册swiper}}</script>
5.4.Cinema.vue和Center.vue
<template><div>cinema/center</div></template>
5.5.Detail.vue
<template><div>我是商品详情信息...</div></template><script>export default {// step4:最终目的是为了在detail页面中获取唯一的id// 利用此id再ajax请求后端详情页面数据mounted(){// console.log("要id,获取信息:",this.$route);//看到router对象中有params:id属性(与index.JS的 path: '/Detail/:id'保持一致)console.log("要id,获取信息:",this.$route.params.id);// 这就是列表详情跳转页中,在路由中所做的配置--动态路由} }</script>
5.6.Login.vue
<template><div class="wrapper">用户名:<input type="text">密码:<input type="text"></div></template>
6.App.vue
<template><div class="wrapper"><!-- 轮拨图组件 --><!-- 把选项卡中的电影,个人中心等封装到单独组件tabbar中 --><tabbar></tabbar><router-view></router-view></div></template><script>// 导入组件tabbarimport tabbar from "./components/tabbar"import router from "vue-router"export default {name: "App",components: {tabbar,},}; </script><style lang="scss">// 此处设置全局样式:不加scoped*{margin:0;padding:0;}html,body{height: 100%;}ul,li{list-style: none;}.myactive{background: red;color:white;}</style>
7.eventbus.js
import Vue from "vue"export const EventBus = new Vue;
8.main.js
import Vue from "vue"import router from "./router"import vueRouter from "vue-router"import App from "./App.vue"// 引入store下的index.jsimport store from './store/index'import '@/assets/iconfont/iconfont.css'Vue.use(vueRouter);Vue.config.productionTip = false;new Vue({el: "#app",router,store,render: h => h(App)})
如果觉得《-11-30 vue移动端卖座电影项目(四) 当前项目代码》对你有帮助，请点赞、收藏，并留下你的观点哦！
