![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaWeb
Lydia的IT世界是橙色的
研究所工程师,码龄2年,大数据方向
展开
-
vue -前端传递对象到springboot后端,跳转页面并传递参数
由于对前端不是特别熟, vue也就学了一周,javascript也就是简单学了一两天,做个人博客的时候遇到一些不常用的,现在就记一下笔记。1. 构建对象,利用axios传递到后,跳转页面并传参首先构建函数,由于是分页数据,需要在data对象里包含多个参数: //条件分页查询 export const findPage = (params) => { return axios({ method: 'post', url: `/findPage`, data: {原创 2020-11-06 20:41:08 · 8063 阅读 · 0 评论 -
springboot - 启动时将数据保存在servletContext中的两种办法
最近在写个人博客,想在系统启动时自动把文章类别查询出来并保存,之前系统启动时是用redis对文章的浏览量和评论数进行保存。这次想用另一种方式。即将文章类别保存到应用的上下文。这里就要搞清楚三个概念ServletContext、ApplicationContext、ServletConfig、WebApplicationContext。这里主要参考了:https://blog.csdn.net/u010325193/article/details/845348611. ServletContext、Appl原创 2020-11-05 15:34:23 · 1902 阅读 · 0 评论 -
Vue - 后端解析md文件并在前端显示 (代码高亮+md中图片显示)
之前在做的个人博客,前端直接引入markdown文件并显示,当时的做法如下:这里如果用import()动态引入,必须写入静态路径,十分麻烦,难道项目部署上线时我还需要到这里来修改这个静态路径吗?肯定不会,所以我思来想去,还是采用后端解析md文件前端显示的流程,这样一系列文件路径的配置可以放在后端。1. 后端解析md文件1.1 配置md文件存储路径以及相关映射server: #端口 port: 4000 #本地路径 为了映射md中的图片文件,必须填 address: localho原创 2020-11-03 19:23:22 · 5373 阅读 · 0 评论 -
Vue系列 - 从创建vue到项目打包发布全过程总结
1 创建vue 项目1.1 安装基本环境1.安装vue和node.js 的express2.这里假设都安装完npm和node.js环境vue3.0 安装 npm install -g @vue/cli1.2 vue3.0创建项目 vue create my-project cd my-project npm run serve # 1.Manually select features # 2.选择Router,Vuex,CSS Pre-processors,原创 2020-10-23 20:13:34 · 1184 阅读 · 0 评论 -
Vue系列 -直接引入vue.js与axios.js到html中使用
今天学习ElasticSearch相关项目,跟着B站狂神说做了一个京东搜索的实战项目,其中有一个直接将vue.js和axios引入到html中并结合thymeleaf使用的方法挺好,在此做一个记录。1.下载vue.js与axios.jsnpm init首先必须确保先安装node.js环境,新建一个英文的文件夹,取名newvue,然后进入该文件夹打开cmd命令行,输入C:\Users\Administrator\Desktop\new_vue>npm init一路回车,遇到"Is thi原创 2020-10-22 16:53:59 · 4661 阅读 · 1 评论 -
springboot - vue - shiro 登录验证的一些坑
最近开发个人博客,shiro配置后,需要进行登录验证,如要输入用户名或密码不正确,需要进行异常拦截并将结果返回给前端,在此过程有一些坑,在此记录一下:1. 前端登录界面该界面是用vue开发的,登录的el-form: <!-- 登录表单区域 --> <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label原创 2020-10-21 10:57:33 · 925 阅读 · 0 评论 -
springboot - shiro - 简单验证与授权
最近开发个人博客,主要内容部分已经完成,就到了设计权限的部分,于是把shiro翻出来复习了一下,现在记录一下测试过程:0. shiro逻辑参考https://www.jianshu.com/p/7464327c83fe//创建一个默认SecurityManagerDefaultSecurityManager defaultSecurityManager = new DefaultSecurityManager();//创建一个自定义Realm对象CustomRealm realm = new C原创 2020-10-13 22:41:55 · 244 阅读 · 0 评论 -
Vue系列-前端条件分页查询全流程演示
最近在做个人博客网站,后端的条件分页查询已经写好(见https://blog.csdn.net/ws6afa88/article/details/108928401),现在来用Vue做前端显示。1. 数据表2. 最终效果3. axios函数所需要的条件分页函数定义在article.js中//条件分页查询 export const findPage = (pageSize,pageNum,title) => { return axios({ method:原创 2020-10-07 22:34:19 · 1839 阅读 · 1 评论 -
SpringBoot - 后端条件分页查询-MyBatis解决方案
最近用SpringBoot+MyBatis在做个人博客网站,遇了条件分页查询,现在把解决流程与源代码记录下来,便于后续参考。1.数据表2. 定义pojo定义与数据表相对应的Article 类@Data@NoArgsConstructor@AllArgsConstructorpublic class Article implements Serializable { private Long articleId; private Long userId=1l ; pr原创 2020-10-05 14:53:54 · 2378 阅读 · 1 评论 -
Spring原理 - 最通俗易懂理解AOP
AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术,是Spring另一个主要内核。AOP与OOP是面向不同领域的两种设计思想。OOP(面向对象编程)针对业务处理过程的实体及其属性和行为进行抽象封装,以获得更加清晰高效的逻辑单元划分。AOP则是针对业务处理过程中的切面进行提取,它所面对的是处理过程中的某个步骤或阶段,以获得逻辑过程中各部分之间低耦合性的隔离效果。例如,可以对于“学生”这样一个业务实体原创 2020-10-04 16:24:47 · 258 阅读 · 0 评论 -
SpringBoot - 排坑 - IDEA找不到或无法加载主类以及找不到测试类的解决办法
1. IDEA找不到或无法加载主类今天用IDEA做一个SpringBoot项目,启动时突然出现错误,显示找不到或无法加载主类后来调了半天,只需一步操作即可mvn clean compile操作如下:2. IDEA找不到测试类后来用junit进行测试时,又提示找不到测试类,该测试类明明在指定的路径上啊!急死,于是又调了半天,原来是pom文件中的junit依赖与其他依赖有冲突,于是直接删除了junit依赖,重新导入,并刷新maven即可于是一切就ok了,这个坑在此记录一下。...原创 2020-10-04 10:28:19 · 3526 阅读 · 0 评论 -
springboot - 利用@PostConstruct对自定义Bean进行初始化
开发博客系统的时候有一个需求,就是希望系统启动时,自动将指定文件夹中的md文件写入到数据库,这样我每更新一篇文章只需将文章拷贝入那个文件夹即可。(当然也可以开发界面上传的方式,但我不想搞得那么复杂,怎么方便怎么来)。数据库表长这样:存储文章的文件夹长这样:这里用@PostConstruct这个注解很好实现,注意系统启动时,初始化的顺序为:构造方法 -> @Autowired -> @PostConstruct@Component@Order(Ordered.HIGHEST_PRECE原创 2020-10-02 09:59:13 · 1007 阅读 · 0 评论 -
springboot -前端vue请求文件下载完美解决
1.前端定义下载按钮<template> <div> <el-button @click="downLoad" id="down">下载MD</el-button> </div></template>定义下载方法download() //下载MD文件 async downLoad(){ var id=1; //通过axios.defaults.baseURL获取ba原创 2020-09-25 15:55:08 · 1805 阅读 · 2 评论 -
springboot 利用mybatis操作mysql数据库-常规流程
1. 创建数据库这里用SQLyog进行操作sql语句比较方便CREATE DATABASE myblogUSE myblogDROP TABLE IF EXISTS `articles`;#创建数据表articlesCREATE TABLE `articles` ( `article_id` BIGINT(20) NOT NULL AUTO_INCREMENT COMMENT '主键ID', `user_id` BIGINT(20) NOT NULL COMMENT '用户ID',原创 2020-09-22 20:09:21 · 484 阅读 · 0 评论 -
axios带参请求-返回HTTP Status 400 -Required String parameter xxx is not present类型异常
最近做一个博客项目,用axios向后端springboot发送带参请求一直报“HTTP Status 400 -Required String parameter xxx is not present类型异常”,经过一番研究,终于解决。1.错误写法前端axios请求函数:import axios from 'axios'export function postMd(value){ return axios.post('/saveMd', { c原创 2020-09-21 15:56:51 · 978 阅读 · 0 评论 -
Vue系列-动态引入markdown文件并显示的完整实现案例
1. 安装html-loader与markdown-loadernpm i html-loader markdown-loader --save安装完成后可以在package.json中看到2. 配置md文件解析规则package.json同级的目录下找到vue.config.js,没有则新建一个,配置加载md文件的规则,如下module.exports = { //配置加载md文件时的解析规则 chainWebpack: config => { config.modu原创 2020-09-20 23:40:36 · 5602 阅读 · 2 评论 -
Vue系列-用<router-link>创建链接传参总结
当我们的博客框架搭好后,点击文章链接可以跳转到文章内容页面。在Vue.js中我们可以用router-link标签来完成这一操作。我们以一个博客页面做为实例,如图:点击列表中的article2,中间区域显示对应的文章信息,同时显示对应的number:2。现在我们来实现这一功能1. 创建router-link列表并传参首先创建路由列表的变量:export default { data(){ return{ routerList:[ {'id':'1','nam原创 2020-09-17 22:11:08 · 570 阅读 · 0 评论 -
springboot 自定义注解-使用拦截器实现角色权限验证
springboot的权限控制可以用Shiro或者Spring Security,但是原生的拦截器同样可以实现这一功能。现在我们通过自定义注解来实现一个角色权限验证的功能。有关springboot自定义注解的一般方法见我的博客《springboot自定义注解的实现方式》1. 定义接口@Target(ElementType.METHOD)@Retention(RetentionPolicy.RUNTIME)public @interface MyCheck { String[] value(原创 2020-09-15 00:59:21 · 739 阅读 · 1 评论 -
springboot 自定义注解-常规实现方式
通常springboot的应用场景为:日志记录: 记录请求信息的日志, 以便进行信息监控, 信息统计, 计算PV(page View)等性能监控;权限检查;通用行为0. pom引入依赖<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-aop</artifactId></depende原创 2020-09-14 23:58:47 · 1024 阅读 · 0 评论 -
开源框架EL-ADMIN开发自己的 web应用(7)-异常控制
第(5)节与第(6)节仔细研究了eladmin对于后端与前端的权限控制机制,本节主要讨论如何在系统中进行异常控制,一般都是根据源码来寻找答案,仔细研究eladmin的官网对于异常处理的说明后,我们首先来看盾异常实体ApiError这个实体中主要封装三个信息态status,默认是400;timestamp,默认是当前的时间;String类型的message。然后再看看通用异常BadRequestException的定义由上图可知,BadRequestException也就封装了status与原创 2020-09-13 22:45:21 · 1200 阅读 · 0 评论 -
开源框架EL-ADMIN开发自己的 web应用(6)-前端权限控制
第(5)节,我们讨论了eladmin后端权限控制的原理,感兴趣的同学可以好好研究一下源代码,将eladmin后端权限控制的代码结构复用到自己的项目,这一节我们来讨论eladmin是如何进行前端权限控制的,其实前端对于权限的控制主要就是控制界面中某些元素的显示与隐藏。首先我们看看 eladmin官网对于前端控制方式的说明,主要涉及到两个:“v-permission"与"checkPermission()”,我们分别进行研究,并举例进行说明。1. v-permission还是以"我的岗位管理“界面为例,关于原创 2020-09-10 11:01:54 · 2569 阅读 · 2 评论 -
开源框架EL-ADMIN开发自己的 web应用(5)-后端权限控制
第(4)节,我们已经对代码生器生成的界面“我的岗位管理”进行了优化,可以看到,已经与原eladmin的“岗位管理”基本一致,现在我们来看看eladmin是怎么定义权限控制的,我们如何应用到我们自己的界面当中。1. 权限注解首先用IDEA打开后端“我的岗位管理”的gen模块中的rest层(也就是Controller层),如下图:可以看到标红的注解@PreAuthorize("@el.check(‘myJob:list’)"),这是什么意思呢?在IDEA环境下,按住ctrl键点击@el.check,可以原创 2020-09-09 21:01:50 · 2914 阅读 · 3 评论 -
开源框架EL-ADMIN开发自己的 web应用(4)-代码生成器形成的页面的修改
第(3)节,我们讲了使用代码生成器中的一个坑,这一节我们使用新的数据表,如下图:注意仅仅将主键名改为id,如果主键名想用特殊的名子,比如job_id,请参照第(3)节对代码生成器生成的代码进行修改。好了,采用新的数据表,我们利用代码生成器生成界面,不会的小伙伴请回看第(2)节内容。可以生成如下界面:而我们回看,eladmin中点击岗位管理的界面系统管理->岗位管理,也就是我们模仿其数据表形成的界面,它长这样:我们可以看到与“我的一些不同(已标红):岗位状态不是下拉框时间搜索框没有列原创 2020-09-08 10:41:54 · 1953 阅读 · 1 评论 -
开源框架EL-ADMIN开发自己的 web应用(3)-代码生器生成的CRUD界面中的一个坑处理
1.注意domain中定义主键的区别上一节我们用代码生成器生了一个CRUD界面,用的数据表my_job是模仿原eladmin数据库中的表格sys_job,如下注意我们用的主键是job_id(上图标红),我们用eladmin代码生成器生成的代码都是基于这个表,于是我们在后端的MyJob.java中与my_job关联是这样的:别问我类与数据表是如何直接关系的,这涉及到Spring Data JPA的知识,不知道的小伙伴可以学习一下该方面的知识!!!而回看eladmin中原生Job.java与sys_原创 2020-09-07 00:21:43 · 3771 阅读 · 2 评论 -
开源框架EL-ADMIN开发自己的 web应用(2)-利用代码生成器生第一个CRUD界面
开源框架EL-ADMIN开发自己的 web应用(2)-利用代码生成器生第一个CRUD界面小伙伴们,学习完第(1)节课的内容之后,我们可以成功启动eladmin了,现在需要更进一步利用eladmin来创建自己的增删改查界面了,话不多说,直接来操作0 界面效果这里为了方便理解,我们直接选取eladmin自带的一个模块进行讲解,启动eladmin后,点击系统管理->岗位管理可以看到基本的界面结构如下,有增删改查的各项操作点击新增按钮可以看到弹出的对话框如下现在我们就来模拟创建一个相同的界面,通原创 2020-09-04 22:09:49 · 5040 阅读 · 7 评论