先看一下效果: html: <div class="big-star-box"> <img :src="imgNum>0 ? srcStar : srcNoStar" @click="imgItem(1)"> <img :src="imgNum>1 ? srcStar : srcNoStar" @click="imgItem(2)"> <img :src…
转:C4项目中验证用户登录一个特性就搞定   在开发过程中,需要用户登陆才能访问指定的页面这种功能,微软已经提供了这个特性.     // 摘要:    //     表示一个特性,该特性用于限制调用方对操作方法的访问.    [AttributeUsage(AttributeTargets.Class | AttributeTargets.Method, Inherited = true, AllowMultiple = true)]    public class AuthorizeAttr…
原文地址:用ES6的class模仿Vue写一个双向绑定 点击在线尝试一下 最终效果如下: 构造器(constructor) 构造一个TinyVue对象,包含基本的el,data,methods class TinyVue{ constructor({el, data, methods}){ this.$data = data this.$el = document.querySelector(el) this.$methods = methods // 初始化 this._compile() t…
一个项目中:只能存在一个 WebMvcConfigurationSupport 在一个项目中WebMvcConfigurationSupport只能存在一个,多个的时候,只有一个会生效. 静态文件访问失效原因:写配置的时候,没有注意,在网上找的代码,静态文件放行的配置,在几天前经过各种尝试,什么application.properties里面配置无效,需要通过自定义实现代码放行静态配置, 改成下面的编码方式放行静态资源:都是正常的 后来下面中需要用到 IdWorker生成主键,但是在返回给前端页…
原文地址:用vue写一个仿简书的轮播图 先展示最终效果: Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果.写好css样式,只需改变每张图片的class即可实现轮播效果.可以将轮播图看成两个,如图所示: 写好每个class的样式: $width: 800px; // 容器宽度 $height: 300px; // 容器高度 $bWidth: 500px; // 大图片宽度 $sWidth: $width - $bWidth; // 小图片宽度 $sHeigh…
​这篇将介绍如何写一个简单的基于Vue+Element的文件上传控件. 控件将具有 1. 上传队列的列表,显示文件名称,大小等信息,可以显示上传进度实时刷新 2. 取消上传 ​ 使用Element的uploader控件,上传文件的行为和样式不用自己全部实现,使代码简化.且有足够的扩展性,文件传输请求的代码可以基于axios完全自己重写.我们只用关心核心代码. 搭建项目框架 首先建立一个空白的项目,引入Element控件库,具体的操作和使用Element控件库请看官方文档: 组件 | Elemen…
如果你用vue弄移动端的页面,那么下拉刷新还是比较常见的场景,下面来研究如何写一个下拉刷新的组件(先上图); 由于节省大家的时间,样式就不贴出来了. html结构也不必介绍了,直接看代码吧-.- <transition> <div class="refresh-wrapper" ref="refresh"> <div class="refresh-inner"> <div class="refr…
之前做过一个算法题,算法要求就是写一个开心消消乐的逻辑算法,当时也是考虑了一段时间才做出来.后来想了想,既然核心算法都有了,能不能实现一个开心消消乐的小游戏呢,于是花了两天时间做了一个小游戏出来. 效果展示 先在这里放一个最终实现的效果,还是一个比较初级的版本,大家有什么想法欢迎评论哦 游戏规则: 初始时会给玩家十分的初始分,每拖动一次就减一分,每消除一个方块就加一分,直到最后分数为0游戏结束 任意两个方块都可以拖动 界面设计 页面的布局比较简单,格子的数据是一个二维数组的形式,说到这里大家应该…
一.复习在普通网页中使用vue1.使用script引入vue2.在index中创建 id为app的容器3.通过new vue得到vm实例二.在webpack中尝试使用vue://注意 : 在webpack中 使用 import Vue from 'vue' 导入的Vue构造函数,功能不完整,只提供了runtime-onley的方式 并没有提供想网页中那样的使用方式npm install vue -S import Vue from 'vue'// import Vue from '../node…
一个窗体有三个文件,全部拷贝到新的项目中   在新的项目中点击显示所有文件,然后右击导入的文件,点击包括在项目中,会自动修改颜色(此时还没有被识别为窗体)   重启这个项目,三个文件已经被识别出来了     更多教学视频和资料下载,欢迎关注以下信息: 我的优酷空间: http://i.youku.com/acetaohai123   我的在线论坛: http://csrobot.gz01.bdysite.com/   问题交流: QQ:910358960 邮箱:acetaohai123@163.…
一个窗体有三个文件,全部拷贝到新的项目中   在新的项目中点击显示所有文件,然后右击导入的文件,点击包括在项目中,会自动修改颜色(此时还没有被识别为窗体)   重启这个项目,三个文件已经被识别出来了  …
Vue.js是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. 下面是在Vue 测试实例 - 菜鸟教程(runoob.com)使用Vue写的一个九九乘法表,还请多多指教! 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 </title> <script src=&quo…
摘自:http://www.zhangxinxu.com 因为实际项目中(数据对接时),这肯定是个动态的URL地址,css文件似乎不支持动态URL 地址. <img src="../image/pixel.gif" style="background-image:url(http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg);" /> img标签可更换为任意标签.…
重新整理了下自己星级评价的Demo,可以展示星级评价,可以动态修改星级. github的地址:https://github.com/hunterCold/HYBStarEvaluationView a simple tool of star evaluation 一个简单的星级评价的工具 简单调用: HYBStarEvaluationView *starView = [[HYBStarEvaluationView alloc]initWithFrame:CGRectMake(, , , ) nu…
前言 在创建的 router 对象中,如果不配置 mode,就会使用默认的 hash 模式,该模式下会将路径格式化为 #! 开头. 添加 mode: 'history' 之后将使用 HTML5 history 模式,该模式下没有 # 前缀,而且可以使用 pushState 和 replaceState 来管理记录. 关于 HTML5 history 模式的更多内容,可以参考官方文档:https://router.vuejs.org/zh-cn/essentials/history-mode.ht…
个人博客首发博客园: http://www.cnblogs.com/zhangrunhao/ 参考 感谢作者 从一个奇怪的错误出发理解 Vue 基本概念 安装 - Vue.js 渲染函数 - Vue.js Vue2 dist 目录下各个文件的区别 聊聊 package.json 文件中的 module 字段 ES6模块 和 CommonJS 的区别 问题背景 在调试Chrome的时候, 发现不能找到vm这个对象. 在window下面也没有看到这个对象. 产生了好奇心. 过程分析 在dev环境下面…
在开发过程中,需要用户登陆才能访问指定的页面这种功能,微软已经提供了这个特性. // 摘要: // 表示一个特性,该特性用于限制调用方对操作方法的访问. [AttributeUsage(AttributeTargets.Class | AttributeTargets.Method, Inherited = true, AllowMultiple = true)] public class AuthorizeAttribute : FilterAttribute, IAuthorizationF…
本文转自:http://www.mrhuo.com/Article/Details/470/A-Attribute-For-MVC4-Project-Used-To-Validate-User-Login 在开发过程中,需要用户登陆才能访问指定的页面这种功能,微软已经提供了这个特性. // 摘要: // 表示一个特性,该特性用于限制调用方对操作方法的访问. [AttributeUsage(AttributeTargets.Class | AttributeTargets.Method, Inhe…
分页是项目中常会用到的,网上的插件也很多,但是有些功能太齐全反而不是必要的,所以抽时间自己写了一下(小白写代码,若发现问题还请及时赐教,感激不尽……) 如图,想要一个这样的页码: a. 上一页.下一页固定展示 b. 第一页.最后一页固定展示 c. 中间,即:左右...之间需要展示的页码个数可自定义 d. 可任意选择页面展示数据条数 一.不需要展示 ,只展示页码,需要定义3个变量:pageNum(当前页码).totalNum(总页码).middleSize(中间,即左右...之间需要展示的页码 个…
<template> <!--组件的 结构--> <div id="app"> <h3>{{ msg }}</h3> <div v-html="title"></div> <!--v-html 为这个里面直接添加标签--> <ul> <!--使用v-for的时候,一定要 绑定key.这个key通常绑定的是唯一标识.预防让vue取计算DOM.-->…
准备工作 1.使用IDEA2018专业版, 我试了IDEA2019教育版和IDEA2020社区版,都无法顺利创建一个Spring项目,实在是恼火,一气之下,统统卸载掉. 重装了一个IDEA2018专业版,突然就变得很顺利了. 2.在IDEA中安装Spring插件 点击File--settings--Plugins,搜索"Spring",安装Spring Assistant. 新建Spring项目 1.新建项目:New--Project,选择Spring 项目名为"hellos…
1.先看效果: 熟悉的图片轮播,只要是个网站,百分之90以上会有个图片轮播.我认为使用图片轮播. 第一可以给人以一种美观的感受,而不会显得网站那么呆板, 第二可以增加显示内容,同样的区域可以显示更多内容. 2.每学一个新东西 ,图片轮播都是很好的练手案例,而且,也很实用. 3.基本要求:页面加载,自动播放.鼠标悬停,停止播放.鼠标离开,继续播放 点击左右箭头切换上一张,下一张图片. 下方小圆点显示当前位第几张图片. 4.使用Vue实现,想法: 5.示例代码 结构html: <template>…
整体思路: 一 具体接口,可以自定义一个注解,配置限流量,然后对需要限流的方法加上注解即可! 二 容器初始化的时候扫描所有所有controller,并找出需要限流的接口方法,获取对应的限流量 三 使用拦截器或者aop,对加上注解的方法进行限流,采用配置的信号量 自定义注解 /** * 限流注解 */ @Target(ElementType.METHOD) //作用与方法上 @Retention(RetentionPolicy.RUNTIME) //注解不仅被保存到class文件中,jvm加载cl…
搜索传参时,数据能获取到,搜索结果不是根据参数得出的,在定义搜索条件时因为empty引起的一个问题,键为0的值没有获取到, 记住:!empty 已经把0排除了…
启动项目时控制台抛出的异常信息: -- :: --- [ main] o.s.s.c.ThreadPoolTaskScheduler : Initializing ExecutorService 'taskScheduler' -- :: --- [ main] o.s.j.e.a.AnnotationMBeanExporter : Registering beans for JMX exposure on startup -- :: --- [ main] o.s.c.support.Defa…
注册页面代码如下html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册</title> <link rel="stylesheet" href="css/register.css"> <link rel="stylesheet&q…
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con…
效果如图所示: 采用了预先加载图片,再计算高度的办法..网络差的情况下,可能有点卡 新建 vue-water-easy.vue  组件文件 <template> <div class="vue-water-easy" ref="waterWrap"> <div v-for="(items,clos) in list" :key="clos" :style="waterStyle"…
效果如上图: 原理: 1.利用css 的 transform 和一些其他的属性,先选五张将图片位置拍列好,剩余的隐藏 2.利用 js 动态切换类名,达到切换效果 css代码如下 .swiper-certify{ /*上下左右居中*/ height: 100%; width: 100%; .centerPosition { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -o-transform:…
问题再现: 1.添加了swagger配置,导致接口响应的中文乱码 2.于是又添加了配置解决中文乱码的配置: 问题来了,添加了CharsetConfig 配置后swagger的配置失效了,访问404,搞了好久才明白,原因时两个配置都继承了WebMvcConfigurationSupport ,而多个继承了WebMvcConfigurationSupport 并添加@Configuration的配置sprinboot 只会保留一个,解决方法就是将配置合并就OK 3.合并配置解决问题    …