电商项目（畅购）-01-环境搭建

1.目标

1.1搭建环境

1.2完成项目功能

2.环境搭建

2.1 父项目

• 2.1.1父工程：changgou4-parent-ali
• 修改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>

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

• 通用工具项目

• 基于spring cloud开发基本依赖

• web开发常见的工具类

• 步骤一：修改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>

• 步骤二：拷贝工具类

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

• 认证通用工具项目

• 步骤一：修改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>

• 步骤二：拷贝工具类
  

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

• 数据库通用工具项目

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

  扫描二维码关注公众号，回复： 13212713 查看本文章

<?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>

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

2.1.5POJO项目：changgou4-pojo

• 统一管理所有的JavaBean

• 修改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>

2.1.6网关：changgou4-gateway

• 修改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>

• 创建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    #将请求路径上的服务名配置为小写

• 拷贝跨域配置类 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 
 * @email [email protected]
 */
@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);
        };
    }

}

• 创建启动类
  

package com.czxy.changgou4;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.cloud.client.discovery.EnableDiscoveryClient;

/**
 * @author 
 * @email [email protected]
 */
@SpringBootApplication
@EnableDiscoveryClient
public class CGGatewayApplication {
    
    
    public static void main(String[] args) {
    
    
        SpringApplication.run(CGGatewayApplication.class, args );
    }
}

2.1前端环境

2.1.1构建项目：changgou4-fore

• 步骤一：使用脚手架构建项目npx create-nuxt-app changgou4-fore

• 步骤二：npm打包方式、axios第三方模块、SSR渲染模式

3.3.2整合axios

• 步骤一：创建~/plugins/apiclient.js文件
• 步骤二：编写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)
}

• 步骤三：配置apiclient.js插件，修改nuxt.conf.js配置文件完成操作
  

plugins: [
    { src: '~plugins/apiclient.js'}
  ],

• 步骤四：修改nuxt.conf.js配置文件，配置axios通用设置
  

 axios: {
    baseURL: 'http://localhost:10010'
  },

• 步骤五：测试 apiclient.js是否配置成功，访问test时，出现404

  async mounted() {
    let { data } = await this.$request.test()
    console.info(data)
  },

2.1.3拷贝静态资源

• 将所有静态资源拷贝到static目录中

• 通过浏览器访问静态页面

http://localhost:3000/index.html

2.1.4修改Nuxt项目默认项

• 1）修改默认布局，删除已有样式
  
• 2）删除pages目录下的所有内容
  

2.1.5配置公共js和css

• 修改默认布局，添加公共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>

3.用户模块（8081）

3.1搭建环境

3.1.1后端web服务：changgou4-service-web

• 修改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_service_web</artifactId>

    <dependencies>
        <!--自定义项目-->
        <dependency>
            <groupId>com.czxy.changgou</groupId>
            <artifactId>changgou4_common_db</artifactId>
        </dependency>
        <dependency>
            <groupId>com.czxy.changgou</groupId>
            <artifactId>changgou4_pojo</artifactId>
        </dependency>
        <!--web起步依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <!-- nacos 客户端 -->
        <dependency>
            <groupId>com.alibaba.nacos</groupId>
            <artifactId>nacos-client</artifactId>
        </dependency>

        <!-- nacos 服务发现 -->
        <dependency>
            <groupId>com.alibaba.cloud</groupId>
            <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
        </dependency>
        <!--redis-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-redis</artifactId>
        </dependency>
        <dependency>
            <groupId>redis.clients</groupId>
            <artifactId>jedis</artifactId>
        </dependency>
        <!--swagger2-->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger2</artifactId>
        </dependency>
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger-ui</artifactId>
        </dependency>
    </dependencies>

</project>

• 创建application.yml文档
  

#端口号
server:
  port: 8081

spring:
  application:
    name: web-service          #服务名
  datasource:
    driverClassName: com.mysql.jdbc.Driver
    url: jdbc:mysql://127.0.0.1:3306/changgou_db?useUnicode=true&characterEncoding=utf8
    username: root
    password: 1234
    druid:    #druid 连接池配置
      initial-size: 1       #初始化连接池大小
      min-idle: 1           #最小连接数
      max-active: 20        #最大连接数
      test-on-borrow: true  #获取连接时候验证，会影响性能
  redis:
    database:   0
    host: 127.0.0.1
    port: 6379
  cloud:
    nacos:
      discovery:
        server-addr: 127.0.0.1:8848   #nacos服务地址
    sentinel:
      transport:
        dashboard: 127.0.0.1:8080

