Spring Boot + vue-element 开发个人博客项目实战教程(十八、操作日志功能实现)1

本文涉及的产品
日志服务 SLS,月写入数据量 50GB 1个月
简介: Spring Boot + vue-element 开发个人博客项目实战教程(十八、操作日志功能实现)1

⭐ 作者简介:码上言



⭐ 代表教程:Spring Boot + vue-element 开发个人博客项目实战教程



⭐专栏内容:零基础学Java个人博客系统

项目部署视频

https://www.bilibili.com/video/BV1sg4y1A7Kv/?vd_source=dc7bf298d3c608d281c16239b3f5167b

文章目录

一、前言

我们后端的功能差不多写的可以了,我看了下还差了个操作日志和登录日志,我们今天就将这个实现一下,然后后端就基本上完成了,再完成前端的页面我们的项目就完成了,可能大家注意到了我把项目的标题都改了,没有了移动端,我考虑到现在我们就先做前后台功能,后期我们再进行用户端的开发,等我更新完基础的知识。

二、操作日志开发

我们开始开发操作日志功能,首先我们要思考,我们操作日志是干嘛的?怎么能获取到操作日志?我们怎么知道谁操作的什么功能?接下来我们一点点的开发。由于时间比较长了 ,一开始建立的数据有点改变,大家把下面的sql重新再Navicat里的查询里再运行一遍,更新下操作日志的数据。

DROP TABLE IF EXISTS `person_operation_log`;
CREATE TABLE `person_operation_log` (
  `id`                    INT             NOT NULL PRIMARY KEY AUTO_INCREMENT     COMMENT '主键',
  `operation_ip`          VARCHAR(128)        NULL DEFAULT 0                      COMMENT '主机地址',
  `opera_location`        VARCHAR(255)        NULL DEFAULT ''                     COMMENT '操作地点',
  `methods`               TEXT                NULL                                COMMENT '方法名',
  `args`                TEXT                NULL                                COMMENT '请求参数',
  `operation_name`        VARCHAR(50)     NOT NULL DEFAULT ''                     COMMENT '操作人',
  `operation_type`      VARCHAR(50)     NOT NULL DEFAULT ''                     COMMENT '操作类型',
  `return_value`        TEXT                NULL                                COMMENT '返回参数',
  `create_time`           DATETIME            NULL DEFAULT CURRENT_TIMESTAMP      COMMENT '创建时间'
) ENGINE = InnoDB
  CHARACTER SET = utf8mb4
  COLLATE = utf8mb4_bin
  ROW_FORMAT = Dynamic
  COMMENT '操作日志表';

更新完表之后,我们接下来写操作日志的添加功能,这儿大家看到这里可以停止往下看了,自己去写一下操作日志的添加,我们写了那么多次了,要自己尝试,我们教程都快结束了再不会写就说不过去了。

1、新建实体类

在entity包中新建一个OperationLog.java

package com.blog.personalblog.entity;
import lombok.Data;
import java.time.LocalDateTime;
/**
 * @author: SuperMan
 * @create: 2022-04-02
 **/
@Data
public class OperationLog {
    /**
     * 主键id
     */
    private Integer id;
    /**
     * ip地址
     */
    private String operationIp;
    /**
     * ip来源
     */
    private String operaLocation;
    /**
     * 操作方法名
     */
    private String methods;
    /**
     * 请求参数
     */
    private String args;
    /**
     * 操作人
     */
    private String operationName;
    /**
     * 操作类型
     */
    private String operationType;
    /**
     * 返回结果
     */
    private String returnValue;
    /**
     * 创建时间
     */
    private LocalDateTime createTime;
}

2、新建OperationLogService.java

新建一个业务类接口,然后写一个添加和查询的接口,操作日志只能展示,不能删除和修改。

package com.blog.personalblog.service;
import com.blog.personalblog.config.page.PageRequest;
import com.blog.personalblog.entity.OperationLog;
import java.util.List;
/**
 * @author: SuperMan
 * @create: 2022-04-02
 **/
