SpringBoot + Vue 企业门户宣传网站

一、项目介绍

项目的初衷是给某某公司做一个产品宣传网页，由于第一次做这种宣传网页没有太多的灵感于是到网上去找了一些模板，但是发现网上现有的模板大多都是基于php语言开发的。但是甲方需要我们使用最新的前后端分离的开发方式来开发，于是决定使用 springboot + vue 来来发这个项目。网页是响应式的，可以适应pc端，平板端和手机端。

二、主要技术

2.1 SpringBoot框架

springboot是spring家族中的一个全新框架，用来简化spring程序的创建和开发过程。在以往我们通过SpringMVC+Spring+Mybatis框架进行开发的时候，我们需要配置web.xml，spring配置，mybatis配置，然后整合在一起，而springboot抛弃了繁琐的xml配置过程，采用大量默认的配置来简化我们的spring开发过程。SpringBoot化繁为简，使开发变得更加的简单迅速。

2.2 MyBatis-Plus

MyBatis-Plus在MyBatis的基础上制作增强不做改变，引入它不会对工程产生影响，如丝般顺滑。只需要简单的配置，即可以进行单表CURUD操作，从而节省大量的时间。它的功能丰富，主要包含代码生成，自动分页，逻辑删除，自动填充等功能一应俱全。在项目中引入了MyBatis-Plus可以减少我们对sql语句的编写，极大的提高工作效率。一个字，棒。

2.3 Knife4j

Knife4j接口文档生成工具，集成了swagger2和openapi，在丝袜哥的基础上增加了功效，同时它提供了更加适合国人审美的UI界面。同时提供了对主流网管组件的统一聚合OpenAPI接口文档的解决方案。总结一句话，强。

2.4 Vue

目前主流的前端框架之一。基于标准的HTML、CSS、JavaScript构建，提供容易上手的API和一流的文档。经过编译器优化、完全响应式的渲染系统，几乎不需要手动优化，性能非常出色。有丰富的、可渐进式集成的生态系统，可以根据应用规模在库和框架之间切换自如。

三、前端项目

3.1 页面框架

首先在app.vue中使用router-view

<template>
	<router-view :key="$route.fullPath"/>
</template>

在components中创建一个页面通用的组件（header、footer等页面公用部分）Layout.vue ，将头部Header、尾部Footer组件引入。因为每一个页面的中间部分是不同的，所以我们可以使用**插槽（slot）**的方式来设计。在每一个用到Layout.vue 布局的页面直接引入即可。

<template>
	<main>
        <!-- 头部 -->
    	<Header/>
        <div>
    		<slot></slot>        
	    </div>
        <!-- 尾部 -->
        <Footer/>
    </main>
</template>

在新页面中使用Layout布局

<template>
	<Layout>
        <!-- 网页的主体部分 -->
    </Layout>
</template>

3.2 页面样式

项目样式统一放在了assets下的css文件夹中，在css下创建一个 style.css 样式文件用来引入其他页面的css样式。将其他零散的css样式全部导入到 style.css 中，然后再在main.js文件中引入style.css即可。我管这一招叫隔山打牛。主要是为了简化main.js文件，避免所有的样式文件全部在main.js文件中导致main.js看起来非常繁琐。

3.3 axios封装

由于项目的用途主要是展示一些公司的产品，为公司达到宣传的作用，不需要与用户有更多的操作，所以在页面中仅仅用到了 get 请求，此处也是分装了get请求，如果需要对其他的axios封装，可以参考我的仓库【OHUHO】的其他项目。

• 在api中封装axios请求

  import axios from "axios";
  
  let base = 'http://localhost:8087';
  //传送json格式的get请求
  export const getRequest=(url,params)=>{
      return axios({
          method:'get',
          url:`${base}${url}`,
          data: params,
      })
  }
  

• 将getRequest注册为vue的组件

  import {getRequest} from "@/api/api";
  Vue.prototype.getRequest = getRequest;
  

• 使用封装的get

  this.getRequest("").then(resp =>{})
  

四、后端项目

4.1 Swagger配置

项目中使用为Swagger2版本

/**
 * Swagger
 * 1、注释中的 2、3 分别代表 Swagger 的版本，对应 pom.xml
 * 2、关于更多的信息，请参考 微信公众号【京茶吉鹿】
 */
@Configuration
@EnableSwagger2  // 2
// @EnableOpenApi      // 3
public class SwaggerConfig {

    @Bean
    public Docket createRestApi(){
        return new Docket(DocumentationType.SWAGGER_2)  // 2
                // return new Docket(DocumentationType.OAS_30)  // 3
                .pathMapping("/")
                .enable(true)
                .host("localhost:8888")
                .apiInfo(apiInfo())
                .select()
                .apis(RequestHandlerSelectors.basePackage("com.record.controller"))
                .paths(PathSelectors.any())
                .build()
                // .protocols(newHashSet("https","http"))
                .securitySchemes(singletonList(apiKey()))
                .securityContexts(singletonList(securityContext()));
    }

