电商4.0项目【二】: 架构搭建

Maynor

发布于 2022-01-07 13:54:28

4700

发布于 2022-01-07 13:54:28

文章被收录于专栏：最新最全的大数据技术体系最新最全的大数据技术体系

文章目录

1. 架构搭建

1. 架构搭建

1.1 数据库环境

l 本项目的重点在前端和后端，提供的数据库，没有分库分表。

1.2 后端环境

1.2.1 父工程：changgou4_parent_ali

l 修改pom.xml文件，确定spring boot、spring cloud、spring cloud Alibaba 等版本

<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.0modelVersion>

 

  <groupId>com.czxy.changgougroupId>

  <artifactId>changgou4-parent-aliartifactId>

  <packaging>pompackaging>

  <version>1.0-SNAPSHOTversion>

  <modules>

    <module>changgou4_commonmodule>

    <module>changgou4_common_authmodule>

    <module>changgou4_common_dbmodule>

    <module>changgou4_gatewaymodule>

    <module>changgou4_pojomodule>

   <module>changgou4_service_webmodule>

  modules>

 

  

  <parent>

    <groupId>org.springframework.bootgroupId>

    <artifactId>spring-boot-starter-parentartifactId>

    <version>2.2.5.RELEASEversion>

  parent>

 

  

  <properties>

    <project.build.sourceEncoding>UTF-8project.build.sourceEncoding>

    <java.version>1.8java.version>

    <spring-cloud-release.version>Hoxton.SR3spring-cloud-release.version>

    <nacos.version>1.1.0nacos.version>

    <alibaba.cloud.version>2.2.1.RELEASEalibaba.cloud.version>

    <mysql.version>5.1.32mysql.version>

    <mybatis.plus.version>3.4.0mybatis.plus.version>

    <druid.starter.version>1.1.9druid.starter.version>

    <jwt.jjwt.version>0.9.0jwt.jjwt.version>

    <jwt.joda.version>2.9.7jwt.joda.version>

    <swagger.version>2.7.0swagger.version>

    <beanutils.version>1.9.3beanutils.version>

    <aliyun.sdk.core.version>3.3.1aliyun.sdk.core.version>

    <aliyun.sdk.dysmsapi.version>1.0.0aliyun.sdk.dysmsapi.version>

    <changgou4.common.version>1.0-SNAPSHOTchanggou4.common.version>

    <changgou4.common.auth.version>1.0-SNAPSHOTchanggou4.common.auth.version>

    <changgou4.common.db.version>1.0-SNAPSHOTchanggou4.common.db.version>

    <changgou4.pojo.version>1.0-SNAPSHOTchanggou4.pojo.version>

 

  properties>

 

  

  <dependencyManagement>

    <dependencies>

      

      <dependency>

        <groupId>org.springframework.cloudgroupId>

        <artifactId>spring-cloud-dependenciesartifactId>

        <version>${spring-cloud-release.version}version>

        <type>pomtype>

        <scope>importscope>

      dependency>

      

      <dependency>

        <groupId>com.alibaba.nacosgroupId>

        <artifactId>nacos-clientartifactId>

        <version>${nacos.version}version>

      dependency>

 

      

      <dependency>

        <groupId>com.alibaba.cloudgroupId>

        <artifactId>spring-cloud-starter-alibaba-nacos-discoveryartifactId>

        <version>${alibaba.cloud.version}version>

      dependency>

 

      

      <dependency>

        <groupId>com.alibaba.cloudgroupId>

        <artifactId>spring-cloud-starter-alibaba-nacos-configartifactId>

        <version>${alibaba.cloud.version}version>

      dependency>

 

      

      <dependency>

        <groupId>com.alibaba.cloudgroupId>

        <artifactId>spring-cloud-starter-alibaba-sentinelartifactId>

        <version>${alibaba.cloud.version}version>

      dependency>

 

      

      <dependency>

        <groupId>com.baomidougroupId>

        <artifactId>mybatis-plus-boot-starterartifactId>

        <version>${mybatis.plus.version}version>

      dependency>

      <dependency>

        <groupId>com.baomidougroupId>

        <artifactId>mybatis-plus-annotationartifactId>

        <version>${mybatis.plus.version}version>

      dependency>

 

      

      <dependency>

        <groupId>mysqlgroupId>

        <artifactId>mysql-connector-javaartifactId>

        <version>${mysql.version}version>

      dependency>

 

      

      <dependency>

        <groupId>com.alibabagroupId>

        <artifactId>druid-spring-boot-starterartifactId>

        <version>${druid.starter.version}version>

      dependency>

 

      

      <dependency>

        <groupId>io.springfoxgroupId>

        <artifactId>springfox-swagger2artifactId>

        <version>${swagger.version}version>

      dependency>

      <dependency>

        <groupId>io.springfoxgroupId>

        <artifactId>springfox-swagger-uiartifactId>

        <version>${swagger.version}version>

      dependency>

 

      

      

      <dependency>

        <groupId>commons-beanutilsgroupId>

        <artifactId>commons-beanutilsartifactId>

        <version>${beanutils.version}version>

      dependency>

 

      

      <dependency>

        <groupId>io.jsonwebtokengroupId>

        <artifactId>jjwtartifactId>

        <version>${jwt.jjwt.version}version>

      dependency>

 

      

      <dependency>

        <groupId>joda-timegroupId>

        <artifactId>joda-timeartifactId>

        <version>${jwt.joda.version}version>

      dependency>

 

      

      <dependency>

        <groupId>com.aliyuncsgroupId>

        <artifactId>aliyun-java-sdk-coreartifactId>

        <version>${aliyun.sdk.core.version}version>

      dependency>

      <dependency>

        <groupId>com.aliyuncs.dysmsapigroupId>

        <artifactId>aliyun-java-sdk-dysmsapiartifactId>

        <version>${aliyun.sdk.dysmsapi.version}version>

      dependency>

 

      

      <dependency>

        <groupId>com.czxy.changgougroupId>

        <artifactId>changgou4_commonartifactId>

        <version>${changgou4.common.version}version>

      dependency>

      <dependency>

        <groupId>com.czxy.changgougroupId>

        <artifactId>changgou4_common_authartifactId>

        <version>${changgou4.common.auth.version}version>

      dependency>

      <dependency>

        <groupId>com.czxy.changgougroupId>

        <artifactId>changgou4_common_dbartifactId>

        <version>${changgou4.common.db.version}version>

      dependency>

      <dependency>

        <groupId>com.czxy.changgougroupId>

        <artifactId>changgou4_pojoartifactId>

        <version>${changgou4.pojo.version}version>

      dependency>

 

 

    dependencies>

 

  dependencyManagement>

 

 

 