public interface OperationLogService {
    /**
     * 保存操作日志
     *
     * @param operationLog
     * @return
     */
    void saveOperationLog(OperationLog operationLog);
    /**
     * 操作日志列表(分页)
     *
     * @param pageRequest
     * @return
     */
    List<OperationLog> getOperationLogPage(PageRequest pageRequest);
}

3、新建OperationLogServiceImpl.java

新建一个业务的实现类,实现那两个接口。

package com.blog.personalblog.service.Impl;
import com.blog.personalblog.config.page.PageRequest;
import com.blog.personalblog.entity.OperationLog;
import com.blog.personalblog.mapper.OperationLogMapper;
import com.blog.personalblog.service.OperationLogService;
import com.github.pagehelper.PageHelper;
import org.springframework.stereotype.Service;
import javax.annotation.Resource;
import java.util.List;
/**
 * @author: SuperMan
 * @create: 2022-04-02
 **/
@Service
public class OperationLogServiceImpl implements OperationLogService {
    @Resource
    OperationLogMapper operationLogMapper;
    @Override
    public void saveOperationLog(OperationLog operationLog) {
        operationLogMapper.createOperationLog(operationLog);
    }
    @Override
    public List<OperationLog> getOperationLogPage(PageRequest pageRequest) {
        int pageNum = pageRequest.getPageNum();
        int pageSize = pageRequest.getPageSize();
        PageHelper.startPage(pageNum,pageSize);
        List<OperationLog> operationLogList = operationLogMapper.getOperationLogPage();
        return operationLogList;
    }
}

然后我们写dao层的接口。

4、新建OperationLogMapper.java

这个也不用多说了,新写两个添加和查找的接口。

package com.blog.personalblog.mapper;
import com.blog.personalblog.entity.OperationLog;
import org.springframework.stereotype.Repository;
import java.util.List;
/**
 * @author: SuperMan
 * @create: 2022-04-02
 **/
@Repository
public interface OperationLogMapper {
    /**
     * 创建操作日志
     * @param operationLog
     * @return
     */
    int createOperationLog(OperationLog operationLog);
    /**
     * 分类列表(分页)
     * @return
     */
    List<OperationLog> getOperationLogPage();
}

