一、項(xiàng)目介紹
項(xiàng)目的初衷是給某某公司做一個(gè)產(chǎn)品宣傳網(wǎng)頁，由于第一次做這種宣傳網(wǎng)頁沒有太多的靈感于是到網(wǎng)上去找了一些模板，但是發(fā)現(xiàn)網(wǎng)上現(xiàn)有的模板大多都是基于php語言開發(fā)的。但是甲方需要我們使用最新的前后端分離的開發(fā)方式來開發(fā)，于是決定使用 springboot + vue 來來發(fā)這個(gè)項(xiàng)目。網(wǎng)頁是響應(yīng)式的，可以適應(yīng)pc端，平板端和手機(jī)端。
二、主要技術(shù)
2.1 SpringBoot框架
springboot是spring家族中的一個(gè)全新框架，用來簡化spring程序的創(chuàng)建和開發(fā)過程。在以往我們通過SpringMVC+Spring+Mybatis框架進(jìn)行開發(fā)的時(shí)候，我們需要配置web.xml，spring配置，mybatis配置，然后整合在一起，而springboot拋棄了繁瑣的xml配置過程，采用大量默認(rèn)的配置來簡化我們的spring開發(fā)過程。SpringBoot化繁為簡，使開發(fā)變得更加的簡單迅速。
2.2 MyBatis-Plus
MyBatis-Plus在MyBatis的基礎(chǔ)上制作增強(qiáng)不做改變，引入它不會(huì)對工程產(chǎn)生影響，如絲般順滑。只需要簡單的配置，即可以進(jìn)行單表CURUD操作，從而節(jié)省大量的時(shí)間。它的功能豐富，主要包含代碼生成，自動(dòng)分頁，邏輯刪除，自動(dòng)填充等功能一應(yīng)俱全。在項(xiàng)目中引入了MyBatis-Plus可以減少我們對sql語句的編寫，極大的提高工作效率。一個(gè)字，棒。
2.3 Knife4j
Knife4j接口文檔生成工具，集成了swagger2和openapi，在絲襪哥的基礎(chǔ)上增加了功效，同時(shí)它提供了更加適合國人審美的UI界面。同時(shí)提供了對主流網(wǎng)管組件的統(tǒng)一聚合OpenAPI接口文檔的解決方案?？偨Y(jié)一句話，強(qiáng)。
2.4 Vue
目前主流的前端框架之一?；跇?biāo)準(zhǔn)的HTML、CSS、JavaScript構(gòu)建，提供容易上手的API和一流的文檔。經(jīng)過編譯器優(yōu)化、完全響應(yīng)式的渲染系統(tǒng)，幾乎不需要手動(dòng)優(yōu)化，性能非常出色。有豐富的、可漸進(jìn)式集成的生態(tài)系統(tǒng)，可以根據(jù)應(yīng)用規(guī)模在庫和框架之間切換自如。
三、前端項(xiàng)目
3.1 頁面框架
首先在app.vue中使用router-view
<template>
<router-view :key="$route.fullPath"/>
</template>
在components中創(chuàng)建一個(gè)頁面通用的組件（header、footer等頁面公用部分）Layout.vue ，將頭部Header、尾部Footer組件引入。因?yàn)槊恳粋€(gè)頁面的中間部分是不同的，所以我們可以使用**插槽（slot）**的方式來設(shè)計(jì)。在每一個(gè)用到Layout.vue 布局的頁面直接引入即可。
<template>
<main>
<!-- 頭部 -->
<Header/>
<div>
<slot></slot>
</div>
<!-- 尾部 -->
<Footer/>
</main>
</template>
在新頁面中使用Layout布局
<template>
<Layout>
<!-- 網(wǎng)頁的主體部分 -->
</Layout>
</template>
3.2 頁面樣式
項(xiàng)目樣式統(tǒng)一放在了assets下的css文件夾中，在css下創(chuàng)建一個(gè) style.css 樣式文件用來引入其他頁面的css樣式。將其他零散的css樣式全部導(dǎo)入到 style.css 中，然后再在main.js文件中引入style.css即可。我管這一招叫隔山打牛。主要是為了簡化main.js文件，避免所有的樣式文件全部在main.js文件中導(dǎo)致main.js看起來非常繁瑣。
3.3 axios封裝
由于項(xiàng)目的用途主要是展示一些公司的產(chǎn)品，為公司達(dá)到宣傳的作用，不需要與用戶有更多的操作，所以在頁面中僅僅用到了 get 請求，此處也是分裝了get請求，如果需要對其他的axios封裝，可以參考我的倉庫【OHUHO】的其他項(xiàng)目。
-
在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 =>{})
四、后端項(xiàng)目
4.1 Swagger配置
項(xiàng)目中使用為Swagger2版本
/**
* Swagger
* 1、注釋中的 2、3 分別代表 Swagger 的版本，對應(yīng) pom.xml
* 2、關(guān)于更多的信息，請參考 微信公眾號【京茶吉鹿】
*/
@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配置文件為通用項(xiàng)目的配置文件，其中包含了認(rèn)證服務(wù)的配置，項(xiàng)目中不需要可以剔除，當(dāng)然這并會(huì)不導(dǎo)致代碼異常。
4.2 MyBatis-Plus分頁配置
@Configuration
public class MyBatisPlusConfig {
@Bean
public MybatisPlusInterceptor mybatisPlusInterceptor(){
MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
return interceptor;
}
}
使用參考項(xiàng)目代碼
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("京茶吉鹿") // 設(shè)置作者
.enableSwagger() // 開啟 swagger 模式
.outputDir("E://mybatis_plus//portal") // 指定輸出目錄
.commentDate("yyyy-MM-dd"); // 注釋日期
})
.packageConfig(builder -> {
builder.parent("com") // 設(shè)置父包名
.moduleName("record") // 設(shè)置父包模塊名
.entity("entity")
.mapper("mapper")
.xml("mapper.xml")
.controller("controller")
.pathInfo(Collections.singletonMap(OutputFile.xml, "E://mybatis_plus//portal"));// 設(shè)置mapperXml生成路徑
})
.strategyConfig(builder -> {
builder //##########################設(shè)置需要生成的表名#########################
.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_") // 設(shè)置過濾表前綴
.entityBuilder()
.enableLombok() // 開啟Lombok注解
.enableChainModel() // 開啟鏈?zhǔn)侥Ｊ?/span>
.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 引擎模板，默認(rèn)的是Velocity引擎模板
.execute();
}
}
五、界面展示
5.1 公司首頁
首頁展示公司產(chǎn)品種類，可以切換輪播圖介紹
5.2 產(chǎn)品中心
產(chǎn)品中心展示不同種類的產(chǎn)品，產(chǎn)品詳情為圖片展示，可以左右切換展示不同的圖片。
5.3 客戶案例
5.4 公司動(dòng)態(tài)
公司動(dòng)態(tài)為一些公司發(fā)布的文章信息，文章詳情可以看到文章內(nèi)容和為你推薦最新的文章。
5.5 關(guān)于我們
關(guān)于我們展示了該公司的介紹，和公司的團(tuán)隊(duì)信息。
文章來源：http://www.zghlxwxcb.cn/news/detail-456806.html
六、源碼獲取
源碼獲取方式放在了我的微信公眾號，只需要在微信公眾號【京茶吉鹿】內(nèi)回復(fù)“門戶網(wǎng)站”便可以獲得源碼下載鏈接。同時(shí)源碼中介紹了項(xiàng)目的結(jié)構(gòu)和如何在本地安裝。文章來源地址http://www.zghlxwxcb.cn/news/detail-456806.html
到了這里，關(guān)于SpringBoot + Vue 企業(yè)門戶宣傳網(wǎng)站的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