project>

1.2.2 公共项目（基础）：changgou4-common

l 通用工具项目

n 基于spring cloud开发基本依赖

n web开发常见的工具类

l 步骤一：修改pom.xml文件，添加依赖

        changgou4-parent-ali
        com.czxy.changgou
        1.0-SNAPSHOT
    
    4.0.0

    changgou4-common

    
        
        
            com.aliyuncs
            aliyun-java-sdk-core
        
        
            com.aliyuncs.dysmsapi
            aliyun-java-sdk-dysmsapi
        
        
        
            org.projectlombok
            lombok

l 步骤二：拷贝工具类

1.2.3 公共项目（认证）：changgou4-common-auth

l 认证通用工具项目

l 步骤一：修改pom.xml文件

        changgou4-parent-ali
        com.czxy.changgou
        1.0-SNAPSHOT
    
    4.0.0

    changgou4-common-auth

    
        
        
            com.czxy.changgou
            changgou4_common
        
        
        
            commons-beanutils
            commons-beanutils
        

        
        
            io.jsonwebtoken
            jjwt
        

        
        
            joda-time
            joda-time

l 步骤二：拷贝工具类

1.2.4 公共项目（数据库）：changgou4-common-db

l 数据库通用工具项目

l 步骤一：修改pom.xml文件

        changgou4-parent-ali
        com.czxy.changgou
        1.0-SNAPSHOT
    
    4.0.0

    changgou4-common-db

    
        
        
            com.czxy.changgou
            changgou4-common
        
        
        
            com.baomidou
            mybatis-plus-boot-starter
        
        
        
            mysql
            mysql-connector-java
        
        
        
            com.alibaba
            druid-spring-boot-starter

l 步骤二：配置类

n 要求所有的服务项目包名必须是“com.czxy.changgou4”，否则配置无法扫描，就需要每个项目单独拷贝。

1.2.5 POJO项目：changgou4-pojo

l 统一管理所有的JavaBean

l 修改pom.xml文件

        org.projectlombok
        lombok
    
    
    
        org.springframework.boot
        spring-boot-starter-json
    
    
    
        com.baomidou
        mybatis-plus-annotation

1.2.6 网关：changgou4-gateway

l 修改pom.xml文档

        changgou4-parent-ali
        com.czxy.changgou
        1.0-SNAPSHOT
    
    4.0.0

    changgou4-gateway

    
        
        
            com.czxy.changgou
            changgou4-common-auth
        
        
            com.czxy.changgou
            changgou4-pojo
        
        
        
            org.springframework.cloud
            spring-cloud-starter-gateway
        

        
        
            com.alibaba.cloud
            spring-cloud-starter-alibaba-nacos-discovery

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>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2022-01-06 ，如有侵权请联系 cloudcommunity@tencent.com 删除

xml

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度