SpringBoot+mybatisPlus+Vue构建同学录前台系统

最新推荐文章于 2024-01-09 13:28:50 发布

BoyC啊

最新推荐文章于 2024-01-09 13:28:50 发布

阅读量650

点赞数

文章标签： spring boot vue.js java

本文链接：https://blog.csdn.net/m0_54500212/article/details/123139149

版权

SpringBoot+mybatisPlus+Vue构建同学录前台系统

前后端分离交互：

后端开发：

使用IDEA+SQLyog+Maven

版本介绍：

IDEA:2020.0

sqlyog:V12.14

Maven:3.8.2

MySql:8.0.2

springBoot:2.5.7

mabatisPlus:3.0.5

内容介绍：

受同学启发，发现这是个不错的练手项目。通过编写一个类似社区的web页面来可视化一些同学录信息（使用私人仓库），将一些已经过去的岁月事件记录起来，并且可以通过公共讨论记录一些以前有趣且值得分享的一些事情，对以前遗憾的事情加以陈述可以分享出来。经过一系列调研和分析，这个项目确实有一定的可行性。话不多说，开整！

（此处的需求分析并不明确，并不能通过瀑布模型进行开发）

开发过程：

1.建立一个总的springBoot项目（NewsSchool）

2.在其中建立一个子模块（services）

加入依赖,直接使用父工程管理

<java.version>1.8</java.version>
<mybatis-plus.version>3.0.5</mybatis-plus.version>
<velocity.version>2.0</velocity.version>
<swagger.version>2.7.0</swagger.version>
<httpclient.version>4.5.1</httpclient.version>
<json.version>20170516</json.version>

<dependencyManagement>
    <!--mybatis-plus 持久层-->
    <dependency>
    	<groupId>com.baomidou</groupId>
        <artifactId>mybatis-plus-boot-starter</artifactId>
        <version>${mybatis-plus.version}</version>
    </dependency>

    <!-- velocity 模板引擎, Mybatis Plus 代码生成器需要 -->
    <dependency>
		<groupId>org.apache.velocity</groupId>
        <artifactId>velocity-engine-core</artifactId>
        <version>${velocity.version}</version>
    </dependency>

    <!--swagger-->
    <dependency>
        <groupId>io.springfox</groupId>
        <artifactId>springfox-swagger2</artifactId>
        <version>${swagger.version}</version>
    </dependency>
    <!--swagger ui-->
    <dependency>
        <groupId>io.springfox</groupId>
        <artifactId>springfox-swagger-ui</artifactId>
        <version>${swagger.version}</version>
    </dependency>
    <!--httpclient-->
    <dependency>
        <groupId>org.apache.httpcomponents</groupId>
        <artifactId>httpclient</artifactId>
        <version>${httpclient.version}</version>
    </dependency>
    <dependency>
        <groupId>org.json</groupId>
        <artifactId>json</artifactId>
        <version>${json.version}</version>
    </dependency>      
</dependencyManagement>

注：如果使用微服务开发的话，有可能流量并没那么大，所以这时候集中式优势就更大了，后面要加入的话，需要停机更新一次，具体架构思路还请参考《凤凰架构》

services的配置导入

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

        <!--mybatis-plus-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
        </dependency>

        <!--mysql-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>

        <!-- velocity 模板引擎, Mybatis Plus 代码生成器需要 -->
        <dependency>
            <groupId>org.apache.velocity</groupId>
            <artifactId>velocity-engine-core</artifactId>
        </dependency>

        <!--swagger-->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger2</artifactId>
        </dependency>
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger-ui</artifactId>
        </dependency>

        <!--lombok用来简化实体类：需要安装lombok插件-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>
		<!--httpclient-->
        <dependency>
            <groupId>org.apache.httpcomponents</groupId>
            <artifactId>httpclient</artifactId>
        </dependency>
		<dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.12</version>
        </dependency>
    </dependencies>

3.建立本地数据库（没有系统的设计，现在还只是练手）

DROP TABLE `rem_student`; 
CREATE TABLE `rem_student` ( 
     `id` CHAR(19) NOT NULL COMMENT '学生ID', `name` VARCHAR(20) NOT NULL COMMENT '学生姓名',
     `sex` VARCHAR(10) NOT NULL COMMENT '学生性别', `telephone` VARCHAR(11) NOT NULL COMMENT '学生电话', 
     `q_email` VARCHAR(10) NOT NULL COMMENT 'qq', `intro` VARCHAR(500) NOT NULL DEFAULT '' COMMENT '学生个性签名', 
     `gmt_brithday` DATETIME COMMENT '学生生日', 
     `level` INT(10) UNSIGNED NOT NULL COMMENT '账号等级', `avatar` VARCHAR(255) DEFAULT NULL COMMENT '学生头像', 
     `is_deleted` TINYINT(1) UNSIGNED NOT NULL DEFAULT '0' COMMENT '逻辑删除 1（true）已删除， 0（false）未删除', 
     `gmt_create` DATETIME NOT NULL COMMENT '创建时间', `
     gmt_modified` DATETIME NOT NULL COMMENT '更新时间', 
     PRIMARY KEY (`id`),
     UNIQUE KEY `uk_name` (`name`) ) ENGINE=INNODB DEFAULT CHARSET=utf8mb4 COMMENT='使用学生';