5、新建OperationLogMapper.xml文件

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.blog.personalblog.mapper.OperationLogMapper">
    <resultMap id="BaseResultMap" type="com.blog.personalblog.entity.OperationLog">
        <result column="id" jdbcType="INTEGER" property="id"/>
        <result column="operation_ip" jdbcType="VARCHAR" property="operationIp"/>
        <result column="opera_location" jdbcType="VARCHAR" property="operaLocation"/>
        <result column="methods" jdbcType="VARCHAR" property="methods"/>
        <result column="args" jdbcType="VARCHAR" property="args"/>
        <result column="operation_name" jdbcType="VARCHAR" property="operationName"/>
        <result column="operation_type" jdbcType="VARCHAR" property="operationType"/>
        <result column="return_value" jdbcType="VARCHAR" property="returnValue"/>
        <result column="create_time" jdbcType="VARCHAR" property="createTime"/>
    </resultMap>
    <insert id="createOperationLog" parameterType="com.blog.personalblog.entity.OperationLog" useGeneratedKeys="true" keyProperty="id">
        INSERT INTO person_operation_log (operation_ip, opera_location, methods, args, operation_name, operation_type, return_value)
        VALUES(#{operationIp}, #{operaLocation}, #{methods}, #{args}, #{operationName}, #{operationType}, #{returnValue})
    </insert>
    <select id="getOperationLogPage" resultMap="BaseResultMap">
        select * from person_operation_log
    </select>
</mapper>

上边写了那么多,基本上把操作日志的功能写完了,我们现在有了存储操作日志的数据了,也能查出来了,现在是要考虑如何把操作日志的数据获取。

接下来我们要放大招,手写注解,以前都是我们使用别人的注解,现在我们要自己写注解。

三、开发注解

我们使用AOP切面的方式来实现日志记录功能。但是什么是AOP呢?在软件业,AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方

式和运行期动态代理实现程序功能的统一维护的一种技术。AOP是OOP的延续,是软件开发中的一个

热点,也是Spring框架中的一个重要内容,是函数式编程的一种衍生范型。利用AOP可以对业务逻辑

的各个部分进行隔离,从而使得业务逻辑各部分之间的耦合度降低,提高程序的可重用性,同时提高

了开发的效率。


我们先看一下AOP包含的概念


1.Aspect(切面): Aspect 声明类似于 Java 中的类声明,在 Aspect 中会包含着一些 Pointcut 以及相应的 Advice。

2.Joint point(连接点):表示在程序中明确定义的点,典型的包括方法调用,对类成员的访问以及异常处理程序块的执行等等,它自身还可以嵌套其它 joint point。

3.Pointcut(切点):表示一组 joint point,这些 joint point 或是通过逻辑关系组合起来,或是通过通配、正则表达式等方式集中起来,它定义了相应的 Advice 将要发生的地方。

4.Advice(增强):Advice 定义了在 Pointcut 里面定义的程序点具体要做的操作,它通过 before、after 和 around 来区别是在每个 joint point 之前、之后还是代替执行的代码。

5.Target(目标对象):织入 Advice 的目标对象.。

6.Weaving(织入):将 Aspect 和其他对象连接起来, 并创建 Adviced object 的过程

1、OperationType.java

接下来我们要编写注解了,首先创建一个annotation包handler包,主要放AOP切点类和自定义注解类,我们在annotation包中先创建一个OperationType.java枚举类。这个类主要是放注解使用的枚举类型。

package com.blog.personalblog.annotation;
import lombok.Getter;
/**
 * 操作类型
 *
 * @author: SuperMan
 * @create: 2022-04-02
 **/
@Getter
public enum OperationType {
    /**
     * 默认系统
     */
    SYSTEM("SYSTEM"),
    /**
     * 登录
     */
    LOGIN("LOGIN"),
    /**
     * 添加
     */
    INSERT("INSERT"),
    /**
     * 删除
     */
    DELETE("DELETE"),
    /**
     * 查询
     */
    SELECT("SELECT"),
    /**
     * 更新
     */
    UPDATE("UPDATE");
    private String value;
    OperationType(String s) {
        this.value = s;
    }
}

2、OperationLogSys.java

接下来我们自定义注解,OperationLogSys这个就是我们定义的注解名@OperationLogSys,然后下面两个接口就是我们使用注解后边带的参数,接下来我们再讲解一下。

package com.blog.personalblog.annotation;
import java.lang.annotation.Documented;
import java.lang.annotation.ElementType;
import java.lang.annotation.Retention;
import java.lang.annotation.RetentionPolicy;
import java.lang.annotation.Target;
/**
 * 操作日志注解
 *
 * @author: SuperMan
 * @create: 2022-04-02
 **/
@Target(ElementType.METHOD)
@Retention(RetentionPolicy.RUNTIME)
@Documented
public @interface OperationLogSys {
    /**
     * 日志描述
     */
    String desc() default "";
    /**
     * 日志操作类型
     */
    OperationType operationType() default OperationType.SYSTEM;
}

@Target

作用:用于描述注解的使用范围(即:被描述的注解可以用在什么地方)

取值(ElementType)有:

a. CONSTRUCTOR:用于描述构造器

b. FIELD:用于描述域

c. LOCAL_VARIABLE:用于描述局部变量

d. METHOD:用于描述方法

e. PACKAGE:用于描述包

f. PARAMETER:用于描述参数

g. TYPE:用于描述类、接口(包括注解类型) 或enum声明。

@Retention

作用是定义被它所注解的注解保留多久,一共有三种策略:

a. source:注解只保留在源文件,当Java文件编译成class文件的时候,注解被遗弃;被编译器忽略。

b. class:注解被保留到class文件,但jvm加载class文件时候被遗弃,这是默认的生命周期。

c. runtime:注解不仅被保存到class文件中,jvm加载class文件之后,仍然存在。


首先要明确生命周期长度 SOURCE < CLASS < RUNTIME ,所以前者能作用的地方后者一定也能作用。一般如果需要在运行时去动态获取注解信息,那只能用 RUNTIME 注解;如果要在编译时进行一些预处理操作,比如生成一些辅助代码(如 ButterKnife),就用 CLASS注解;如果只是做一些检查性的操作,比如 @Override 和 @SuppressWarnings,则可选用 SOURCE 注解。

  • @Documented
    用来标注生成javadoc的时候是否会被记录。

3、OptLogAspect.java

接下来是我们最主要的类,可以使用自定义注解或针对包名实现AOP增强。

handler包中新建OptLogAspect.java
1、Pointcut(切入点): JoinPoint的集合,是程序中需要注入Advice的位置的集合,指明Advice要在什么样的条件下才能被触发,在程序中主要体现为书写切入点表达式。

    /**
     * 日志 切面 自定义注解  切到任意方法
     */
    @Pointcut("@annotation(com.blog.personalblog.annotation.OperationLogSys)")
    public void optLog() {
    }

2、标识一个前置增强方法,相当于BeforeAdvice的功能。

 @Before("optLog()")
 public void doBefore(JoinPoint joinPoint) {
     log.info("进入方法前执行...");
 }

3、接下来我们就开始获取到注解的操作数据。具体的下面代码都有注释,这里我只说JoinPoint类和@AfterReturning注解。
JoinPoint常用的方法:

  • Object[] getArgs:返回目标方法的参数
  • Signature getSignature:返回目标方法的签名
  • Object getTarget:返回被织入增强处理的目标对象
  • Object getThis:返回AOP框架为目标对象生成的代理对象

    @AfterReturning
    注解可指定如下两个常用属性:
  • pointcut/value:这两个属性的作用是一样的,它们都属于指定切入点对应的切入表达式。一样既可以是已有的切入点,也可直接定义切入点表达式。当指定了pointcut属性值后,value属性值将会被覆盖。
  • returning:该属性指定一个形参名,用于表示Advice方法中可定义与此同名的形参,该形参可用于访问目标方法的返回值。除此之外,在Advice方法中定义该形参(代表目标方法的返回值)时指定的类型,会限制目标方法必须返回指定类型的值或没有返回值。
    @Async
    @Transactional(rollbackFor = Exception.class)
    @AfterReturning(value = "optLog()", returning = "result")
    public void doAfterReturning(JoinPoint joinPoint, Object result) throws Throwable {
        // 获取RequestAttributes
        RequestAttributes requestAttributes = RequestContextHolder.getRequestAttributes();
        // 从获取RequestAttributes中获取HttpServletRequest的信息
        HttpServletRequest request = (HttpServletRequest) Objects.requireNonNull(requestAttributes).resolveReference(RequestAttributes.REFERENCE_REQUEST);
        // 从切面织入点处通过反射机制获取织入点处的方法
        MethodSignature signature = (MethodSignature) joinPoint.getSignature();
        OperationLogSys annotation = signature.getMethod().getAnnotation(OperationLogSys.class);
        // 获取切入点所在的方法
        Method method = signature.getMethod();
        OperationLog operationLog = new OperationLog();
        if (annotation != null) {
            //操作类型
            String operationType = annotation.operationType().getValue();
            operationLog.setOperationType(operationType);
            //IP地址
            String ipAddr = IpUtil.getIpAddr(request);
            operationLog.setOperationIp(ipAddr);
            //IP来源
            operationLog.setOperaLocation(IpUtil.getIpInfo(ipAddr));
            //操作人
            String userName = request.getRemoteUser();
            operationLog.setOperationName(userName);
            //操作方法名
            String className = joinPoint.getTarget().getClass().getName();
            String methodName = method.getName();
            methodName = className + "." + methodName;
            operationLog.setMethods(methodName);
            //参数
            operationLog.setArgs(JSON.toJSONString(joinPoint.getArgs()));
            //返回结果
            operationLog.setReturnValue(JSON.toJSONString(result));
            operationLogService.saveOperationLog(operationLog);
        }
    }

补充一个IpUtil工具类:

package com.blog.personalblog.util;
import com.alibaba.fastjson.JSON;
import com.github.pagehelper.util.StringUtil;
import org.apache.shiro.SecurityUtils;
import org.apache.shiro.subject.Subject;
import javax.servlet.http.HttpServletRequest;
import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.net.InetAddress;
import java.net.URL;
import java.net.UnknownHostException;
import java.util.List;
import java.util.Map;
/**
 * 获取ip工具
 *
 * @author: SuperMan
 * @create: 2022-01-26
 **/
public class IpUtil {
    /**
     * 获取ip地址
     * @param request
     * @return
     */
    public static String getIpAddr(HttpServletRequest request) {
        if (request == null) {
            return "";
        }
        //String ip = request.getHeader("x-forwarded-for");
        Subject subject = SecurityUtils.getSubject();
        String ip = subject.getSession().getHost();
        if (StringUtil.isEmpty(ip) || "unknown".equalsIgnoreCase(ip)) {
            ip = request.getHeader("X-Forwarded-For");
        }
        if (StringUtil.isEmpty(ip) || "unknown".equalsIgnoreCase(ip)) {
            ip = request.getHeader("Proxy-Client-IP");
        }
        if (StringUtil.isEmpty(ip) || "unknown".equalsIgnoreCase(ip)) {
            ip = request.getHeader("WL-Proxy-Client-IP");
        }
        if (StringUtil.isEmpty(ip) || "unknown".equalsIgnoreCase(ip)) {
            ip = request.getHeader("HTTP_CLIENT_IP");
        }
        if (StringUtil.isEmpty(ip) || "unknown".equalsIgnoreCase(ip)) {
            ip = request.getHeader("HTTP_X_FORWARDED_FOR");
        }
        if (StringUtil.isEmpty(ip) || "unknown".equalsIgnoreCase(ip)) {
            ip = request.getRemoteAddr();
        }
        if (StringUtil.isEmpty(ip) || "unknown".equalsIgnoreCase(ip)) {
            ip = request.getRemoteAddr();
            if ("127.0.0.1".equals(ip)) {
                InetAddress inet = null;
                try {
                    inet = InetAddress.getLocalHost();
                } catch (UnknownHostException e) {
                    e.printStackTrace();
                }
                ip = inet.getHostAddress();
            }
        }
        if (ip != null && ip.length() > 15) {
            if (ip.indexOf(",") > 0) {
                ip = ip.substring(0, ip.indexOf(","));
            }
        }
        return ip;
    }
    /**
     * 通过IP获取地址
     *
     * @param ip
     * @return
     */
    public static String getIpInfo(String ip) {
        if ("127.0.0.1".equals(ip)) {
            ip = "127.0.0.1";
        }
        String info = null;
        try {
            URL url = new URL("http://opendata.baidu.com/api.php?query=" + ip + "&co=&resource_id=6006&oe=utf8");
            BufferedReader reader = new BufferedReader(new InputStreamReader(url.openConnection().getInputStream(), "utf-8"));
            StringBuffer result = new StringBuffer();
            while ((info = reader.readLine()) != null) {
                result.append(info);
            }
            reader.close();
            Map map = JSON.parseObject(result.toString(), Map.class);
            List<Map<String, String>> data = (List) map.get("data");
            return data.get(0).get("location");
        } catch (Exception e) {
            return "";
        }
    }
}

以下是全部的代码:

package com.blog.personalblog.handler;
import com.alibaba.fastjson.JSON;
import com.blog.personalblog.annotation.OperationLogSys;
import com.blog.personalblog.entity.OperationLog;
import com.blog.personalblog.service.OperationLogService;
import com.blog.personalblog.util.IpUtil;
import lombok.extern.slf4j.Slf4j;
import org.aspectj.lang.JoinPoint;
import org.aspectj.lang.annotation.AfterReturning;
import org.aspectj.lang.annotation.Aspect;
import org.aspectj.lang.annotation.Before;
import org.aspectj.lang.annotation.Pointcut;
import org.aspectj.lang.reflect.MethodSignature;
import org.springframework.scheduling.annotation.Async;
import org.springframework.stereotype.Component;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.context.request.RequestAttributes;
import org.springframework.web.context.request.RequestContextHolder;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import java.lang.reflect.Method;
import java.util.Objects;
/**
 * 操作日志切面
 *
 * @author: SuperMan
 * @create: 2022-04-02
 **/
@Slf4j
@Aspect
@Component
public class OptLogAspect {
    @Resource
    private OperationLogService operationLogService;
    /**
     * 日志 切面 自定义注解  切到任意方法
     */
    @Pointcut("@annotation(com.blog.personalblog.annotation.OperationLogSys)")
    public void optLog() {
    }
    @Before("optLog()")
    public void doBefore(JoinPoint joinPoint) {
        log.info("进入方法前执行...");
    }
    @Async
    @Transactional(rollbackFor = Exception.class)
    @AfterReturning(value = "optLog()", returning = "result")
    public void doAfterReturning(JoinPoint joinPoint, Object result) throws Throwable {
        // 获取RequestAttributes
        RequestAttributes requestAttributes = RequestContextHolder.getRequestAttributes();
        // 从获取RequestAttributes中获取HttpServletRequest的信息
        HttpServletRequest request = (HttpServletRequest) Objects.requireNonNull(requestAttributes).resolveReference(RequestAttributes.REFERENCE_REQUEST);
        // 从切面织入点处通过反射机制获取织入点处的方法
        MethodSignature signature = (MethodSignature) joinPoint.getSignature();
        OperationLogSys annotation = signature.getMethod().getAnnotation(OperationLogSys.class);
        // 获取切入点所在的方法
        Method method = signature.getMethod();
        OperationLog operationLog = new OperationLog();
        if (annotation != null) {
            //操作类型
            String operationType = annotation.operationType().getValue();
            operationLog.setOperationType(operationType);
            //IP地址
            String ipAddr = IpUtil.getIpAddr(request);
            operationLog.setOperationIp(ipAddr);
            //IP来源
            operationLog.setOperaLocation(IpUtil.getIpInfo(ipAddr));
            //操作人
            String userName = request.getRemoteUser();
            operationLog.setOperationName(userName);
            //操作方法名
            String className = joinPoint.getTarget().getClass().getName();
            String methodName = method.getName();
            methodName = className + "." + methodName;
            operationLog.setMethods(methodName);
            //参数
            operationLog.setArgs(JSON.toJSONString(joinPoint.getArgs()));
            //返回结果
            operationLog.setReturnValue(JSON.toJSONString(result));
            operationLogService.saveOperationLog(operationLog);
        }
    }
}
相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
目录
相关文章
|
3天前
|
前端开发 JavaScript Java
SpringBoot+Vue+token实现(表单+图片)上传、图片地址保存到数据库。上传图片保存位置自己定义、图片可以在前端回显(一))
这篇文章详细介绍了在SpringBoot+Vue项目中实现表单和图片上传的完整流程,包括前端上传、后端接口处理、数据库保存图片路径,以及前端图片回显的方法,同时探讨了图片资源映射、token验证、过滤器配置等相关问题。
|
3天前
|
前端开发 数据库
SpringBoot+Vue+token实现(表单+图片)上传、图片地址保存到数据库。上传图片保存位置到项目中的静态资源下、图片可以在前端回显(二))
这篇文章是关于如何在SpringBoot+Vue+token的环境下实现表单和图片上传的优化篇,主要改进是将图片保存位置从磁盘指定位置改为项目中的静态资源目录,使得图片资源可以跨环境访问,并在前端正确回显。
|
3天前
|
前端开发 数据库
SpringBoot+Vue实现商品不能重复加入购物车、购物车中展示商品的信息、删除商品重点提示等操作。如何点击图片实现图片放大
这篇文章介绍了如何在SpringBoot+Vue框架下实现购物车功能,包括防止商品重复加入、展示商品信息、删除商品时的提示,以及点击图片放大的前端实现。
SpringBoot+Vue实现商品不能重复加入购物车、购物车中展示商品的信息、删除商品重点提示等操作。如何点击图片实现图片放大
|
3天前
|
XML Java Maven
Spring5入门到实战------16、Spring5新功能 --整合日志框架(Log4j2)
这篇文章是Spring5框架的入门到实战教程,介绍了Spring5的新功能——整合日志框架Log4j2,包括Spring5对日志框架的通用封装、如何在项目中引入Log4j2、编写Log4j2的XML配置文件,并通过测试类展示了如何使用Log4j2进行日志记录。
Spring5入门到实战------16、Spring5新功能 --整合日志框架(Log4j2)
|
4天前
|
前端开发 JavaScript
基于Vue3实现鼠标按下某个元素进行拖动,实时改变左侧或右侧元素的宽度,以及点击收起或展开的功能
本文介绍了如何在Vue3项目中实现一个鼠标拖动调整元素宽度的功能,并展示了点击按钮收起或展开侧边栏的效果,提供了完整的实现代码和操作演示。
40 0
基于Vue3实现鼠标按下某个元素进行拖动,实时改变左侧或右侧元素的宽度,以及点击收起或展开的功能
|
4天前
|
JSON JavaScript 前端开发
基于SpringBoot + Vue实现单个文件上传(带上Token和其它表单信息)的前后端完整过程
本文介绍了在SpringBoot + Vue项目中实现单个文件上传的同时携带Token和其它表单信息的前后端完整流程,包括后端SpringBoot的文件上传处理和前端Vue使用FormData进行表单数据和文件的上传。
15 0
基于SpringBoot + Vue实现单个文件上传(带上Token和其它表单信息)的前后端完整过程
|
4天前
|
JavaScript 前端开发 easyexcel
基于SpringBoot + EasyExcel + Vue + Blob实现导出Excel文件的前后端完整过程
本文展示了基于SpringBoot + EasyExcel + Vue + Blob实现导出Excel文件的完整过程,包括后端使用EasyExcel生成Excel文件流,前端通过Blob对象接收并触发下载的操作步骤和代码示例。
21 0
基于SpringBoot + EasyExcel + Vue + Blob实现导出Excel文件的前后端完整过程
|
4天前
|
数据库
elementUi使用dialog的进行信息的添加、删除表格数据时进行信息提示。删除或者添加成功的信息提示(SpringBoot+Vue+MybatisPlus)
这篇文章介绍了如何在基于SpringBoot+Vue+MybatisPlus的项目中使用elementUI的dialog组件进行用户信息的添加和删除操作,包括弹窗表单的设置、信息提交、数据库操作以及删除前的信息提示和确认。
elementUi使用dialog的进行信息的添加、删除表格数据时进行信息提示。删除或者添加成功的信息提示(SpringBoot+Vue+MybatisPlus)
|
4天前
|
JavaScript
基于Vue3+TS简单设计一个查看文章时点击展开和点击收起的小功能
该文章展示了如何使用Vue 3和TypeScript创建一个简单的展开和收起功能,用于文章查看时的交互体验。
11 0
基于Vue3+TS简单设计一个查看文章时点击展开和点击收起的小功能
|
4天前
|
JavaScript Java Spring
springboot+vue 实现校园二手商城(毕业设计一)
这篇文章介绍了一个使用Spring Boot和Vue实现的校园二手商城系统的毕业设计,包括用户和商家的功能需求,如登录注册、订单管理、商品评价、联系客服等,以及项目依赖项的安装过程。
springboot+vue 实现校园二手商城(毕业设计一)

热门文章

最新文章