• 创建启动类
  

package com.czxy.changgou4;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.cloud.client.discovery.EnableDiscoveryClient;

/**
 * @author 桐叔
 * @email [email protected]
 */
@SpringBootApplication
@EnableDiscoveryClient
public class Web-serviceApplication {
    
    
    public static void main(String[] args) {
    
    
        SpringApplication.run( Web-serviceApplication.class , args );
    }
}

3.1.2后端创建JavaBean：User

在changgou4_pojo项目中添加User对象

package com.czxy.changgou4.pojo;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.ToString;

import java.beans.Transient;
import java.util.Date;

/**  与数据库对应JavaBean
 * Created by liangtong.
 */
@TableName("tb_user")
@Data
@NoArgsConstructor
@AllArgsConstructor
public class User {
    
    
   
    @TableId(value="id",type = IdType.AUTO)
    private Long id;

    @TableField(value="username")
    private String username;

    @TableField(value="password")
    private String password;

    @TableField(value="face")
    private String face;

    @TableField(value="expriece")
    private Integer expriece;

    @TableField(value="email")
    private String email;

    @TableField(value="mobile")
    private String mobile;

    @TableField(value="created_at")
    private Date createdAt;

    @TableField(value="updated_at")
    private Date updatedAt;

    @TableField(exist = false)
    private String code;
    @TableField(exist = false)
    private String password_confirm;

}

3.1.3前端页面：创建公共组件

• 1）删除components目录下所有内容，并创建3个新组件
  

• 2）创建 TopNav.vue组件，用于配置“顶部导航”

<template>
  <!-- 顶部导航 start -->
  <div class="topnav">
    <div class="topnav_bd w990 bc">
      <div class="topnav_left">

      </div>
      <div class="topnav_right fr">
        <ul>
          <li>您好，欢迎来到畅购！[<a href="login.html">登录</a>] [<a href="register.html">免费注册</a>] </li>
          <li class="line">|</li>
          <li>我的订单</li>
          <li class="line">|</li>
          <li>客户服务</li>

        </ul>
      </div>
    </div>
  </div>
  <!-- 顶部导航 end -->
</template>

<script>
export default {
     
     

}
</script>

<style>

</style>

• 3）创建 HeaderLogo.vue组件，用于配置“页面头部，仅有LOGO”
  

<template>
  <!-- 页面头部 start -->
  <div class="header w990 bc mt15">
    <div class="logo w990">
      <h2 class="fl"><a href="index.html"><img src="/images/logo.png" alt="畅购商城"></a></h2>
    </div>
  </div>
  <!-- 页面头部 end -->
</template>

<script>
export default {
     
     

}
</script>

<style>

</style>

• 4）创建 Footer.vue组件，用于配置“底部版权”
  

<template>
  <!-- 底部版权 start -->
  <div class="footer w1210 bc mt15">
    <p class="links">
      <a href="">关于我们</a> |
      <a href="">联系我们</a> |
      <a href="">人才招聘</a> |
      <a href="">商家入驻</a> |
      <a href="">千寻网</a> |
      <a href="">奢侈品网</a> |
      <a href="">广告服务</a> |
      <a href="">移动终端</a> |
      <a href="">友情链接</a> |
      <a href="">销售联盟</a> |
      <a href="">畅购论坛</a>
    </p>
    <p class="copyright">
       © 2006-2020 畅购网上商城 版权所有，并保留所有权利。  ICP备案证书号:京ICP证070359号
    </p>
    <p class="auth">
      <a href=""><img src="/images/xin.png" alt="" /></a>
      <a href=""><img src="/images/kexin.jpg" alt="" /></a>
      <a href=""><img src="/images/police.jpg" alt="" /></a>
      <a href=""><img src="/images/beian.gif" alt="" /></a>
    </p>
  </div>
  <!-- 底部版权 end -->
</template>

<script>
export default {
     
     

}
</script>

<style>

</style>