品优购电商系统 1 - 分布式框架Dubbox

本文部分内容来自黑马49期项目实战-品优购电商系统开发

课程目标

  1. 了解电商行业特点以及理解电商的模式
  2. 了解整体品优购的架构特点
  3. 能够运用Dubbox+SSM搭建分布式应用
  4. 搭建工程框架,完成品牌列表后端代码

走进电商

电商行业分析

近年来,中国的电子商务快速发展,交易额连创新高,电子商务在各领域的应用不断拓展和深化、相关服务业蓬勃发展、支撑体系不断健全完善、创新的动力和能力 不断增强。电子商务正在与实体经济深度融合,进入规模性发展阶段,对经济社会生活的影响不断增大,正成为我国经济发展的新引擎。

中国电子商务研究中心数据显示,截止到 2012 年底,中国电子商务市场交易规模达 7.85万亿人民币,同比增长 30.83%。其中,B2B 电子商务交易额 达 6.25 万亿,同比增长 27%。而 2011 年全年,中国电子商务市场交易额达 6 万亿人民币,同比增长 33%,占 GDP 比重上升到 13%;2012 年,电子商务占 GDP 的比重已经高达 15%。

电商行业技术特点

  1. 技术新
  2. 技术范围广
  3. 分布式
  4. 高并发、集群、负载均衡、高可用
  5. 海量数据
  6. 业务复杂
  7. 系统安全

主要电商模式

B2B – 企业对企业
  1. B2B ( Business to Business)是指进行电子商务交易的供需双方都是商家(或企业、公司),她(他)们使用了互联网的技术或各种商务网络平台,完成商务交易的过程。电子商务是现代 B2B marketing的一种具体主要的表现形式。

    这里写图片描述

  2. 案例:阿里巴巴、慧聪网

C2C – 个人对个人
  1. C2C即 Customer(Consumer) to Customer(Consumer),意思就是消费者个人间的电子商务行为。比如一个消费者有一台电脑,通过网络进行交易,把它出售给另外一个消费者,此种交易类型就称为C2C电子商务。

  2. 案例:淘宝、易趣、瓜子二手车

B2C – 企业对个人
  1. B2C是Business-to-Customer的缩写,而其中文简称为“商对客”。“商对客”是电子商务的一种模式,也就是通常说的直接面向消费者销售产品和服务商业零售模式。这种形式的电子商务一般以网络零售业为主,主要借助于互联网开展在线销售活动。B2C即企业通过互联网为消费者提供一个新型的购物环境——网上商店,消费者通过网络在网上购物、网上支付等消费行为。

    这里写图片描述

  2. 案例:唯品会、乐蜂网

C2B – 个人对企业
  1. C2B(Consumer to Business,即消费者到企业),是互联网经济时代新的商业模式。这一模式改变了原有生产者(企业和机构)和消费者的关系,是一种消费者贡献价值(Create Value), 企业和机构消费价值(Consume Value)。

  2. C2B模式和我们熟知的供需模式(DSM, Demand Supply Model)恰恰相反,真正的C2B 应该先有消费者需求产生而后有企业生产,即先有消费者提出需求,后有生产企业按需求组织生产。通常情况为消费者根据自身需求定制产品和价格,或主动参与产品设计、生产和定价,产品、价格等彰显消费者的个性化需求,生产企业进行定制化生产。

    这里写图片描述

  3. 案例:海尔商城、 尚品宅配

O2O – 线上到线下
  1. O2O即Online To Offline(在线离线/线上到线下),是指将线下的商务机会与互联网结合,让互联网成为线下交易的平台,这个概念最早来源于美国。O2O的概念非常广泛,既可涉及到线上,又可涉及到线下,可以通称为O2O。主流商业管理课程均对O2O这种新型的商业模式有所介绍及关注。

    这里写图片描述

  2. 案例:美团、饿了吗

F2C – 工厂到个人
  1. F2C指的是Factory to customer,即从厂商到消费者的电子商务模式。

    这里写图片描述

B2B2C – 企业-企业-个人
  1. B2B2C是一种电子商务类型的网络购物商业模式,B是BUSINESS的简称,C是CUSTOMER的简称,第一个B指的是商品或服务的供应商,第二个B指的是从事电子商务的企业,C则是表示消费者。

  2. 第一个BUSINESS,并不仅仅局限于品牌供应商、影视制作公司和图书出版商,任何的商品供应商或服务供应商都能可以成为第一个BUSINESS;第二B是B2B2C模式的电子商务企业,通过统一的经营管理对商品和服务、消费者终端同时进行整合,是广大供应商和消费者之间的桥梁,为供应商和消费者提供优质的服务,是互联网电子商务服务供应商。C表示消费者,在第二个B构建的统一电子商务平台购物的消费者;

  3. B2B2C的来源于目前的B2B、B2C模式的演变和完善,把B2C和C2C完美地结合起来,通过B2B2C模式的电子商务企业构建自己的物流供应链系统,提供统一的服务。

  4. 案例:京东商城、天猫商城

品优购 – 需求分析与系统设计

品优购介绍

品优购网上商城是一个综合性的 B2B2C 平台,类似京东商城、天猫商城。网站采用商家入驻的模式,商家入驻平台提交申请,有平台进行资质审核,审核通过后,商家拥有独立的管理后台录入商品信息。商品经过平台审核后即可发布。

品优购网上商城主要分为网站前台、运营商后台、商家管理后台三个子系统

网站前台
  1. 主要包括网站首页、商家首页、商品详细页、、搜索页、会员中心、订单与支付相关页面、秒杀频道等。

    这里写图片描述

运营商后台
  1. 是运营商的运营人员的管理后台。 主要包括商家审核、品牌管理、规格管理、模板管理、商品分类管理、商品审核、广告类型管理、广告管理、订单查询、商家结算等。

    这里写图片描述

商家管理后台
  1. 入驻的商家进行管理的后台,主要功能是对商品的管理以及订单查询统计、资金结算等功能。

    这里写图片描述

系统架构

什么是SOA架构
  1. SOA是Service-Oriented Architecture的首字母简称,它是一种支持面向服务的架构样式。从服务、基于服务开发和服务的结果来看,面向服务是一种思考方式。其实SOA架构更多应用于互联网项目开发。

  2. 为什么互联网项目会采用SOA架构呢?随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,迫切需一个治理系统确保架构有条不紊的演进。

品优购架构分析
  1. 架构图

    这里写图片描述

数据库表结构

表名称含义
tb_brand品牌
tb_specification规格
tb_specification_option规格选项
tb_type_template类型模板:用于关联品牌和规格
tb_item_cat商品分类
tb_seller商家
tb_goods商品
tb_goods_desc商品详情
tb_item商品明细
tb_content内容(广告)
tb_content_category内容(广告)类型
tb_user用户
tb_order订单
tb_order_item订单明细
tb_pay_log支付日志

框架组合

  1. 品优购采用当前流行的前后端编程架构
  2. 后端框架采用Spring + SpringMVC + Mybatis + Dubbox
  3. 前端采用AngularJS + Bootstrap

Dubbox框架

Dubbox简介

  1. Dubbox 是一个分布式服务框架,其前身是阿里巴巴开源项目Dubbo ,被国内电商及互联网项目中使用,后期阿里巴巴停止了该项目的维护,当当网便在Dubbo基础上进行优化,并继续维护,为了与原有的Dubbo区分,故将其命名为Dubbox。

  2. Dubbox 致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案。简单的说,dubbox就是个服务框架,如果没有分布式的需求,其实是不需要用的,只有在分布式的时候,才有dubbox这样的分布式服务框架的需求,并且本质上是个服务调用的东东,说白了就是个远程服务调用的分布式框架。

    这里写图片描述

    1. 节点角色说明:
      1. Provider: 暴露服务的服务提供方。
      2. Consumer: 调用远程服务的服务消费方。
      3. Registry: 服务注册与发现的注册中心。
      4. Monitor: 统计服务的调用次调和调用时间的监控中心。
      5. Container: 服务运行容器。
    2. 调用关系说明:
      1. 服务容器负责启动,加载,运行服务提供者。
      2. 服务提供者在启动时,向注册中心注册自己提供的服务。
      3. 服务消费者在启动时,向注册中心订阅自己所需的服务。
      4. 注册中心返回服务提供者地址列表给消费者,如果有变更,注册中心将基于长连接推送变更数据给消费者。
      5. 服务消费者,从提供者地址列表中,基于软负载均衡算法,选一台提供者进行调用,如果调用失败,再选另一台调用。
      6. 服务消费者和提供者,在内存中累计调用次数和调用时间,定时每分钟发送一次统计数据到监控中心。

