1. 架构搭建
1.1 数据库环境
l 本项目的重点在前端和后端,提供的数据库,没有分库分表。
1.2 后端环境
1.2.1 父工程:changgou4_parent_ali
l 修改pom.xml文件,确定spring boot、spring cloud、spring cloud Alibaba 等版本
<?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.czxy.changgou</groupId> <artifactId>changgou4-parent-ali</artifactId> <packaging>pom</packaging> <version>1.0-SNAPSHOT</version> <modules> <module>changgou4_common</module> <module>changgou4_common_auth</module> <module>changgou4_common_db</module> <module>changgou4_gateway</module> <module>changgou4_pojo</module> <module>changgou4_service_web</module> </modules> <!-- 1 确定spring boot的版本--> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.2.5.RELEASE</version> </parent> <!--2 确定版本--> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <java.version>1.8</java.version> <spring-cloud-release.version>Hoxton.SR3</spring-cloud-release.version> <nacos.version>1.1.0</nacos.version> <alibaba.cloud.version>2.2.1.RELEASE</alibaba.cloud.version> <mysql.version>5.1.32</mysql.version> <mybatis.plus.version>3.4.0</mybatis.plus.version> <druid.starter.version>1.1.9</druid.starter.version> <jwt.jjwt.version>0.9.0</jwt.jjwt.version> <jwt.joda.version>2.9.7</jwt.joda.version> <swagger.version>2.7.0</swagger.version> <beanutils.version>1.9.3</beanutils.version> <aliyun.sdk.core.version>3.3.1</aliyun.sdk.core.version> <aliyun.sdk.dysmsapi.version>1.0.0</aliyun.sdk.dysmsapi.version> <changgou4.common.version>1.0-SNAPSHOT</changgou4.common.version> <changgou4.common.auth.version>1.0-SNAPSHOT</changgou4.common.auth.version> <changgou4.common.db.version>1.0-SNAPSHOT</changgou4.common.db.version> <changgou4.pojo.version>1.0-SNAPSHOT</changgou4.pojo.version> </properties> <!-- 3 锁定版本--> <dependencyManagement> <dependencies> <!-- sprig cloud--> <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-cloud-dependencies</artifactId> <version>${spring-cloud-release.version}</version> <type>pom</type> <scope>import</scope> </dependency> <!--nacos --> <dependency> <groupId>com.alibaba.nacos</groupId> <artifactId>nacos-client</artifactId> <version>${nacos.version}</version> </dependency> <!--nacos cloud 发现 --> <dependency> <groupId>com.alibaba.cloud</groupId> <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId> <version>${alibaba.cloud.version}</version> </dependency> <!--nacos cloud 配置 --> <dependency> <groupId>com.alibaba.cloud</groupId> <artifactId>spring-cloud-starter-alibaba-nacos-config</artifactId> <version>${alibaba.cloud.version}</version> </dependency> <!-- https://mvnrepository.com/artifact/com.alibaba.cloud/spring-cloud-starter-alibaba-sentinel --> <dependency> <groupId>com.alibaba.cloud</groupId> <artifactId>spring-cloud-starter-alibaba-sentinel</artifactId> <version>${alibaba.cloud.version}</version> </dependency> <!-- mybatis plus--> <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>${mybatis.plus.version}</version> </dependency> <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-annotation</artifactId> <version>${mybatis.plus.version}</version> </dependency> <!-- mysql驱动 --> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>${mysql.version}</version> </dependency> <!-- druid启动器 --> <dependency> <groupId>com.alibaba</groupId> <artifactId>druid-spring-boot-starter</artifactId> <version>${druid.starter.version}</version> </dependency> <!--swagger2--> <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swagger2</artifactId> <version>${swagger.version}</version> </dependency> <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swagger-ui</artifactId> <version>${swagger.version}</version> </dependency> <!--jwt--> <!--JavaBean工具类,用于JavaBean数据封装--> <dependency> <groupId>commons-beanutils</groupId> <artifactId>commons-beanutils</artifactId> <version>${beanutils.version}</version> </dependency> <!--jwt工具--> <dependency> <groupId>io.jsonwebtoken</groupId> <artifactId>jjwt</artifactId> <version>${jwt.jjwt.version}</version> </dependency> <!--joda 时间工具类 --> <dependency> <groupId>joda-time</groupId> <artifactId>joda-time</artifactId> <version>${jwt.joda.version}</version> </dependency> <!--短信--> <dependency> <groupId>com.aliyuncs</groupId> <artifactId>aliyun-java-sdk-core</artifactId> <version>${aliyun.sdk.core.version}</version> </dependency> <dependency> <groupId>com.aliyuncs.dysmsapi</groupId> <artifactId>aliyun-java-sdk-dysmsapi</artifactId> <version>${aliyun.sdk.dysmsapi.version}</version> </dependency> <!--自定义项目--> <dependency> <groupId>com.czxy.changgou</groupId> <artifactId>changgou4_common</artifactId> <version>${changgou4.common.version}</version> </dependency> <dependency> <groupId>com.czxy.changgou</groupId> <artifactId>changgou4_common_auth</artifactId> <version>${changgou4.common.auth.version}</version> </dependency> <dependency> <groupId>com.czxy.changgou</groupId> <artifactId>changgou4_common_db</artifactId> <version>${changgou4.common.db.version}</version> </dependency> <dependency> <groupId>com.czxy.changgou</groupId> <artifactId>changgou4_pojo</artifactId> <version>${changgou4.pojo.version}</version> </dependency> </dependencies> </dependencyManagement> </project>
1.2.2 公共项目(基础):changgou4-common
l 通用工具项目
n 基于spring cloud开发基本依赖
n web开发常见的工具类
l 步骤一:修改pom.xml文件,添加依赖
<?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>changgou4-parent-ali</artifactId> <groupId>com.czxy.changgou</groupId> <version>1.0-SNAPSHOT</version> </parent> <modelVersion>4.0.0</modelVersion> <artifactId>changgou4-common</artifactId> <dependencies> <!--短信--> <dependency> <groupId>com.aliyuncs</groupId> <artifactId>aliyun-java-sdk-core</artifactId> </dependency> <dependency> <groupId>com.aliyuncs.dysmsapi</groupId> <artifactId>aliyun-java-sdk-dysmsapi</artifactId> </dependency> <!--lombok--> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> </dependency> </dependencies> </project>
l 步骤二:拷贝工具类
1.2.3 公共项目(认证):changgou4-common-auth
l 认证通用工具项目
l 步骤一:修改pom.xml文件
<?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>changgou4-parent-ali</artifactId> <groupId>com.czxy.changgou</groupId> <version>1.0-SNAPSHOT</version> </parent> <modelVersion>4.0.0</modelVersion> <artifactId>changgou4-common-auth</artifactId> <dependencies> <!--通用基础--> <dependency> <groupId>com.czxy.changgou</groupId> <artifactId>changgou4_common</artifactId> </dependency> <!--JavaBean工具类,用于JavaBean数据封装--> <dependency> <groupId>commons-beanutils</groupId> <artifactId>commons-beanutils</artifactId> </dependency> <!--jwt工具--> <dependency> <groupId>io.jsonwebtoken</groupId> <artifactId>jjwt</artifactId> </dependency> <!--joda 时间工具类 --> <dependency> <groupId>joda-time</groupId> <artifactId>joda-time</artifactId> </dependency> </dependencies> </project>
l 步骤二:拷贝工具类
1.2.4 公共项目(数据库):changgou4-common-db
l 数据库通用工具项目
l 步骤一:修改pom.xml文件
<?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>changgou4-parent-ali</artifactId> <groupId>com.czxy.changgou</groupId> <version>1.0-SNAPSHOT</version> </parent> <modelVersion>4.0.0</modelVersion> <artifactId>changgou4-common-db</artifactId> <dependencies> <!--通用基础--> <dependency> <groupId>com.czxy.changgou</groupId> <artifactId>changgou4-common</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> <!-- druid启动器 --> <dependency> <groupId>com.alibaba</groupId> <artifactId>druid-spring-boot-starter</artifactId> </dependency> </dependencies> </project>
l 步骤二:配置类
n 要求所有的服务项目包名必须是“com.czxy.changgou4”,否则配置无法扫描,就需要每个项目单独拷贝。
1.2.5 POJO项目:changgou4*-pojo*
l 统一管理所有的JavaBean
l 修改pom.xml文件
<dependencies> <!--lombok , @Data 等--> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> </dependency> <!--jackson , @JsonFormat--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-json</artifactId> </dependency> <!--mybatis-plus , @TableName @TableId 等 --> <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-annotation</artifactId> </dependency> </dependencies>
1.2.6 网关:changgou4-gateway
l 修改pom.xml文档
<?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>changgou4-parent-ali</artifactId> <groupId>com.czxy.changgou</groupId> <version>1.0-SNAPSHOT</version> </parent> <modelVersion>4.0.0</modelVersion> <artifactId>changgou4-gateway</artifactId> <dependencies> <!--自定义项目--> <dependency> <groupId>com.czxy.changgou</groupId> <artifactId>changgou4-common-auth</artifactId> </dependency> <dependency> <groupId>com.czxy.changgou</groupId> <artifactId>changgou4-pojo</artifactId> </dependency> <!-- 网关 --> <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-cloud-starter-gateway</artifactId> </dependency> <!-- nacos 服务发现 --> <dependency> <groupId>com.alibaba.cloud</groupId> <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId> </dependency> </dependencies> </project>
l 创建application.yml文档
#端口号 server: port: 10010 spring: application: name: changgou4-gateway servlet: multipart: max-file-size: 2MB #上传文件的大小 cloud: nacos: discovery: server-addr: 127.0.0.1:8848 #nacos服务地址 gateway: discovery: locator: enabled: true #开启服务注册和发现的功能,自动创建router以服务名开头的请求路径转发到对应的服务 lowerCaseServiceId: true #将请求路径上的服务名配置为小写
l 拷贝跨域配置类 GlobalCorsConfig
package com.czxy.changgou4.config; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.http.HttpHeaders; import org.springframework.http.HttpMethod; import org.springframework.http.HttpStatus; import org.springframework.http.server.reactive.ServerHttpRequest; import org.springframework.http.server.reactive.ServerHttpResponse; import org.springframework.web.cors.reactive.CorsUtils; import org.springframework.web.server.ServerWebExchange; import org.springframework.web.server.WebFilter; import org.springframework.web.server.WebFilterChain; import reactor.core.publisher.Mono; / * @author manor */ @Configuration public class GlobalCorsConfig { @Bean public WebFilter corsFilter2() { return (ServerWebExchange ctx, WebFilterChain chain) -> { ServerHttpRequest request = ctx.getRequest(); if (CorsUtils.isCorsRequest(request)) { HttpHeaders requestHeaders = request.getHeaders(); ServerHttpResponse response = ctx.getResponse(); HttpMethod requestMethod = requestHeaders.getAccessControlRequestMethod(); HttpHeaders headers = response.getHeaders(); headers.add(HttpHeaders.ACCESS_CONTROL_ALLOW_ORIGIN, requestHeaders.getOrigin()); headers.addAll(HttpHeaders.ACCESS_CONTROL_ALLOW_HEADERS, requestHeaders.getAccessControlRequestHeaders()); if (requestMethod != null) { headers.add(HttpHeaders.ACCESS_CONTROL_ALLOW_METHODS, requestMethod.name()); } headers.add(HttpHeaders.ACCESS_CONTROL_ALLOW_CREDENTIALS, "true"); headers.add(HttpHeaders.ACCESS_CONTROL_EXPOSE_HEADERS, "*"); if (request.getMethod() == HttpMethod.OPTIONS) { response.setStatusCode(HttpStatus.OK); return Mono.empty(); } } return chain.filter(ctx); }; } }
l 创建启动类
package com.czxy.changgou4; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cloud.client.discovery.EnableDiscoveryClient; / * @author manor */ @SpringBootApplication @EnableDiscoveryClient public class CGGatewayApplication { public static void main(String[] args) { SpringApplication.run(CGGatewayApplication.class, args ); } }
1.3 前端环境
1.3.1 构建项目:changgou4-fore
l 步骤一:使用脚手架构建项目
npx create-nuxt-app changgou4-fore
l 步骤二:npm打包方式、axios第三方模块、SSR渲染模式
1.3.2 整合axios
l 步骤一:创建~/plugins/apiclient.js文件
l 步骤二:编写nuxt整合模板,用于统一管理ajax请求路径
const request = { test : ()=> { return axios.get('/test') } } var axios = null export default ({ $axios, redirect }, inject) => { //赋值 axios = $axios //4) 将自定义函数交于nuxt // 使用方式1:在vue中,this.$request.xxx() // 使用方式2:在nuxt的asyncData中,content.app.$request.xxx() inject('request', request) }
l 步骤三:配置apiclient.js插件,修改nuxt.conf.js配置文件完成操作
plugins: [ { src: '~plugins/apiclient.js'} ],
l 步骤四:修改nuxt.conf.js配置文件,配置axios通用设置
axios: { baseURL: ‘http://localhost:10010’ }, l 步骤五:测试 apiclient.js是否配置成功,访问test时,出现404 async mounted() { let { data } = await this.$request.test() console.info(data) },
1.3.3 拷贝静态资源
l 将所有静态资源拷贝到static目录中
l 通过浏览器访问静态页面
http://localhost:3000/index.html
1.3.4 修改Nuxt项目默认项
l 1)修改默认布局,删除已有样式
l 2)删除pages目录下的所有内容
1.3.5 配置公共js和css
l 修改默认布局,添加公共js和css
<template> <div> <nuxt /> </div> </template> <script> export default { head: { title: '首页', link: [ {rel:'stylesheet',href: '/style/base.css'}, {rel:'stylesheet',href: '/style/global.css'}, {rel:'stylesheet',href: '/style/header.css'}, {rel:'stylesheet',href: '/style/footer.css'} ], script: [ { type: 'text/javascript', src: '/js/jquery-1.8.3.min.js' } ] } } </script> <style> </style>