- 博客(43)
- 收藏
- 关注
RSS订阅原创 一、Element-UI之表单
案例：<template> <div> <!-- 在使用表单验证时，需要注意： 1.必须给表单对象绑定一个对象：:model="loginForm"，而且不能写成：v-model="loginForm" 2.所有的子控件的绑定对象必须是表单对象的内部对象，比如：v-model="loginForm.username"，否则总是验证失败 ...
2019-05-30 21:02:58
11796
原创 三、Spring Security之权限校验及源码解析
一、源码解析1、权限校验涉及的相关类图2、权限校验时序图：3.在权限校验过程中，几个比较关键的类：UsernamePasswordAuthenticationFilterAnonymousAuthenticationFilterExceptionTranslationFilterFilterSecurityInterceptor调用流程如下：AbstractAuthentic...
2019-05-28 22:07:54
1533
原创 三十六、Springboot整合Vue
进入项目目录，执行 build 命令：npm run build该命令执行成功之后，项目目录下生成一个dist文件夹：将该文件夹中的两个文件static和index.html拷贝到SpringBoot项目中resources/static/目录下，然后就可以通过http://localhost:8082/index.html访问vue项目。...
2019-05-28 19:06:32
277
原创 二十、Mybatis之调用存储过程
1.存储过程：DELIMITER ;;CREATE DEFINER=`root`@`localhost` PROCEDURE `addDep`(in depName varchar(32),in parentId int,in enabled boolean,out result int,out result2 int)begin declare did int; declare p...
2019-05-28 09:48:53
438
转载 七、Spring Security之动态权限修改
案例： @GetMapping("/vip/test") @Secured("ROLE_VIP") // 需要ROLE_VIP权限可访问 public String vipPath() { return "仅 ROLE_VIP 可看"; } @GetMapping("/vip") public boolean upd...
2019-05-26 19:33:59
2846
4
原创 六、Spring Security之记住我
/** * 配置验证规则 */ @Override protected void configure(HttpSecurity http) throws Exception { http .authorizeRequests() .antMatchers("/").permitAll...
2019-05-26 19:20:41
222
原创 五、Spring Security之拦截规则
案例1： http .authorizeRequests() //请求路径“/”容许访问 .antMatchers("/").permitAll() //其它请求都需要校验才能访问 .anyRequest().authent...
2019-05-26 18:53:10
6046
原创 四、Spring Security之默认的过滤器链及自定义Filter
别名类名称Namespace Element or AttributeCHANNEL_FILTERChannelProcessingFilterhttp/intercept-url@requires-channelSECURITY_CONTEXT_FILTERSecurityContextPersistenceFilterhttpCONCURRENT_SE...
2019-05-26 18:41:59
8710
8
原创 二、Spring Security之密码加密
在上一个Demo的基础之上，在 WebSecurityConfig 增加如下代码： @Override protected void configure(AuthenticationManagerBuilder auth) throws Exception { auth //配置 UserDetailsService 实现类，实现...
2019-05-26 17:13:07
14682
1
转载 一、Spring Security之数据库验证源码解析
一、源码调用流程图上图的核心思想如下：AbstractAuthenticationProcessingFilter#doFilter()UsernamePasswordAuthenticationFilter#attemptAuthentication()ProviderManager#authenticate()AbstractUserDetailsAuthentication...
2019-05-25 20:54:21
389
原创 四十六、Vue中路由切换时，滚动行为在组件之间相互影响的解决办法
一、问题 当我们在A组件中滚动到页面底部时，再通过路由到B组件，会发现显示的也是B组件的底部，而不是从头部开始显示？二、原因 组件之间的行为会相互影响。三、解决办法 在配置路由的地方加上如下代码，例如：router.jsimport Vue from 'vue'import Router from 'vue-router'import Home from './pages/...
2019-05-24 23:00:33
1618
1
原创 四十五、Vue之递归组件
一、递归组件的实现效果二、递归组件的实现效果数据： list: [{ title: '成人票', children: [{ title: '成人三馆联票', children: [{ ...
2019-05-24 21:55:36
186
原创 四十四、Vue中监听滚动事件
// 监听滚动事件window.addEventListener('scroll', this.handleScroll)//得到距离顶部的滚动距离const top = document.documentElement.scrollTop
2019-05-24 20:25:45
301
原创 八、渐变色背景
// 渐变色背景background-image linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8))
2019-05-23 19:15:56
202
原创 四十三、Vue中使用 router-link 导致文字颜色变化的解决方案
案例： <ul> <!-- border-bottom：1像素边框 --> <li class="item border-bottom" v-for="item of list" :key="item.id"> ...
2019-05-23 18:07:03
8891
1
原创 四十二、Vue中使用keep-alive优化网页性能
问题一： 如上图所示，当我们在使用路由在首页和城市列表页之间进行切换时，它会反复访问 index.json（首页数据） 和 city.json（城市列表页数据），而大多数时候，这里的数据都是一样的，不需要反复请求。解决办法： 使用<keep-alive>将请求的数据缓存到内存中，当再次访问时，直接从内存中取数据即可！案例如下：<template> <d...
2019-05-23 16:36:24
263
原创 四十一、Vue中localStorage缓存
存： // 防止有的浏览器不支持 try { localStorage.city = city } catch (error) { }取：try { if (localStorage.city) { defaultCity = localStorage.city }} catch (e) {}...
2019-05-23 15:52:51
942
原创 四十、Vue中使用定时任务进行节流
一、问题 当用户在与设备进行交互时（比如点击、下滑。。。），同一个方法可能会反复触发，但并不是每次触发都是有意义的，这样只会导致损耗性能，降低用户体验。二、解决办法 使用定时任务，将当前任务延迟一段时间执行。在此期间若有新的任务，则清除老任务，新任务进入定时器。案例如下：<script>import { clearTimeout, setTimeout } from 't...
2019-05-21 20:54:55
1052
原创 三十九、Vue中监听器 watch 的使用
一、使用场景 当我们需要监听某个属性时在变化时触发一系列的逻辑，那么就可以利用监听器实现。二、案例 当父组件接收到子组件传递过来的值时，顺次加11.父组件传递数值给子组件<template> <div> ..... <city-list :letter="letter" /> </div></templat...
2019-05-15 22:35:40
808
原创 三十八、Vue中使用 v-for 遍历 对象（类似于Java的Map）
对象数据如下： "cities": { "A": [{ "id": 56, "spell": "aba", "name": "阿坝" }, { "id": 57, "spell": "akesu", "name": "阿克苏" }], "B": [{ "id": 58, "spell": "baiyin",...
2019-05-15 21:49:55
3997
原创 六、Vue中使用滚动插件：better-scroll
1.安装插件cnpm install better-scroll --save2.使用（1）是元素符合规范 要想使用 better-scroll 这个插件，必须保证元素符合下列规则：<div class="wrapper"> <ul class="content"> <li>...</li> <li>.....
2019-05-15 20:59:55
939
原创 七、设置1像素边框的显示颜色
1.引入1像素边框的css文件border.css@charset "utf-8";.border,.border-top,.border-right,.border-bottom,.border-left,.border-topbottom,.border-rightleft,.border-topleft,.border-rightbottom,.border-topr...
2019-05-15 20:22:34
771
转载 六、盒模型：box-sizing
主要用来解决项目布局使用的是自适应的布局方式，div给出的宽度是百分比的形式，即框占窗口宽度的50%，但边界和内边距是用像素来表示的怎么办的问题！参见 从box-sizing:border-box属性入手，来了解盒模型...
2019-05-15 20:06:22
203
原创 三十七、Vue中更改vue.config.js配置文件，一定要重启！！
Vue中更改vue.config.js配置文件，一定要重启！！或者配置项更改并不会生效！！！
2019-05-14 20:16:30
7830
1
原创 五、当文字过多时，显示省略号
overflow: hidden white-space: nowrap text-overflow: ellipsis
2019-05-13 21:33:29
860
1
原创 四、CSS样式案例集合
·1.两排图标<template> <div class="icons"> <div class="icon"> <div class="icon-img"> <img class="icon-img-content" src="http://img1.quna...
2019-05-13 20:48:25
1169
原创 三、创建宽高比为2:1的区域
// 创建一个宽高比为2:1的区域.icons { overflow: hidden; height: 0; padding-bottom: 50%; background: green;}核心就是利用 height: 0; 和 padding-bottom: 50%; 来控制当宽一定时，高的长度！...
2019-05-13 19:55:06
864
原创 五、Vue中使用轮播图插件：vue-awesome-swiper
1.安装vue-awesome-swiper2.6.7插件cnpm install vue-awesome-swiper@2.6.7 --save2.在main.js中引入main.js// 引入轮播插件：vue-awesome-swiperimport VueAwesomeSwiper from 'vue-awesome-swiper'import 'swiper/dist/css...
2019-05-12 22:42:49
780
原创 四、Vue中使用 stylus 抽取 CSS 公共变量，并使用
对于 CSS 中一些公共变量，可以处理如下： 第一步：在src/assets/styles目录下新建 variable.styl 文件，这里放置一些公共CSS变量，比如背景颜色：$bgColor = #00bcd4 第二步：引入variable.styl： @import '~styles/variable.styl，使用公共变量：background $bgColor...
2019-05-12 21:25:59
1693
3
原创 三、Vue中设置路径别名
一：问题 在 CSS 或者 JS 中，有时候需要引入其他相关文件，若目录层级比较多，那么路径会相当长，而且重复书写，比较麻烦。为了解决这个问题，我们可以采用为路径设置别名的方式，来简化路径书写。二：设置别名步骤下例是使用 vue-cli3.0构建项目，步骤如下：1.新建 vue.config.js 文件，和package.json同层级const path = require('pat...
2019-05-12 21:23:41
5572
4
原创 二、Vue中安装使用stylus（写css使用）
1.安装 stylus（写css使用）插件cnpm install stylus --savecnpm install stylus-loader --save2.使用案例使用 stylus 注意事项：这里我们使用的长度单位是 rem，参照的基准是在上一篇文章中 reset.css 中设置的50px，换算方式如下：在reset.css 中设置了 html font-size: 50...
2019-05-12 21:12:36
2120
2
原创 一、Vue移动端项目前准备
1.更改 index.html 的<meta>属性<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">2.解决各个显示终端样式的一致性reset.css@chars...
2019-05-12 19:04:06
653
原创 三十六、Vue中使用插槽实现动画封装
在做一个项目过程中，可能会出现多个重复动画，这样反复的使用 <transition> 包裹 DOM 元素实现动画显然是不合理的。为了解决这个问题，我们可以利用 插槽 <slot>传递DOM元素的特点实现动画的封装，多处复用的效果！1.动画封装模板CommonAnimation.vue注意：不要忘记使用 props: ['show'] 接收传值<temp...
2019-05-10 20:52:59
385
原创 三十五、Vue中的列表过渡动画
<template> <div id="root"> <!-- 关键就是 <transition-group>，这样列表动画就出现了 --> <transition-group> <div v-for="(item, index) of list" :key="index">{{item}...
2019-05-10 20:27:53
913
原创 三十四、Vue中多个元素或组件的过渡动画
一、Vue中多个元素的过渡关键点如下：为每个元素添加 key 属性，避免Vue的复用导致不出现动画为 <transition> 添加 mode 属性：3. in-out：先出现元素，再隐藏元素4. out-in：先隐藏元素，再出现元素<template> <div id="root"> <!-- mode="in-o...
2019-05-10 20:09:19
406
原创 三十三、Vue中JS动画与 Velocity.js 的结合
一、JS动画 JS动画的核心就是在<transition>标签中，利用@before-enter、@enter、@after-enter 和 @before-leave、@leave、@after-leave 实现入场、离场动画！<template> <div id="slot"> <!-- 入场动画：@before-enter、@ent...
2019-05-10 18:54:09
284
原创 三十二、在Vue中使用animate.css库
一、CSS3.0方式实现动画案例：使用css3.0动画实现文字出现、消失时的动画<template> <div id="slot"> <transition> <div v-if="show"> <h1>你好！</h1> </div> </tra...
2019-05-04 22:01:33
1447
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人