Super_LD的博客

转载 Vue 中英文 组件 样式 写法

Vue 中英文 组件 样式 写法Vue 项目国际化样式处理一、全局（main.js）添加自定义指令：v-lang 会自动添加 语言对应的 class 【中：zh，英：en】Vue.directive('lang', { // 当被绑定的元素插入到 DOM 中时…… inserted(el) { el.classList.add(i18n.locale); },});二、在需要兼容 英文 样式的组件内添加指令<div v-lang class="wrap

原创 Vue 让你从0开始搭建i18n实现资源国际化功能

依赖vue-i18n，先装依赖：yarn add vue-i18n@8 或 npm install vue-i18n@8。locale\lang\en.js和locale\lang\zh-CN.js用于存放英文和中文内容。至此已完成vue项目使用i18n完成资源国际化功能。

原创 解决uni-app创建的H5项目只使用v-loading，避免引入element-ui过于笨重问题

1、准备loading.jsimport Vue from 'vue'/** * 插入loading */const insertDom = (el) => { // 若果是true创建一个div let dom = `<div class="el-loading-mask"> <div class="el-loading-spinner"> <svg viewBox="25 25 50 50" cl

原创 Vue项目，Echarts组件封装通用模板，内含NoData、resize处理逻辑

1、resize.js 主要处理Echarts组件自适应

原创 Element-UI 常用(后续会持续更新)

1、表格文字过长...,当鼠标hover的时候显示全称:show-overflow-tooltip

转载 Vue Element校验validate 限制输入指定类型

Vue Element校验validate官方文档限制输入指定类型添加type限制即可，type包括以下值：例子：rules: { bannerType: [ { required: true, message: '请选择类型', trigger: 'change'} ], associateId: [ { required: true, message: '请选择公告', trigger: 'change'} ], associateDat...

原创 Element-UI 表单验证、以及清除验证、重置表单

代码如下：

转载 Server-Sent Events 教程（转载）

Server-Sent Events 教程分享按钮作者：阮一峰日期：2017年5月27日服务器向浏览器推送信息，除了WebSocket，还有一种方法：Server-Sent Events（以下简称 SSE）。本文介绍它的用法。一、SSE 的本质严格地说，HTTP 协议无法做到服务器主动推送信息。但是，有一种变通方法，就是服务器向客户端声明，接下来要发送的是流信息（streaming）。也就是说，发送的不是一次性的数据包，而是一个数据流，会连续不断地发送过来。这时，客户端...

转载 轮询、长轮询、长连接、websocket

轮询、长轮询、长连接、websocket阅读目录(Content)①轮询 ②长轮询（comet） ③长连接（SSE） ④WebSocket 四种Web即时通信技术比较　Web端即时通讯技术：即时通讯技术简单的说就是实现这样一种功能：服务器端可以即时地将数据的更新或变化反应到客户端，例如消息即时推送等功能都是通过这种技术实现的。但是在Web中，由于浏览器的限制，实现即时通讯需要借助一些方法。这种限制出现的主要原因是，一般的Web通信都是浏览器先发送请求到服务器，服务器再进行响应完成数据的

原创 vscod代码（vue）格式化 vscode settings.json配置

vscod代码格式化：{//vscode默认启用了根据文件类型自动设置tabsize的选项"editor.detectIndentation":false,//重新设定tabsize"editor.tabSize":4,//#每次保存的时候自动格式化"editor.formatOnSave":true,//#每次保存的时候将代码按eslint格式进行修复"eslint.autoFixOnSave":true,//#...

转载 Angular五种服务详解

（转自http://www.cnblogs.com/liulangmao/p/4078246.html）在这之前angular学习笔记(十五)-module里的'服务'这篇文章里,已经大致讲解了ng中的'服务',在之后的很多地方也用到了服务,但是,所有的服务都是使用app.factory来创建的.但其实,创建服务有5种方法,这篇文章就来具体讲解ng中的五种服务类型.首先,为了举栗子,先写好...

原创 Angular入门小Demo（开发几步走）

示例代码：

转载 linux下如何部署（执行）java jar包，并关闭此jar的进程

前段时间刚刚接触了一下linux系统，本人表示第一次使用无从下手，不像windows操作系统是可视化的，简单的创建文件或文件夹都要通过写命令才能将其完成，由于工作需要，不得不自学linux ，先是自学常用的一些命令，然后再部署可执行jar，以下是具体的操作步骤。1、执行jar包的命令和在windows操作系统上是一样的，都是java -jar xxxx.jar。2、将jar程序设置成后台运行，并且...

原创 （前端导出Excel）JS、HTML导出Excel

1、方式一：使用window.location.href（这种方式需要后台处理Excel）步骤1、&lt;button onClick="exportExcel();"&gt;导出Excel&lt;/button&gt;步骤2、function exportExcel(){ window.location.href =  window.location.host + '/exportExcel';...

转载 SpringBoot配置发送Email

SpringBoot配置发送Email引入依赖在 pom.xml 文件中引入邮件配置：&lt;dependency&gt; &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt; &lt;artifactId&gt;spring-boot-starter-mail&lt;/artifactId&gt;&lt;/depende...

原创 SPRING INITIALIZR创建一个简单的SpringBoot项目（https://start.spring.io/）

1、打开https://start.spring.io/，选择项目类型,本示例选择的事Maven Project、填写Group、Artifact、以及相关依赖Dependencies2、使用eclipse，选择import-----&gt;Existing Maven Projects-------&gt;next-------&gt;选择刚才生成的项目文件夹（解压过）3、项目导入后展示目录，查...

转载 STS创建Spring Boot项目实战(Rest接口、数据库、用户认证、分布式Token JWT、Redis操作、日志和统一异常处理)

1.项目创建1、新建工程2、选择打包方式，这边可以选择为打包为Jar包，或者传统的打包为War包3、选择开发过程中使用到的技术，这边我选择的是Rest Repositories4、新建测试用Controller    文件内容如下[java] view plain copypackage com.xiaofangtech.example;    import org.springframework...

转载 关于Maven项目build时出现No compiler is provided in this environment的处理

近日有遇到在编译Maven项目时出现[ERROR] No compiler is provided in this environment. Perhaps you are running on a JRE rather than a JDK?的问题, 原以为这是个个例, 源于同事粗心, 配置环境出问题造成, 后到百度查看一下, 遇到这个问题的不在少数, 但是对问题的解释没有说到根源, 于是写下这...

转载 springboot的三种启动方式

一：IDE 运行Application这个类的main方法二：在springboot的应用的根目录下运行mvn spring-boot:run三：使用mvn install 生成jar后运行先到项目根目录mvn installcd targetjava -jar xxxx.jar1234...

转载 解决Maven提示：Could not read settings.xml

原文地址：http://blog.csdn.net/hqocshheqing/article/details/47702049在Eclipse中配置maven时，提示错误：Could not read settings.xml。用户配置无法生效。根据上篇转载的文章检查自己的settings.xml配置文件，发现在&lt;!----&gt;中有配置中文的注释，把该注释去掉后可以进行保存。...

转载 如何设置maven的localRepository

step1：默认会放在~/.m2/repository目录下 （“~”代表用户的目录，比如windows下一般都是C:\Documents and Settings\[你的用户名]\。由于“Documents and Settings”中含有“空格”会导致“Illegal character in path”异常） 安装Maven后我们会在用户目录下发现.m2 文件夹。默认情况下，该文件夹...

转载 Webpack的核心原理（配置详解、loaders三种写法）

Webpack是目前基于React和Redux开发的应用的主要打包工具。我想使用Angular 2或其他框架开发的应用也有很多在使用Webpack。当我第一次看到Webpack的配置文件时，它看起来非常的陌生，我非常的疑惑。经过一段时间的尝试之后我认为这是因为Webpack只是使用了比较特别的语法和引入了新的原理，因此会让使用者感到疑惑。这些也是导致Webpack不被人熟悉的原因。因为刚开始使用W...

转载 Angular vs React 最全面深入对比

摘要：如今,Angular和React这两个JavaScript框架可谓红的发紫,同时针对这两个框架的选择变成了当下最容易被问及或者被架构设计者考虑的问题,本文或许无法告诉你哪个框架更优秀,但尽量从更多的角度去比较两者,尽可能的为你在选择时提供更多的参考意见。选择的方法在选择之前,我们尝试带着一些问题去审视你将要选择的框架(或者是任何工具),尝试用这些问题的答案来帮助我们更加了解框架,也更加让选择...

转载 React 组件生命周期详解

Ract生命周期React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁一、初始化1、getDefaultProps()设置默认的props，也可以用dufaultProps设置组件的默认属性.2、getInitialState()在使用es6的class语法时是没有这个钩子函数的，可以直接在constructor中定义this.state。此时可以访问this.propsconstru...

转载 React创建组件的三种方式及其区别

React创建组件的三种方式及其区别React推出后，出于不同的原因先后出现三种定义react组件的方式，殊途同归；具体的三种方式：函数式定义的无状态组件es5原生方式React.createClass定义的有状态组件组件  （不推荐使用）es6形式的extends React.Component定义的有状态组件组件 虽然有三种方式可以定义react的组件，那么这三种定义组件方式有什么不同呢？或者...

原创 Webpack html插件优化、devServer、热更新（二）

一、clean-webpack-plugin：在每次生成dist目录前，先删除本地的dist文件（每次自动删除太麻烦）2、安装clean-webpack-plugin   npm/cnpm i clean-webpack-plugin --save -dev3、在我们的webpack.config.js文件中引入    const  cleanWebpackPlugin=require('clea...

原创 Webpack4.x 文件多入口、多出口、html插件使用（一）

一、多个文件打包在一起（打包成一个文件），例如将这两个js文件打包成一个js文件：（多个入口，一个出口）webpack.config.js配置如下：entry入口，数组形式，按顺序打包，output出口，然后运行：npm run build （备注：在package.json文件scripts中配置如下即可）运行完命令后，如下图，证明打包完成打包好的boundle.js内容如下图：二、多个入口，多...

转载 CSS3绘制各种常见图形（圆形-椭圆形-三角形-五角星...）

圆形-椭圆形-三角形-倒三角形=左三角形-右三角形-菱形-平行四边形- 星形-六角星形-五边形-六边形-八角形-心形-蛋形-无穷符号-消息提示框-吃豆人1制作圆形：要使用CSS来制作一个圆形，我们需要一个div，被给它设置一个ID&lt;div id="circle"&gt;&lt;/div&gt; 圆形在设置CSS时要设置宽度和高度相等，然后设置border-radius属性为宽度或高度的一半即...

转载 HTML5 新增 form、input属性

HTML5 的新的表单属性本章讲解涉及 &lt;form&gt; 和 &lt;input&gt; 元素的新属性。新的 form 属性：autocompletenovalidate新的 input 属性：autocompleteautofocusformform overrides (formaction, formenctype, formmethod, formnovalidate, formt...

转载 css重置下拉列表select的默认样式

select的一些默认样式我们很难修改，比如图标的替换。接下来就说说如何修改这些默认样式：html代码：&lt;div&gt; &lt;select name=""&gt; &lt;option value="芝士"&gt;芝士&lt;/option&gt; &lt;option value="奶油"&gt;奶油&lt;/

原创 使用 PropTypes 进行类型检 || 控制台报:TypeError: Cannot read property 'string' of undefined）

使用报错如下：从 React v15.5 开始 ，React.PropTypes 助手函数已被弃用，我们建议使用 prop-types 库 来定义contextTypes。查询官网PropTypes官网资料如下:使用 PropTypes 进行类型检查注意： 从 React v15.5 开始 ，React.PropTypes 助手函数已被弃用，我们建议使用 prop-types 库 来定义conte...

原创 JSX基本语法（React ）

转载 vue-resource和axios区别

vue-resourceVue.js是数据驱动的，这使得我们并不需要直接操作DOM，如果我们不需要使用jQuery的DOM选择器，就没有必要引入jQuery。vue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说，$.ajax能做的事情，vue-resource插件一样也能做到，而且vue-resource的API更为简洁。...

转载 vue 事件总线（ vue-bus）非父子组件传值

vue-bus一个 Vue.js 事件中心插件，同时支持 Vue 1.0 和 2.0原因Vue 2.0 重新梳理了事件系统，因为基于组件树结构的事件流方式实在是让人难以理解，并且在组件结构扩展的过程中会变得越来越脆弱。虽然依然保留了父子组件间的事件流，但有诸多限制，比如不支持跨多层父子组件通信，也没有解决兄弟组件间的通信问题。Vue 推荐使用一个全局事件中心来分发和管理应用内的所有事件，详见文档。...

转载 Webpack原理

webpack原理查看所有文档页面：全栈开发，获取更多信息。原文链接：webpack原理，原文广告模态框遮挡，阅读体验不好，所以整理成本文，方便查找。工作原理概括基本概念在了解 Webpack 原理前，需要掌握以下几个核心概念，以方便后面的理解：Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。Module：模块，在 Webpack 里一切皆模块，一个模块对应...

转载 Vue学习笔记一

Vue.js 是什么？Vue.js 是一套构建用户界面的渐进式框架。采用的是自底向上增量开发的设计（与其他重量级框架不同点）。Vue的核心库只关注图层，不仅易于上手，还便于与第三方库或既有项目整合。起步# helloword注意：不能将id = ‘app’写在body或者html中&lt;script src = './vue.js'&gt;&lt;script&gt;&lt;div id = ...

原创 React-双向数据绑定

1、在Person.js中添加如下代码：2、在App.js中按照如下步骤，添加代码3、页面展示为：4、变更输入框内容，页面展示：

原创 React-属性传值(传事件)

1、如下图在App.js中，使用红色框内方式，将myClick属性设置为changeName，并设置参数在Person.js中，在h2元素的click事件使用{props.myClick}获取组件传递过来的事件没有触发h2元素绑定的事件之前，页面展示：触发h2元素绑定的事件之后：因为触发了changeName事件，其中person的name是传入的"通过传递事件触发"，count是通过setSta...

原创 React组件通信（state方式）

在App.js中，按如下图步骤添加对应代码，第一步：设置state属性第二步：使用state属性替换元素属性；并在button元素上绑定click事件第三步：实现changeName方法，通过setState改变属性值。点击button按钮前页面展示：点击button按钮后展示：...

原创 React组件通信（属性传值）

在&lt;Person&gt;组件中添加name和count属性以及文本内容，如下图所示：在Person.js中使用如下方式获取组件传过来的值，props形参可用其他值代替，建议使用props界面展示结果如下：...