注册中心Zookeeper

Zookeeper介绍
  1. 官方推荐使用 zookeeper 注册中心。注册中心负责服务地址的注册与查找,相当于目录服务,服务提供者和消费者只在启动时与注册中心交互,注册中心不转发请求,压力较小。
  2. Zookeeper 是 Apacahe Hadoop 的子项目,是一个树型的目录服务,支持变更推送,适合作为Dubbox 服务的注册中心,工业强度较高,可用于生产环境。
Zookeeper在Linux系统的安装
  1. 安装步骤:
    1. 第一步:安装jdk

    2. 第二步:把Zookeeper的压缩包上传到linux系统,或直接下载

      $ wget https://mirrors.tuna.tsinghua.edu.cn/apache/zookeeper/current/zookeeper-3.4.12.tar.gz
      
    3. 第三步:解压缩压缩包

      $ tar -zxvf zookeeper-3.4.12.tar.gz
      
    4. 第四步:进入Zookeeper-3.4.12目录,创建data文件夹

      $ cd zookeeper-3.4.12/
      $ mkdir data
      
    5. 第五步:进入conf目录,把zoo_sample.cfg改名为zoo.cfg

      $ cd conf/
      $ mv zoo_sample.cfg zoo.cfg
      
    6. 第六步:打开zoo.cfg,修改data属性:dataDir=/root/zookeeper-3.4.12/data

      vi zoo.cfg
      
Zookeeper服务启动
  1. 进入bin目录,启动服务

    $ ./zkServer.sh start
    
  2. 关闭服务

    $ ./zkServer.sh stop
    
  3. 查看状态

    $ ./zkServer.sh status
    

Dubbox本地 JAR包部署与安装(了解)

  1. Dubbox的jar包并没有部署到Maven的中央仓库中,大家在Maven的中央仓库中可以查找到Dubbo的最终版本是2.5.3 , 阿里巴巴解散了Dubbo团队后由当当网继续维护此项目,并改名为 Dubbox ,坐标不变,版本变更了,但是并没有提交到中央仓库。

  2. 我们现在需要手动将Dubbox的jar包安装到我的本地仓库中。

  3. 先将dubbo-2.8.4.jar包放到/data/下, 然后输入命令

    $ mvn install:install-file -Dfile=/data/dubbo-2.8.4.jar -DgroupId=com.alibaba -DartifactId=dubbo -Dversion=2.8.4 -Dpackaging=jar
    

入门小Demo

服务提供者开发
  1. 创建Maven工程(war)dubboxdemo-service,在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">
        <modelVersion>4.0.0</modelVersion>
    
        <groupId>com.huangwangxin.demo</groupId>
        <artifactId>dubboxdemo-service</artifactId>
        <version>1.0-SNAPSHOT</version>
        <packaging>war</packaging>
    
        <properties>
            <spring.version>5.0.6.RELEASE</spring.version>
            <dubbo.version>2.8.4</dubbo.version>
            <zookeeper.version>3.4.12</zookeeper.version>
        </properties>
    
        <dependencies>
    
            <!-- Spring -->
            <dependency>
                <groupId>org.springframework</groupId>
                <artifactId>spring-context</artifactId>
                <version>${spring.version}</version>
            </dependency>
            <dependency>
                <groupId>org.springframework</groupId>
                <artifactId>spring-beans</artifactId>
                <version>${spring.version}</version>
            </dependency>
            <dependency>
                <groupId>org.springframework</groupId>
                <artifactId>spring-webmvc</artifactId>
                <version>${spring.version}</version>
            </dependency>
            <dependency>
                <groupId>org.springframework</groupId>
                <artifactId>spring-jdbc</artifactId>
                <version>${spring.version}</version>
            </dependency>
            <dependency>
                <groupId>org.springframework</groupId>
                <artifactId>spring-aspects</artifactId>
                <version>${spring.version}</version>
            </dependency>
            <dependency>
                <groupId>org.springframework</groupId>
                <artifactId>spring-jms</artifactId>
                <version>${spring.version}</version>
            </dependency>
            <dependency>
                <groupId>org.springframework</groupId>
                <artifactId>spring-context-support</artifactId>
                <version>${spring.version}</version>
            </dependency>
    
            <!-- Dubbo相关 -->
            <dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>dubbo</artifactId>
                <version>${dubbo.version}</version>
            </dependency>
    
            <dependency>
                <groupId>org.apache.zookeeper</groupId>
                <artifactId>zookeeper</artifactId>
                <version>${zookeeper.version}</version>
            </dependency>
    
            <dependency>
                <groupId>com.github.sgroschupf</groupId>
                <artifactId>zkclient</artifactId>
                <version>0.1</version>
            </dependency>
            <dependency>
                <groupId>javassist</groupId>
                <artifactId>javassist</artifactId>
                <version>3.12.1.GA</version>
            </dependency>
        </dependencies>
    
        <build>
            <plugins>
                <plugin>
                    <groupId>org.apache.maven.plugins</groupId>
                    <artifactId>maven-compiler-plugin</artifactId>
                    <version>3.7.0</version>
                    <configuration>
                        <source>1.8</source>
                        <target>1.8</target>
                    </configuration>
                </plugin>
                <plugin>
                    <groupId>org.apache.tomcat.maven</groupId>
                    <artifactId>tomcat7-maven-plugin</artifactId>
                    <configuration>
                        <!-- 指定端口 -->
                        <port>8081</port>
                        <!-- 请求路径 -->
                        <path>/</path>
                    </configuration>
                </plugin>
            </plugins>
        </build>
        
    </project>
    
  2. 在工程的webapp下创建WEB-INF文件夹,创建web.xml

    这里写图片描述

    <?xml version="1.0" encoding="UTF-8"?>
    <web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee"
             xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
      http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
    
        <!-- 加载spring容器 -->
        <context-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:applicationContext*.xml</param-value>
        </context-param>
        
        <listener>
            <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
        </listener>
    
    
    </web-app>
    
  3. 创建业务接口

    1. 创建包com.huangwangxin.dubbodemo.service,用于存放业务接口

      这里写图片描述

    2. 创建接口UserService文件

      package com.huangwangxin.dubbodemo.service;
      
      /**
       * 业务接口
       *
       * @author wangxinhuang
       * @date 2018/6/20
       */
      public interface UserService {
      
          public String getName();
      }
      
      
  4. 创建实现类

    1. 创建包com.huangwangxin.dubbodemo.service,用于存放业务实现类

      这里写图片描述

    2. 创建业务实现类UserServiceImpl文件

      package com.huangwangxin.dubbodemo.service.impl;
      
      
      import com.alibaba.dubbo.config.annotation.Service;
      import com.huangwangxin.dubbodemo.service.UserService;
      
      /**
       * 业务实现类
       *
       * @author wangxinhuang
       * @date 2018/6/20
       */
      @Service
      public class UserServiceImpl implements UserService {
      
          @Override
          public String getName() {
              return "Dubbo Demo";
          }
      }
      
      
    3. 注意,此处Service注解使用的是com.alibaba.dubbo包

  5. 编写配置文件

    1. 在resource下创建application-service.xml

      这里写图片描述

    2. application-service.xml文件

      <?xml version="1.0" encoding="UTF-8"?>
      <beans xmlns="http://www.springframework.org/schema/beans"
             xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:dubbo="http://code.alibabatech.com/schema/dubbo"
             xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://code.alibabatech.com/schema/dubbo http://code.alibabatech.com/schema/dubbo/dubbo.xsd">
      
          <dubbo:application name="dubboxdemo-service" />
      
          <dubbo:registry address="zookeeper://192.168.31.144:2181" />n
          <dubbo:annotation package="com.huangwangxin.dubbodemo.service.impl" />
      
      </beans>
      
    3. 注意: dubbo:annotation用于扫描@Service注解

  6. 测试运行

    1. 新建maven命令

      这里写图片描述

    2. 运行

      这里写图片描述

