2021-11-30 vue移动端卖座电影项目(四) 当前项目代码
2024-05-14 01:06:43
文章目录
- 0.目录和package.json依赖
- 1.src/assets/iconfont(文件夹)
- 2.src/components/tabbar.vue
- 3.router/index.js
- 4.store/index.js(略)
- 5.views
- 5.1.Film/comingSoon.vue
- 5.2.Film/nowPlaying.vue
- 5.3.Film.vue
- 5.4.Cinema.vue和Center.vue
- 5.5.Detail.vue
- 5.6.Login.vue
- 6.App.vue
- 7.eventbus.js
- 8.main.js
0.目录和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"// 配置路由
// 创建路由对象router
const 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("https://m.maizuo.com/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:"https://m.maizuo.com/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.js
import 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)
})
2021-11-30 vue移动端卖座电影项目(四) 当前项目代码相关推荐
- 2021-11-27 vue移动端卖座电影项目(二) 封装选项卡,引入iconfont,nowPlaying获取数据后写样式
文章目录 1.封装选项卡 2.设置iconfont 3.nowPlaying获取数据后写样式 3.1.获取后台数据 3.2.从data对象获取电影海报,标题,评分 3.3.过滤data.actor,获 ...
- 2022-11-17 vue移动端卖座电影项目(一) 获取后台数据
0.目标网页 卖座电影 1.获取url数据 位置:网络>复制>复制链接地址 2.获取电影列表数据 字段获取:网络>标头>请求标头> 3.代码 views/nowPlayi ...
- 2021-12-14 vue移动端卖座电影项目(十二) 使用mapState控制封装选项卡tabbar的显隐,以及回顾使用中央事件总线eventbus和vuex的state控制tabbar显隐的异同
文章目录 0.实现场景:进入详情页时,底部选项卡隐藏 1.使用中央事件总线控制tabbar的v-show的值 2.使用vuex的state控制tabbar的v-show的值 3.使用vuex的muta ...
- 2021-12-07 vue移动端卖座电影项目(七) 封装轮拨组件,使之可用于详情页Detail,实现演职员表的轮拨和剧照的轮拨
文章目录 0.实现效果 1.封装详情页的轮拨组件DetailSwiper 2.perView:显示张数设置为动态,两个轮拨图分别初始化的方法:重命名并获取当前的class名 3.最终代码和效果 代码 ...
- 2021-11-29 vue移动端卖座电影项目(三) vue项目中使用Swiper插件,Film页面设置轮拨图,nowPlaying页面设置样式
文章目录 1.引入swiper.vue组件 目的 步骤 结果 2.把swiper-slide做成匿名插槽 3.Film.vue中通过axios请求获取后台轮播图片 目的 步骤 因为现在原网站已取消轮拨 ...
- 2021-12-11 vue移动端卖座电影项目(十一) comingSoon用后台获取的数据写样式,以及用vuex的Action处理异步问题:切换FilmHeader中的两个标签时直接缓存数据
文章目录 0.vuex工作流程图复习 1.思路 2.axios获取后台数据(仿nowPlaying页即可) 3.用vuex的Action处理异步问题:切换FilmHeader中的"正在热映& ...
- 2021-12-09 vue移动端卖座电影项目(九) 使用事件总线EvenetBus控制选项卡tabbar的显隐(进入入详情页时隐藏)
文章目录 0.事件总线复习 1.显隐逻辑 2.Detail.vue和它要控制的tabbar.vue不是父子关系 3.使用中央事件总线来控制 4.效果 0.事件总线复习 2021-10-21 vue笔记 ...
- 2021-12-10 vue移动端卖座电影项目(十) 使用状态管理模式vuex的state控制选项卡tabbar的显隐,mutation的用法,this.$store.commit()的两个参数
文章目录 0.vuex复习 1.引入 2.在state中存showTabbar后,直接可以引用 3.在Detail.vue的两个钩子函数中设置控制showTabbar的布尔值 4.效果:实现进入详情页 ...
- 2021-12-22 vue移动端卖座电影项目(十五) 如何将项目上传到远程仓库
文章目录 0.git的介绍,官网,下载和安装 介绍 官网和下载地址和安装 2.git的使用命令 2.1.本地 2.2.上传到在线仓库:github,gitee等 2.3.下载 2.4.分支 3.上传v ...
最新文章
- Win10系统如何在防火墙里开放端口
- 如何从字符串中删除最后一个字符？
- HTML5学习笔记三
- Mysql数据库中修改库名的的方法
- node JS獲取GPS_Node.js 14 正式发布：V8 引擎升级，新增异步本地存储 API
- openerp学习笔记 domain 的应用
- oracle xml中cdata,XML CDATA的作用
- 前端学习（806）：数据类型内存分配
- VisualSVN服务器的本地搭建和使用
- python调研报告总结体会_调研报告心得体会
- 基于神念TGAM的脑波小车（1）
- Animate.css动画库下载、安装、使用与解析
- 求oracle学习资料（最好是视频）
- 物联网感知-光纤光栅传感器技术
- OC 教程 极光推送
- 计算机实验室安全员责任书,实验室人员安全责任书
- 病毒茶几 U盘里的恶魔——Autorun病毒
- C. Qualification Rounds(状压思维)
- 01-【介绍说明篇】Hello，ArcGIS网络分析
- ip 地址在线解析, api