乐优商城（二）项目构建

乐优商城前端项目分为用户端和卖家端，用户端用于浏览，购买商品；卖家端用于管理商品。运行前端项目需要有能够运行vue的环境，那么首先我们需要按以下步骤配置环境，运行项目。

• 前端项目环境准备

  1. 安装node

  • 在node.js官网上下载适合自己电脑环境的安装包，比如我下载的是windows64位的msi安装包，下载完毕后双击安装，一路next，这个没什么好说的。

  • 安装完毕之后，大家可以在控制台输入命令 node -v 查看自己是否已经安装成功。

  • node会自带npm命令，所以大家还可以输入命令 npm -v 查看npm的版本号。

    以上两步没什么问题的话，输入命令，得到的反馈应该是这样的

    

    npm默认仓库地址是在国外网站，速度会很慢，所以我们可以使用nrm工具帮我们切换到国内的镜像。OK 那我们再来装一下nrm工具

  2. 安装nrm工具

     • 在cmd窗口输入以下命令，这个安装过程比较慢，可以先去抽支烟~ 如果安装失败了，就重新输入命令多试几次，总会成功的。我就是在第三次才安装成功。

     npm install nrm -g
     

     这里安装的过程中，还可能会出现没有权限导致安装失败的问题，解决方案就是输入 sudo npm install nrm -g 也就是在上一条命令前面加上 sudo

     • 切换到taobao镜像

     nrm test taobao
     

     • 查看是否切换成功

     nrm ls
     

3. 全局安装vue-cli

   npm install -g vue-cli
   

至此，前端项目所需的环境已经准备好了。安装完成之后，记得重启一下电脑！

4. 让我们用VSCode（前端项目的话，还是推荐使用VSCode）打开项目，前端项目GitHub地址，打开之后，Ctrl + ` 快捷键打开集成终端，在终端中输入 npm run dev 命令进行编译运行。如下图

编译完成我们就可以点击终端中输出的地址进行访问，看到我们的项目了。

前端项目环境准备有点麻烦，不过都是一劳永逸的，以后启动项目只需要在终端中输入npm run dev命令就好了，而且是热加载。

• 后端项目代码导入

  1. 创建leyou工程

     pom文件

     <?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.leyou.parent</groupId>
         <artifactId>leyou</artifactId>
         <version>1.0.0-SNAPSHOT</version>
         <modules>
             <module>ly-registry</module>
             <module>ly-gateway</module>
         </modules>
         <packaging>pom</packaging>
     
         <parent>
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-starter-parent</artifactId>
             <version>2.0.5.RELEASE</version>
             <relativePath/>
         </parent>
         <properties>
             <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
             <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
             <java.version>1.8</java.version>
             <spring-cloud.version>Finchley.SR1</spring-cloud.version>
             <mapper.starter.version>2.0.3</mapper.starter.version>
             <mysql.version>5.1.32</mysql.version>
             <pageHelper.starter.version>1.2.4</pageHelper.starter.version>
             <leyou.latest.version>1.0.0-SNAPSHOT</leyou.latest.version>
             <fastDFS.client.version>1.26.1-RELEASE</fastDFS.client.version>
         </properties>
         <dependencyManagement>
             <dependencies>
                 <!--spring Cloud-->
                 <dependency>
                     <groupId>org.springframework.cloud</groupId>
                     <artifactId>spring-cloud-dependencies</artifactId>
                     <version>${spring-cloud.version}</version>
                     <type>pom</type>
                     <scope>import</scope>
                 </dependency>
                 <!-- 通用Mapper启动器 -->
                 <dependency>
                     <groupId>tk.mybatis</groupId>
                     <artifactId>mapper-spring-boot-starter</artifactId>
                     <version>2.1.5</version>
                 </dependency>
                 <!-- 分页助手启动器 -->
                 <dependency>
                     <groupId>com.github.pagehelper</groupId>
                     <artifactId>pagehelper-spring-boot-starter</artifactId>
                     <version>${pageHelper.starter.version}</version>
                 </dependency>
                 <!--mysql驱动-->
                 <dependency>
                     <groupId>mysql</groupId>
                     <artifactId>mysql-connector-java</artifactId>
                     <version>${mysql.version}</version>
                 </dependency>
                 <!--FastDFS客户端-->
                 <dependency>
                     <groupId>com.github.tobato</groupId>
                     <artifactId>fastdfs-client</artifactId>
                     <version>${fastDFS.client.version}</version>
                 </dependency>
     
             </dependencies>
         </dependencyManagement>
         <dependencies>
             <dependency>
                 <groupId>org.projectlombok</groupId>
                 <artifactId>lombok</artifactId>
             </dependency>
             <dependency>
                 <groupId>org.apache.commons</groupId>
                 <artifactId>commons-lang3</artifactId>
                 <version>3.4</version>
             </dependency>
         </dependencies>
         <build>
             <plugins>
                 <plugin>
                     <groupId>org.springframework.boot</groupId>
                     <artifactId>spring-boot-maven-plugin</artifactId>
                 </plugin>
             </plugins>
         </build>
     </project>
     

     2. leyou工程下有eureka和gateway两个模块，只是一个简单的项目骨架，下面摘出application的配置。具体代码有兴趣的去GitHub上克隆吧

        • eureka模块下application.yml文件

          server:
            port: 10086
          spring:
            application:
              name: ly-registry
          eureka:
            client:
              service-url:
                defaultZone:  http://127.0.0.1:10086/eureka
          

        • gateway模块下application.yml

          server:
            port: 10010
          spring:
            application:
              name: api-gateway
          eureka:
            client:
              service-url:
                defaultZone: http://127.0.0.1:10086/eureka
          zuul:
            prefix: /api # 添加路由前缀
          hystrix:
            command:
              default:
                execution:
                  isolation:
                    thread:
                      timeoutInMillisecond: 5000 # 熔断超时时长：10000ms
          ribbon:
            ConnectTimeout: 1000 # 连接超时时间(ms)
            ReadTimeout: 3500 # 通信超时时间(ms)
            MaxAutoRetriesNextServer: 0 # 同一服务不同实例的重试次数
            MaxAutoRetries: 0 # 同一实例的重试次数