服务消费者开发
  1. 创建Maven工程(war)dubboxdemo-web,在pom.xml中引入依赖,将tomca他插件的端口改为8082

    <?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.huangwangxin</groupId>
        <artifactId>dubboxdemo-web</artifactId>
        <version>1.0-SNAPSHOT</version>
        <packaging>war</packaging>
    
        <properties>
            <spring.version>5.0.6.RELEASE</spring.version>
            <dubbo.version>2.8.4</dubbo.version>
            <zookeeper.version>3.4.12</zookeeper.version>
        </properties>
    
        <dependencies>
    
            <!-- Spring -->
            <dependency>
                <groupId>org.springframework</groupId>
                <artifactId>spring-context</artifactId>
                <version>${spring.version}</version>
            </dependency>
            <dependency>
                <groupId>org.springframework</groupId>
                <artifactId>spring-beans</artifactId>
                <version>${spring.version}</version>
            </dependency>
            <dependency>
                <groupId>org.springframework</groupId>
                <artifactId>spring-webmvc</artifactId>
                <version>${spring.version}</version>
            </dependency>
            <dependency>
                <groupId>org.springframework</groupId>
                <artifactId>spring-jdbc</artifactId>
                <version>${spring.version}</version>
            </dependency>
            <dependency>
                <groupId>org.springframework</groupId>
                <artifactId>spring-aspects</artifactId>
                <version>${spring.version}</version>
            </dependency>
            <dependency>
                <groupId>org.springframework</groupId>
                <artifactId>spring-jms</artifactId>
                <version>${spring.version}</version>
            </dependency>
            <dependency>
                <groupId>org.springframework</groupId>
                <artifactId>spring-context-support</artifactId>
                <version>${spring.version}</version>
            </dependency>
    
            <!-- Dubbo相关 -->
            <dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>dubbo</artifactId>
                <version>${dubbo.version}</version>
            </dependency>
    
            <dependency>
                <groupId>org.apache.zookeeper</groupId>
                <artifactId>zookeeper</artifactId>
                <version>${zookeeper.version}</version>
            </dependency>
    
            <dependency>
                <groupId>com.github.sgroschupf</groupId>
                <artifactId>zkclient</artifactId>
                <version>0.1</version>
            </dependency>
            <dependency>
                <groupId>javassist</groupId>
                <artifactId>javassist</artifactId>
                <version>3.12.1.GA</version>
            </dependency>
        </dependencies>
    
        <build>
            <plugins>
                <plugin>
                    <groupId>org.apache.maven.plugins</groupId>
                    <artifactId>maven-compiler-plugin</artifactId>
                    <version>3.7.0</version>
                    <configuration>
                        <source>1.8</source>
                        <target>1.8</target>
                    </configuration>
                </plugin>
                <plugin>
                    <groupId>org.apache.tomcat.maven</groupId>
                    <artifactId>tomcat7-maven-plugin</artifactId>
                    <configuration>
                        <!-- 指定端口 -->
                        <port>8082</port>
                        <!-- 请求路径 -->
                        <path>/</path>
                    </configuration>
                </plugin>
            </plugins>
        </build>
    
    </project>
    
  2. 在工程的webapp下创建WEB-INF文件夹,创建web.xml

    这里写图片描述

    <?xml version="1.0" encoding="UTF-8"?>
    <web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee"
             xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
      http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
    
        <!-- 解决post乱码 -->
        <filter>
            <filter-name>CharacterEncodingFilter</filter-name>
            <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
            <init-param>
                <param-name>encoding</param-name>
                <param-value>utf-8</param-value>
            </init-param>
            <init-param>
                <param-name>forceEncoding</param-name>
                <param-value>true</param-value>
            </init-param>
        </filter>
        <filter-mapping>
            <filter-name>CharacterEncodingFilter</filter-name>
            <url-pattern>/*</url-pattern>
        </filter-mapping>
    
        <servlet>
            <servlet-name>springmvc</servlet-name>
            <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
            <!-- 制定加载的配置文件,通过参数contextConfigLocation加载 -->
            <init-param>
                <param-name>contextConfigLocation</param-name>
                <param-value>classpath:springmvc.xml</param-value>
            </init-param>
        </servlet>
        <servlet-mapping>
            <servlet-name>springmvc</servlet-name>
            <url-pattern>*.do</url-pattern>
        </servlet-mapping>
    
    
    </web-app>
    
  3. 编写业务逻辑

    1. 拷贝com.huangwangxin.dubbodemo.service下的UserService接口文件到此工程

      这里写图片描述

    2. 创建并编写UserController文件

      package com.huangwangxin.dubbodemo.controller;
      
      import com.alibaba.dubbo.config.annotation.Reference;
      import com.huangwangxin.dubbodemo.service.UserService;
      import org.springframework.stereotype.Controller;
      import org.springframework.web.bind.annotation.RequestMapping;
      import org.springframework.web.bind.annotation.ResponseBody;
      
      /**
       * 用户
       *
       * @author wangxinhuang
       * @date 2018/6/21
       */
      @Controller
      @RequestMapping("/user")
      public class UserController {
      
          @Reference
          private UserService userService;
      
          @RequestMapping("/showName")
          @ResponseBody
          public String showName() {
              return userService.getName();
          }
      }
      
  4. 编写配置文件

    1. 在resource下创建springmvc.xml

      这里写图片描述

    2. springmvc.xml文件

      <?xml version="1.0" encoding="UTF-8"?>
      <beans xmlns="http://www.springframework.org/schema/beans"
             xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
             xmlns:context="http://www.springframework.org/schema/context"
             xmlns:dubbo="http://code.alibabatech.com/schema/dubbo" xmlns:mvc="http://www.springframework.org/schema/mvc"
             xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
              http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd
              http://code.alibabatech.com/schema/dubbo http://code.alibabatech.com/schema/dubbo/dubbo.xsd
              http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">
      
          <mvc:annotation-driven >
              <mvc:message-converters register-defaults="false">
                  <bean class="org.springframework.http.converter.StringHttpMessageConverter">
                      <constructor-arg value="UTF-8" />
                  </bean>
              </mvc:message-converters>
          </mvc:annotation-driven>
      
          <!-- 引用dubbo服务 -->
          <dubbo:application name="dubboxdemo-web" />
      
          <dubbo:registry address="zookeeper://192.168.31.144:2181" />
          <dubbo:annotation package="com.huangwangxin.dubbodemo.controller" />
      </beans>
      
  5. 测试运行

    1. 新建maven命令

      这里写图片描述

    2. 运行

      这里写图片描述

    3. 访问http://localhost:8082/user/showName.do

      这里写图片描述

管理中心的部署

  1. 在开发时,需要知道注册中心都注册了哪些服务,以便我们开发和测试,我们可以通过部署一个管理中心来实现。
管理端安装
  1. 下载并解压

    $ wget https://codeload.github.com/dangdangdotcom/dubbox/zip/dubbox-2.8.4
    $ unzip dubbox-2.8.4
    
  2. 进入dubbox-admin,输入maven命令

    $ cd dubbox-dubbox-2.8.4/dubbo-admin/
    $ mvn package -Dmaven.skip.test=true
    
    1. 编译成功

    这里写图片描述

  3. 进入target文件夹,将dubbo-admin-2.8.4.war放到tomcat的webapps下

    $ cp dubbo-admin-2.8.4.war /usr/local/tomcat/webapps/dubbo-admin.war
    # 启动tomcat
    $ /usr/local/tomcat/bin/startup.sh
    
管理端使用
  1. 打开浏览器,输入http://192.168.31.144:8081/dubbo-admin/,登录用户名和密码为root,进入首页

    这里写图片描述

品优购-框架搭建

工程结构分析与设计

这里写图片描述

  1. 工程说明
    1. pinyougou-parent 聚合工程
    2. pinyougou-pojo 通用实体类层
    3. pinyougou-dao 通用数据访问层
    4. pinyougou-xxxx-interface 某服务层接口
    5. pinyougou-xxxx-service 某服务层实现
    6. pinyougou-xxxx-web 某web工程

创建数据库表

  1. 创建pinyougoudb数据库

    这里写图片描述

  2. 执行pinyougou-db.sql

    这里写图片描述

搭建框架

