Spring Boot JAP + MySQL实战
可参考使用STS创建SpringBoot项目创建一个新的SpringBoot项目，创建项目时选择Web、JPA和MySQL等选项。application.yml中的配置信息基于注解的shitibean基于JPA接口的简单应用多表多条件动态组合查询以及分页和排序application.yml中的配置信息spring:datasource:url:jdbc:mysql://192.168.10.58:3306/jianshu?useUnicode=true&characterEncoding=UTF-8&zeroDateTimeBehavior=convertToNullusername:rootpassword:infcn123platform:mysqljpa:database-platform:org.hibernate.dialect.MySQL5InnoDBDialecthibernate:naming:physical-strategy:org.hibernate.boot.model.naming.Physica
airflow探索篇
airflow是一个Airbnb的Workflow开源项目，在Github上已经有超过两千星。datapipeline调度和监控工作流的平台，用于用来创建、监控和调整datapipeline。类似的产品有：Azkaban、ooziepip方式安装默认已经安装python>=2.7以及pip安装可以参考这篇，比较详细。airflow安装以及celery方式启动重要说明使用mysql需要安装python2:pipinstallMySQL-pythonpython3:pipinstallPyMySQLAIRFLOW_HOME配置说明上篇在.bashrc中配置的exportAIRFLOW_HOME=/home/airflow/airflow01。AIRFLOW_HOME设置目录在airflowinitdb的时候初始化，存放airflow的配置文件airflow.cfg及相关文件。DAG说明-管理建议默认$AIRFLOW_HOME/dags存放定义的dag，可以分目录管理dag。常用管理dag做法
前端面试之js相关问题（二）
上一篇我们讲到了，在前端面试的时候常被问到的函数及函数作用域的问题。今天这篇我们讲js的一个比较重要的甚至在编程的世界都很重要的问题面向对象。在JavaScript中一切都是对象吗？“一切皆对象！”大家都对此深信不疑。其实不然，这里面带有很多的语言陷阱，还是不要到处给别人吹嘘一切皆对象为好。数据类型JavaScript是一种弱类型或者说动态语言。这意味着你不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。这也意味着你可以使用同一个变量保存不同类型的数据，最新的ECMAScript标准定义了7种数据类型:基本类型BooleanNullUndefinedNumberStringSymbol(ECMAScript6新定义)对象类型Object对象类型涵盖了很多引用类型，任何非基本类型的都是对象类型。如Function(函数Function是一个附带可被调用功能的常规对象)，这里就不在赘述。根据这个分类可以看出“并非一切接对象”。我们可以从两方面来区别这两种类型：区别可变性基本类型
关于javascript代码优化的8点建议
.reveal{color:red;left:10px;}//好的做法一ele.className+='reveal';//好的做法二ele.classList.add('reveal');3、将JS从HTML中抽离：从JS文件放入外置文件中4、将HTML从JS中抽离：不要在innerHTML中拼接DOM结构，而是使用字符串模板，如handlerbars全局变量创建全局变量被认为是糟糕的实践，尤其在团队开发的大背景下更是问题多多。随着代码量的增长，全局变量会导致一些非常重要的可维护性难题，全局变量越多，引入错误的概率会变得越高一般而言，有如下三种解决办法1、零全局变量实现方法是使用一个立即调用函数IIFE并将所有脚本放置其中(function(){vardoc=win.document;})(window);这种模式的使用场景有限，只要代码需要被其他的代码所依赖，或者需要在运行中被不断扩展或修改，就不能使用这种方式2、单全局变量和命名空间依赖尽可能少的全局变量，即只创建一个全局变量，使用单变量模式，
做一个可复用的 echarts-vue 组件（延迟动画加载）
在vue项目使用echarts的场景中，以下三点不容忽视：1.可视化的数据往往是异步加载的；2.若一个页面存在大量的图表（尤其当存在关系图和地图时），往往会导致该页面的渲染速度很慢并可能在几秒内卡死，产生极差的用户体验。3.引入echarts组件导致编译后的文件过大从而使得首次访问的加载极慢。关于第三点，大家可以参考之前的撰文优化Vue项目编译文件大小。以下针对上述前两点，给出数据异步、延迟渲染的echartsvue组件的设计和实现方式，并对实现之中可能存在的问题进行介绍。1.抽离echarts公共部分形成基础组件1.1调研公共部分首先，我们需要把echarts使用中公共的部分抽离出来，形成基础组件。让我们在官网-5分钟上手ECharts教程中找到使用echarts的步骤：#1.获取一个用于挂在echarts的DOM元素let$echartsDOM=document.getElementById('echarts-dom')#2.初始
Vue 后台模板 [Vue admin] SanJi Boot Admin Iview
导读：很久没有写文章了,最近一直在忙,之前一直想着可以把SanJiBootSecurity项目中的页面使用Vue+webpack进行重写,前几天算是阶段性的完成了这个计划,后期会随着SanJiBoot的模块不断增多对其进行对应的升级与扩展简介:使用技术：webpack+Vue+VueRouter+iviewUI实现了什么功能：基于token进行登陆时的认证支持跨域需要后台配合修改config/index.js文件constpath=require('path')module.exports={dev:{//PathsassetsSubDirectory:'static',assetsPublicPath:'/',proxyTable:{'/api':{target:'http://localhost:8089/api',changeOrigin:true,pathRewrite:{'^/api':''
动态Axios配置
推荐使用Vue-cli工具来创建和管理项目，就算刚开始不熟悉，用着用着便可知晓其中的奥妙。前一段时间官方所推荐的数据请求插件还是Vue-resource，但现在已经变了，变成了Axios,不用知道为什么变了，反正这个用起来比那个好一些，用就是了，下面是一些封装axios请求的一些经验，不对之处，还望多多指教！01创建文件，Vue项目初始化之后，在src目录下再创建一个util工具文件夹，一般就是用来存放一些封装的函数方法，现在让我们在util文件目录下创建一个http.js文件，封装axios方法。02直接上代码（常规版），代码中有详细的注释importaxiosfrom'axios'//引用axiosimport{Promise}from'es6-promise'//引入Promise//axios配置axios.defaults.timeout=5000;//设置超时时间axios.defaults.baseURL='h
深入理解JS引擎的执行机制
深入理解JS引擎的执行机制1.灵魂三问:JS为什么是单线程的?为什么需要异步?单线程又是如何实现异步的呢?2.JS中的eventloop(1)3.JS中的eventloop(2)首先,请牢记2点:(1)JS是单线程语言(2)JS用过EventLoop是JS的执行机制。想深入了解JS的执行,就等于深入了解JS里的eventloop1.灵魂三问:JS为什么是单线程的?为什么需要异步?单线程又是如何实现异步的呢?技术的出现,都跟现实世界里的应用场景密切相关的。同样的,我们就结合现实场景,来回答这三个问题(1)JS为什么是单线程的?JS最初被设计用在浏览器中,那么想象一下,如果浏览器中的JS是多线程的。场景描述:那么现在有2个进程,process1process2,由于是多进程的JS,所以他们对同一个dom,同时进行操作process1删除了该dom,而process2编辑了该dom,同时下达2个矛盾的命令,浏览器究竟该如何执行呢?这样想,JS为什么被设计成单线程应该就容易理解了吧。(2)JS为什
19 个常用的 JavaScript 简写方法
简写：constanswer=x>10?'isgreater':'islesser';也可以嵌套if语句：constbig=x>10?"greater10":x2.短路求值简写方式当给一个变量分配另一个值时，想确定源始值不是null，undefined或空值。可以写撰写一个多重条件的if语句。
Vuex 进阶——模块化组织 Vuex
Vuex模块化目录三、编写文件我们就延用上两篇文章中的例子。先说一个各个文件的作用types.js内定义常量，使用常量替代mutation事件类型user.js内写该user组件内用到的state、getters、actions和mutations，并最后统一导出（类似上个例子中的store.js）getters.js内写原来的getters，用来获取属性actions.js内写原来的actions，就是要执行的动作，如流程的判断、异步请求index.js是用来组装actions.js、getters.js、user.js的，然后进行统一的导出1.在main.js中导入index.js文件并注册importVuefrom'vue'importAppfrom'./App.vue'importstorefrom'./store/index.js'newVue({store,el:'#app',render:h=>h(App)})2.在types
七年之痒
这是一篇水文，可能会浪费你的时间哟，慎入(^_^)随着美国性感女星玛丽莲·梦露曾主演过一部电影《七年之痒》播出之后，这个词已成为西方的谚语，而此谚语在中文中也常常被拿来使用，甚至比它的起源更为华人所熟知。当然，我们今天聊的不是感情也不是艳遇，只是想借“七年之痒”来描述我与前端之间的故事。就算是2017年的总结吧。三年之痛，七年之痒无法避免，但痛过痒过之后，只有自己最熟悉的，才是最能让自己舒适的。才能慢慢地变老...那么你准备好了？我可是已经做好准备，因为我经历过了三年之痛，又尝过了七年之痒，我现在期待的是十年之约！未曾相约，如约而至2010年的我，那时候我不知道前端是什么？甚至说很多人都和我一样，都不知道前端是什么？因为在那个时候我只是想要一份工作能开工，有饭吃，就是这么的简单，我跨入了互联网行业，从事一份后来才知道的工作——前端。这或许是冥冥之中早有安排的吧。在10年至12年，前端很多时候还是分得很细的，如果有和我一样同那个年代经历过来的话，肯定有几个词大家很熟知：网页制作者，网页设计师，重构等。而我就也就稀里
vertical-align和baseline的关系
如何让一段文字居中，在人类看来如此简单的问题，在css界却变成了多年令人头疼的问题，关于居中的文字如汗牛充栋，但每到用时还是会有问题。单单一个『中』是什么，在css里就有两种不同的称呼：center和middle，水平居中要用center，垂直居中要用middle（到了css3时代引入了更多混乱，flex布局里垂直居中也可以用center了）。水平居中相对简单，而垂直居中的问题如果没有透彻理解的话，即使这一次做出来了，下一次情况稍加不同，又变得无所适从。关于垂直居中，css中最基本的一个属性就是vertical-align，要了解vertical-align，首先要了解基线(baseline)，因为vertical-align的缺省值就是baseline。MDN的文档中只说了一句：baseline:默认。元素放置在父元素的基线上。那么这个父元素的基线到底是个什么鬼？怎么才能决定父元素的基线在哪里呢？先来看一个简单的例子：
字体变体font-variation-*
今天在Twitter看到Codepen上的一个示例，感觉很神奇。刚开始以为是用了什么黑科技，但仔细一看是纯CSS实现的一个效果。示例中最关键的是使用了font-variation-settings属性。那么这个属性有什么神奇之处呢？容当后述。在详细介绍font-variation-settings属性之前，先把Demo效果给大家看看：如果要用一个词来描述的话，可以把其称为字体变体（Fontvariants），对应的CSS属性就是font-variation-*属性，其包括连接（ligatures）、大写（caps）、数字（numerals）和替代字形（alternateglyphs）。这些属性可以让我们在Web上创建更精准、更漂亮的排版（文本）效果。事实上，Web上的排版总是要落后于它在它印刷中的效果。但这是可以理解的，因为打印在页面上的字体已经经过几个世纪的发展，可以说发展到一个复杂的程度。而在浏览器要达到这样的一个层次，还是很难的。但是，由于Web字体中OpenType功有的增加，以及CSS特性的完善与能
canvas 微信海报分享（个人爬坑）
记录下在实现功能过程中遇到的问题canvas在微信浏览器中长按无效不能像img一样长按分享（那我就转成img呗）转成img后在微信开发者工具中能显示，真机无效（欲哭无泪），度娘说可能是图片跨域^-^用户头像合成还要圆角，我表示不会啊，直接看canvasapi文档了对度娘无爱了canvas填入文字超过指定宽度也要换行，我表示只知道不超多指定宽度的各种文字对齐方式ctx.textAlign='center';canvas在高清屏下模糊的问题（超简单的不知道度娘怎么会那么啰嗦）不就是canvas.witdt=innerWidth*devicePixelRatioHTML结构