2021年04月_mischen520

12月 11月 10月 09月 08月 07月 06月 05月 04月 03月 02月 01月

原创 shiro权限认证HelleWorld示例（最简单的模拟调用方式）

1.创建一个maven工程，只需要最简单的project就可以，idea通过File-New-Project简单创建即可2.在maven里面配置shiro依赖关系，代码如下：<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

2021-04-27 07:19:23 465

原创 vue路由参数跳转具体实现方式

业务场景大概是这样的，我查询一个列表，展示在页面上，当我点击某一条信息的时候，可以给我跳到他相应的上面去，列表页展示如下：我当选择某一条信息之后，他就给我跳到相应的单个列表详情页，页面截图如下所示：可以看到，跳转的路径为：http://localhost:8080/blog/1，这里要想达到跳转的时候自动带上每个标题的id，这就需要路由来进行控制，首先，在main.js里面添加路由支持，具体代码如下：// The Vue build version to load with the

2021-04-20 06:37:18 268

原创 vue实现自定义搜索功能

vue实现自定义搜索功能需要使用computed函数，具体代码实现如下：<template> <div v-theme:column="'narrow'" id="show-blogs"> <h1>博客总览</h1> <input type="text" v-model="search" placeholder="搜索"> <div v-for="blog in filteredBlogs" cl

2021-04-18 21:08:16 1253 1

原创 vuejs实现标题颜色随机变幻（使用自定义指令实现）

1.在标签上面自定义一个指令，代码如下：2.在main.js中使用Vue.directive绑定自定义指令，代码如下：// 自定义指令Vue.directive('rainbow',{ bind(el,bing,vnode){ //颜色随机生成 el.style.color ="#"+Math.random().toString(16).slice(2,8); }})3.页面效果如下：需要注意的是，在vue中所有自定义指令均应以v-开头，例.

2021-04-18 19:42:15 570

原创 vuejs怎样将checkbox样式设置为一排展示

开始拿到一个页面，页面是这样展示的：这个展示的太不友好，现在希望将这个弄成一排展示，最后达到这样的效果：因为前面已经设置了label样式，所以现在只需要根据id进行设置样式就行，之前的代码是这样的：修改之后的代码为：<style scoped>#add-blog *{ box-sizing: border-box;}#add-blog{ margin: 20px auto; max-width: 600px; paddin

2021-04-18 14:47:32 1081

原创 vue.js3.0 select 列表获取表单注意事项

今天在写vuejs的时候，发现获取select标签的时候默认属性并没有获取到，调试了一半天，才找到了原因，最开始的时候我是这样写的，发现通过blog.author去获取data里面的属性根本获取不到，达不到页面默认的效果，页面效果是这样展示的，可以看到，作者还是没有获取到data里面的属性，所以我就将v-model里面的属性重新绑定了一下，修改为：页面效果如下：这样下拉框里面就默认展示为空了，当我需要选择的时候才展示下拉框里面的值，这个在vuejs2.0里面都是通过b

2021-04-18 08:36:15 403

原创 Elements in iteration expect to have ‘v-bind:key‘ directives.eslint-plugin-vue的两种解决办法

在使用VScode编辑器vue开发过程中，v-for在Eslint的规则检查下出现报错：Elements in iteration expect to have ‘v-bind:key’ directivesEslint规则检查显示如下：现在说说解决他的两种方法：1.直接在v-for循环后面绑定一个属性，跟前面需要循环的属性一一对应，截图如下：2.在vscode中去掉Eslint规则检查，具体操作截图如下：文件–》首选项–》设置–》在搜索框中输入：vetur.validation

2021-04-18 07:55:45 3196

原创 vue路由跳转的几种方式

<template> <div> <h1>Home</h1> <button @click="goToMenu" class="btn btn-success">Let's order!</button> </div> </template><script>export default { methods:{ goToMe.

2021-04-14 21:12:05 150