    private ApiInfo apiInfo() {
        return new ApiInfoBuilder()
                .title("四川XXXX有限公司")
                .description("四川XXXX有限公司——接口文档")
                .contact(new Contact("京茶吉鹿", "http:localhost:8888/doc.html", "jc.jingchao@qq.com"))
                .version("1.0.0")
                .termsOfServiceUrl("http://localhost:8888")
                .build();
    }

    private ApiKey apiKey(){
        return new ApiKey("Authorization", "Authorization", "Header");
    }

    private SecurityContext securityContext(){
        return SecurityContext.builder()
                .securityReferences(defaultAuth())
                .forPaths(PathSelectors.regex("/hello/.*"))
                .build();
    }

    List<SecurityReference> defaultAuth() {
        AuthorizationScope authorizationScope = new AuthorizationScope("global", "accessEverything");
        AuthorizationScope[] authorizationScopes = new AuthorizationScope[1];
        authorizationScopes[0] = authorizationScope;
        return singletonList(
                new SecurityReference("Authorization", authorizationScopes));
    }
}

SwaggerConfig配置文件为通用项目的配置文件，其中包含了认证服务的配置，项目中不需要可以剔除，当然这并会不导致代码异常。

4.2 MyBatis-Plus分页配置

@Configuration
public class MyBatisPlusConfig {
    
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor(){
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
        return interceptor;
    }
}

使用参考项目代码

4.3 代码生成器配置

public class FastAutoGeneratorTest {
    public static void main(String[] args) {
        FastAutoGenerator.create("jdbc:mysql://localhost:3306/portal?characterEncoding=utf-8&userSSL=false", "root", "123456")
                .globalConfig(builder -> {
                    builder.author("京茶吉鹿") // 设置作者
                            .enableSwagger() // 开启 swagger 模式
                            .outputDir("E://mybatis_plus//portal")  // 指定输出目录
                            .commentDate("yyyy-MM-dd"); // 注释日期

                })
                .packageConfig(builder -> {
                    builder.parent("com") // 设置父包名
                            .moduleName("record") // 设置父包模块名
                            .entity("entity")
                            .mapper("mapper")
                            .xml("mapper.xml")
                            .controller("controller")
                            .pathInfo(Collections.singletonMap(OutputFile.xml, "E://mybatis_plus//portal"));// 设置mapperXml生成路径
                })
                .strategyConfig(builder -> {
                    builder //##########################设置需要生成的表名#########################
                            .addInclude("t_article")
                            .addInclude("t_company")
                            .addInclude("t_designer")
                            .addInclude("t_example")
                            .addInclude("t_slideshow")
                            .addInclude("t_type")
                            .addInclude("t_type_details")
                            // .addInclude("t_")
                            //###################################################################

                            .addTablePrefix("t_", "h_") // 设置过滤表前缀

                            .entityBuilder()
                            .enableLombok() // 开启Lombok注解
                            .enableChainModel() // 开启链式模式
                            .logicDeleteColumnName("is_delete") // 逻辑删除字段名
                            .enableFileOverride() //允许文件覆盖

                            .controllerBuilder()
                            .enableRestStyle() // 开启 @RestController控制器
                            .enableFileOverride() //允许文件覆盖

                            .serviceBuilder()
                            .formatServiceFileName("%sService") //去除Service前面的I
                            .formatServiceImplFileName("%sServiceImpl")
                            .enableFileOverride() //允许文件覆盖

                            .mapperBuilder()
                            .superClass(BaseMapper.class)
                            .enableMapperAnnotation() // 开启@Mapper注解
                            .enableBaseResultMap() // 启用BaseResultMap生成
                            .enableBaseColumnList() // 生成基本的SQL片段
                            .enableBaseResultMap()  // 生成基本的resultMap
                            .enableFileOverride(); //允许文件覆盖
                })
                .templateEngine(new FreemarkerTemplateEngine()) // 使用Freemarker 引擎模板，默认的是Velocity引擎模板
                .execute();
    }
}

五、界面展示

5.1 公司首页

首页展示公司产品种类，可以切换轮播图介绍

5.2 产品中心

产品中心展示不同种类的产品，产品详情为图片展示，可以左右切换展示不同的图片。

5.3 客户案例

5.4 公司动态

公司动态为一些公司发布的文章信息，文章详情可以看到文章内容和为你推荐最新的文章。

5.5 关于我们

关于我们展示了该公司的介绍，和公司的团队信息。

六、源码获取

源码获取方式放在了我的微信公众号，只需要在微信公众号【京茶吉鹿】内回复“门户网站”便可以获得源码下载链接。同时源码中介绍了项目的结构和如何在本地安装。文章来源地址https://www.toymoban.com/news/detail-456806.html

到了这里，关于SpringBoot + Vue 企业门户宣传网站的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！