spring boot+vue个人博客一:(后端)搭建spring boot脚手架

Spring boot + Vue 前后整合 Vue脚手架的搭建 前言 构建vue项目的开发环境配置,官方提供了脚手架工具vue-cli来快速构建一个开发环境,初始化一个vue项目操作命令如下: // 安装node.js,内含npm,Node.js官网:https://nodejs.org/en/ 。 // 设置npm镜像cnpm命令行工具 npm install -g cnpm --registry=https://registry.npm.taobao.o... 阅读详情
系列大纲
GitHub(还没开发完成)
暂时没有响应移动端,前、后端功能都只是随便写了点,因为最近有点事,等我处理完,会将功能开发完成,前端页面也会写一套CSS模块化+VUE组件化的组件库来构建
在线演示www.yzpnb.top
第一章:(后端)搭建spring boot脚手架:https://blog.youkuaiyun.com/grd_java/article/details/107452826
第二章:权限整合shiro+jwt,完成后端接口:https://blog.youkuaiyun.com/grd_java/article/details/107481570
第三章:搭建前端vue整合element ui脚手架:https://blog.youkuaiyun.com/grd_java/article/details/107498140
第四章:首页和公共头部组件:https://blog.youkuaiyun.com/grd_java/article/details/107507213
第五章:完成登陆注册页面,nginx网关对接后端:https://blog.youkuaiyun.com/grd_java/article/details/107515437
第六章:博客页面,观看博客,博客编辑功能:https://blog.youkuaiyun.com/grd_java/article/details/107525128
第七章:打包部署,多节点部署方案:https://blog.youkuaiyun.com/grd_java/article/details/107533253

一、搭建数据库

