- 博客(201)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 VueTemplate轻量级后台管理系统模板框架
项目预览登陆页面系统界面404界面安装项目依赖npm install运行项目npm run dev项目进行打包npm run build项目规范校验.eslintrc.js 是对项目编码规范进行限制的操作.eslintignore 中配置忽略校验的文件第三方组件库Element UI 第三方组件库使用饿了吗的Element UI样式重置normalize.css is a modern alternative to CSS resets多语言支持i18n
2020-11-18 10:05:44
1300
原创 Vue项目中使用过滤器
为什么要使用过滤器？ 能够对数据进行各种过滤处理，返回需要的结果，非常的方便和快捷。怎么使用过滤器？ 首先过滤器分为两类：>- 全局过滤器>- 局部过滤器例如：Vue.filter('filterDome', function(val) { // val 为固定的参数 即是你需要过滤的数据 return val.split('.')})全局过滤...
2020-03-10 17:45:32
2470
2
原创 Vue项目中使用iconfont
首先创建自己的iconfont项目设置步骤如下：其中Font Family的值默认就可以，之后添加一些图标到自己的项目中。下载iconfont到本地下载到本地之后解压选中下面几个文件在项目中建立引用现在项目中建立一个iconfont的文件，把上面几个文件复制到这个文件中：之后再建一个样式文件，用于项目中使用同时在入口文件index.scss中引用到此，整个引用的顺序已...
2020-03-09 16:14:07
1195
1
原创 模拟window系统的ip输入框(支持粘贴复制)
需求：支持点、回车、长度三位之后自动跳转到下个输入框支持删除自动回退到前一个支持任意位置粘贴ip效果：进行vue代码的封装：/** * IP输入组件 */<template> <ul class="ipAdress" :style="{'background-color': disableFlag? '#f7f7f7' : '',...
2020-03-02 18:33:11
465
原创 vue项目代码注释规范
文件注释规范 单个文件注释规范，每个独立的VUE文件开头都要进行注释，表明该文件的描述信息、作者、创建时间等。<!-- * @FileDescription: 该文件的描述信息 * @Author: 作者信息 * @Date: 文件创建时间 * @LastEditors: 最后更新作者 * @LastEditTime: 最后更新时间 -->效果：方法注释规范...
2020-02-20 11:48:16
35672
3
原创 CSS常用技巧
技巧一：渐变色问题<html><head> <style> .gradient-text { background-image: linear-gradient(90deg, red, blue); -webkit-background-clip: text; ...
2020-02-18 17:08:49
209
原创 CSS模拟电池充电效果的实现
模拟简单的电池充电效果先画出电池的轮廓<html><head> <style> html,body { width: 100%; height: 100%; display: flex; background-color: #e4e4...
2019-12-24 11:45:55
3546
1
原创 基于DOM元素的自定义窗格思路以及实现
效果如下：实现的思路怎么实现款选时选中的白线的效果，怎么实现模拟对下面小的框格的选中效果。怎样进行合并之后窗格的布局显示，以及合并之后的再合并操作怎样进行还原操作，以及怎样判断框选主的是矩形（只允许框选矩形进行合并）…实现的步骤：构造需要操作的div并设置相关的样式 <div class="box"> <div v-for=...
2019-10-07 11:30:26
177
原创 Vue实现类似于word插入表格时选中行列的效果
首先看一下效果：实现的思路：先设置一个容器的，容器中放上10×10的小格子，同时监听容器的进入和离开方法。每个小格子上设置鼠标进入的方法，同时传入当前的序号，计算出当前的行和列，改变背景颜色。监听容器的是从那个位置进入，只有从左边和上边进入有效。相关的核心代码：判断鼠标移入元素的方向——上下左右，核心代码：var direction = Math.round((((Math...
2019-09-28 18:42:21
1666
3
原创 详解HTTP摘要认证
典型的认证过程客户端请求一个需要认证的页面，但是不提供[用户名]和[密码]。通常这是由于用户简单的输入了一个地址或者在页面中点击了某个[超链接]。服务器返回[401] “Unauthorized” 响应代码，并提供认证域(realm)，以及一个随机生成的、只使用一次的数值，称为[密码随机数 nonce]。此时，浏览器会向用户提示认证域(realm)（通常是所访问的计算机或系统的...
2019-08-31 17:28:53
1714
原创 vue项目开发规范总结
强制执行的：文件名要为多个单词，且语义明确，同时要为大写驼峰组件名应该始终是多个单词的，根组件 App 以及 、 之类的 Vue 内置组件除外。反例：Vue.component('todo', { // ...})好例：export default { name: 'TodoItem', // ...}组件数据data必须为一个函数反例：export ...
2019-08-28 16:48:32
709
原创 Vue学习笔记（三）------配置项
包管理工具和配置项npm和package.jsonnpm 是 Node Package Manager 的简称，顾名思义，它是 node 的包管理工具，也是目前世界上最大的开源库生态系统。使用 vue-cli 来构建自己的项目，并生成了相应的目录结构，而在最外层目录中，我们可以看到有 package.json 这一文件，该文件便是我们需要了解的包管理文件，例如：{ "name"...
2019-07-20 17:33:15
3390
原创 OpenLayers实现小车的轨迹查询的功能
支持实现的功能限制3天的时间跨度小车在运动中改变速度小车重新运动小车运动的点位支持打开详情信息这是自己当时刚从后端切到前端时，实现的第一个功能，当时都没有接触过前后端分离的开发模式，更不知道react,抱着现学现做的态度做的…，可能有需要的同学，做个参考吧。import React, {Component} from 'react';import {DatePicker, Inp...
2019-06-04 19:57:43
2681
2
原创 Vue学习笔记（二）------axios学习
axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。axios的功能和特征：从浏览器中创建XMLHttpRequests从node.js中创建http请求支持PromiseAPI拦截请求和响应转换请求数据和响应数据取消请求自动转化JSON数据客户端支持防御XSRF在项目中安装axois使用npmnpm install...
2019-04-20 17:34:53
305
原创 vue学习笔记（一）------脚手架vue cli
脚手架vue-cli(3.x)vue-cli是一个基于vue.js进行快速开发的完整系统，提供下面几个功能：通过 @vue/cli 搭建交互式的项目脚手架。通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。一个运行时依赖 (@vue/cli-service），该依赖：可升级；基于 webpack 构建，并带有合理的默认配置；可以通...
2019-04-17 16:46:35
944
原创 React中使用地图时一些常用方法总结
WGS84转换为火星 /** * 从84转火星 * @param {Number} wgsLng 经度 * @param {Number} wgsLat 纬度 * @return {[Number,Number]} point */ getWGS2Mars(wgsLng, wgsLat) { if (this._out...
2019-03-26 19:30:40
814
原创 在React中实现一个简单的SVG背景图
在React中实现简单的Svg背景框首先我们需要定义一个SVG.jsx组件，这个组件用于绘制svg背景： import React from 'react' import { Component } from 'react' export default class Svg extends Component { constructor(prop...
2019-03-26 19:15:07
3322
原创 Flex布局讲解
Flex弹性盒布局Flex是Flexible Box的缩写，意为’弹性布局’。任意一个容器都可以指定为Flex布局：.box{ display: flex; }注意一点：设置flex布局之后，子元素的float、clear和vertical-align属性将失效。基本概念 采用弹性盒布局的元素称为Flex容器，简称容器。它的所有子元素自动成为容器成员，称为Flex项目，简...
2019-03-26 16:45:24
343
原创 Spring MVC +Spring Boot + Mybatis项目整合
开发环境使用IDEA通过IDEA新建项目点击下一步：填写完成项目名之后点击下一步：点击下一步：点击完成之后便开始创建项目了，项目的目录结构如下：删掉一些不需要的文件夹，并在pom文件中添加我们需要的依赖：添加mysql和mybatis的依赖：删除掉reources文件夹下面暂时不需要的目录，新建mapper文件夹和mybatis-config.xml文件：m...
2019-03-20 16:10:35
764
原创 理解并使用Redux
1.为什么要使用redux 像父子组件之间相互传值相互调用的情况，并且值的适用范围仅限于父子组件之间，这时不需要使用Redux.当某个子组件去更新某种状态时，比如更新组织机构数据。而其他的页面又需要依赖这些数据时，此时可以考虑使用redux，把这些状态值放入到redux中进行管理。2.redux工作的过程图3.redux的工作流程图Redux简介Redux是针对J...
2019-03-17 10:45:11
441
转载 react 函数式组件和类组件的应用场景
函数式组件操作非常简单能够实现的功能非常简单，只是简单的调取和返JSX而已类组件1.操作相对复杂一些，可以实现一些更为复杂的业务场景。2. 能够使用生命周期函数操作操作业务3. 函数式组件可以理解为静态组件（组件中内容调取时已经固定了，很难在修改），而类这种方式，可以根据组件内部的状态来动态的更新和渲染内容...
2019-03-15 09:45:14
3638
原创 常用HTTP响应状态码
web应用中常用的响应状态码：状态代码有三位数字组成，第一个数字定义了响应的类别，且有五种可能取值：1xx：指示信息–表示请求已接收，继续处理2xx：成功–表示请求已被成功接收、理解、接受3xx：重定向–信息不完整需要进一步补充4xx：客户端错误–请求有语法错误或请求无法实现5xx：服务器端错误–服务器未能实现合法的请求常见http响应状态码： 请求收到，继续处理：...
2019-03-10 11:54:47
6555
原创 localStorage、sessionStorage、Cookie的区别详解
localStorage、sessionStorage、Cookie共同点:都保存在浏览器端，且是同源的（顺便解释一下同源：域名、协议、端口号相同）localStorage、sessionStorage、Cookie不共同点:存储大小的不同：localStorage的大小一般为5MsessionStorage的大小一般为5Mcookies的大小一般为4K有效期不同：...
2019-03-09 18:20:56
5964
原创 JavaScript中闭包和display:inline-block的知识点记录
闭包闭包是由函数以及创建的函数的词法环境组合而成，这个环境包含了闭包创建时所能访问的所有的局部变量。实例：/** * 闭包的实例 * @param x * @returns {function(*): *} */ function makeAdder(x) { return function (y) { ...
2019-03-08 16:24:40
463
原创 JavaScript中实现深拷贝（针对于对象）
/** * 对象深拷贝（只适用于对象） * @param {*} sourceObj 源对象 * @param {*} targetObj 目标对象 */ function deepClone(sourceObj, targetObj = {}) { //返回对象属性组...
2019-03-07 16:57:47
176
原创 React项目中使用less总结
如何在react项目中安装less安装react-app-rewired，react-app-rewire-less，babel-plugin-import插件执行命令：npm install react-app-rewired --save-devnpm install react-app-rewire-less --save-devnpm install babel-plug...
2019-03-05 19:28:11
16253
2
原创 JavaScript中防止函数多次调用：防抖和节流
防抖你是否在日常开发中遇到一个问题，在滚动事件中需要做个复杂计算或者实现一个按钮的防二次点击操作。这些需求都可以通过函数防抖动来实现。尤其是第一个需求，如果在频繁的事件回调中做复杂计算，很有可能导致页面卡顿，不如将多次计算合并为一次计算，只在一个精确点做操作。PS：防抖和节流的作用都是防止函数多次调用。区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于wait，防抖的情...
2019-02-20 08:04:57
3808
1
原创 前端需要掌握的Nginx知识点
什么是Nginx?Nginx是一款免费开源的高性能HTTP服务器以及反向代理服务器（Reverse Proxy）,同时可以提供IMAP/POP3/SMATP代理服务等功能。能够快速的响应静态页面请求和支持第三方功能模块扩展。Nginx的优点高并发、高性能（官方给出的并发数据5万，实际中可以达到2-4万）轻量级、内存消耗少稳定性高，宕机概率低支持热部署模块化设计，扩展性较好c...
2018-12-15 16:03:15
341
原创 React项目中请求接口的封装
封装目录中所包含的文件 Api.js ApiIp.js ApiURL.jsApiIp.js文件的作用这个文件的作用主要是在开发环境和生产环境下调用不同的接口请求地址，生产环境下此文件的作用是动态的获取浏览器中的地址进行拼装，便可以动态的获取地址，不需要写死//获取当前的URL中的地址，同时携带端口号,不携带http://let projectAddrass = windo...
2018-12-10 15:18:06
17802
3
原创 React中eslint使用总结
eslint常用配置：module.exports = { // 环境定义了预定义的全局变量 "env": { "browser": true, "node":true, "commonjs": true, "es6": true }, "extends": "eslint:reco
2018-12-10 10:44:08
5481
原创 CSS布局解决方案
居中布局水平居中使用inline-block+text-align原理：先将子框由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。用法：对子框设置display:inline-block，对父框设置text-align:center。&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&a
2018-12-10 10:30:11
192
原创 IE浏览器中Get请求方式有缓存的问题
在前端项目开发中，会遇到一种很奇怪的情况，就是在IE浏览器中get请求方式在初次请求之后不再进行请求了，而是会从缓存中获取数据，但是chrome浏览器会中却每次都会获取。 自然的想到一个问题，就是get存在缓存的问题！ 起源： 常见的是ajax请求过一次以后，以后的相同url的get请求会存在下面这种情况：第一种情况：有时返回304，有时返回200;第二种情况：有时无论后...
2018-12-10 10:00:07
8367
1
原创 Nginx与前端开发
Nginx与node.js“Nginx是一款轻量级的HTTP服务器，采用事件驱动的异步非阻塞处理方式框架，这让其具有极好的IO性能，时常用于服务端的反向代理和负载均衡。” 作为前端开发，即使没用过Nginx，但一定听说过上面这句话。这句经典的话，基本构成了所有人对Nginx的第一印象。 Nginx发布于2004年，经过初期几年的沉淀之后，迅速蹿升为“网红”，成为了当年互联网技术圈最火的...
2018-12-10 09:54:01
1410
原创 Animation.css学习笔记
animation.css是一款非常炫酷、有趣、跨浏览器的预设css3动画库，便于你在项目中引用。安装npm install animate.css --save 或者 yarn add animate.css 或者直接下载使用在项目中引用&amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;link rel=&amp;quot;stylesheet&amp;quot
2018-12-08 18:07:38
906
原创 CSS3实现侧边栏快速定位的隐藏和消失
Dome&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;CSS3隐藏悬浮网站左侧标签式导航栏代码 &lt;/title&gt;
2018-12-03 23:13:17
3572
原创 常用正则表达式
1.校验数字的表达式1 数字：^[0-9]$2 n位的数字：^\d{n}$3 至少n位的数字：^\d{n,}$4 m-n位的数字：^\d{m,n}$5 零和非零开头的数字：^(0|[1-9][0-9])$6 非零开头的最多带两位小数的数字：^([1-9][0-9])+(.[0-9]{1,2})?$7 带1-2位小数的正数或负数：^(-)?\d+(.\d{1,2})?$8 正数、负...
2018-08-06 22:30:41
202
原创 Bootstrap学习总结
1.Bootstap的使用模板<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&g
2018-08-05 12:02:18
5555
原创 Spring Boot 解决跨域问题
一、@CrossOrigin注解方式 Controller method CORS configuration这里我们在users映射的方法getUserList上面加上@CrossOrigin @CrossOrigin @RequestMapping(value = "users", method = RequestMethod.GET) public Resp...
2018-08-01 21:50:54
778
转载 水波图实现原理
在项目中自己使用 Canvas 实现了一下水波图，在这里给大家分享一下它的实现原理。一开始看到波浪，可能不知道从何入手，我们来看看波浪的特征就会有灵感了。没错，有人肯定会想到，就是 正余弦曲线！对于波陡很小的波动，一般选择正弦或余弦的曲线来表示波形，这是最简单而又最接近实际波形的表述。这里我选择了正弦曲线来实现。在讲实现思路之前，我们来回忆一下正弦曲线的基础。正弦曲线...
2018-07-22 17:04:35
5046
2
React练习小dome
2019-03-20
ssm框架整合示例
2019-03-17
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人