电商4.0项目: 架构搭建

Posted 2022-02-03 Maynor学长

文章目录

• 1. 架构搭建
• • 1.1 数据库环境
  • 1.2 后端环境
  • • 1.2.1 父工程：changgou*4_parent_ali*
    • 1.2.2 公共项目（基础）：changgou*4*-*common*
    • 1.2.3 公共项目（认证）：changgou*4*-*common*-*auth*
    • 1.2.4 公共项目（数据库）：changgou*4*-common-db
    • 1.2.5 *POJO项目：changgou*4*-pojo*
    • 1.2.6 网关：changgou*4*-gateway
  • 1.3 前端环境
  • • 1.3.1 构建项目：changgou*4*-*fore*
    • 1.3.2 整合axios
    • 1.3.3 拷贝静态资源
    • 1.3.4 修改Nuxt项目默认项
    • 1.3.5 配置公共js和css
  • 后记

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'电商4.0项目：需求分析&系统设计

 2018高级系统架构，SSM大型分布式架构电商项目，高并发，微服务，缓存技术
 湖仓一体电商项目：项目背景和架构介绍
 iOSAPP开发项目搭建
 电商系统—项目梳理
 电商系统—项目梳理