父工程
  1. 创建Maven工程

    这里写图片描述

  2. 配置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">
        <modelVersion>4.0.0</modelVersion>
    
        <groupId>com.huangwangxin</groupId>
        <artifactId>pinyougou-parent</artifactId>
        <version>1.0-SNAPSHOT</version>
        <packaging>pom</packaging>
    
        <!-- 集中定义依赖版本号 -->
        <properties>
            <spring.version>5.0.6.RELEASE</spring.version>
            <dubbo.version>2.8.4</dubbo.version>
            <zookeeper.version>3.4.12</zookeeper.version>
            <junit.version>4.12</junit.version>
            <fastjson.version>1.2.47</fastjson.version>
    
            <httpclient.version>4.5.5</httpclient.version>
            <slf4j.version>1.7.25</slf4j.version>
            <mysql.version>8.0.11</mysql.version>
            <jstl.version>1.2</jstl.version>
            <jedis.version>2.9.0</jedis.version>
            <solrj.version>7.3.0</solrj.version>
    
            <commons-lang3.version>3.7</commons-lang3.version>
            <commons-io.version>2.6</commons-io.version>
            <commons-net.version>3.6</commons-net.version>
            <commons-fileupload.version>1.3.3</commons-fileupload.version>
    
            <mybatis.version>3.4.6</mybatis.version>
            <mybatis-spring.version>1.3.2</mybatis-spring.version>
            <mybatis-paginator.version>1.2.17</mybatis-paginator.version>
            <pagehelper.version>5.1.4</pagehelper.version>
            <druid.version>1.1.10</druid.version>
            <servlet-api.version>4.0.1</servlet-api.version>
            <jsp-api.version>2.3.1</jsp-api.version>
            <freemarker.version>2.3.28</freemarker.version>
            <activemq.version>5.15.3</activemq.version>
            <ik.version>2012_u6</ik.version>
        </properties>
    
        <dependencyManagement>
            <dependencies>
    
                <!-- Spring -->
                <dependency>
                    <groupId>org.springframework</groupId>
                    <artifactId>spring-context</artifactId>
                    <version>${spring.version}</version>
                </dependency>
                <dependency>
                    <groupId>org.springframework</groupId>
                    <artifactId>spring-beans</artifactId>
                    <version>${spring.version}</version>
                </dependency>
                <dependency>
                    <groupId>org.springframework</groupId>
                    <artifactId>spring-webmvc</artifactId>
                    <version>${spring.version}</version>
                </dependency>
                <dependency>
                    <groupId>org.springframework</groupId>
                    <artifactId>spring-jdbc</artifactId>
                    <version>${spring.version}</version>
                </dependency>
                <dependency>
                    <groupId>org.springframework</groupId>
                    <artifactId>spring-aspects</artifactId>
                    <version>${spring.version}</version>
                </dependency>
                <dependency>
                    <groupId>org.springframework</groupId>
                    <artifactId>spring-jms</artifactId>
                    <version>${spring.version}</version>
                </dependency>
                <dependency>
                    <groupId>org.springframework</groupId>
                    <artifactId>spring-context-support</artifactId>
                    <version>${spring.version}</version>
                </dependency>
                <dependency>
                    <groupId>org.springframework</groupId>
                    <artifactId>spring-test</artifactId>
                    <version>${spring.version}</version>
                </dependency>
    
                <!-- Dubbo相关 -->
                <dependency>
                    <groupId>com.alibaba</groupId>
                    <artifactId>dubbo</artifactId>
                    <version>${dubbo.version}</version>
                </dependency>
                <dependency>
                    <groupId>com.alibaba</groupId>
                    <artifactId>fastjson</artifactId>
                    <version>${fastjson.version}</version>
                </dependency>
                <dependency>
                    <groupId>org.apache.zookeeper</groupId>
                    <artifactId>zookeeper</artifactId>
                    <version>${zookeeper.version}</version>
                </dependency>
                <dependency>
                    <groupId>com.github.sgroschupf</groupId>
                    <artifactId>zkclient</artifactId>
                    <version>0.1</version>
                </dependency>
                <dependency>
                    <groupId>junit</groupId>
                    <artifactId>junit</artifactId>
                    <version>${junit.version}</version>
                </dependency>
                <dependency>
                    <groupId>javassist</groupId>
                    <artifactId>javassist</artifactId>
                    <version>3.12.1.GA</version>
                </dependency>
    
                <dependency>
                    <groupId>commons-codec</groupId>
                    <artifactId>commons-codec</artifactId>
                    <version>1.10</version>
                </dependency>
                <dependency>
                    <groupId>javax.servlet</groupId>
                    <artifactId>servlet-api</artifactId>
                    <version>2.5</version>
                    <scope>provided</scope>
                </dependency>
                <dependency>
                    <groupId>com.github.pagehelper</groupId>
                    <artifactId>pagehelper</artifactId>
                    <version>${pagehelper.version}</version>
                </dependency>
                <!-- Mybatis -->
                <dependency>
                    <groupId>org.mybatis</groupId>
                    <artifactId>mybatis</artifactId>
                    <version>${mybatis.version}</version>
                </dependency>
                <dependency>
                    <groupId>org.mybatis</groupId>
                    <artifactId>mybatis-spring</artifactId>
                    <version>${mybatis-spring.version}</version>
                </dependency>
                <dependency>
                    <groupId>com.github.miemiedev</groupId>
                    <artifactId>mybatis-paginator</artifactId>
                    <version>${mybatis-paginator.version}</version>
                </dependency>
                <!-- MySql -->
                <dependency>
                    <groupId>mysql</groupId>
                    <artifactId>mysql-connector-java</artifactId>
                    <version>${mysql.version}</version>
                </dependency>
                <!-- 连接池 -->
                <dependency>
                    <groupId>com.alibaba</groupId>
                    <artifactId>druid</artifactId>
                    <version>${druid.version}</version>
                </dependency>
                <dependency>
                    <groupId>org.csource.fastdfs</groupId>
                    <artifactId>fastdfs</artifactId>
                    <version>1.2</version>
                </dependency>
                <!-- 文件上传组件 -->
                <dependency>
                    <groupId>commons-fileupload</groupId>
                    <artifactId>commons-fileupload</artifactId>
                    <version>${commons-fileupload.version}</version>
                </dependency>
                <!-- 缓存 -->
                <dependency>
                    <groupId>redis.clients</groupId>
                    <artifactId>jedis</artifactId>
                    <version>${jedis.version}</version>
                </dependency>
                <dependency>
                    <groupId>org.springframework.data</groupId>
                    <artifactId>spring-data-redis</artifactId>
                    <version>2.0.7.RELEASE</version>
                </dependency>
                <dependency>
                    <groupId>org.freemarker</groupId>
                    <artifactId>freemarker</artifactId>
                    <version>${freemarker.version}</version>
                </dependency>
                <dependency>
                    <groupId>org.apache.activemq</groupId>
                    <artifactId>activemq-all</artifactId>
                    <version>${activemq.version}</version>
                </dependency>
                <!-- 身份验证 -->
                <dependency>
                    <groupId>org.springframework.security</groupId>
                    <artifactId>spring-security-web</artifactId>
                    <version>${spring.version}</version>
                </dependency>
                <dependency>
                    <groupId>org.springframework.security</groupId>
                    <artifactId>spring-security-config</artifactId>
                    <version>${spring.version}</version>
                </dependency>
                <dependency>
                    <groupId>com.github.penggle</groupId>
                    <artifactId>kaptcha</artifactId>
                    <version>2.3.2</version>
                    <exclusions>
                        <exclusion>
                            <groupId>javax.servlet</groupId>
                            <artifactId>javax.servlet-api</artifactId>
                        </exclusion>
                    </exclusions>
                </dependency>
                <dependency>
                    <groupId>org.springframework.security</groupId>
                    <artifactId>spring-security-cas</artifactId>
                    <version>${spring.version}</version>
                </dependency>
                <dependency>
                    <groupId>org.jasig.cas.client</groupId>
                    <artifactId>cas-client-core</artifactId>
                    <version>3.5.0</version>
                    <!-- 排除log4j包冲突 -->
                    <exclusions>
                        <exclusion>
                            <groupId>org.slf4j</groupId>
                            <artifactId>log4j-over-slf4j</artifactId>
                        </exclusion>
                    </exclusions>
                </dependency>
                <!-- solr客户端 -->
                <dependency>
                    <groupId>org.apache.solr</groupId>
                    <artifactId>solr-solrj</artifactId>
                    <version>${solrj.version}</version>
                </dependency>
                <dependency>
                    <groupId>com.janeluo</groupId>
                    <artifactId>ikanalyzer</artifactId>
                    <version>${ik.version}</version>
                </dependency>
                <dependency>
                    <groupId>org.apache.httpcomponents</groupId>
                    <artifactId>httpcore</artifactId>
                    <version>4.4.9</version>
                </dependency>
                <dependency>
                    <groupId>org.apache.httpcomponents</groupId>
                    <artifactId>httpclient</artifactId>
                    <version>${httpclient.version}</version>
                </dependency>
                <dependency>
                    <groupId>dom4j</groupId>
                    <artifactId>dom4j</artifactId>
                    <version>1.6.1</version>
                </dependency>
                <dependency>
                    <groupId>xml-apis</groupId>
                    <artifactId>xml-apis</artifactId>
                    <version>2.0.2</version>
                </dependency>
    
            </dependencies>
        </dependencyManagement>
    
    
        <build>
            <plugins>
                <!--java编译插件-->
                <plugin>
                    <groupId>org.apache.maven.plugins</groupId>
                    <artifactId>maven-compiler-plugin</artifactId>
                    <version>3.7.0</version>
                    <configuration>
                        <source>1.8</source>
                        <target>1.8</target>
                        <encoding>utf-8</encoding>
                    </configuration>
                </plugin>
            </plugins>
        </build>
    
    
    </project>
    