原创 vue.js生命周期（钩子函数）以及使用场景

什么是vue的生命周期Vue 实例从开始创建、初始化数据、编译模板、挂载Dom和渲染、更新和渲染、卸载等一系列过程，这是 Vue 的生命周期它的大致流程图是这样的：下面来详细的说一说vue的8个钩子函数：beforeCreate() 创建前在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。在此生命周期执行的时候，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法created（）被创建 dat

2021-04-13 00:37:52 2309

原创 vuejs子向父组件传值

子向父组件传值使用：this.$emit，在里面绑定需要传值的对象，代码如下：<template> <header v-on:click="changeTitle"> <h1>{{title1}} -- {{title}}</h1> </header></template><script>export default { name: 'app-header', props:{

2021-04-12 23:54:02 130

原创 vue.js父组件向子组件传值

父组件向子组件传值使用v-bind:users，绑定对象，子组件里面使用props来接收，具体代码如下：父组件：<template> <div id="app"> <app-header></app-header> <users v-bind:users="users"></users> <app-footer></app-footer> </div></te

2021-04-12 22:04:58 228

原创 vuejs组件css作用域

关键字是使用scoped，在每一个样式里面添加scoped，具体代码如下：<template> <div id="app"> <h1>{{title}}</h1> <users></users> </div></template><script>//局部注册组件import Users from './components/Users'export defa

2021-04-12 20:32:24 123

原创 vue局部注册组件的使用

1.Users.vue:<template> <div class="users"> <ul> <li v-for="user in users"> {{user}} </li> </ul> </div></template><script>export default { name: 'users', data () {

2021-04-12 00:08:35 506

原创 vue全局组件引用示例

1.在开始引用之前需要安装node.js，并保证已经可以使用vue命令，然后才能开始下面的操作步骤，目录结构为：src下面的目录结构为：它的默认加载顺序是index.html-->main.js-->App.vue1.首先需要在components下面新增一个Users.vue，格式如下：<template> <div class="users"> <ul> <li v-for="user in users

2021-04-12 00:02:43 2210

原创 vue实例化多个对象调用

//实例化vue对象var one = new Vue({ el:"#app-one", data:{ characters:["ddd","34","df"], users:[ {name:"mischen",age:30}, {name:"mischen1",age:33}, {name:"mischen2",age:35}, {name:"mischen3",age:36} ], success:false, title:.

2021-04-11 22:28:35 428

原创 v-for标签使用示例

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>vue.js 学习</title> <link rel="stylesheet" href="styles.css"> <script src="https://unpkg.com/vue"></script> </he.

2021-04-11 15:49:43 659 1

原创 v-if和v-show的区别和使用场景

先来看看v-if的最简单使用：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>vue.js 学习</title> <link rel="stylesheet" href="styles.css"> <script src="https://unpkg.com/vue"></scrip

2021-04-11 11:19:45 465

原创 vus.js动态绑定css样式

首先，要知道vuejs动态绑定需要用到哪个属性，即v-bind:class这个值，下面我们来看看具体代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>vue.js 学习</title> <link rel="stylesheet" href="styles.css"> <script src

2021-04-11 10:41:35 473

原创 vue.js中computed和methods的区别以及使用场景

先来看一下methods调用的使用场景：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>vue.js 学习</title> <link rel="stylesheet" href="style.css"> <script src="https://unpkg.com/vue"></s

2021-04-11 09:41:24 782 2

原创 vue.js数据双向绑定示例

vusjs数据双向绑定指令为：v-model，具体代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>vue.js 学习</title> <link rel="stylesheet" href="style.css"> <script src="https://unpkg.com/vue"

2021-04-11 01:20:04 344 1

原创 vue.js绑定enter事件

直接上代码吧：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>vue.js 学习</title> <link rel="stylesheet" href="style.css"> <script src="https://unpkg.com/vue"></script>

2021-04-11 01:03:56 608

原创 vue.js绑定单击事件和双击事件（共用同一个方法代码示例）

首先，先来学习一下绑定单击事件和双击事件的2个常用标签：v-on:click 表示单击v-on:dblclick 表示双击示例代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>vue.js 学习</title> <script src="https://unpkg.com/vue"&gt..

2021-04-10 18:11:19 2577

原创 vue.js属性绑定示例

直接上代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="https://unpkg.com/vue"></script> </head> <body>  <div id="app">

2021-04-10 17:47:45 122

原创 vue.js怎样拿到当前实例化对象

直接上代码，<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="https://unpkg.com/vue"></script> </head> <body> <div id="app"> <h1>{{ greet('af

2021-04-10 17:21:54 875

原创 windows怎样安装nodejs(安装node js，输入命令，提示：‘node‘ 不是内部或外部命令，也不是可运行的程序)

1.先到node.js官网下载最新node.js的包,地址为https://nodejs.org/en/，2.点击上图中的下载，下载下来的包为：3.然后依次点击安装，全部默认就行，可以根据自己的需要修改默认安装路径，安装完之后的文档结构图为：4.检验安装输入是否成功，Windows打开cmd窗口，输入node -v发现提示“'node' 不是内部或外部命令，也不是可运行的程序”，表明此时还没有环境变量支撑，这个时候需要去安装环境变量。5.安装环境变量的步骤为：右键单击电脑-.

2021-04-10 10:10:59 406

原创 java如何判断一个对象是否存活？（GC回收的依据）

判断一个对象是否存活有2种方法：1.引用计数法所谓引用计数法其实就是给每一个对象设置一个引用计数器，每当有一个地方引用这个对象时，就将计数器+1，引用失效时，就将计数器-1.当一个对象的引用计数器为0时，说明此对象没有被引用，也就是“死对象”，将会被垃圾回收。引用计算法有一个缺陷就是无法解决循环引用问题，也就是说当对象A引用B，对象B又引用A，那么此时A、B对象的引用计数器都不为0，也就造成无法完成垃圾回收，所以主流的虚拟机都没有采用这种算法。2.可达性算法（引用链法）...

2021-04-06 23:31:45 726

原创微服务注册中心选择思考

常⻅的注册中⼼：zk、eureka、nacos 那你应该怎么选择 Zookeeper：CP设计，保证了⼀致性，集群搭建的时候，某个节点失效，则会进⾏选举新的leader，或者半数以上节点不可⽤，则⽆法提供服务，因此可⽤性没法满⾜ Eureka：AP原则，⽆主从节点，⼀个节点挂了，⾃动切换其他节点可以使⽤，去中⼼化结论：分布式系统中P,肯定要满⾜，所以只能在CA中⼆选⼀没有最好的选择，最好的选择是根据业务场景来进⾏架构设计如果要求⼀致性，则选...

2021-04-05 09:28:33 242 2

原创缓存如何做到实时更新

最近在项目中，涉及到需要做到缓存实时更新的应用场景，举一个最简单的例子，就是当缓存里面的值发生变化以后，立刻就能查询出来结果。我研究了一下，打算这样来进行设计，每当数据库里面的值发生变化以后，我就去缓存里面重新set他的值，这样就可以保证缓存实时更新了。这种场景适合任何缓存实时的场景，具体代码示例如下：1.controller层：@RequestMapping("getById") public RestResponse<User> getUserById(Long id)

2021-04-04 13:07:54 1673

原创解决mysql版本依懒问题：java.sql.SQLException: Unknown system variable ‘query_cache_size‘

出现这个原因是因为连接mysql的驱动太低造成的，我部署在docker上面的mysql是8.0的版本，而我本地的项目配置连接mysql的驱动是5.11版本的，所以就报了这个错误，发现只要提供版本驱动包的版本就可以了，具体配置如下：<dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version&g

2021-04-04 10:08:22 272