![](https://img-blog.csdnimg.cn/7f2d95c2a4034e0098c8d4a46de5b616.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue仿卖座电影全生态开发纪实
文章平均质量分 79
本专栏为Vue实战前端开发的集大成之作,零基础教学,生态完整,源码齐备,完整吃透可进阶Vue中高级开发工程师;
前端:手机H5 + 小程序 + 安卓App;
中台:卖座电影后台管理;
后端:脚手架全自动服务端搭建;
高级知识点包含:自定义脚手架、自定义组件库与发布、大屏数据可视化、权限管理等等;
搬砖的乔布梭
这个作者很懒,什么都没留下…
展开
-
Vue3仿卖座电影开发纪实(一):搭建导航
!-- . vue文件是单文件组件(SingleFileComponent / SFC )组件是页面中的一小块 -- >原创 2022-12-17 16:07:41 · 234 阅读 · 0 评论 -
Vue3仿卖座电影开发纪实(二):网络请求
【代码】Vue3仿卖座电影开发纪实(二):网络请求。原创 2022-12-17 16:09:32 · 683 阅读 · 0 评论 -
Vue3仿卖座电影开发纪实(三):MVC
【代码】Vue3仿卖座电影开发纪实(三):MVC。原创 2022-12-17 16:10:10 · 415 阅读 · 0 评论 -
Vue3仿卖座电影开发纪实(四):用户交互
* 动态路由 id为动态路由参数 组件实例中this.$route.params.id */ { < div class = " toggle " @click = " hideSynopsis =!-- 隐藏时使用↓图标 --> < i v-if = " hideSynopsis " class = " fa fa-angle-down " style = " font-size : 20px " >原创 2022-12-17 16:11:25 · 880 阅读 · 0 评论 -
Vue3仿卖座电影开发纪实(五):使用Vant
Vant是一个轻量、可靠的移动端 Vue 组件库;专用于开发O手机H5页面;我们在使用它的同时,更要学习人家的组件封装和设计思想;Vant4官方文档。原创 2022-12-17 16:12:10 · 645 阅读 · 0 评论 -
极简TS语法入门
;原创 2022-12-17 16:20:14 · 514 阅读 · 0 评论 -
Vue3电影中后台开发纪实(一):脚手架创建项目
克隆到本地脚手架配置实例根目录/project.config.json{"package" : "cli-creator" , /* 脚手架名称 */ "cmdName" : "ocli" , /* 【用户家目录下】的全局配置文件 */ "rcFile" : {/* 配置文件名 */ "name" : ".oclirc" , /* 给全局配置文件注入的默认数据 */ "default" : {原创 2022-12-17 16:21:28 · 584 阅读 · 0 评论 -
Vue3电影中后台开发纪实(二):导航搭建
该样式是在main.scss中被全局引入的/* 定义过渡动画 */ /* 定义fade动画的入场和出场效果 */ . slide - fade - enter - active , . slide - fade - leave - active {} /* 定义fade动画的场外状态 */ . slide - fade - enter - from , . slide - fade - leave - to {原创 2022-12-17 16:22:11 · 666 阅读 · 0 评论 -
Vue3电影中后台开发纪实(三):数据展示
{// 规定电影id为24个数字或小写字母 path : "/film/:id(\\d+)" , name : "detail" , meta : {});/* 获取影片详情 */ onMounted(async() => {/* 将detail中的数据同步到form中 表单中自动同步数据 */ Object . assign(form , detail , {原创 2022-12-17 16:23:04 · 150 阅读 · 0 评论 -
Vue3电影中后台开发纪实(四):增删改查
项目源码:电影中台+后台 api/movieApi.js触发删除操作views/film/Playing.vue调用接口执行删除views/film/Playing.vue删除后反馈+刷新页面@删除前使用弹窗确认界面上准备好弹窗,并先行隐藏弹窗的关联数据使用一个ref控制弹窗的显隐使用一组弹窗模式控制弹窗的提示文字+确认回调完整的删除流程用户点击删除暂存要删除的影片ID设置好弹窗模式:内置提示文字 + 确认时的回调函数用户点击确认时调出先前暂存好的影片ID原创 2022-12-17 16:23:48 · 546 阅读 · 0 评论 -
Vue3电影中后台开发纪实(五):组件封装
【代码】Vue3电影中后台开发纪实(五):组件封装。原创 2022-12-17 16:24:32 · 163 阅读 · 0 评论 -
Vue3电影中后台开发纪实(六):权限管理
axios的响应拦截器里发现返回码是401/403,一脚踹到登录页;方案一:加载完整路由表,加全局守卫判断meta,无权限时一脚踹到登录页;方案二:先挂载公共路由表,登录后再addRoute动态挂载权限路由表;由服务端返回菜单(或前端登录后从本地调取对应菜单)并动态渲染;隐藏无权限的按钮;v-if没权限就不显示;自定义指令v-auth判断到无权限就直接删除当前按钮;如果不是管理员就直接删除当前元素/组件。原创 2022-12-17 16:25:12 · 535 阅读 · 0 评论 -
Vue3电影中后台开发纪实(七):重构为TS
找不到模块“@store/index”或其相应的类型声明。ts(2307)“config.headers”可能为“未定义”。ts(18048)“store.state”的类型为“未知”。ts(18046)${(.as).}const {类型“number”的参数不能赋给类型“string”的参数。ts(2345)不能将类型“number”分配给类型“null”。ts(2322)原创 2022-12-17 16:26:15 · 613 阅读 · 0 评论 -
Vue3电影中后台开发纪实(八):打包上线
可以修改dist目录重命名为有意义的名字,例如movie-manager。原创 2022-12-17 16:27:11 · 672 阅读 · 0 评论 -
Vue3电影中后台开发纪实(九):项目简历与面试
刀锋电影管理端是刀锋电影App与刀锋电影小程序的中后台管理端程序;包含用户管理、数据看板、在映影片管理、预告管理、城市管理、影院管理、订单管理、运营管理、售后客服等模块;运营人员通过该系统可以创建与维护系统用户、管理用户权限、发布影片与影院信息、创建运营活动、跟踪用户订单、提供售后服务等;原创 2022-12-17 16:27:46 · 1719 阅读 · 0 评论 -
uni-app卖座电影多端开发纪实(一):创建项目
easy-com就是easy component,就是要把传统的组件引入+声明子组件+部署,三步合而为一,使代码变得更简洁;无论是自己的组件,还是外来组件,只需要遵守easy-com的路径规范就能直接在模板中部署,无需引入+声明了;具体参见官网解释easy-com。原创 2022-12-17 16:29:11 · 364 阅读 · 0 评论 -
uni-app卖座电影多端开发纪实(二):搭建导航
中会生成这么一个玩意,就是页面声明了。NavBar导航齐活!Tabbar导航齐活!我们封装想要实现如下效果↓↓。先把这个搂一眼→_→。原创 2022-12-17 16:29:24 · 501 阅读 · 0 评论 -
uni-app卖座电影多端开发纪实(三):MVC
【代码】uni-app卖座电影多端开发纪实(三):MVC。原创 2022-12-17 16:30:31 · 642 阅读 · 0 评论 -
uni-app卖座电影多端开发纪实(四):用户交互
【代码】uni-app卖座电影多端开发纪实(四):用户交互。原创 2022-12-17 16:31:52 · 619 阅读 · 0 评论 -
uni-app卖座电影多端开发纪实(五):使用插件
秒间导入完成,此时工程下会多出一个uni_modules目录。的,因此无需导入+声明,页面模板可以直接部署它!原创 2022-12-17 16:32:30 · 715 阅读 · 0 评论 -
uni-app卖座电影多端开发纪实(六):多端打包
微信小程序【单个代码包的最大体积】不能超过2M,如果因为某些页面引用的静态资源文件较大较多的原因,导致单个代码包体积超过2M时,我们就需要进行页面的分包配置了;可以将小程序的众多页面分配到不同子包中,每个子包大小均不超过2M,所有子包的总体积加起来不能超过20M;等待一段时间之后,打包完成,生成的APK路径在unpackage/release/apk路径下。本教程不涉及原生App开发相关内容,我们为大家介绍云打包的App生成方式;如果公司中有专职的安卓/iOS开发程序员,我们可以选择执行本地打包;原创 2022-12-17 16:33:33 · 701 阅读 · 1 评论