创建子模块
  1. 创建子模块

    1. 通用实体类模块 pinyougou-pojo
    2. 数据访问模块 pinyougou-dao
    3. 通用工具类模块 pinyougou-common
    4. 商家商品服务接口模块 pinyougou-sellergoods-interface
    5. 商家商品服务模块 pinyougou-sellergoods-service
    6. 运营商管理后台 pinyougou-manager-web
    7. 商家管理后台 pinyougou-shop-web

    这里写图片描述

  2. 数据访问层模块(pinyougou-dao)

    1. 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>pinyougou-parent</artifactId>
            <groupId>com.huangwangxin</groupId>
            <version>1.0-SNAPSHOT</version>
        </parent>
        <modelVersion>4.0.0</modelVersion>
    
        <artifactId>pinyougou-dao</artifactId>
        <packaging>jar</packaging>
    
        <dependencies>
    
            <dependency>
                <groupId>com.huangwangxin</groupId>
                <artifactId>pinyougou-pojo</artifactId>
                <version>1.0-SNAPSHOT</version>
            </dependency>
    
            <!-- Mybatis -->
            <dependency>
                <groupId>org.mybatis</groupId>
                <artifactId>mybatis</artifactId>
            </dependency>
            <dependency>
                <groupId>org.mybatis</groupId>
                <artifactId>mybatis-spring</artifactId>
            </dependency>
            <dependency>
                <groupId>com.github.miemiedev</groupId>
                <artifactId>mybatis-paginator</artifactId>
            </dependency>
            <!-- MySql -->
            <dependency>
                <groupId>mysql</groupId>
                <artifactId>mysql-connector-java</artifactId>
            </dependency>
            <!-- 连接池 -->
            <dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>druid</artifactId>
            </dependency>
        </dependencies>
    </project>
    
    1. 创建相关文件

      1. resources/mybatis/mybatis-config.xml
      2. resources/properties/db.properties
      3. resources/spring/applicationContext-dao.xml

      这里写图片描述

    2. mybatis-config.xml

      <?xml version="1.0" encoding="UTF-8" ?>
      <!DOCTYPE configuration
              PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
              "http://mybatis.org/dtd/mybatis-3-config.dtd">
      <configuration>
          <!-- 配置分页插件 -->
          <plugins>
              <plugin interceptor="com.github.pagehelper.PageInterceptor"/>
          </plugins>
      </configuration>
      
    3. db.properties

      jdbc.driver=com.mysql.jdbc.Driver
      jdbc.url=jdbc:mysql://localhost:3306/pinyougoudb?characterEncoding=utf-8
      jdbc.username=root
      jdbc.password=wangxin
      
    4. applicationContext-dao.xml

      <?xml version="1.0" encoding="UTF-8"?>
      <beans xmlns="http://www.springframework.org/schema/beans"
             xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xmlns:context="http://www.springframework.org/schema/context"
             xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">
      
          <!-- 数据库连接池 -->
          <!-- 加载配置文件 -->
          <context:property-placeholder location="classpath:properties/*.properties"/>
      
          <!-- 数据库连接池 -->
          <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource" destroy-method="close">
              <property name="url" value="${jdbc.url}"/>
              <property name="username" value="${jdbc.username}"/>
              <property name="password" value="${jdbc.password}"/>
              <property name="driverClassName" value="${jdbc.driver}"/>
              <!-- 连接池最大使用连接数量 -->
              <property name="maxActive" value="20"/>
              <property name="minIdle" value="5"/>
          </bean>
      
          <!-- 配置sqlsessionFactory -->
          <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
              <!-- 加载mybatis的全局配置文件 -->
              <property name="configLocation" value="classpath:mybatis/mybatis-config.xml"/>
              <!-- 数据库连接池 -->
              <property name="dataSource" ref="dataSource" />
          </bean>
      
          <!-- 配置扫描包,加载mapper代理对象 -->
          <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
              <property name="basePackage" value="com.huangwangxin.mapper"/>
          </bean>
      
      </beans>
      
  3. 商家商品服务接口模块(pinyougou-sellergoods-interface)的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>pinyougou-parent</artifactId>
            <groupId>com.huangwangxin</groupId>
            <version>1.0-SNAPSHOT</version>
        </parent>
        <modelVersion>4.0.0</modelVersion>
    
        <artifactId>pinyougou-sellergoods-interface</artifactId>
        <packaging>jar</packaging>
    
        <dependencies>
            <dependency>
                <groupId>com.huangwangxin</groupId>
                <artifactId>pinyougou-pojo</artifactId>
                <version>1.0-SNAPSHOT</version>
            </dependency>
        </dependencies>
    </project>
    
  4. 配置商家商品服务模块(pinyougou-sellergoods-service

    1. 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>pinyougou-parent</artifactId>
              <groupId>com.huangwangxin</groupId>
              <version>1.0-SNAPSHOT</version>
          </parent>
          <modelVersion>4.0.0</modelVersion>
      
          <artifactId>pinyougou-sellergoods-service</artifactId>
          <packaging>war</packaging>
      
          <dependencies>
      
              <dependency>
                  <groupId>com.huangwangxin</groupId>
                  <artifactId>pinyougou-common</artifactId>
                  <version>1.0-SNAPSHOT</version>
              </dependency>
      
              <dependency>
                  <groupId>com.huangwangxin</groupId>
                  <artifactId>pinyougou-dao</artifactId>
                  <version>1.0-SNAPSHOT</version>
              </dependency>
      
              <dependency>
                  <groupId>com.huangwangxin</groupId>
                  <artifactId>pinyougou-sellergoods-interface</artifactId>
                  <version>1.0-SNAPSHOT</version>
              </dependency>
      
      
              <!-- Spring -->
              <dependency>
                  <groupId>org.springframework</groupId>
                  <artifactId>spring-context</artifactId>
              </dependency>
              <dependency>
                  <groupId>org.springframework</groupId>
                  <artifactId>spring-beans</artifactId>
              </dependency>
              <dependency>
                  <groupId>org.springframework</groupId>
                  <artifactId>spring-webmvc</artifactId>
              </dependency>
              <dependency>
                  <groupId>org.springframework</groupId>
                  <artifactId>spring-jdbc</artifactId>
              </dependency>
              <dependency>
                  <groupId>org.springframework</groupId>
                  <artifactId>spring-aspects</artifactId>
              </dependency>
              <dependency>
                  <groupId>org.springframework</groupId>
                  <artifactId>spring-jms</artifactId>
              </dependency>
              <dependency>
                  <groupId>org.springframework</groupId>
                  <artifactId>spring-context-support</artifactId>
              </dependency>
              <dependency>
                  <groupId>org.springframework</groupId>
                  <artifactId>spring-test</artifactId>
              </dependency>
      
              <!-- Dubbo相关 -->
              <dependency>
                  <groupId>com.alibaba</groupId>
                  <artifactId>dubbo</artifactId>
              </dependency>
              <dependency>
                  <groupId>com.alibaba</groupId>
                  <artifactId>fastjson</artifactId>
              </dependency>
              <dependency>
                  <groupId>org.apache.zookeeper</groupId>
                  <artifactId>zookeeper</artifactId>
              </dependency>
              <dependency>
                  <groupId>com.github.sgroschupf</groupId>
                  <artifactId>zkclient</artifactId>
              </dependency>
              <dependency>
                  <groupId>junit</groupId>
                  <artifactId>junit</artifactId>
              </dependency>
      
              <dependency>
                  <groupId>javassist</groupId>
                  <artifactId>javassist</artifactId>
              </dependency>
      
              <dependency>
                  <groupId>commons-codec</groupId>
                  <artifactId>commons-codec</artifactId>
              </dependency>
              <dependency>
                  <groupId>javax.servlet</groupId>
                  <artifactId>servlet-api</artifactId>
                  <scope>provided</scope>
              </dependency>
      
          </dependencies>
      
          <build>
              <plugins>
                  <!-- 配置Tomcat插件-->
                  <plugin>
                      <groupId>org.apache.tomcat.maven</groupId>
                      <artifactId>tomcat7-maven-plugin</artifactId>
                      <configuration>
                          <path>/</path>
                          <port>9001</port>
                      </configuration>
                  </plugin>
              </plugins>
          </build>
      
      </project>
      
    2. 创建相关文件

      1. 包com.huangwangxin.sellergoods.service.impl
      2. resources/spring/applicationContext-service.xml
      3. webapp/WEB-INF/web.xml
    3. applicationContext-service.xml

      <?xml version="1.0" encoding="UTF-8"?>
      <beans xmlns="http://www.springframework.org/schema/beans"
             xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:dubbo="http://code.alibabatech.com/schema/dubbo"
             xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://code.alibabatech.com/schema/dubbo http://code.alibabatech.com/schema/dubbo/dubbo.xsd">
          <dubbo:protocol name="dubbo" port="20881"></dubbo:protocol>
          <dubbo:application name="pinyougou-sellergoods-service" />
      
          <dubbo:registry protocol="zookeeper" address="192.168.31.144:2181" />
          <dubbo:annotation package="com.huangwangxin.sellergoods.service.impl" />
      
      </beans>
      
    4. web.xml

      <?xml version="1.0" encoding="UTF-8"?>
      <web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee"
               xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
               xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
        http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
      
          <!-- 加载spring容器 -->
          <context-param>
              <param-name>contextConfigLocation</param-name>
              <param-value>classpath*:spring/applicationContext-*.xml</param-value>
          </context-param>
      
          <listener>
              <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
          </listener>
      
      </web-app>
      
  5. 配置运营商管理后台 (pinyougou-manager-web

    1. 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>pinyougou-parent</artifactId>
              <groupId>com.huangwangxin</groupId>
              <version>1.0-SNAPSHOT</version>
          </parent>
          <modelVersion>4.0.0</modelVersion>
      
          <artifactId>pinyougou-manager-web</artifactId>
          <packaging>war</packaging>
      
          <dependencies>
              <dependency>
                  <groupId>com.huangwangxin</groupId>
                  <artifactId>pinyougou-common</artifactId>
                  <version>1.0-SNAPSHOT</version>
              </dependency>
      
              <dependency>
                  <groupId>com.huangwangxin</groupId>
                  <artifactId>pinyougou-sellergoods-interface</artifactId>
                  <version>1.0-SNAPSHOT</version>
              </dependency>
      
      
              <!-- Spring -->
              <dependency>
                  <groupId>org.springframework</groupId>
                  <artifactId>spring-context</artifactId>
              </dependency>
              <dependency>
                  <groupId>org.springframework</groupId>
                  <artifactId>spring-beans</artifactId>
              </dependency>
              <dependency>
                  <groupId>org.springframework</groupId>
                  <artifactId>spring-webmvc</artifactId>
              </dependency>
              <dependency>
                  <groupId>org.springframework</groupId>
                  <artifactId>spring-jdbc</artifactId>
              </dependency>
              <dependency>
                  <groupId>org.springframework</groupId>
                  <artifactId>spring-aspects</artifactId>
              </dependency>
              <dependency>
                  <groupId>org.springframework</groupId>
                  <artifactId>spring-jms</artifactId>
              </dependency>
              <dependency>
                  <groupId>org.springframework</groupId>
                  <artifactId>spring-context-support</artifactId>
              </dependency>
              <dependency>
                  <groupId>org.springframework</groupId>
                  <artifactId>spring-test</artifactId>
              </dependency>
      
              <!-- Dubbo相关 -->
              <dependency>
                  <groupId>com.alibaba</groupId>
                  <artifactId>dubbo</artifactId>
              </dependency>
              <dependency>
                  <groupId>com.alibaba</groupId>
                  <artifactId>fastjson</artifactId>
              </dependency>
              <dependency>
                  <groupId>org.apache.zookeeper</groupId>
                  <artifactId>zookeeper</artifactId>
              </dependency>
              <dependency>
                  <groupId>com.github.sgroschupf</groupId>
                  <artifactId>zkclient</artifactId>
              </dependency>
              <dependency>
                  <groupId>junit</groupId>
                  <artifactId>junit</artifactId>
              </dependency>
      
              <dependency>
                  <groupId>javassist</groupId>
                  <artifactId>javassist</artifactId>
              </dependency>
      
              <dependency>
                  <groupId>commons-codec</groupId>
                  <artifactId>commons-codec</artifactId>
              </dependency>
              <dependency>
                  <groupId>javax.servlet</groupId>
                  <artifactId>servlet-api</artifactId>
                  <scope>provided</scope>
              </dependency>
          </dependencies>
      
          <build>
              <plugins>
                  <!-- 配置Tomcat插件-->
                  <plugin>
                      <groupId>org.apache.tomcat.maven</groupId>
                      <artifactId>tomcat7-maven-plugin</artifactId>
                      <configuration>
                          <path>/</path>
                          <port>9101</port>
                      </configuration>
                  </plugin>
              </plugins>
          </build>
      
      </project>
      
    2. 创建相关文件

      1. 包com.huangwangxin.manager.controller
      2. resources/spring/springmvc.xml
      3. webapp/WEB-INF/web.xml
      4. resources/config/application.properties
    3. springmvc.xml

      <?xml version="1.0" encoding="UTF-8"?>
      <beans xmlns="http://www.springframework.org/schema/beans"
             xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
             xmlns:context="http://www.springframework.org/schema/context"
             xmlns:dubbo="http://code.alibabatech.com/schema/dubbo" xmlns:mvc="http://www.springframework.org/schema/mvc"
             xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
              http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd
              http://code.alibabatech.com/schema/dubbo http://code.alibabatech.com/schema/dubbo/dubbo.xsd
              http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">
          <context:property-placeholder location="classpath:config/application.properties" />
      
          <mvc:annotation-driven >
              <mvc:message-converters register-defaults="true">
                  <bean class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter">
                      <property name="supportedMediaTypes" value="application/json"/>
                      <property name="features">
                          <array>
                              <value>WriteMapNullValue</value>
                              <value>WriteDateUseDateFormat</value>
                          </array>
                      </property>
                  </bean>
              </mvc:message-converters>
          </mvc:annotation-driven>
      
          <!-- 引用dubbo服务 -->
          <dubbo:application name="pinyougou-manager-web" />
      
          <dubbo:registry address="zookeeper://192.168.31.144:2181" />
          <dubbo:annotation package="com.huangwangxin.manager.controller" />
      </beans>
      
    4. web.xml

      <?xml version="1.0" encoding="UTF-8"?>
      <web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee"
               xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
               xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
        http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
      
      
          <!-- 解决post乱码 -->
          <filter>
              <filter-name>CharacterEncodingFilter</filter-name>
              <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
              <init-param>
                  <param-name>encoding</param-name>
                  <param-value>utf-8</param-value>
              </init-param>
              <init-param>
                  <param-name>forceEncoding</param-name>
                  <param-value>true</param-value>
              </init-param>
          </filter>
      
          <filter-mapping>
              <filter-name>CharacterEncodingFilter</filter-name>
              <url-pattern>/*</url-pattern>
          </filter-mapping>
      
          <servlet>
              <servlet-name>springmvc</servlet-name>
              <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
              <!-- 指定加载的配置文件,通过contextConfigLocation加载 -->
              <init-param>
                  <param-name>contextConfigLocation</param-name>
                  <param-value>classpath:spring/springmvc.xml</param-value>
              </init-param>
          </servlet>
      
          <servlet-mapping>
              <servlet-name>springmvc</servlet-name>
              <url-pattern>*.do</url-pattern>
          </servlet-mapping>
      
      </web-app>
      
  6. 配置商家管理后台(pinyougou-shop-web

    1. 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>pinyougou-parent</artifactId>
              <groupId>com.huangwangxin</groupId>
              <version>1.0-SNAPSHOT</version>
          </parent>
          <modelVersion>4.0.0</modelVersion>
      
          <artifactId>pinyougou-shop-web</artifactId>
          <packaging>war</packaging>
      
          <dependencies>
              <dependency>
                  <groupId>com.huangwangxin</groupId>
                  <artifactId>pinyougou-common</artifactId>
                  <version>1.0-SNAPSHOT</version>
              </dependency>
      
              <dependency>
                  <groupId>com.huangwangxin</groupId>
                  <artifactId>pinyougou-sellergoods-interface</artifactId>
                  <version>1.0-SNAPSHOT</version>
              </dependency>
      
      
              <!-- Spring -->
              <dependency>
                  <groupId>org.springframework</groupId>
                  <artifactId>spring-context</artifactId>
              </dependency>
              <dependency>
                  <groupId>org.springframework</groupId>
                  <artifactId>spring-beans</artifactId>
              </dependency>
              <dependency>
                  <groupId>org.springframework</groupId>
                  <artifactId>spring-webmvc</artifactId>
              </dependency>
              <dependency>
                  <groupId>org.springframework</groupId>
                  <artifactId>spring-jdbc</artifactId>
              </dependency>
              <dependency>
                  <groupId>org.springframework</groupId>
                  <artifactId>spring-aspects</artifactId>
              </dependency>
              <dependency>
                  <groupId>org.springframework</groupId>
                  <artifactId>spring-jms</artifactId>
              </dependency>
              <dependency>
                  <groupId>org.springframework</groupId>
                  <artifactId>spring-context-support</artifactId>
              </dependency>
              <dependency>
                  <groupId>org.springframework</groupId>
                  <artifactId>spring-test</artifactId>
              </dependency>
      
              <!-- Dubbo相关 -->
              <dependency>
                  <groupId>com.alibaba</groupId>
                  <artifactId>dubbo</artifactId>
              </dependency>
              <dependency>
                  <groupId>com.alibaba</groupId>
                  <artifactId>fastjson</artifactId>
              </dependency>
              <dependency>
                  <groupId>org.apache.zookeeper</groupId>
                  <artifactId>zookeeper</artifactId>
              </dependency>
              <dependency>
                  <groupId>com.github.sgroschupf</groupId>
                  <artifactId>zkclient</artifactId>
              </dependency>
              <dependency>
                  <groupId>junit</groupId>
                  <artifactId>junit</artifactId>
              </dependency>
      
              <dependency>
                  <groupId>javassist</groupId>
                  <artifactId>javassist</artifactId>
              </dependency>
      
              <dependency>
                  <groupId>commons-codec</groupId>
                  <artifactId>commons-codec</artifactId>
              </dependency>
              <dependency>
                  <groupId>javax.servlet</groupId>
                  <artifactId>servlet-api</artifactId>
                  <scope>provided</scope>
              </dependency>
          </dependencies>
      
          <build>
              <plugins>
                  <!-- 配置Tomcat插件-->
                  <plugin>
                      <groupId>org.apache.tomcat.maven</groupId>
                      <artifactId>tomcat7-maven-plugin</artifactId>
                      <configuration>
                          <path>/</path>
                          <port>9102</port>
                      </configuration>
                  </plugin>
              </plugins>
          </build>
      
      </project>
      
    2. 创建相关文件

      1. 包com.huangwangxin.shop.controller
      2. resources/spring/springmvc.xml
      3. webapp/WEB-INF/web.xml
      4. resources/config/application.properties
    3. springmvc.xml

      <?xml version="1.0" encoding="UTF-8"?>
      <beans xmlns="http://www.springframework.org/schema/beans"
             xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
             xmlns:context="http://www.springframework.org/schema/context"
             xmlns:dubbo="http://code.alibabatech.com/schema/dubbo" xmlns:mvc="http://www.springframework.org/schema/mvc"
             xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
              http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd
              http://code.alibabatech.com/schema/dubbo http://code.alibabatech.com/schema/dubbo/dubbo.xsd
              http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">
          <context:property-placeholder location="classpath:config/application.properties" />
      
          <mvc:annotation-driven >
              <mvc:message-converters register-defaults="true">
                  <bean class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter">
                      <property name="supportedMediaTypes" value="application/json"/>
                      <property name="features">
                          <array>
                              <value>WriteMapNullValue</value>
                              <value>WriteDateUseDateFormat</value>
                          </array>
                      </property>
                  </bean>
              </mvc:message-converters>
          </mvc:annotation-driven>
      
          <!-- 引用dubbo服务 -->
          <dubbo:application name="pinyougou-shop-web" />
      
          <dubbo:registry address="zookeeper://192.168.31.144:2181" />
          <dubbo:annotation package="com.huangwangxin.shop.controller" />
      </beans>
      
    4. web.xml

      <?xml version="1.0" encoding="UTF-8"?>
      <web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee"
               xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
               xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
        http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
      
      
          <!-- 解决post乱码 -->
          <filter>
              <filter-name>CharacterEncodingFilter</filter-name>
              <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
              <init-param>
                  <param-name>encoding</param-name>
                  <param-value>utf-8</param-value>
              </init-param>
              <init-param>
                  <param-name>forceEncoding</param-name>
                  <param-value>true</param-value>
              </init-param>
          </filter>
      
          <filter-mapping>
              <filter-name>CharacterEncodingFilter</filter-name>
              <url-pattern>/*</url-pattern>
          </filter-mapping>
      
          <servlet>
              <servlet-name>springmvc</servlet-name>
              <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
              <!-- 指定加载的配置文件,通过contextConfigLocation加载 -->
              <init-param>
                  <param-name>contextConfigLocation</param-name>
                  <param-value>classpath:spring/springmvc.xml</param-value>
              </init-param>
          </servlet>
      
          <servlet-mapping>
              <servlet-name>springmvc</servlet-name>
              <url-pattern>*.do</url-pattern>
          </servlet-mapping>
      
      </web-app>
      

实体类与数据访问层模块

生成代码
  1. 利用逆向工程实现实体类和数据访问层代码自动生成
拷贝代码
  1. 将com.huangwangxin.pojo拷贝到pojo工程
  2. 将com.huangwangxin.mapper包和resource的com.huangwangxin.mapper文件夹下拷贝dao工程
修改实体类代码
  1. 修改每个实体类,实现Serializable接口

    public class TbUser implements Serializable
    

品牌列表-后端代码

需求分析

  1. 完成品牌管理的后端代码, 在浏览器可查询品牌的数据(json格式)

数据库表

tb_brand 品牌表
字段类型长度含义
IdBigint主键
NameVarchar255品牌名称
First_charVarchar1品牌首字母

后端代码

服务层接口
  1. 在pinyougou-sellergoods-interface工程创建BrandService接口

    package com.huangwangxin.service;
    
    import com.huangwangxin.pojo.TbBrand;
    
    import java.util.List;
    
    /**
     * 品牌服务层接口
     *
     * @author wangxinhuang
     * @date 2018/6/27
     */
    public interface BrandService {
    
        /**
         * 返回全部列表
         * */
        public List<TbBrand> findAll();
    }
    
    
服务实现类
  1. 在pinyougou-sellergoods-service工程创建BrandServiceImpl

    package com.huangwangxin.sellergoods.service.impl;
    
    import com.alibaba.dubbo.config.annotation.Service;
    import com.huangwangxin.mapper.TbBrandMapper;
    import com.huangwangxin.pojo.TbBrand;
    import com.huangwangxin.service.BrandService;
    import org.springframework.beans.factory.annotation.Autowired;
    
    import java.util.List;
    
    /**
     * 品牌服务实现
     *
     * @author wangxinhuang
     * @date 2018/6/27
     */
    @Service
    public class BrandServiceImpl implements BrandService {
    
        @Autowired
        private TbBrandMapper brandMapper;
    
        @Override
        public List<TbBrand> findAll() {
    
            return brandMapper.selectByExample(null);
        }
    }
    
    
控制层
  1. 在pinyougou-manager-web创建BrandController类

    package com.huangwangxin.manager.controller;
    
    import com.alibaba.dubbo.config.annotation.Reference;
    import com.huangwangxin.pojo.TbBrand;
    import com.huangwangxin.service.BrandService;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    
    import java.util.List;
    
    /**
     * 品牌
     *
     * @author wangxinhuang
     * @date 2018/6/27
     */
    @RestController
    @RequestMapping("/brand")
    public class BrandController {
    
        @Reference
        private BrandService brandService;
    
        /**
         * 返回品牌全部列表 all list.
         *
         * @return the list
         */
        @RequestMapping("/findAll")
        public List<TbBrand> findAll() {
            return brandService.findAll();
        }
    
    }
    
    

测试

  1. 启动pinyougou-sellergoods-service
  2. 启动pinyougou-manager-web
  3. 访问http://localhost:9101/brand/findAll.do

出现的问题

  1. 运行后报错

    org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'brandServiceImpl': Unsatisfied dependency expressed through field 'brandMapper'; nested exception is org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualifying bean of type 'com.huangwangxin.mapper.TbBrandMapper' available: expected at least 1 bean which qualifies as autowire candidate. Dependency annotations: {@org.springframework.beans.factory.annotation.Autowired(required=true)}
    	at org.springframework.beans.factory.annotation.AutowiredAnnotationBeanPostProcessor$AutowiredFieldElement.inject(AutowiredAnnotationBeanPostProcessor.java:587)
    	at org.springframework.beans.factory.annotation.InjectionMetadata.inject(InjectionMetadata.java:91)
    	at org.springframework.beans.factory.annotation.AutowiredAnnotationBeanPostProcessor.postProcessPropertyValues(AutowiredAnnotationBeanPostProcessor.java:373)
    	at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.populateBean(AbstractAutowireCapableBeanFactory.java:1348)
    	at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.doCreateBean(AbstractAutowireCapableBeanFactory.java:578)
    	at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.createBean(AbstractAutowireCapableBeanFactory.java:501)
    	at org.springframework.beans.factory.support.AbstractBeanFactory.lambda$doGetBean$0(AbstractBeanFactory.java:317)
    	at org.springframework.beans.factory.support.DefaultSingletonBeanRegistry.getSingleton(DefaultSingletonBeanRegistry.java:228)
    	at org.springframework.beans.factory.support.AbstractBeanFactory.doGetBean(AbstractBeanFactory.java:315)
    	at org.springframework.beans.factory.support.AbstractBeanFactory.getBean(AbstractBeanFactory.java:199)
    	at org.springframework.beans.factory.support.DefaultListableBeanFactory.preInstantiateSingletons(DefaultListableBeanFactory.java:760)
    	at org.springframework.context.support.AbstractApplicationContext.finishBeanFactoryInitialization(AbstractApplicationContext.java:869)
    	at org.springframework.context.support.AbstractApplicationContext.refresh(AbstractApplicationContext.java:550)
    	at org.springframework.web.context.ContextLoader.configureAndRefreshWebApplicationContext(ContextLoader.java:409)
    	at org.springframework.web.context.ContextLoader.initWebApplicationContext(ContextLoader.java:291)
    	at org.springframework.web.context.ContextLoaderListener.contextInitialized(ContextLoaderListener.java:103)
    	at org.apache.catalina.core.StandardContext.listenerStart(StandardContext.java:4939)
    	at org.apache.catalina.core.StandardContext.startInternal(StandardContext.java:5434)
    	at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:150)
    	at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1559)
    	at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1549)
    	at java.base/java.util.concurrent.FutureTask.run$$$capture(FutureTask.java:264)
    	at java.base/java.util.concurrent.FutureTask.run(FutureTask.java)
    	at java.base/java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1135)
    	at java.base/java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:635)
    	at java.base/java.lang.Thread.run(Thread.java:844)
    Caused by: org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualifying bean of type 'com.huangwangxin.mapper.TbBrandMapper' available: expected at least 1 bean which qualifies as autowire candidate. Dependency annotations: {@org.springframework.beans.factory.annotation.Autowired(required=true)}
    	at org.springframework.beans.factory.support.DefaultListableBeanFactory.raiseNoMatchingBeanFound(DefaultListableBeanFactory.java:1509)
    	at org.springframework.beans.factory.support.DefaultListableBeanFactory.doResolveDependency(DefaultListableBeanFactory.java:1104)
    	at org.springframework.beans.factory.support.DefaultListableBeanFactory.resolveDependency(DefaultListableBeanFactory.java:1065)
    	at org.springframework.beans.factory.annotation.AutowiredAnnotationBeanPostProcessor$AutowiredFieldElement.inject(AutowiredAnnotationBeanPostProcessor.java:584)
    	... 25 more
    
    
  2. 原因:创建文件resources/spring/applicationContext-service.xml的时候, 文件名写成applicatinContext,缺少一个字母o,在web.xml中导入出现问题。

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
### 回答1: 根据题目要求,我会用300字来回答html静态网站基于品优购电商购物网站网页设计与实现共计3个页面的细节和流程。 品优购电商购物网站是一个非常流行的电商网站,为了设计和实现该网站的静态页面,我们可以分为三个页面:主页、商品列表页和商品详情页。 在设计主页时,我们需要包含品优购网站的logo、导航栏、搜索栏、轮播图、特色推荐商品等元素。通过HTML和CSS来布局和样式化这些元素,使主页看起来美观且用户友好。另外,我们可以使用JavaScript来实现一些交互功能,如点击导航栏跳转到相应的页面、轮播图自动切换等。 商品列表页是展示不同商品的页面。我们可以使用HTML和CSS来创建一个商品列表的结构,包括商品图片、名称、价格等信息。通过CSS来设置商品列表的样式,使它们形成一整行或一整列排列。最后,我们可以使用JavaScript来实现一些筛选和排序功能,比如根据价格、品牌或其他条件来过滤商品。 商品详情页是展示特定商品详细信息的页面。我们可以使用HTML和CSS来创建一个包含商品名称、价格、描述、图片等信息的结构。通过CSS来优化布局和样式,使商品详情页面看起来更加美观。此外,我们可以使用JavaScript来实现一些交互功能,比如选择商品数量、加入购物车等。 总结起来,在设计和实现这个静态网站的三个页面时,我们需要运用HTML、CSS和JavaScript的知识。HTML用于创建页面结构,CSS用于样式化页面,JavaScript用于实现交互功能。通过合理地运用这些技术,我们可以设计出一个美观、易用且功能齐全的品优购电商购物网站的静态网站。 ### 回答2: 品优购电商购物网站的静态网站设计与实现共计3个页面。这三个页面分别是主页、商品列表页和商品详情页。 在主页中,我们需要展示品优购电商购物网站的Logo、导航栏、轮播图和推荐商品等内容。通过HTML代码,我们可以创建一个包含这些元素的页面结构,通过CSS样式,我们可以为这些元素设置适当的样式,如颜色、字体大小和边距等。通过JavaScript,我们可以实现轮播图的自动切换、导航栏的下拉菜单以及推荐商品的动态加载等交互功能。 商品列表页显示了品优购网站的各类商品,并提供筛选和排序功能。通过HTML和CSS,我们可以创建一个商品列表的布局,并为每个商品设置适当的样式,如标题、价格和图片等。通过JavaScript,我们可以实现商品的筛选和排序功能,以及翻页和加载更多商品等交互操作。 商品详情页展示了特定商品的详细信息和购买选项。通过HTML和CSS,我们可以创建一个商品详情页面的布局,并设置适当的样式,如商品标题、图片和描述等。通过JavaScript,我们可以实现商品数量的增减、加入购物车和立即购买等交互功能。 这三个页面的设计和实现基于HTML、CSS和JavaScript技术,通过合理的页面结构、样式和交互功能,提供给用户一个良好的购物体验。 ### 回答3: 品优购是一家电商购物网站,它的网页设计与实现共计有三个页面,即首页、商品列表页和商品详情页。这些页面是基于HTML、CSS和JavaScript开发的。 1. 首页: 首页是品优购的门面,它需要简洁明了地展示品优购的特色和优势。主要包括顶部导航栏、搜索框、轮播图和商品分类展示。通过HTML和CSS来构建页面的基本结构和样式,并利用JavaScript来实现轮播图的自动切换和商品分类的展开与收起。 2. 商品列表页: 商品列表页用于展示品优购的全部商品,以供用户选择购买。该页面需要有商品的缩略图、名称、价格等基本信息,并且可以根据用户的选择进行排序和筛选。通过HTML和CSS来构建商品列表的布局和样式,并利用JavaScript来实现价格的排序和筛选功能。 3. 商品详情页: 商品详情页用于展示某个具体商品的详细信息和购买选项。该页面需要展示商品的大图、名称、价格、描述等详细信息,并提供购买按钮和数量选择框。通过HTML和CSS来构建商品详情页的布局和样式,并利用JavaScript来实现数量的增减和购买按钮的点击事件处理。 这三个页面的设计与实现需要充分考虑用户体验,确保页面的简洁、清晰和易用。同时,还需要注意网页的响应式设计,使其在不同屏幕尺寸下都能良好展示。使用HTML、CSS和JavaScript的组合可以实现丰富的网页交互效果,给用户带来良好的购物体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

黄旺鑫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值