DROP TABLE `rem_user`; 
CREATE TABLE `rem_user` ( 
    `token` CHAR(19) NOT NULL COMMENT '使用者ID', 
    `username` CHAR(19) NOT NULL COMMENT '账号', 
    `password` CHAR(19) NOT NULL COMMENT '密码',
    PRIMARY KEY (`token`), 
    UNIQUE KEY `uk_name` (`username`) ) ENGINE=INNODB DEFAULT CHARSET=utf8mb4 COMMENT='使用者';

4.配置application.yml

server:
  port: 8101
spring:
  # 服务名
  application:
    name: student_rem

  # 环境设置：dev、test、prod
  profiles:
    active: dev
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url:  jdbc:mysql://localhost:3306/memoirs?characterEncoding=utf8&useSSL=true&serverTimezone=UTC&allowPublicKeyRetrieval=true
    username: root
    password: "030428"
  #返回json的全局时间格式
  jackson:
    date-format: yyyy-MM-dd HH:mm:ss
    time-zone: UTC

  #mybatis日志
mybatis-plus:
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

5.使用代码自动生成器快速生成结构

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("E:\\CSDN\\XinJianYiZhon\\NewsSchool\\services" + "/src/main/java");

        gc.setAuthor("testjava");
        gc.setOpen(false); //生成后是否打开资源管理器
        gc.setFileOverride(false); //重新生成时文件是否覆盖

        //UserServie
        gc.setServiceName("%sService");    //去掉Service接口的首字母I

        gc.setIdType(IdType.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/memoirs?characterEncoding=utf8&useSSL=true&serverTimezone=UTC&allowPublicKeyRetrieval=true");
        dsc.setDriverName("com.mysql.cj.jdbc.Driver");
        dsc.setUsername("root");
        dsc.setPassword("030428");
        dsc.setDbType(DbType.MYSQL);
        mpg.setDataSource(dsc);

        // 4、包配置
        PackageConfig pc = new PackageConfig();
        pc.setModuleName("zushiye"); //模块名
        //包  com.atguigu.eduservice
        pc.setParent("com");
        //包  com.atguigu.eduservice.controller
        pc.setController("controller");
        pc.setEntity("pojo");
        pc.setService("service");
        pc.setMapper("mapper");
        mpg.setPackageInfo(pc);

        // 5、策略配置
        StrategyConfig strategy = new StrategyConfig();

        strategy.setInclude("rem_user");

        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.配置config

@Configuration
@MapperScan("com.zushiye.mapper")
@ComponentScan(basePackages = {"com.zushiye"})
public class StudentConfig {
    /**
     * 逻辑删除插件
     */
    @Bean
    public ISqlInjector sqlInjector() {
        return new LogicSqlInjector();
    }

    /**
     * 分页插件
     */
    @Bean
    public PaginationInterceptor paginationInterceptor() {
        return new PaginationInterceptor();
    }


}

@Component
public class MyMetaObjectHandler implements MetaObjectHandler {

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

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

7.配置swagger工具

@Configuration
@EnableSwagger2
public class SwapperConfig {

    @Bean
    public Docket webApiConfig(){
        return new Docket(DocumentationType.SWAGGER_2)
                .groupName("webApi")
                .apiInfo(webApiInfo())
                .select()
                .paths(Predicates.not(PathSelectors.regex("/admin/.*")))
                .paths(Predicates.not(PathSelectors.regex("/error.*")))
                .build();

    }

    private ApiInfo webApiInfo(){

        return new ApiInfoBuilder()
                .title("回忆录")
                .description("本文档描述了回忆录接口定义")
                .version("1.0")
                .build();
    }
}

配置response返回数据，使用链式开发

@Data
public class R {
    @ApiModelProperty(value = "是否成功")
    private Boolean success;

    @ApiModelProperty(value = "返回码")
    private Integer code;

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

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

    private R (){
    }

    //成功静态方法
    public static R ok() {
        R r = new R();
        r.setSuccess(true);
        r.setCode(ResultCode.SUCCESS);
        r.setMessage("成功");
        return r;
    }

    //失败静态方法
    public static R error() {
        R r = new R();
        r.setSuccess(false);
        r.setCode(ResultCode.ERROR);
        r.setMessage("失败");
        return r;
    }

    public R success(Boolean success){
        this.setSuccess(success);
        return this;
    }

    public R message(String message){
        this.setMessage(message);
        return this;
    }

    public R code(Integer code){
        this.setCode(code);
        return this;
    }

    public R data(String key, Object value){
        this.data.put(key, value);
        return this;
    }

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

public class ResultCode {
    public static Integer SUCCESS = 20000; //成功

    public static Integer ERROR = 20001; //失败
}

注：此处详情请参考尚硅谷的配置文件

展示开发结构：

在这里插入图片描述

到此处后端配置就结束了

期待下次的前端搭建，以及后续的开发！

简单的展示一下前端的首页喔！

在这里插入图片描述

本人的美感并没有多少，还请多多指教！

一系列开发意见，望君不吝赐教

BoyC啊

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
1
评论
SpringBoot+mybatisPlus+Vue构建同学录前台系统

SpringBoot+mybatisPlus+Vue构建同学录前台系统前后端分离交互：后端开发：使用IDEA+SQLyog+Maven版本介绍：IDEA:2020.0sqlyog:V12.14Maven:3.8.2MySql:8.0.2springBoot:2.5.7mabatisPlus:3.0.5内容介绍：受同学启发，发现这是个不错的练手项目。通过编写一个类似社区的web页面来可视化一些同学录信息（使用私人仓库），将一些已经过去的岁月事件记录起来，并且可以通过公共讨论记录一些以前
复制链接

扫一扫