/*
 Navicat Premium Data Transfer

 Source Server         : localhost_3306
 Source Server Type    : MySQL
 Source Server Version : 80017
 Source Host           : localhost:3306
 Source Schema         : myblog

 Target Server Type    : MySQL
 Target Server Version : 80017
 File Encoding         : 65001

 Date: 20/07/2020 17:32:56
*/

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for m_blog
-- ----------------------------
DROP TABLE IF EXISTS `m_blog`;
CREATE TABLE `m_blog`  (
  `id` char(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '博客id',
  `user_id` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '用户id',
  `title` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '博客标题',
  `description` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '简介内容',
  `content` longtext CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '内容',
  `gmt_create` datetime(0) NOT NULL ON UPDATE CURRENT_TIMESTAMP(0) COMMENT '创建时间',
  `status` tinyint(4) NOT NULL COMMENT '发布状态',
  `gmt_modified` datetime(0) NOT NULL COMMENT '修改时间',
  `is_delete` tinyint(1) NOT NULL COMMENT '逻辑删除1删除,0未删除',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 11 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of m_blog
-- ----------------------------

SET FOREIGN_KEY_CHECKS = 1;


/*
 Navicat Premium Data Transfer

 Source Server         : localhost_3306
 Source Server Type    : MySQL
 Source Server Version : 80017
 Source Host           : localhost:3306
 Source Schema         : myblog

 Target Server Type    : MySQL
 Target Server Version : 80017
 File Encoding         : 65001

 Date: 20/07/2020 17:34:06
*/

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for m_user
-- ----------------------------
DROP TABLE IF EXISTS `m_user`;
CREATE TABLE `m_user`  (
  `id` char(20) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '用户id',
  `username` varchar(64) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '用户名',
  `avatar` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '头像',
  `email` varchar(64) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '邮箱',
  `password` varchar(64) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '密码',
  `status` int(5) NOT NULL COMMENT '状态',
  `gmt_created` datetime(0) NOT NULL COMMENT '创建时间',
  `gmt_modified` datetime(0) NOT NULL COMMENT '更新时间',
  `is_delete` tinyint(1) NOT NULL COMMENT '逻辑删除1删除,0未删除',
  PRIMARY KEY (`id`) USING BTREE,
  INDEX `UK_USERNAME`(`username`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of m_user
-- ----------------------------
INSERT INTO `m_user` VALUES ('1', 'markerhub', 'https://image-1300566513.cos.ap-guangzhou.myqcloud.com/upload/images/5a9f48118166308daba8b6da7e466aab.jpg', NULL, '96e79218965eb72c92a549dd5a330112', 0, '2020-04-20 10:44:01', '0000-00-00 00:00:00', 0);

SET FOREIGN_KEY_CHECKS = 1;

在这里插入图片描述
在这里插入图片描述在这里插入图片描述

记住每个表加两条数据

二、分布式环境搭建

1、创建父工程引入依赖

<?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"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.yzpnb</groupId>
    <artifactId>myblog</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>pom</packaging>
    <!--spring boot 父依赖-->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.6.RELEASE</version>
    </parent>
    <!--依赖-->
    <dependencies>
        <!--spring boot test-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <!--lombook-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.12</version>
            <scope>provided</scope>
        </dependency>
    </dependencies>
    <!--管理依赖-->
    <dependencyManagement>
        <dependencies>
            <!--spring cloud-->
            <dependency>
                <groupId>org.springframework.cloud</groupId>
                <artifactId>spring-cloud-dependencies</artifactId>
                <version>Hoxton.SR4</version>
                <type>pom</type>
                <scope>import</scope>
                <!--注意这里使用<scope>import</scope>是为了预防jar包依赖引用
                import只能用于<dependencyManagement>中并且设置<type>pom</type>的依赖中。
                可以使子模块不使用父模块的引用jar包
                如果不设置此项,就会报错(你可以注释掉试试),因为子模块在引用某些jar包时,会引用父模块中的jar包
                从而jar包冲突-->
            </dependency>
        </dependencies>
    </dependencyManagement>
</project>

在这里插入图片描述

2、创建子模块和全局模块,引入依赖

<?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"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <parent>
        <artifactId>myblog</artifactId>
        <groupId>com.yzpnb</groupId>
        <version>1.0-SNAPSHOT</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <artifactId>common</artifactId>

    <dependencies>
        <!--mybatis plus-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.3.1</version>
        </dependency>
        <!--mybatis plus 代码生成器-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>3.3.1</version>
        </dependency>
        <!--添加 模板引擎 依赖,MyBatis-Plus 支持 Velocity(默认):这是代码生成器需要的依赖-->
        <dependency>
            <groupId>org.apache.velocity</groupId>
            <artifactId>velocity-engine-core</artifactId>
            <version>2.2</version>
        </dependency>
        <!--代码生成器需要的依赖,swagger,处理ApiModel-->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger-ui</artifactId>
            <version>2.9.2</version>
        </dependency>
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger2</artifactId>
            <version>2.9.2</version>
        </dependency>
        <!--mysql-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
    </dependencies>
</project>

在这里插入图片描述

<!--spring boot web-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

在这里插入图片描述

3、定制统一返回接口

封装状态码

在这里插入图片描述

package com.yzpnb.common_utils;

public interface ResultCode {
    /**
     * 状态码 
     * 20000:代表成功
     * 20001:代表错误
     */
    public static Integer SUCCESS =20000;
    public static Integer ERROR =20001;
}
统一返回结果

在这里插入图片描述

package com.yzpnb.common_utils;

import io.swagger.annotations.ApiModelProperty;
import lombok.Data;

import java.util.HashMap;
import java.util.Map;

@Data
public class Result {
    /**
     * 当我们返回json字符串的时候,可以按以下规则
     * {
     * 	"sucess":布尔值, 	//表示是否响应成功
     * 	"code":数字,		//响应码
     * 	"message":字符串,	//返回信息
     * 	"data":HashMap,		//返回的数据
     * }
     *
     * 创建成员变量
     */

    @ApiModelProperty(value="是否成功")
    private Boolean success;

    @ApiModelProperty(value="状态码")
    private Integer code;

    @ApiModelProperty(value="返回消息")
    private String message;

    @ApiModelProperty(value="返回数据")
    private Map<String,Object> data=new HashMap<>();

    /**私有化构造方法:就是说除了Result类本身,其它类不能new Result类的对象了**/
    private Result(){}

    /**获取一个私有的Result对象。Result本身是可以new 对象,无论私有与否**/
    private static Result result=new Result();

    /**处理响应成功的静态方法**/
    public static Result ok(){
        result.setSuccess(true);            //设置为true,表示处理响应成功
        result.setCode(ResultCode.SUCCESS); //调用我们提供状态码的接口,设置状态码
        result.setMessage("成功");          //设置提示信息
        return result;                      //返回对象,外键不能new,只能通过静态方法获取对象

    }
    /**处理响应失败的静态方法**/
    public static Result error(){
        result.setSuccess(false);         //设置为false,表示处理响应失败
        result.setCode(ResultCode.ERROR); //调用我们提供状态码的接口,设置状态码
        result.setMessage("失败");        //设置提示信息
        return result;
    }

    /**设置值方法*/
    public Result succes(Boolean b){
        this.success=b;
        return this;
    }

    public Result code(Integer i){
        this.code=i;
        return this;
    }

    public Result message(String str){
        this.message=str;
        return this;
    }

    public Result data(String key ,Object value){
        this.data.clear();//先清空,因为我这里是单例设计模式,data中数据永远都在
        this.data.put(key,value);
        return this;
    }

    public Result data(Map<String , Object> map){
        this.setData(map);
        return this;
    }
}

4、整合swagger2

swagger 常用注解

在这里插入图片描述

创建公共配置模块配置

在这里插入图片描述
在这里插入图片描述

package com.yzpnb.service_base.config;
import com.google.common.base.Predicates;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import springfox.documentation.builders.ApiInfoBuilder;
import springfox.documentation.builders.PathSelectors;
import springfox.documentation.service.ApiInfo;
import springfox.documentation.service.Contact;
import springfox.documentation.spi.DocumentationType;
import springfox.documentation.spring.web.plugins.Docket;
import springfox.documentation.swagger2.annotations.EnableSwagger2;

import java.lang.reflect.Parameter;
import java.util.ArrayList;
import java.util.List;

@Configuration
@EnableSwagger2//表中此类为Swagger2
public class SwaggerConfig {
    @Bean
    public Docket webApiConfig() {
        List<Parameter> pars = new ArrayList<Parameter>();
        return new Docket(DocumentationType.SWAGGER_2)
                .groupName("webApi")//分组名
                .apiInfo(webApiInfo())//在线文档的信息,传入ApiInfo对象,就是下面内个方法返回的对象
                .select()
                .paths(Predicates.not(PathSelectors.regex("/admin/.*")))//路径中包含admin时不显示信息
                .paths(Predicates.not(PathSelectors.regex("/error/.*")))
                .build();
    }

    private ApiInfo webApiInfo() {
        return new ApiInfoBuilder()
                .title("gulischool 接口 API 文档")
                .description("展示先做基础功能,后面再添加业务")
                .termsOfServiceUrl("https://www.yzpnb.com/aa/")
                .version("1.0")
                .contact(new Contact("Helen","http://yzpnb.com","915501928@qq.com"))
                .build();
    }

}

5、代码生成器

在这里插入图片描述

在这里插入图片描述

package com.yzpnb;

import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.generator.AutoGenerator;
import com.baomidou.mybatisplus.generator.config.DataSourceConfig;
import com.baomidou.mybatisplus.generator.config.GlobalConfig;
import com.baomidou.mybatisplus.generator.config.PackageConfig;
import com.baomidou.mybatisplus.generator.config.StrategyConfig;
import com.baomidou.mybatisplus.generator.config.rules.DateType;
import com.baomidou.mybatisplus.generator.config.rules.NamingStrategy;
import org.junit.Test;

/**
 * @author
 * @since 2018/12/13
 */
public class CodeGenerator {

    @Test
    public void run() {

        // 1、创建代码生成器
        AutoGenerator mpg = new AutoGenerator();

        // 2、全局配置
        GlobalConfig gc = new GlobalConfig();
        String projectPath = System.getProperty("user.dir");
        gc.setOutputDir("D:\\IdeaProjects\\myblog\\service\\service_blog" + "/src/main/java"); //输出目录,生成的代码最终输出的地方,请写你的项目的绝对路径
        gc.setAuthor("testjava");
        gc.setOpen(false); //生成后是否打开资源管理器
        gc.setFileOverride(false); //重新生成时文件是否覆盖
        gc.setServiceName("%sService");	//去掉Service接口的首字母I
        gc.setIdType(IdType.ID_WORKER_STR); //主键策略,ID_WORKER表示默认Integer,ID_WORKER_STR表示字符型
        gc.setDateType(DateType.ONLY_DATE);//定义生成的实体类中日期类型
        gc.setSwagger2(true);//开启Swagger2模式

        mpg.setGlobalConfig(gc);

        // 3、数据源配置
        DataSourceConfig dsc = new DataSourceConfig();
        dsc.setUrl("jdbc:mysql://localhost:3306/myblog?serverTimeZone=UTC&useUnicode=true&characterEncoding=utf-8&useSSL=false");
        dsc.setDriverName("com.mysql.cj.jdbc.Driver");
        dsc.setUsername("root");
        dsc.setPassword("123456");
        dsc.setDbType(DbType.MYSQL);
        mpg.setDataSource(dsc);

        // 4、包配置(生成的包名)
        PackageConfig pc = new PackageConfig();
        pc.setParent("com.yzpnb");
        pc.setModuleName("service_blog"); //模块名 com.yzpnb.service_blog

        pc.setController("controller"); //com.yzpnb.eduservice.controller
        pc.setEntity("entity");
        pc.setService("service");
        pc.setMapper("mapper");
        mpg.setPackageInfo(pc);

        // 5、策略配置
        StrategyConfig strategy = new StrategyConfig();
        strategy.setInclude("m_user","m_blog");//你要为哪个表生成代码
        strategy.setNaming(NamingStrategy.underline_to_camel);//数据库表映射到实体的命名策略
        strategy.setTablePrefix(pc.getModuleName() + "_"); //生成实体时去掉表前缀

        strategy.setColumnNaming(NamingStrategy.underline_to_camel);//数据库表字段映射到实体的命名策略
        strategy.setEntityLombokModel(true); // lombok 模型 @Accessors(chain = true) setter链式操作

        strategy.setRestControllerStyle(true); //restful api风格控制器
        strategy.setControllerMappingHyphenStyle(true); //url中驼峰转连字符

        mpg.setStrategy(strategy);


        // 6、执行
        mpg.execute();
    }
}

在这里插入图片描述

6、启动类

package com.yzpnb.service_blog;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.ComponentScan;

@SpringBootApplication
@ComponentScan("com.yzpnb")
public class BlogApplication {
    public static void main(String[] args) {
        SpringApplication.run(BlogApplication.class,args);
    }
}

在这里插入图片描述

7、整合MyBatis Plus

1、application.yaml

server:
  port: 8001 #微服务端口号为8001
spring:
  application:
    name: service-blog #服务名
#  profiles:
#    active: dev #环境设置 dev表示构建阶段,test表示测试阶段,prod表示发布阶段
  datasource: #数据源
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/myblog?serverTimeZone=Asia/Shanghai&useUnicode=true&characterEncoding=utf-8&useSSL=false&allowPublicKeyRetrieval=true
    username: root
    password: 123456
  jackson: #我们的时区是东八区,应该加8个小时,时区显示格式也需要改成我们想要的
    date-format: yyyy-MM-DD HH:mm:ss
    time-zone: GMT+8
mybatis-plus:
  mapper-locations: classpath:com/yzpnb/service_blog/mapper/xml/*.xml #配置mapper xml文件的路径

在这里插入图片描述

2、配置类

package com.yzpnb.service_base.config;

import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor;
import com.baomidou.mybatisplus.extension.plugins.pagination.optimize.JsqlParserCountOptimize;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
@MapperScan(value="com.yzpnb.*.mapper")
public class MpConfiguration {
	//分页插件
    @Bean
    public PaginationInterceptor paginationInterceptor() {
        PaginationInterceptor paginationInterceptor = new PaginationInterceptor();
        // 设置请求的页面大于最大页后操作, true调回到首页,false 继续请求  默认false
        // paginationInterceptor.setOverflow(false);
        // 设置最大单页限制数量,默认 500 条,-1 不受限制
        // paginationInterceptor.setLimit(500);
        // 开启 count 的 join 优化,只针对部分 left join
        paginationInterceptor.setCountSqlParser(new JsqlParserCountOptimize(true));
        return paginationInterceptor;
    }
}

在这里插入图片描述

3、配置自动填充

在这里插入图片描述

package com.yzpnb.service_base.handler;

import com.baomidou.mybatisplus.core.handlers.MetaObjectHandler;
import org.apache.ibatis.reflection.MetaObject;
import org.springframework.stereotype.Component;

import java.util.Date;

@Component//将组件注入到IOC容器
public class MyMpMetaObjectHandler implements MetaObjectHandler{
    @Override
    public void insertFill(MetaObject metaObject) {
        /**注意这里的监听字段gmtCreate和gmtModified是java属性名,不是字段名*/
        this.setFieldValByName("gmtCreate",new Date(),metaObject);
        this.setFieldValByName("gmtModified",new Date(),metaObject);
    }

    @Override
    public void updateFill(MetaObject metaObject) {
        this.setFieldValByName("gmtModified",new Date(),metaObject);
    }
}

刚刚写完第二章,发现自动填充这里字段名写错了 this.setFieldValByName("gmtCreate",new Date(),metaObject);
我在数据库中字段叫gmtCreated,所以如果你使用我的sql代码生成数据库表
请到数据库中将这个字段都修改为gmtCreate

4、测试

在这里插入图片描述在这里插入图片描述

8、全局异常

如果你需要处理全局异常,就需要web包

在这里插入图片描述

创建自定义异常
package com.yzpnb.service_base.handler;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

/**
 * 自定义异常类
 * */

@Data//为类中成员变量自动生成get set toString
@AllArgsConstructor //自动生成有参构造方法,参数是所有参数
@NoArgsConstructor  //自动生成无参构造
public class CustomExceptionHandler extends RuntimeException{

    private Integer code;//状态码

    private String message;//异常信息
}

在这里插入图片描述

创建通用异常,引用自定义异常
package com.yzpnb.service_base.handler;

import com.yzpnb.common_utils.Result;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.ResponseBody;

@ControllerAdvice//全局异常处理、全局数据绑定、全局数据预处理
public class MyExceptionHandler  {

    /**处理自定义异常*/
    @ExceptionHandler(CustomExceptionHandler.class)//表示此方法只对我们自己定义的这个异常有效
    @ResponseBody
    public Result customError(CustomExceptionHandler e){//参数就是我们自定义异常类的对象
        e.printStackTrace();//父类提供的方法
        return Result.error().code(e.getCode()).message(e.getMessage());//将统一返回结果的状态码和提示信息,换为自定以异常的
    }
}

在这里插入图片描述

controller测试
@GetMapping("selectAll")
    public Result selectAll(){
        List<MUser> list = mUserService.list();
        if(true){
            throw new CustomExceptionHandler(20000,"自定义异常");//只要我们抛这个异常,那么MyExceptionHandler中的方法就会执行,因为设置了方法只监听这个异常
        }
        return Result.ok().data("all",list);
    }

在这里插入图片描述在这里插入图片描述

9、解决跨域问题

在这里插入图片描述

package com.yzpnb.service_base.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * 解决跨域问题
 */
@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}
第二节:整合shiro+jwt,完成后端接口开发
https://blog.youkuaiyun.com/grd_java/article/details/107481570
基于Spring Boot + Vue 前后端分离个人博客网站设计 个人博客网站摘要一、绪论1.1 课题背景、目的、意义1.2 国内外研究现状1.3 技术介绍1.3.1 Spring Boot1.3.2 MyBatisPlus1.3.3 Shiro1.3.4 Redis1.3.5 Jwt1.3.6 Vue1.3.7 Element-ui1.3.8 Axios1.3.9 前后端分离二、可行性分析2.1 技术可行性分析2.2 时间和资源可行性三、需求分析3.1 用户分析3.2 功能需求分析3.3 流程分析四、结构设计4.1 实体e-r图4.2 数据库设计五、详细设计六、系统测试 阅读详情

相关推荐

Spring Boot + Vue + MyBatis 前后端分离开发实战指南

本文详细介绍了如何使用SpringBoot、Vue和MyBatis实现一个前后端分离的用户管理系统。文章首先阐述了前后端分离架构的优势,随后详细说明了技术栈的选型,包括后端框架、持久层、数据库、前端框架、状态管理、接口调用和跨域处理等。接着,文章分步骤讲解了后端项目的搭建,包括创建SpringBoot项目、配置文件、定义实体类、实现MyBatis映射层、编写服务层、开发RESTful接口和处理跨域问题。在前端部分,文章介绍了Vue项目的创建、代理配置、Axios封装、路由定义和页面组件的开发。

daylight的博客 2613

Springboot+Vue+mybatisplus集成脚手架

简言:什么是前后端分离???已经成为互联网项目开发的业界标准使用方式。

qq_46023827的博客 578

Vue3+Spring Boot 大型电商项目实战前后端分离

本项目是一个功能齐全的电商平台,包括用户注册与登录、商品展示与搜索、购物车管理、订单处理等功能模块。前端采用 Vue 3 构建,利用其响应式数据绑定和组件化开发的优势,为用户提供流畅的交互体验;后端基于 Spring Boot 框架,提供高效的接口服务和数据处理能力。

HappyAcmen 2712

一周Spring Boot + VUE 入门 (3)-- 从脚手架开始

一周Spring Boot —— VUE入门的脚手架部分,我们选择优秀的开源快速开发框架RuoYi,感谢RuoYi带来的优秀的软件。

BGD10450173的博客 2967

Java基于Springboot+Vue 的个人博客系统

本系统为用户而设计制作个人博客系统设计与实现,旨在实现个人博客智能化、现代化管理。本个人博客管理自动化系统的开发和研制的最终目的是将个人博客的运作模式从手工记录数据转变为网络信息查询管理,从而为现代管理人员的使用提供更多的便利和条件。使个人博客系统设计与实现数字化、智能化,是提高工作效率的重要举措。为了更好地发挥本系统的技术优势,根据个人博客系统设计与实现的需求,本文尝试以B/S架构设计模式中的框架,JAVA语言为基础。

Q_55318293的博客 1427

Spring Boot+Vue从零开始搭建系统(一):项目前端_Vuejs环境搭建

前言 博主本身是一直从事Java后端开发,一直想独立开发一套完整前端和后端技术结合的项目来提升自己的技术水平,经过对业界的一些热点技术的了解并对技术栈选型考虑后,博主打算利用Vue.js和Spring Boot技术栈来开发一个属于自己的博客系统,等开发完成把自己平时遇到的技术分享出来。由于对前端技术不是太了解,所以想从零开始把开发的整个过程记录下来,第一篇文章就先把前端环境搭建起来再弄后面的。 安装node.js 进入Node.js官网:https://nodejs.org/en/,选择下载并安装No

tengtianshan的专栏 1638

Spring Boot + vue-element 开发个人博客项目实战教程(一、项目介绍和规划)

本教程主要是使用SpringBoot+Vue从零搭建自己的个人博客系统,大家可以当做基础的项目来学习。

码上言 1万+

【SpringBoot】54、SpringBoot+VUE后台管理系统开发脚手架

本期给大家推荐我自己写一个开源项目:Asurplus-VUE,本着减少大量重复开发工作的原则,使得在项目中能够实现快速开发 1、前言 本项目本着避免重复造轮子的原则,建立一套快速开发JavaWEB项目(Asurplus-VUE),能满足大部分后台管理系统基础开发功能,使得开发人员直接可从业务模块开始,减少大量的重复开发工作。前端框架使用 ruoyi-vue(https://gitee.com/y_project/RuoYi-Vue) 2、项目地址 https://gitee.com/asurplus/asu

JACKAL 20万+

SpringBoot+Vue+Mybatis-plus 博客(一):完成博客后台前端登录页面、后端登录接口

目录一、搭建前端1、更换npm镜像2、使用vue-cli3脚手架构建项目3、创建项目4、启动项目5、目录结构6、用VSCode打开项目二、登录页面1、使用Element ui2、整理app.vue3、删掉一些没有用到的组件4、新建Login.vue组件5、在router/index.js引入组件并配置路由6、启动项目三、搭建后端1、新建数据库(blog)2、新建一个普通springboot项目,pom.xml如下3、修改配置文件4、开启mapper接口扫描,添加分页插件5、代码生成6、启动main方法7、生

x-dragon8899的博客 9733

Vue和Spring Boot是一对强大的技术组合,可以用于构建现代化的前后端分离应用程序

Vue和Spring Boot是一对强大的技术组合,可以用于构建现代化的前后端分离应用程序。本文将介绍如何使用Vue脚手架和Spring Boot构建一个简单的前后端分离入门项目。我们将首先设置Vue前端应用程序,然后创建一个Spring Boot后端应用程序,并将两者连接起来。

BbflNim的博客 441

OPNET网络仿真实验

外网

嚴 帅的博客 1万+

spring boot+vue个人博客三:搭建前端vue整合element ui脚手架

系列大纲 第一章:(后端)搭建spring boot脚手架:https://blog.youkuaiyun.com/grd_java/article/details/107452826 第二章:权限整合shiro+jwt,完成后端接口:https://blog.youkuaiyun.com/grd_java/article/details/107481570 第三章:搭建前端vue整合element ui脚手架: 我在17素材网下载了一套模板,之后会完全从零开发 1、使用sass写一套c...

殷志鹏的博客 1440

FICO F.27 Customer statement 打印

需求,定制化打印,替换标准的F.27打印 类似于采购订单的打印,但是略有不同,查阅资料之后步骤如下: T-code F.27 is SAP standard program to produce customer/vendor correspondence (letter). Correspondence Type is used to specify the related printing program and form for the particular correspondence. SAP

IamRunjiang的博客 1965

Spring Boot + vue-element 开发个人博客项目实战教程(三、项目环境搭建)

前言 从教程的这一篇开始,我们就开始正式的进入到实战项目的开发。 ​ 首先要搞清楚我们的项目的总体结构是什么,后端采用的是Java、管理平台采用的是Vue搭建,后期可能还会有移动端采用uni-app实现。采用前后端分离开发,这也是大多数企业使用的开发方式前后端分离,也就是说,我们使用Java将数据通过接口的方式暴露出来,然后前端只要拿到接口的地址就能获取数据,这样后期的维护,前后端的依赖性很小,减轻维护的压力等。 ​ 这种方式会在我们开发中慢慢体会出来所带来的方便,为了项目能在你的电脑上运行成功,尽量和我使

码上言 1万+

Telegram Bot Api使用教程

其中token为你的机器人token,method为telegram给定的方法,在获取群组chat_id那一步就使用了telegram的其中一个方法(getUpdates),其他方法后面会介绍。telegram发送消息的方式类似与钉钉机器人,都是向一个api发送http请求,而且对于同一个APItelegram支持GET和POST两种请求方式.请求的api格式如下。通常来说我们都需要让机器人在一个群组里工作,所以首先我们需要将机器人添加到我们指定的群组,在群组里发送随意消息并@这个机器人,比如...

豫迷糊的码上生活 1万+

告别手动标注!PDMS NakiToolkit插件安装与初体验:以Pipeline工具为例

本文详细介绍了PDMS NakiToolkit插件的安装与使用,特别是其Pipeline工具如何通过自动化标注和材料统计功能大幅提升三维工厂设计效率。从环境准备到实战演示,帮助工程师告别繁琐的手动标注工作,实现项目交付周期的大幅缩短。

weixin_30047059的博客 350

Spring Boot + Vue前后端分离(一)前端Vue环境搭建

你好,欢迎来到 【程序职场】 ,这里有你需要的技术提升,职场规划,个人成长,副业发展 等文章。 和更多小伙伴 一起学习,一起进步。 前后端分离已经成为互联网项目开发的主流使用方式。 通过 nginx + Tomcat 的方式,中间加一个 nodejs有效的进行解耦,并且前后端分离会为以后的大型分布式架构,弹性计算架构,微服务架构,多端化服务(多种客户端,例如:浏览器,车载终端,安卓,IO...

6106

STM32C8T6HAL库实战:MAX30102心率血氧检测与OLED多级菜单一体化方案

本文详细介绍了基于STM32C8T6和HAL库的MAX30102心率血氧检测与OLED多级菜单一体化方案。内容涵盖硬件连接、CubeMX工程配置、传感器驱动移植、数据滤波算法、OLED显示驱动以及高效的多级菜单系统设计,旨在提供一个稳定、实用且易于移植的嵌入式健康监测项目参考。

weixin_29256771的博客 397

Spring Boot+Vue 3构建个人博客系统:从零到部署的完整实践指南

在Web开发领域,前后端分离架构已成为构建现代应用的主流范式。其核心原理在于将前端界面与后端业务逻辑解耦,通过RESTful API进行数据交互,从而实现技术栈独立、开发效率提升和系统可维护性增强。这种架构模式的技术价值在于,它允许开发者根据项目需求灵活选择最合适的前端框架(如Vue.js、React)和后端框架(如Spring Boot),并通过清晰的接口契约实现高效协作。在众多应用场景中,个人博客系统是一个经典的练手项目,它天然涵盖了用户认证、数据CRUD、文件处理和前后端通信等核心开发环节。本文聚焦于

weixin_30627341的博客 655

银行统一监管报送系统

依据《银行业金融机构数据治理指引》,银行业金融机构应当建立适应监管数据报送工作需要的信息系统,实现流程控制的程序化,提高监管数据加工的自动化程度。银行业金融机构应当将监管数据纳入数据治理,建立工作机制和流程,确保监管数据报送工作有效组织开展,监管数据质量持续提升。银行通常要对接报送EAST5.0、1104、CRSS等近40个监管应用,涉及近1000张报表。表13-01是主要的监管报送应用、报送依据、报送规范、监管机构名称。

银行信息系统应用架构详解 4348

STM32F407驱动OV2640摄像头全栈解析:DCMI+DMA+SCCB协同设计

图像采集是嵌入式视觉系统的基石,其核心在于传感器与MCU间的数据通路构建。原理上需理解并行接口(如DCMI)的硬件同步捕获机制、串行控制总线(如SCCB/I²C)的寄存器级配置逻辑,以及DMA在高吞吐数据搬运中的关键作用。技术价值体现在解放CPU、保障实时性、降低功耗,并支撑JPEG压缩与RGB565直显等差异化应用。典型场景包括智能终端实时预览、低带宽图像上传、工业现场视频监控及教学实验平台搭建。本文以STM32F407与OV2640集成实践为载体,深入剖析DCMI时序约束、SCCB软件模拟实现及DMA循

weixin_36151775的博客 179

【课程设计】基于Spring Boot的个人博客系统的设计与实现毕业设计源码271611

游客端子系统主要是针对游客在博客网站的操作,游客通过访问博客网站来浏览博客文章,可以通过鼠标点击网站内的类别、标签按钮对文章进行筛选。管理员端子系统是针对管理员的操作,管理员可以通过登录自己的账号进入博客的后台管理系统,在系统里面可以对文章进行增加、删除、修改、更新操作,也可以增加、删除、修改文章的类别和标签,同时数据库里的数据会同步更新。在管理员端子系统里,我还将对功能进行一个小创新,实现一个自动报表的功能,管理员可以通过设置各种数据参数,使得数据参数以可视化的形式直观的展示出来,让数据更加简单易懂,方便

专业程序开发源的博客 4230

Android15音频进阶之音效配置与解析(一百三十一)

本篇目的:Android15音频进阶之音效配置与解析。

Android系统攻城狮 2147

前端vue+后端 spring boot +mybatis 前后端交互项目搭建总结

该文章是根据上面文章https://blog.youkuaiyun.com/Sun_of_Rainy/article/details/102523659搭建过程遇到问题的总结 首先说明一下,我刚开始接触spring boot ,vue以前做项目看过别人写的改过几个bug,所以很感谢原贴写了那么详细的步骤 搭建完成了,太激动了,一定要记录一下这个历史性时刻,跨域问题搞了我4个多小时,幸亏中途还想要不要...

Sun_of_Rainy的博客 2470

SAP B1中文培訓教材_SDK

公司内部培训资料,对开发工具 ,DIAPI, UIAPI,Add-ON有详细解说

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能:商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传,基本资料下载,开钱箱、小票打印、收款结算,支持多币种付款方式(现金、储值卡、礼券、微信等),支持多种促销。运行环境:.net 4.0登陆信息用户名:1001 密码:123456内置商品信息,商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

手把手教你用 Spring Boot + Vue 搭建个人博客系统(后端篇)

摘要:本文介绍如何使用SpringBoot+MyBatis+MySQL快速搭建个人博客系统后端API。项目包含文章发布、分类管理等功能,采用分层架构设计,涵盖RESTful接口、数据库操作等核心开发技能。文章详细讲解了数据库设计、实体类定义、服务层实现及控制器编写,并指出常见错误和注意事项,为Java初学者提供完整的全栈项目实战入门指导。后续可扩展用户认证、前端开发等功能。

qq_45202803的博客 865

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

Spring Boot+Vue从零开始搭建博客系统veblog(一):项目前端_vuejs环境搭建

前言 博主本身是一直从事Java后端开发,一直想独立开发一套完整前端和后端技术结合的项目来提升自己的技术水平,经过对业界的一些热点技术的了解并对技术栈选型考虑后,博主打算利用Vue.js和Spring Boot技术栈来开发一个属于自己的博客系统,等开发完成把自己平时遇到的技术分享出来。由于对前端技术不是太了解,所以想从零开始把开发的整个过程记录下来,第一篇文章就先把前端环境搭建起来再弄后面的。 ...

liinux-Talk is cheap,show me the code. 513

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

上一篇: SpringSecurity详细笔记一、session的认证和spring boot mvc单体应用认证授权
下一篇: spring boot+vue个人博客二:权限整合shiro+jwt,完成后端接口
ydenergy_殷志鹏
博客等级 码龄7年 5885粉丝 543原创
评论 12
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ydenergy_殷志鹏

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值