前端开发
文章平均质量分 80
搬砖的乔布梭
这个作者很懒,什么都没留下…
展开
-
uni-app卖座电影多端开发纪实(六):多端打包
微信小程序【单个代码包的最大体积】不能超过2M,如果因为某些页面引用的静态资源文件较大较多的原因,导致单个代码包体积超过2M时,我们就需要进行页面的分包配置了;可以将小程序的众多页面分配到不同子包中,每个子包大小均不超过2M,所有子包的总体积加起来不能超过20M;等待一段时间之后,打包完成,生成的APK路径在unpackage/release/apk路径下。本教程不涉及原生App开发相关内容,我们为大家介绍云打包的App生成方式;如果公司中有专职的安卓/iOS开发程序员,我们可以选择执行本地打包;原创 2022-12-17 16:33:33 · 719 阅读 · 1 评论 -
uni-app卖座电影多端开发纪实(五):使用插件
秒间导入完成,此时工程下会多出一个uni_modules目录。的,因此无需导入+声明,页面模板可以直接部署它!原创 2022-12-17 16:32:30 · 730 阅读 · 0 评论 -
uni-app卖座电影多端开发纪实(四):用户交互
【代码】uni-app卖座电影多端开发纪实(四):用户交互。原创 2022-12-17 16:31:52 · 627 阅读 · 0 评论 -
uni-app卖座电影多端开发纪实(三):MVC
【代码】uni-app卖座电影多端开发纪实(三):MVC。原创 2022-12-17 16:30:31 · 647 阅读 · 0 评论 -
uni-app卖座电影多端开发纪实(二):搭建导航
中会生成这么一个玩意,就是页面声明了。NavBar导航齐活!Tabbar导航齐活!我们封装想要实现如下效果↓↓。先把这个搂一眼→_→。原创 2022-12-17 16:29:24 · 511 阅读 · 0 评论 -
uni-app卖座电影多端开发纪实(一):创建项目
easy-com就是easy component,就是要把传统的组件引入+声明子组件+部署,三步合而为一,使代码变得更简洁;无论是自己的组件,还是外来组件,只需要遵守easy-com的路径规范就能直接在模板中部署,无需引入+声明了;具体参见官网解释easy-com。原创 2022-12-17 16:29:11 · 378 阅读 · 0 评论 -
Vue3电影中后台开发纪实(九):项目简历与面试
刀锋电影管理端是刀锋电影App与刀锋电影小程序的中后台管理端程序;包含用户管理、数据看板、在映影片管理、预告管理、城市管理、影院管理、订单管理、运营管理、售后客服等模块;运营人员通过该系统可以创建与维护系统用户、管理用户权限、发布影片与影院信息、创建运营活动、跟踪用户订单、提供售后服务等;原创 2022-12-17 16:27:46 · 1734 阅读 · 0 评论 -
Vue3电影中后台开发纪实(八):打包上线
可以修改dist目录重命名为有意义的名字,例如movie-manager。原创 2022-12-17 16:27:11 · 679 阅读 · 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 · 621 阅读 · 0 评论 -
Vue3电影中后台开发纪实(六):权限管理
axios的响应拦截器里发现返回码是401/403,一脚踹到登录页;方案一:加载完整路由表,加全局守卫判断meta,无权限时一脚踹到登录页;方案二:先挂载公共路由表,登录后再addRoute动态挂载权限路由表;由服务端返回菜单(或前端登录后从本地调取对应菜单)并动态渲染;隐藏无权限的按钮;v-if没权限就不显示;自定义指令v-auth判断到无权限就直接删除当前按钮;如果不是管理员就直接删除当前元素/组件。原创 2022-12-17 16:25:12 · 541 阅读 · 0 评论 -
Vue3电影中后台开发纪实(五):组件封装
【代码】Vue3电影中后台开发纪实(五):组件封装。原创 2022-12-17 16:24:32 · 169 阅读 · 0 评论 -
Vue3电影中后台开发纪实(四):增删改查
项目源码:电影中台+后台 api/movieApi.js触发删除操作views/film/Playing.vue调用接口执行删除views/film/Playing.vue删除后反馈+刷新页面@删除前使用弹窗确认界面上准备好弹窗,并先行隐藏弹窗的关联数据使用一个ref控制弹窗的显隐使用一组弹窗模式控制弹窗的提示文字+确认回调完整的删除流程用户点击删除暂存要删除的影片ID设置好弹窗模式:内置提示文字 + 确认时的回调函数用户点击确认时调出先前暂存好的影片ID原创 2022-12-17 16:23:48 · 553 阅读 · 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 · 160 阅读 · 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 · 676 阅读 · 0 评论 -
Vue3电影中后台开发纪实(一):脚手架创建项目
克隆到本地脚手架配置实例根目录/project.config.json{"package" : "cli-creator" , /* 脚手架名称 */ "cmdName" : "ocli" , /* 【用户家目录下】的全局配置文件 */ "rcFile" : {/* 配置文件名 */ "name" : ".oclirc" , /* 给全局配置文件注入的默认数据 */ "default" : {原创 2022-12-17 16:21:28 · 591 阅读 · 0 评论 -
极简TS语法入门
;原创 2022-12-17 16:20:14 · 522 阅读 · 0 评论 -
Vue3仿卖座电影开发纪实(五):使用Vant
Vant是一个轻量、可靠的移动端 Vue 组件库;专用于开发O手机H5页面;我们在使用它的同时,更要学习人家的组件封装和设计思想;Vant4官方文档。原创 2022-12-17 16:12:10 · 652 阅读 · 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 · 885 阅读 · 0 评论 -
Vue3仿卖座电影开发纪实(三):MVC
【代码】Vue3仿卖座电影开发纪实(三):MVC。原创 2022-12-17 16:10:10 · 422 阅读 · 0 评论 -
Vue3仿卖座电影开发纪实(二):网络请求
【代码】Vue3仿卖座电影开发纪实(二):网络请求。原创 2022-12-17 16:09:32 · 689 阅读 · 0 评论 -
Vue3仿卖座电影开发纪实(一):搭建导航
!-- . vue文件是单文件组件(SingleFileComponent / SFC )组件是页面中的一小块 -- >原创 2022-12-17 16:07:41 · 236 阅读 · 0 评论 -
Vue发布自定义组件库
Vue自定义组件库原创 2022-08-25 05:06:24 · 1016 阅读 · 2 评论 -
前端项目面试核心问题(持续更新)
前端项目面试核心问题(持续更新)原创 2022-08-25 05:00:14 · 4074 阅读 · 4 评论 -
前端技术面试核心问题(持续更新)
前端技术面核心问题原创 2022-08-25 04:54:44 · 917 阅读 · 0 评论 -
JavaScript课堂练习
JavaScript课堂练习原创 2022-08-25 04:41:24 · 192 阅读 · 0 评论 -
NodeJS原生后台开发教程
NodeJS原生后台开发教程原创 2022-08-25 04:33:46 · 780 阅读 · 0 评论 -
Express+MongoDB服务端开发教程
Express+MongoDB服务端开发教程原创 2022-08-25 04:31:13 · 646 阅读 · 0 评论 -
Vite+React+TypeScript手撸TodoList
布局与样式一个TodoList长什么样子相信无需多言:上样式:src/TodoList.css.td-wrapper { width: 700px; margin: 0 auto;}.dp-wrapper { width: 100%; height: 40px; display: flex; margin-top: 10px;}.dp-wrapper input { flex: 4; height: 36px; l原创 2022-04-24 13:08:41 · 1357 阅读 · 0 评论 -
如何实现拖拽排序
可拖拽排序的菜单效果大家想必都很熟悉,本次我们通过一个可拖拽排序的九宫格案例来演示其实现原理。先看一下完成效果:实现原理概述拖拽原理当鼠标在【可拖拽小方块】(以下简称砖头)身上按下时,开始监听鼠标移动事件鼠标事件移动到什么位置,砖头就跟到什么位置鼠标抬起时,取消鼠标移动事件的监听排序原理提前定义好9大坑位的位置(相对外层盒子的left和top)将9大砖头丢入一个数组,以便后期通过splice方法随意安插和更改砖头的位置当拖动某块砖头时,先将其从数组中移除(剩余的砖头在逻辑上重新排原创 2021-08-21 17:20:20 · 3304 阅读 · 2 评论 -
2.3 Web前端:JavaScript3:流程控制
#条件语句通过条件来控制程序的走向,就需要用到条件语句。##运算符1、算术运算符: +(加)、 -(减)、 *(乘)、 /(除)、 %(求余)2、赋值运算符:=、 +=、 -=、 *=、 /=、 %=3、条件运算符:、=、&amp;amp;amp;gt;、&amp;amp;amp;gt;=、&amp;amp;amp;lt;、&amp;amp;amp;lt;=、!=、&amp;amp;amp;amp;&原创 2018-11-21 00:56:16 · 198 阅读 · 0 评论 -
1.4 Web前端:常用CSS样式1:文本样式
#css基本语法及页面引用##css基本语法css的定义方法是:选择器 { 属性:值; 属性:值; 属性:值;}选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性每个属性有一个或多个值。代码示例:div{ width:100px; height:100px; color:red }##css页面引入方法:1、外联式:通过link标签,链接到外部样式表到页面中。&amp;lt...原创 2018-11-20 14:27:10 · 222 阅读 · 0 评论 -
1.1 Web前端:常用HTML标签1
#html标题通过 &amp;lt;h1&amp;gt;、&amp;lt;h2&amp;gt;、&amp;lt;h3&amp;gt;、&amp;lt;h4&amp;gt;、&amp;lt;h5&amp;gt;、&amp;lt;h6&amp;gt;,标签可以在网页上定义6种级别的标题。6种级别的标题表示文档的6级目录原创 2018-11-20 14:21:53 · 162 阅读 · 0 评论 -
2.6 Web前端:JavaScript6:定时器
#定时器##定时器在javascript中的作用1、制作动画2、异步操作3、函数缓冲与节流定时器类型及语法/* 定时器: setTimeout 只执行一次的定时器 clearTimeout 关闭只执行一次的定时器 setInterval 反复执行的定时器 clearInterval 关闭反复执行的定时器*/var time1 = s...原创 2018-11-21 00:56:37 · 222 阅读 · 0 评论 -
1.7 Web前端:常用CSS样式4:定位
#定位##关于定位我们可以使用css的position属性来设置元素的定位类型,postion的设置项如下:relative 生成相对定位元素,元素所占据的文档流的位置不变,元素本身相对文档流的位置进行偏移absolute生成绝对定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位,如果找不到,则相对于...原创 2018-11-20 14:28:38 · 158 阅读 · 0 评论 -
2.8 Web前端:JavaScript8:实战案例
#1.for循环图片的应用在页面上显示一个矩形,鼠标在这个矩形的某个地方划过,则在该位置以矩形的形式显示图片的一部分。效果图:鼠标滑过之后:&amp;amp;lt;!DOCTYPE html&amp;amp;gt;&amp;amp;lt;html lang=&amp;quot;en&amp;quot;&amp;amp;gt;&amp;amp;lt;head&原创 2018-11-21 00:56:51 · 405 阅读 · 0 评论 -
2.2 Web前端:JavaScript2:变量、数组、字符串
#变量JavaScript 是一种弱类型语言,javascript的变量类型由它的值来决定。 定义变量需要用关键字 ‘var’ var a = 123; var b = 'asd';//同时定义多个变量可以用&amp;quot;,&amp;quot;隔开,公用一个‘var’关键字 var c = 45,d='qwe',f='68';##变量类型5种基本数据类型:number、string、boolean、unde...原创 2018-11-21 00:56:08 · 222 阅读 · 0 评论 -
JavaScript设计模式综合应用案例
今天我们模拟小米智能家居应用场景,融合单例模式、组合模式、观察者模式做一个综合应用案例。具体场景如下:小米门铃为主人开门,触发开门事件;小米智能控制台监测到开门事件,自动启动小米空调和小米电视;思路分析小米控制台,在家庭单位内只有一个实例,我们使用单例模式;小米控制台通过startWork这一统一接口控制全部智能家居,对于有相同接口的不同实例进行统一调度,我们可以应用组合模式;小米控制台监听小米门铃的开门事件,观察者模式;定义【组合】和【组件】两个父类接口后续由小米控制台对【组合】做原创 2021-06-21 17:47:55 · 359 阅读 · 0 评论 -
2.11 Web前端:JQuery3:动画和特效
#jquery动画通过animate方法可以设置元素某属性值上的动画,可以设置一个或多个属性值,动画执行完成后会执行一个函数。$('#div1').animate({ width:300, height:300},1000,swing,function(){ alert('done!');});参数可以写成数字表达式:$('#div1').animate({...原创 2018-11-21 00:57:13 · 175 阅读 · 0 评论 -
2.5 Web前端:JavaScript5:常用DOM操作
#创建元素##创建元素使用document.createElement()可以创建新元素。这个方法只接受一个参数,即要创建元素的标签名。这个标签名在HTML文档中不区分大小写,在XHTML中区分大小写。var div = document.createElement(&amp;quot;div&amp;quot;);使用createElement()方法创建新元素的同时,也为新元素设置了ownerDocument属性,可以...原创 2018-11-21 00:56:29 · 353 阅读 · 0 评论 -
1.5 Web前端:常用CSS样式2:其它样式
#css颜色表示法css颜色值主要有三种表示方法:1、颜色名表示,比如:red 红色,gold 金色2、rgb表示,比如:rgb(255,0,0)表示红色3、16进制数值表示,比如:#ff0000 表示红色,这种可以简写成 #f00#css选择器常用的选择器有如下几种:##标签选择器标签选择器,此种选择器影响范围大,建议尽量应用在层级选择器中。举例:*{margin:0;pad...原创 2018-11-20 14:27:25 · 156 阅读 · 0 评论