- 博客(25)
- 收藏
- 关注
RSS订阅
原创 Vue+Express+Mysql的电影售票管理项目
项目地址：https://github.com/J1ong/FilmSys（Github上附有完整使用说明，欢迎大家star）介绍这是一个由个人开发影院售票App，App采用的是当前较为流行的Vue组件框架和当前较火的轻量级NodeJs后台中的Express框架，技术上通过视口、媒体查询和相对单位能很好地适配不同像素、不同分辨率的移动终端。App实现了查看信息、选座购票、评论点赞、收藏...
2019-07-15 17:04:39
3314
26
原创 设置网页特定字体
1、首先得有相关字体的文件，加入到项目中2、配置引入字体的文件// 引入数字字体@font-face { font-family: 'digits'; src: url('../assets/fonts/digits.ttf') format('truetype');}3、使用4、效果
2022-03-14 17:24:34
596
原创 绝大多数浏览器滚动条样式兼容性写法
* { scrollbar-color: #ffffff rgba(0,0,0,0.4); /* 滑块颜色 滚动条背景颜色 */ scrollbar-width: thin; /* 滚动条宽度有三种：thin、auto、none */}/*滚动条样式*/*::-webkit-scrollbar{ width: 8px;}*::-webkit-scrollbar-thumb{ border-radius: 5px; height: 50px; background-colo
2021-12-02 09:06:43
1045
原创 快速设置网站标题旁的logo
<linkrel="icon"href="yn.png"type="image/x-icon"><linkrel="shortcuticon"href="yn.png"type="image/x-icon">
2021-03-22 16:22:19
203
原创 display、visibility和opacity隐藏元素的区别
前言：display:none,visibility:hiddren和opacity:0在某种程度上可以实现对html元素的隐藏，但还是有所区别的，具体结合业务场景应用。隐藏元素的方法隐藏后是否占据页面空间隐藏后是否还产生交互(如hover，click等)display:none否否visibility:hiddren是否opacity:0是是...
2020-07-21 16:10:04
238
原创 Vue电影项目
项目地址：https://github.com/J1ong/FilmSys介绍这是个人开发的电影售票管理项目，采用的是较为流行的Vue框架和Node的Express框架。前端页面展示：总体展示购票流程后台展示：登录页管理系统页项目说明整体项目目录├── film 前端页面项目文件├── film_admin 后台管理系统├── film_api 前后台接口文件├── db_film.sql 数据库文件拉取项目#依次执行以下命令git clone https://git
2020-06-03 09:49:48
5411
52
原创 CSS让元素水平垂直居中的常用方法
一、定宽居中方法1position:absolute;top:50%;left:50%;margin-top:-50px; /*假定元素高为100px*/margin-left:-50px; /*假定元素宽为100px*/方法2position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;二、不定宽居中方法1position:absolute;top:50%;left:50%;transform:transl
2020-05-19 16:11:19
158
原创 前端性能优化汇总
一、页面级别1.减少页面请求资源大小或次数(1)压缩合并css、js，css合并成1个文件，js合并成一个文件(2)使用字体图标和svg替换传统的png图片(3)图片懒加载(4)使用雪碧图或精灵图(5)减少cookie的使用(6)前后端数据交互是尽可能使用json格式传送(7)合理使用keep-alive(8)避免使用iframe(9)使用localStorage、sessionStorage存储一些简单的数据2.内联脚本位置，防阻塞二、代码级别1.减少闭包的使用2.减少DOM操
2020-05-19 14:35:45
110
原创 Git修改commit提交信息
对于修改git上commit的提交信息，我们可以分两种情况进行处理。1、已经commit但未push到git上git commit --amend输入命令后就可进入编辑界面进行修改了修改细节：在英文输入法状态下输入i进入编辑模式，修改完后还是英文输入法状态按Esc退出编辑状态，输入:wq保存并退出2、已经commit并push到git上git rebase -i HEAD~3这行...
2019-12-04 11:17:58
3161
原创 清除已设置的淘宝镜像
设置淘宝镜像命令的是：npm config set registry https://registry.npm.taobao.org清楚淘宝镜像命令即重新设置原来的即可，命令如下：npm config set registry https://registry.npmjs.org...
2019-11-13 16:51:10
1652
原创 React快速上手之react安装
一、Node.js的安装Node.js压缩包及源码下载地址，根据你们的系统和需求选择合适的进行下载即可，安装步骤基本都是下一步下一步即可。二、淘宝镜像安装为什么要用淘宝镜像呢？答：因为国内使用 npm 速度很慢，有时候在在拉取各种资源时,往往会非常慢，一直卡在那不动，使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm就好很多了:npm install -g ...
2019-11-13 15:08:41
269
原创 Vue中快速上手ECharts绘制图表
npm安装ECharts使用如下命令通过 npm 安装 EChartsnpm install echarts --save 绘制简单图表绘制图表之前我们需要准备一个具备高宽的 DOM 容器。<template> <div id='app'> <div id='echart' style='width: 200px; height: 200px'...
2019-09-30 11:53:21
540
转载 chrome调试-性能分析performance
1、performance页面性能分析本文将介绍如何使用chrome devTool的performance来对页面进行性能分析（1）操作过程1、进入匿名模式保证分析结果少收到其他插件的干扰（windows可使用快捷点 ctrl + shift + N）2、确保screenshots checkbox是选中的，然后点击controls，开始记录（windows快捷键 shift + ...
2019-09-26 16:12:25
1521
原创 Js中的防抖与节流
首先，我们以window.onresize事件为例，来看一下未做防抖的情况。代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi...
2019-09-03 11:40:55
220
原创 Babel 将 ES6 转成 ES5 的思路
Babel 是如何把 ES6 转成 ES5 呢，其大致分为三步：将代码字符串解析成抽象语法树，即所谓的 AST 对 AST 进行处理，在这个阶段可以对 ES6 代码进行相应转换，即转成 ES5 代码 根据处理后的 AST 再生成代码字符串...
2019-08-26 15:51:15
248
原创 Vue封装移动端日期选择器组件
npm地址：https://www.npmjs.com/package/vuejs-mobile-datepicker Github地址：https://github.com/J1ong/vuejs-mobile-datepicker（欢迎Star）效果图：日期选择器组件功能在线演示地址https://1g703.csb.app(为有更好的体验，请在浏览器上切换到手机模式或在手...
2019-08-02 15:37:46
7906
5
原创 Vue error：Props with type Object/Array must use a factory function to return the default value.
Invalid default value for prop "defaultDate": Props with type Object/Array must use a factory function to return the default value.解决：
2019-08-02 15:11:46
1772
原创 如何去除input内有数字与字母的时候出现红色波浪线
当input框内有数字与字母的时候出现红色波浪线如图，解决在input中的属性上加spellcheck =“false”就行了spellcheck，HTML5 支持的属性，用true和false来设定是否对用户输入的文章内容进行拼写检查。拼写检查结果的显示方法交给浏览器自己定义，比如Opera会在单词下面划出红色的波浪线。...
2019-07-25 17:13:06
7098
原创 修改Git提交说明信息
如果你发现，你commit到Github上的说明信息不准确或者不完整，想做修改。那应该怎么做呢？首先我们可以分两种情况去处理：1.最近一次提交如果是对最近一次的提交信息做修改，我们可以在命令行输入我们就进入了vim编辑器，对我们的提交说明信息进行修改，带#行表示注释，我们所做的就是修改第一行的内容，按下i进入编辑状态，修改提交说明信息。修改完成后按Esc退出编辑状态，...
2019-07-24 14:24:20
2932
原创 都在用的Flex布局神器
一、Flexdisplay: flex; //将对象作为弹性伸缩盒展示display: -wekit-flex; //webkit内核浏览器上使用需加上前缀dispaly: inline-flex // 将对象作为内联块级伸缩盒展示dispaly: flex || inline-flex //兼容写法二、容器属性flex-direction: row | row-rever...
2019-07-17 12:35:47
797
原创 微信小程序动画其实很简单
在小程序中，通常可以使用CSS渐变和CSS动画来创建简易的界面动画。同时，还可以使用 wx.createAnimation 接口来动态创建简易的动画效果。这里我们主要介绍一下使用微信wx.createAnimation 接口来创建动画效果。1.创建动画实例//js文件this.animation = wx.createAnimation({ duration:3000,...
2019-06-18 16:27:17
384
原创 CSS3 实现文字渐变色
直接上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> p{ font-size: 60px; ...
2019-06-13 15:59:13
42263
4
原创 微信小程序组件绑定事件该如何传参
小程序在组件上绑定事件后，传递参数的方式不同于前端开发其他场景中直接加参数的方式，小程序在参数的传递时，采用事件对象的自定义属性的方式，具体实现如下：wxml：<view class="normal" bindtap="switchMovieTab" data-flag="{{true}}">热映</view>js：switchMovieTab(e){...
2019-06-12 17:15:08
4673
原创 如何快速把本地项目上传到GitHub
1.首先你得需要有一个github账号和git工具，没有的同学要先注册和安装。github注册地址：https://github.com/join?source=logingit工具下载安装地址：https://git-scm.com/downloads2.登录成功后来到首页，我们在右上角可以看到有一个+号下拉列表，点击选择New repository创建一个仓库。3.我们填写...
2019-06-11 14:34:18
120
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人