如果你有一张表,你的主键是ID,然后由于测来测去的原因,你的ID不是从1开始连续的自增了。
终于有一天,使用这张表的某个系统要导入正式数据了,强迫症这时候就表现的明显了,浑身不自在,
这时候你就需要将这个主键ID重置一波了,方法是在这张表中新增一个字段,将ID里[……]
如果你的项目中console.log了很多信息,但是发到生产环境上又不想打印这些信息,这时候就需要设置一个全局变量,如:debug,
用正则匹配一下参数:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
const getQueryStr = (name) => { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null; }; 当链接中含有这个参数时,将debug的状态置为true,这时console.log是正常可打印状态,否则将debug的状态置为false, 这时重写console.log函数: console.log = function () { return false; } 这时的全局变量就可以用在整个项目中了,用来控制一些调试窗口的显隐。 在Vue中可以直写在stores/index.js中,当然,写在其他入口文件里也可以: const getQueryStr = (name) => { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null; }; /* 若链接后面带上参数 envFlag=monitor * 则将 debug 置为true,否则置为false */ const monitor = 'monitor'; const envFlag = getQueryStr('envFlag'); let debug = monitor ? true : false; if (envFlag === 'monitor') { console.log("%cNow You Can Console Log...", "color:red;font-size:18px;font-style:oblique;"); debug = monitor; } else { debug = ''; console.log = function () { return false; } } const state = {debug: debug}; export const store = new vuex.Store({state, mutations}); 这时候如果你想控制一个组件的显示或隐藏,只需要在vuex的getters中声明一下就可以使用变量debug了: <monitor v-show="debug"></monitor> vuex: { getters: { <span style="color: #ff0000;">debug: state => state.debug</span> } } 做完以上的工作后,在URL后面带上参数 <strong>envFlag=monitor </strong>就可以看到组件 monitor 被显示出来,同时打开控制台的话, 就可以看到项目所有的 console.log 信息。 |
以前写毛玻璃用的都是图层覆盖,看了 LEA VEROU 的《CSS揭秘》后才发现还有更优雅的毛玻璃:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<!DOCTYPE html> <html> <head> <title>原来你是这样的毛玻璃</title> <meta charset="utf-8"> </head> <style> @keyframes ants { to { background-position: 100%; } } body, main:before { background: url("demoImages/1.jpg") 0 /cover fixed; } main { position: relative; background: hsla(0, 0%, 100%, .3); overflow: hidden; display: block; margin: 200px auto; width: 1000px; height: 500px; } main:before { content: ''; position: absolute; top: 0%; right: 0%; left: 0%; bottom: 0%; filter: blur(10px); margin: -30px; } .demoBox { border: .5em solid transparent; background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0/5em 5em; animation: ants 12s linear infinite; } .demo { position: relative; z-index: 999; font-size: 5em; text-align: center; line-height: 5; font-weight: 100; } </style> <body> <main class="demoBox"> <div class="demo">原来你是这样的毛玻璃</div> </main> </body> </html> |
效果图:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html> <head> <title>酷炫的CSS3</title> <meta charset="utf-8"> </head> <style> @keyframes ants { to { background-position: 100%; } } .demo { display: block; margin: 200px auto; width: 300px; height: 200px; border: 1em solid transparent; background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0/5em 5em; animation: ants 12s linear infinite; } </style> <body> <div class="demo"></div> </body> </html> |
静态效果图: