【尚筹网】IDEA版实现（八）前台环境配置

菜比丶

已于 2022-03-11 22:54:04 修改

阅读量1.9k

点赞数 1

分类专栏：尚筹网文章标签： intellij-idea java spring cloud maven spring boot

于 2022-03-11 22:53:45 首次发布

本文链接：https://blog.csdn.net/m0_56018220/article/details/123435853

版权

尚筹网专栏收录该内容

14 篇文章 8 订阅

订阅专栏

由于尚硅谷的视频是通过Eclipse软件来做的，其中有些操作与IDEA上有所区别，所以我在这里将IDEA区别于Eclipse的操作、操作过程中涉及的源码（与视频的源码略有出入）以及大家可能遇到的种种问题分享给大家，这些源码在我这里均是通过测试的，仅供参考！

1 Modules配置

在这里插入图片描述

2 Parent工程

修改atcrowdfunding07-member-parent\pom.xml

<dependencyManagement>
    <dependencies>
        <!-- 导入SpringCloud需要使用的依赖信息 -->
        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-dependencies</artifactId>
            <version>Hoxton.SR9</version>
            <type>pom</type>
            <scope>import</scope>
        </dependency>
        <!-- 导入 SpringBoot 需要使用的依赖信息 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-dependencies</artifactId>
            <version>2.3.8.RELEASE</version>
            <type>pom</type>
            <scope>import</scope>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.3</version>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.2.4</version>
        </dependency>
    </dependencies>
</dependencyManagement>

3 Eureka工程

3.1 Pom配置

修改eureka\pom.xml

<dependencies>
        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-netflix-eureka-server</artifactId>
        </dependency>
    </dependencies>

3.2 主启动类

新建eureka\src\main\java\com\atguigu\crowd\CrowdMainClass.java

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.cloud.netflix.eureka.server.EnableEurekaServer;

@EnableEurekaServer
@SpringBootApplication
public class CrowdMainClass {

    public static void main(String[] args) {
        SpringApplication.run(CrowdMainClass.class, args);
    }
}

3.3 Application

新建eureka\src\main\resources\application.yml

server:
  port: 1000

spring:
  application:
    name: atguigu-crowd-eureka

eureka:
  instance:
    hostname: localhost
  client:
    register-with-eureka: false
    fetch-registry: false
    service-url:
      defaultZone: https://${eureka.instance.hostname}:${server.port}/eureka

注意：yml文件没有{}，一定要注意换行及缩进

3.4 测试

运行主启动类，在浏览器进入http://localhost:1000/

在这里插入图片描述

4 Entity工程

新建atcrowdfunding09-member-entity\src\main\java\com\atguigu\crowd\entity\po以及atcrowdfunding09-member-entity\src\main\java\com\atguigu\crowd\entity\vo

5 MySQL工程

5.1 配置数据库表

在SQLyog中新建t_member表：

CREATE TABLE t_member(
    id              INT(11) NOT NULL AUTO_INCREMENT,
    loginacct       VARCHAR(255) NOT NULL,
    userpswd        CHAR(200) NOT NULL ,
    username        VARCHAR(255),
    email           VARCHAR(255),
    authstatus      INT(4) COMMENT '实名认证状态 0 - 未实名认证，1 - 实名认证申请中，2 - 已实名认证',
    usertype        INT(4) COMMENT '0 - 个人，1 - 企业',
    realname        VARCHAR(255),
    cardnum         VARCHAR(255),
    accttype        INT(4) COMMENT '0 - 企业，1 - 个体，2 - 个人，3 - 政府',
    PRIMARY KEY (id)
);

5.2 MyBatis逆向工程

修改reverse\src\main\resources\generatorConfig.xml

<table tableName="t_member" domainObjectName="MemberPO" />

在maven project找到mybatis-generator:generate并点击运行，生成文件，并归类：

将MemberPO.java以及MemberPOExample.java放入atcrowdfunding09-member-entity\src\main\java\com\atguigu\crowd\entity\po

将MemberPOMapper.java放入mysql-provider\src\main\java\com\atguigu\crowd\mapper

将MemberPOMapper.xml放入mysql-provider\src\main\resources\mybatis.mapper

5.3 Pom配置

修改member-mysql-provider\pom.xml

<dependencies>
    <!-- 整合 MyBatis -->
    <dependency>
        <groupId>org.mybatis.spring.boot</groupId>
        <artifactId>mybatis-spring-boot-starter</artifactId>
    </dependency>
    <!-- 数据库连接池 -->
    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>druid</artifactId>
    </dependency>
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
    </dependency>
    <!-- SpringBoot 测试 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>
    <!-- 对外暴露服务 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!-- 作为客户端访问 Eureka 注册中心 -->
    <dependency>
        <groupId>org.springframework.cloud</groupId>
        <artifactId>spring-cloud-starter-netflix-eureka-client</artifactId>
    </dependency>
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
    </dependency>
    <!-- 为了能够使用工具类 -->
    <dependency>
        <groupId>com.atguigu.crowd</groupId>
        <artifactId>atcrowdfunding05-common-util</artifactId>
        <version>1.0-SNAPSHOT</version>
    </dependency>
    <!-- 为了能够使用实体类 -->
    <dependency>
        <groupId>org.example</groupId>
        <artifactId>atcrowdfunding09-member-entity</artifactId>
        <version>1.0-SNAPSHOT</version>
        <scope>compile</scope>
    </dependency>
</dependencies>

5.4 主启动类&Application

新建mysql-provider\src\main\java\com\atguigu\crowd\CrowdMainClass.java

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@MapperScan("com.atguigu.crowd.mapper")
@SpringBootApplication
public class CrowdMainClass {

    public static void main(String[] args) {
        SpringApplication.run(CrowdMainClass.class, args);
    }
}

新建mysql-provider\src\main\resources\application.yml

server:
  port: 2000

spring:
  application:
    name: atguigu-crowd-mysql
  datasource:
    name: mydb
    type: com.alibaba.druid.pool.DruidDataSource
    url: jdbc:mysql://127.0.0.1:3306/project_crowd?serverTimezone=UTC
    username: root
    password: 1998312Hjl
    driver-class-name: com.mysql.cj.jdbc.Driver

eureka:
  client:
    service-url:
      defaultZone: http://localhost:1000/eureka

mybatis:
  mapper-locations: classpath*:/mybatis/mapper/*Mapper.xml

logging:
  level:
    com.atguigu.crowd.mapper: debug
    com.atguigu.crowd.test: debug

5.5 测试

修改atcrowdfunding09-member-entity\src\main\java\com\atguigu\crowd\entity\po\MemberPO.java

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@NoArgsConstructor
@AllArgsConstructor
@Data

新建mysql-provider\src\test\java\com\atguigu\crowd\test\MyBatisTest.java

package com.atguigu.crowd.test;

import com.atguigu.crowd.entity.po.MemberPO;
import com.atguigu.crowd.mapper.MemberPOMapper;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.test.context.junit4.SpringRunner;

import javax.sql.DataSource;
import java.sql.Connection;
import java.sql.SQLException;

@RunWith(SpringRunner.class)
@SpringBootTest
public class MyBatisTest {

    @Autowired
    private DataSource dataSource;

    @Autowired
    private MemberPOMapper memberPOMapper;

    final private Logger logger = LoggerFactory.getLogger(MyBatisTest.class);

    @Test
    public void testMapper() {

        BCryptPasswordEncoder passwordEncoder = new BCryptPasswordEncoder();
        String source = "123123";
        String encode = passwordEncoder.encode(source);

        MemberPO memberPO = new MemberPO(null, "jack", encode, "杰克", "jack@qq.com", 1, 1, "杰克", "123123", 2);

        memberPOMapper.insert(memberPO);
    }

    @Test
    public void testConnection() throws SQLException {

        Connection connection = dataSource.getConnection();

        logger.debug(connection.toString());
    }
}

运行testMapper，结果增加一条记录：

在这里插入图片描述

6 MySQL 工程对外暴露服务

6.1 Pom配置

修改api\pom.xml

<dependency>
    <groupId>com.atguigu.crowd</groupId>
    <artifactId>atcrowdfunding05-common-util</artifactId>
    <version>1.0-SNAPSHOT</version>
</dependency>
<dependency>
    <groupId>com.atguigu.crowd</groupId>
    <artifactId>atcrowdfunding09-member-entity</artifactId>
    <version>1.0-SNAPSHOT</version>
</dependency>
<dependency>
    <groupId>org.springframework.cloud</groupId>
    <artifactId>spring-cloud-starter-openfeign</artifactId>
</dependency>

6.2 api接口配置

新建api\src\main\java\com\atguigu\crowd\api\MySQLRemoteService.java

package com.atguigu.crowd.api;

import com.atguigu.crowd.entity.po.MemberPO;
import com.atguigu.crowd.util.ResultEntity;
import org.springframework.cloud.openfeign.FeignClient;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

@FeignClient("atguigu-crowd-mysql")
public interface MySQLRemoteService {

    @RequestMapping("get/memberpo/by/login/acct/remote")
    ResultEntity<MemberPO> getMemberPOByLoginAcctRemote(@RequestParam("loginacct") String loginacct);
}

6.3 后端部分

新建mysql-provider\src\main\java\com\atguigu\crowd\handler\MemberProviderHandler.java

package com.atguigu.crowd.handler;

import com.atguigu.crowd.entity.po.MemberPO;
import com.atguigu.crowd.service.api.MemberService;
import com.atguigu.crowd.util.ResultEntity;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class MemberProviderHandler {

    @Autowired
    private MemberService memberService;

    @RequestMapping("/get/memberpo/by/login/acct/remote")
    ResultEntity<MemberPO> getMemberPOByLoginAcctRemote(@RequestParam("loginacct") String loginacct){

        MemberPO memberPO = null;
        try {
            // 1.调用本地Service完成查询
            memberPO = memberService.getMemberPOByLoginAcct(loginacct);

            // 2.成功则返回结果
            return ResultEntity.successWithData(memberPO);
        } catch (Exception e) {
            e.printStackTrace();

            // 3. 异常则返回异常信息
            return ResultEntity.failed(e.getMessage());
        }
    }
}

新建mysql-provider\src\main\java\com\atguigu\crowd\service\api\MemberService.java

package com.atguigu.crowd.service.api;

import com.atguigu.crowd.entity.po.MemberPO;

public interface MemberService {
    MemberPO getMemberPOByLoginAcct(String loginacct);
}

新建mysql-provider\src\main\java\com\atguigu\crowd\service\impl\MemberServiceImpl.java

package com.atguigu.crowd.service.impl;

import com.atguigu.crowd.entity.po.MemberPO;
import com.atguigu.crowd.entity.po.MemberPOExample;
import com.atguigu.crowd.mapper.MemberPOMapper;
import com.atguigu.crowd.service.api.MemberService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import java.util.List;

@Transactional(readOnly = true)
@Service
public class MemberServiceImpl implements MemberService {

    @Autowired
    private MemberPOMapper memberPOMapper;

    @Override
    public MemberPO getMemberPOByLoginAcct(String loginacct) {

        // 1.创建 Example 对象
        MemberPOExample example = new MemberPOExample();

        // 2.创建 Criteria 对象
        MemberPOExample.Criteria criteria = example.createCriteria();

        // 3.封装查询条件
        criteria.andLoginacctEqualTo(loginacct);

        // 4.执行查询
        List<MemberPO> list = memberPOMapper.selectByExample(example);

        // 5.获取结果
        return list.get(0);
    }
}

6.4 测试

运行主启动类，输入http://localhost:2000/get/memberpo/by/login/acct/remote?loginacct=jack，可查询到数据：

在这里插入图片描述

7 Redis工程

7.1 Pom配置

修改redis-provider\pom.xml

<dependencies>
    <!-- 整合 Redis -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-redis</artifactId>
    </dependency>
    <!-- 测试 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
    </dependency>
    <!-- 对外暴露服务 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!-- 作为客户端访问 Eureka 注册中心 -->
    <dependency>
        <groupId>org.springframework.cloud</groupId>
        <artifactId>spring-cloud-starter-netflix-eureka-client</artifactId>
    </dependency>
    <!-- 为了能够使用实体类 -->
    <dependency>
        <groupId>com.atguigu.crowd</groupId>
        <artifactId>atcrowdfunding09-member-entity</artifactId>
        <version>1.0-SNAPSHOT</version>
    </dependency>
    <!-- 为了能够使用工具类 -->
    <dependency>
        <groupId>com.atguigu.crowd</groupId>
        <artifactId>atcrowdfunding05-common-util</artifactId>
        <version>1.0-SNAPSHOT</version>
    </dependency>
</dependencies>

7.2 主启动类&Application

新建redis-provider\src\main\java\com\atguigu\crowd\CrowdMainClass.java

package com.atguigu.crowd;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class CrowdMainClass {

    public static void main(String[] args) {

        SpringApplication.run(CrowdMainClass.class, args);

    }
}

新建redis-provider\src\main\resources\application.yml

server:
  port: 3000

spring:
  application:
    name: atguigu-crowd-redis
  redis:
    host: 127.0.0.1

eureka:
  client:
    service-url:
      defaultZone: http://localhost:1000/eureka

7.3 测试

运行testSet，在前台查看数据已经成功输入：

在这里插入图片描述

8 Redis 工程对外暴露服务

8.1 Pom接口配置

新建member-api\src\main\java\com\atguigu\crowd\api\RedisRemoteService.java

package com.atguigu.crowd.api;

import com.atguigu.crowd.util.ResultEntity;
import org.springframework.cloud.openfeign.FeignClient;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

import java.util.concurrent.TimeUnit;

@FeignClient("atguigu-crowd-redis")
public interface RedisRemoteService {

    @RequestMapping("/set/redis/key/value/remote")
    ResultEntity<String> setRedisKeyValueRemote(@RequestParam("key") String key,
                                                @RequestParam("value") String value);

    @RequestMapping("/set/redis/key/value/remote/with/timeout")
    ResultEntity<String> setRedisKeyValueRemoteWithTimeout(@RequestParam("key") String key,
                                                           @RequestParam("value") String value,
                                                           @RequestParam("time") long time,
                                                           @RequestParam("timeUnix") TimeUnit timeUnit);

    @RequestMapping("/get/redis/string/value/by/key")
    ResultEntity<String> getRedisStringValueByKey(@RequestParam("key") String key);

    @RequestMapping("/remove/redis/key/remote")
    ResultEntity<String> removeRedisKeyRemote(@RequestParam("key") String key);

}

8.2 后端部分

新建redis-provider\src\main\java\com\atguigu\crowd\handler\RedisHandler.java

package com.atguigu.crowd.handler;

import com.atguigu.crowd.util.ResultEntity;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.StringRedisTemplate;
import org.springframework.data.redis.core.ValueOperations;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.util.concurrent.TimeUnit;

@RestController
public class RedisHandler {

    @Autowired
    private StringRedisTemplate redisTemplate;

    @RequestMapping("/set/redis/key/value/remote")
    ResultEntity<String> setRedisKeyValueRemote(@RequestParam("key") String key,
                                                @RequestParam("value") String value){

        try {
            ValueOperations<String, String> operations = redisTemplate.opsForValue();
            operations.set(key, value);

            return ResultEntity.successWithoutData();
        } catch (Exception e) {
            e.printStackTrace();

            return ResultEntity.failed(e.getMessage());
        }
    }

    @RequestMapping("/set/redis/key/value/remote/with/timeout")
    ResultEntity<String> setRedisKeyValueRemoteWithTimeout(@RequestParam("key") String key,
                                                           @RequestParam("value") String value,
                                                           @RequestParam("time") long time,
                                                           @RequestParam("timeUnit") TimeUnit timeUnit){

        try {
            ValueOperations<String, String> operations = redisTemplate.opsForValue();
            operations.set(key, value, time, timeUnit);

            return ResultEntity.successWithoutData();
        } catch (Exception e) {
            e.printStackTrace();

            return ResultEntity.failed(e.getMessage());
        }

    }

    @RequestMapping("/get/redis/string/value/by/key")
    ResultEntity<String> getRedisStringValueByKey(@RequestParam("key") String key){

        try {
            ValueOperations<String, String> operations = redisTemplate.opsForValue();
            String value = operations.get(key);

            return ResultEntity.successWithData(value);
        } catch (Exception e) {
            e.printStackTrace();

            return ResultEntity.failed(e.getMessage());
        }
    }

    @RequestMapping("/remove/redis/key/remote")
    ResultEntity<String> removeRedisKeyRemote(@RequestParam("key") String key){

        try {
            redisTemplate.delete(key);

            return ResultEntity.successWithoutData();

        } catch (Exception e) {
            e.printStackTrace();

            return ResultEntity.failed(e.getMessage());
        }

    }

}

8.4 测试

运行主启动类，输入http://localhost:3000/set/redis/key/value/remote?key=aaa&value=222，可看到结果SUCCESS：

在这里插入图片描述

在前台查询数据：

在这里插入图片描述

9 认证工程显示首页

9.1 Pom配置

修改authentication-consumer\pom.xml

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
    <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.cloud</groupId>
        <artifactId>spring-cloud-starter-netflix-eureka-client</artifactId>
    </dependency>
    <dependency>
        <groupId>com.atguigu.crowd</groupId>
        <artifactId>atcrowdfunding17-member-api</artifactId>
        <version>1.0-SNAPSHOT</version>
    </dependency>
</dependencies>

9.2 主启动类&Application

新建authentication-consumer\src\main\java\com\atguigu\crowd\CrowdMainClass.java

package com.atguigu.crowd;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.cloud.netflix.eureka.EnableEurekaClient;

@SpringBootApplication
@EnableEurekaClient
public class CrowdMainClass {

    public static void main(String[] args) {

        SpringApplication.run(CrowdMainClass.class, args);
    }
}

新建authentication-consumer\src\main\resources\application.yml

server:
  port: 4000

spring:
  application:
    name: atguigu-crowd-auth
  thymeleaf:
    prefix: classpath:/templates/
    suffix: .html

eureka:
  client:
    service-url:
      defaultZone: http://localhost:1000/eureka

9.3 后端部分

新建authentication-consumer\src\main\java\com\atguigu\crowd\handler\PortalHandler.java

package com.atguigu.crowd.handler;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class PortalHandler {

    @RequestMapping("/")
    public String showPortalPage() {

        // 这里实际开发中需要加载数据……

        return "portal";
    }
}

9.4 前端部分

将后台部分静态文件复制至authentication-consumer\src\main\resources\static中（见工程文件）

新建Cauthentication-consumer\src\main\resources\templates\portal.html

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UFT-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <meta content="" name="description">
    <meta content="" name="author">
    <base th:href="@{/}"/>
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/carousel.css" rel="stylesheet">
    <style>
        h3 {
            font-weight: bold;
        }

        #footer {
            padding: 15px 0;
            background: #fff;
            border-top: 1px solid #ddd;
            text-align: center;
        }

        #topcontrol {
            color: #fff;
            z-index: 99;
            width: 30px;
            height: 30px;
            font-size: 20px;
            background: #222;
            position: relative;
            right: 14px !important;
            bottom: 11px !important;
            border-radius: 3px !important;
        }

        #topcontrol:after {
            /*top: -2px;*/
            left: 8.5px;
            content: "\f106";
            position: absolute;
            text-align: center;
            font-family: FontAwesome;
        }

        #topcontrol:hover {
            color: #fff;
            background: #18ba9b;
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }

        /* 侧栏导航 */
        .sideBox {
            padding: 10px;
            height: 220px;
            background: #fff;
            margin-bottom: 10px;
            overflow: hidden;
        }

        .sideBox .hd {
            height: 30px;
            line-height: 30px;
            background: #f60;
            padding: 0 10px;
            text-align: center;
            overflow: hidden;
        }

        .sideBox .hd .more {
            color: #fff;
        }

        .sideBox .hd h3 span {
            font-weight: bold;
            font-size: 14px;
            color: #fff;
        }

        .sideBox .bd {
            padding: 5px 0 0;
        }

        #sideMenu .bd li {
            margin-bottom: 2px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            overflow: hidden;
        }

        #sideMenu .bd li a {
            display: block;
            background: #EAE6DD;
        }

        #sideMenu .bd li a:hover {
            background: #D5CFBF;
        }

        /* 列表页 */
        #mainBox {
            margin-bottom: 10px;
            padding: 10px;
            background: #fff;
            overflow: hidden;
        }

        #mainBox .mHd {
            border-bottom: 2px solid #09c;
            height: 30px;
            line-height: 30px;
        }

        #mainBox .mHd h3 {
            display: initial;
            *display: inline;
            zoom: 1;
            padding: 0 15px;
            background: #09c;
            color: #fff;
        }

        #mainBox .mHd h3 span {
            color: #fff;
            font-size: 14px;
            font-weight: bold;
        }

        #mainBox .path {
            float: right;
        }

        /* 位置导航 */
        .path {
            height: 30px;
            line-height: 30px;
            padding-left: 10px;
        }

        .path a, .path span {
            margin: 0 5px;
        }

        /* 文章列表 */
        .newsList {
            padding: 10px;
            text-align: left;
        }

        .newsList li {
            background: url("../images/share/point.png") no-repeat 2px 14px;
            padding-left: 10px;
            height: 30px;
            line-height: 30px;
        }

        .newsList li a {
            display: inline-block;
            *display: inline;
            zoom: 1;
            font-size: 14px;
        }

        .newsList li .date {
            float: right;
            color: #999;
        }

        .newsList li.split {
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px dotted #ddd;
            height: 0px;
            line-height: 0px;
            overflow: hidden;
        }

        /* 通用带图片的信息列表_普通式 */
        .picList {
            padding: 10px;
            text-align: left;
        }

        .picList li {
            margin: 0 5px;
            height: 190px;
        }

        h3.break {
            font-size: 16px;
            display: block;
            white-space: nowrap;
            word-wrap: normal;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        h3.break > a {
            text-decoration: none;
        }

    </style>
</head>
<body>
<div class="navbar-wrapper">
    <div class="container">
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="index.html" style="font-size:32px;">尚筹网-创意产品众筹平台</a>
                </div>
                <div class="navbar-collapse collapse" id="navbar" style="float:right;">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="login.html">登录</a></li>
                        <li><a href="reg.html">注册</a></li>
                        <li><a>|</a></li>
                        <li><a href="admin-login.html">管理员入口</a></li>
                    </ul>
                </div>
            </div>
        </nav>

    </div>
</div>


<!-- Carousel
================================================== -->
<div class="carousel slide" data-ride="carousel" id="myCarousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li class="" data-slide-to="0" data-target="#myCarousel"></li>
        <li class="active" data-slide-to="1" data-target="#myCarousel"></li>
        <li class="" data-slide-to="2" data-target="#myCarousel"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="item" onclick="window.location.href='project.html'" style="cursor:pointer;">
            <img alt="First slide" src="img/carousel-1.jpg">
        </div>
        <div class="item active" onclick="window.location.href='project.html'" style="cursor:pointer;">
            <img alt="Second slide" src="img/carousel-2.jpg">
        </div>
        <div class="item" onclick="window.location.href='project.html'" style="cursor:pointer;">
            <img alt="Third slide" src="img/carousel-3.jpg">
        </div>
    </div>
    <a class="left carousel-control" data-slide="prev" href="#myCarousel" role="button">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" data-slide="next" href="#myCarousel" role="button">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
    </a>
</div><!-- /.carousel -->


<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->

<div class="container marketing">

    <!-- Three columns of text below the carousel -->
    <div class="row">
        <div class="col-lg-4">
            <img alt="Generic placeholder image" class="img-circle" src="img/p1.jpg"
                 style="width: 140px; height: 140px;">
            <h2>智能高清监控机器人</h2>
            <p>可爱的造型，摄像安防远程互联的全能设计，让你随时随地守护您的家人，陪伴你的生活。</p>
            <p><a class="btn btn-default" href="project.html" role="button">项目详情 »</a></p>
        </div><!-- /.col-lg-4 -->
        <div class="col-lg-4">
            <img alt="Generic placeholder image" class="img-circle" src="img/p2.jpg"
                 style="width: 140px; height: 140px;">
            <h2>NEOKA智能手环</h2>
            <p>要运动更要安全，这款、名为“蝶舞”的NEOKA-V9100智能运动手环为“安全运动而生”。</p>
            <p><a class="btn btn-default" href="project.html" role="button">项目详情 »</a></p>
        </div><!-- /.col-lg-4 -->
        <div class="col-lg-4">
            <img alt="Generic placeholder image" class="img-circle" src="img/p3.png"
                 style="width: 140px; height: 140px;">
            <h2>驱蚊扣</h2>
            <p>随处使用的驱蚊纽扣，<br>解决夏季蚊虫问题。</p>
            <p><a class="btn btn-default" href="project.html" role="button">项目详情 »</a></p>
        </div><!-- /.col-lg-4 -->
    </div><!-- /.row -->

    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="box ui-draggable" id="mainBox">
                    <div class="mHd" style="">
                        <div class="path">
                            <a href="projects.html">更多...</a>
                        </div>
                        <h3>
                            科技 <small style="color:#FFF;">开启智慧未来</small>
                        </h3>
                    </div>
                    <div class="mBd" style="padding-top:10px;">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="thumbnail">
                                    <img alt="300x200" src="img/product-1.jpg" style="cursor: pointer;">
                                    <div class="caption">
                                        <h3 class="break">
                                            <a href="project.html">活性富氢净水直饮机</a>
                                        </h3>
                                        <p>
                                        </p>
                                        <div style="float:left;"><i class="glyphicon glyphicon-screenshot"
                                                                    title="目标金额"></i> $20,000
                                        </div>
                                        <div style="float:right;"><i class="glyphicon glyphicon-calendar"
                                                                     title="截至日期"></i>
                                            2017-20-20
                                        </div>
                                        <p></p>
                                        <br>
                                        <div class="progress" style="margin-bottom: 4px;">
                                            <div aria-valuemax="100" aria-valuemin="0"
                                                 aria-valuenow="40" class="progress-bar progress-bar-success" role="progressbar"
                                                 style="width: 40%">
                                                <span>40% </span>
                                            </div>
                                        </div>
                                        <div><span style="float:right;"><i
                                                class="glyphicon glyphicon-star-empty"></i></span> <span><i
                                                class="glyphicon glyphicon-user" title="支持人数"></i> 12345</span></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="thumbnail">
                                    <img alt="300x200" src="img/product-2.gif" style="cursor: pointer;">
                                    <div class="caption">
                                        <h3 class="break">
                                            <a href="project.html">酷驰触控龙头，智享厨房黑科技</a>
                                        </h3>
                                        <p>
                                        </p>
                                        <div style="float:left;"><i class="glyphicon glyphicon-screenshot"
                                                                    title="目标金额"></i> $20,000
                                        </div>
                                        <div style="float:right;"><i class="glyphicon glyphicon-calendar"
                                                                     title="截至日期"></i>
                                            2017-20-20
                                        </div>
                                        <p></p>
                                        <br>
                                        <div class="progress" style="margin-bottom: 4px;">
                                            <div aria-valuemax="100" aria-valuemin="0"
                                                 aria-valuenow="40" class="progress-bar progress-bar-success" role="progressbar"
                                                 style="width: 40%">
                                                <span>40% </span>
                                            </div>
                                        </div>
                                        <div><span style="float:right;"><i
                                                class="glyphicon glyphicon-star-empty"></i></span> <span><i
                                                class="glyphicon glyphicon-user" title="支持人数"></i> 12345</span></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="thumbnail">
                                    <img alt="300x200" src="img/product-3.png" style="cursor: pointer;">
                                    <div class="caption">
                                        <h3 class="break">
                                            <a href="project.html">小熊猫鱼眼全景安防摄像机</a>
                                        </h3>
                                        <p>
                                        </p>
                                        <div style="float:left;"><i class="glyphicon glyphicon-screenshot"
                                                                    title="目标金额"></i> $20,000
                                        </div>
                                        <div style="float:right;"><i class="glyphicon glyphicon-calendar"
                                                                     title="截至日期"></i>
                                            2017-20-20
                                        </div>
                                        <p></p>
                                        <br>
                                        <div class="progress" style="margin-bottom: 4px;">
                                            <div aria-valuemax="100" aria-valuemin="0"
                                                 aria-valuenow="40" class="progress-bar progress-bar-success" role="progressbar"
                                                 style="width: 40%">
                                                <span>40% </span>
                                            </div>
                                        </div>
                                        <div><span style="float:right;"><i
                                                class="glyphicon glyphicon-star-empty"></i></span> <span><i
                                                class="glyphicon glyphicon-user" title="支持人数"></i> 12345</span></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="thumbnail">
                                    <img alt="300x200" src="img/product-4.jpg" style="cursor: pointer;">
                                    <div class="caption">
                                        <h3 class="break">
                                            <a href="project.html">一款精致的机械表</a>
                                        </h3>
                                        <p>
                                        </p>
                                        <div style="float:left;"><i class="glyphicon glyphicon-screenshot"
                                                                    title="目标金额"></i> $20,000
                                        </div>
                                        <div style="float:right;"><i class="glyphicon glyphicon-calendar"
                                                                     title="截至日期"></i>
                                            2017-20-20
                                        </div>
                                        <p></p>
                                        <br>
                                        <div class="progress" style="margin-bottom: 4px;">
                                            <div aria-valuemax="100" aria-valuemin="0"
                                                 aria-valuenow="40" class="progress-bar progress-bar-success" role="progressbar"
                                                 style="width: 40%">
                                                <span>40% </span>
                                            </div>
                                        </div>
                                        <div><span style="float:right;"><i
                                                class="glyphicon glyphicon-star-empty"></i></span> <span><i
                                                class="glyphicon glyphicon-user" title="支持人数"></i> 12345</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="box ui-draggable" id="mainBox">
                    <div class="mHd" style="">
                        <div class="path">
                            <a href="projects.html">更多...</a>
                        </div>
                        <h3>
                            设计 <small style="color:#FFF;">创意改变生活</small>
                        </h3>
                    </div>
                    <div class="mBd" style="padding-top:10px;">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="thumbnail">
                                    <img alt="300x200" src="img/product-5.jpg" style="cursor: pointer;">
                                    <div class="caption">
                                        <h3 class="break">
                                            <a href="project.html">活性富氢净水直饮机</a>
                                        </h3>
                                        <p>
                                        </p>
                                        <div style="float:left;"><i class="glyphicon glyphicon-screenshot"
                                                                    title="目标金额"></i> $20,000
                                        </div>
                                        <div style="float:right;"><i class="glyphicon glyphicon-calendar"
                                                                     title="截至日期"></i>
                                            2017-20-20
                                        </div>
                                        <p></p>
                                        <br>
                                        <div class="progress" style="margin-bottom: 4px;">
                                            <div aria-valuemax="100" aria-valuemin="0"
                                                 aria-valuenow="40" class="progress-bar progress-bar-success" role="progressbar"
                                                 style="width: 40%">
                                                <span>40% </span>
                                            </div>
                                        </div>
                                        <div><span style="float:right;"><i
                                                class="glyphicon glyphicon-star-empty"></i></span> <span><i
                                                class="glyphicon glyphicon-user" title="支持人数"></i> 12345</span></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="thumbnail">
                                    <img alt="300x200" src="img/product-6.jpg" style="cursor: pointer;">
                                    <div class="caption">
                                        <h3 class="break">
                                            <a href="project.html">酷驰触控龙头，智享厨房黑科技</a>
                                        </h3>
                                        <p>
                                        </p>
                                        <div style="float:left;"><i class="glyphicon glyphicon-screenshot"
                                                                    title="目标金额"></i> $20,000
                                        </div>
                                        <div style="float:right;"><i class="glyphicon glyphicon-calendar"
                                                                     title="截至日期"></i>
                                            2017-20-20
                                        </div>
                                        <p></p>
                                        <br>
                                        <div class="progress" style="margin-bottom: 4px;">
                                            <div aria-valuemax="100" aria-valuemin="0"
                                                 aria-valuenow="40" class="progress-bar progress-bar-success" role="progressbar"
                                                 style="width: 40%">
                                                <span>40% </span>
                                            </div>
                                        </div>
                                        <div><span style="float:right;"><i
                                                class="glyphicon glyphicon-star-empty"></i></span> <span><i
                                                class="glyphicon glyphicon-user" title="支持人数"></i> 12345</span></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="thumbnail">
                                    <img alt="300x200" src="img/product-7.jpg" style="cursor: pointer;">
                                    <div class="caption">
                                        <h3 class="break">
                                            <a href="project.html">小熊猫鱼眼全景安防摄像机</a>
                                        </h3>
                                        <p>
                                        </p>
                                        <div style="float:left;"><i class="glyphicon glyphicon-screenshot"
                                                                    title="目标金额"></i> $20,000
                                        </div>
                                        <div style="float:right;"><i class="glyphicon glyphicon-calendar"
                                                                     title="截至日期"></i>
                                            2017-20-20
                                        </div>
                                        <p></p>
                                        <br>
                                        <div class="progress" style="margin-bottom: 4px;">
                                            <div aria-valuemax="100" aria-valuemin="0"
                                                 aria-valuenow="40" class="progress-bar progress-bar-success" role="progressbar"
                                                 style="width: 40%">
                                                <span>40% </span>
                                            </div>
                                        </div>
                                        <div><span style="float:right;"><i
                                                class="glyphicon glyphicon-star-empty"></i></span> <span><i
                                                class="glyphicon glyphicon-user" title="支持人数"></i> 12345</span></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="thumbnail">
                                    <img alt="300x200" src="img/product-8.jpg" style="cursor: pointer;">
                                    <div class="caption">
                                        <h3 class="break">
                                            <a href="project.html">一款精致的机械表</a>
                                        </h3>
                                        <p>
                                        </p>
                                        <div style="float:left;"><i class="glyphicon glyphicon-screenshot"
                                                                    title="目标金额"></i> $20,000
                                        </div>
                                        <div style="float:right;"><i class="glyphicon glyphicon-calendar"
                                                                     title="截至日期"></i>
                                            2017-20-20
                                        </div>
                                        <p></p>
                                        <br>
                                        <div class="progress" style="margin-bottom: 4px;">
                                            <div aria-valuemax="100" aria-valuemin="0"
                                                 aria-valuenow="40" class="progress-bar progress-bar-success" role="progressbar"
                                                 style="width: 40%">
                                                <span>40% </span>
                                            </div>
                                        </div>
                                        <div><span style="float:right;"><i
                                                class="glyphicon glyphicon-star-empty"></i></span> <span><i
                                                class="glyphicon glyphicon-user" title="支持人数"></i> 12345</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="box ui-draggable" id="mainBox">
                    <div class="mHd" style="">
                        <div class="path">
                            <a href="projects.html">更多...</a>
                        </div>
                        <h3>
                            农业 <small style="color:#FFF;">网络天下肥美</small>
                        </h3>
                    </div>
                    <div class="mBd" style="padding-top:10px;">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="thumbnail">
                                    <img alt="300x200" src="img/product-9.jpg" style="cursor: pointer;">
                                    <div class="caption">
                                        <h3 class="break">
                                            <a href="project.html">活性富氢净水直饮机</a>
                                        </h3>
                                        <p>
                                        </p>
                                        <div style="float:left;"><i class="glyphicon glyphicon-screenshot"
                                                                    title="目标金额"></i> $20,000
                                        </div>
                                        <div style="float:right;"><i class="glyphicon glyphicon-calendar"
                                                                     title="截至日期"></i>
                                            2017-20-20
                                        </div>
                                        <p></p>
                                        <br>
                                        <div class="progress" style="margin-bottom: 4px;">
                                            <div aria-valuemax="100" aria-valuemin="0"
                                                 aria-valuenow="40" class="progress-bar progress-bar-success" role="progressbar"
                                                 style="width: 40%">
                                                <span>40% </span>
                                            </div>
                                        </div>
                                        <div><span style="float:right;"><i
                                                class="glyphicon glyphicon-star-empty"></i></span> <span><i
                                                class="glyphicon glyphicon-user" title="支持人数"></i> 12345</span></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="thumbnail">
                                    <img alt="300x200" src="img/product-2.gif" style="cursor: pointer;">
                                    <div class="caption">
                                        <h3 class="break">
                                            <a href="project.html">酷驰触控龙头，智享厨房黑科技</a>
                                        </h3>
                                        <p>
                                        </p>
                                        <div style="float:left;"><i class="glyphicon glyphicon-screenshot"
                                                                    title="目标金额"></i> $20,000
                                        </div>
                                        <div style="float:right;"><i class="glyphicon glyphicon-calendar"
                                                                     title="截至日期"></i>
                                            2017-20-20
                                        </div>
                                        <p></p>
                                        <br>
                                        <div class="progress" style="margin-bottom: 4px;">
                                            <div aria-valuemax="100" aria-valuemin="0"
                                                 aria-valuenow="40" class="progress-bar progress-bar-success" role="progressbar"
                                                 style="width: 40%">
                                                <span>40% </span>
                                            </div>
                                        </div>
                                        <div><span style="float:right;"><i
                                                class="glyphicon glyphicon-star-empty"></i></span> <span><i
                                                class="glyphicon glyphicon-user" title="支持人数"></i> 12345</span></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="thumbnail">
                                    <img alt="300x200" src="img/product-3.png" style="cursor: pointer;">
                                    <div class="caption">
                                        <h3 class="break">
                                            <a href="project.html">小熊猫鱼眼全景安防摄像机</a>
                                        </h3>
                                        <p>
                                        </p>
                                        <div style="float:left;"><i class="glyphicon glyphicon-screenshot"
                                                                    title="目标金额"></i> $20,000
                                        </div>
                                        <div style="float:right;"><i class="glyphicon glyphicon-calendar"
                                                                     title="截至日期"></i>
                                            2017-20-20
                                        </div>
                                        <p></p>
                                        <br>
                                        <div class="progress" style="margin-bottom: 4px;">
                                            <div aria-valuemax="100" aria-valuemin="0"
                                                 aria-valuenow="40" class="progress-bar progress-bar-success" role="progressbar"
                                                 style="width: 40%">
                                                <span>40% </span>
                                            </div>
                                        </div>
                                        <div><span style="float:right;"><i
                                                class="glyphicon glyphicon-star-empty"></i></span> <span><i
                                                class="glyphicon glyphicon-user" title="支持人数"></i> 12345</span></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="thumbnail">
                                    <img alt="300x200" src="img/product-4.jpg" style="cursor: pointer;">
                                    <div class="caption">
                                        <h3 class="break">
                                            <a href="project.html">一款精致的机械表</a>
                                        </h3>
                                        <p>
                                        </p>
                                        <div style="float:left;"><i class="glyphicon glyphicon-screenshot"
                                                                    title="目标金额"></i> $20,000
                                        </div>
                                        <div style="float:right;"><i class="glyphicon glyphicon-calendar"
                                                                     title="截至日期"></i>
                                            2017-20-20
                                        </div>
                                        <p></p>
                                        <br>
                                        <div class="progress" style="margin-bottom: 4px;">
                                            <div aria-valuemax="100" aria-valuemin="0"
                                                 aria-valuenow="40" class="progress-bar progress-bar-success" role="progressbar"
                                                 style="width: 40%">
                                                <span>40% </span>
                                            </div>
                                        </div>
                                        <div><span style="float:right;"><i
                                                class="glyphicon glyphicon-star-empty"></i></span> <span><i
                                                class="glyphicon glyphicon-user" title="支持人数"></i> 12345</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="box ui-draggable" id="mainBox">
                    <div class="mHd" style="">
                        <div class="path">
                            <a href="projects.html">更多...</a>
                        </div>
                        <h3>
                            其他 <small style="color:#FFF;">发现更多惊喜</small>
                        </h3>
                    </div>
                    <div class="mBd" style="padding-top:10px;">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="thumbnail">
                                    <img alt="300x200" src="img/product-1.jpg" style="cursor: pointer;">
                                    <div class="caption">
                                        <h3 class="break">
                                            <a href="project.html">活性富氢净水直饮机</a>
                                        </h3>
                                        <p>
                                        </p>
                                        <div style="float:left;"><i class="glyphicon glyphicon-screenshot"
                                                                    title="目标金额"></i> $20,000
                                        </div>
                                        <div style="float:right;"><i class="glyphicon glyphicon-calendar"
                                                                     title="截至日期"></i>
                                            2017-20-20
                                        </div>
                                        <p></p>
                                        <br>
                                        <div class="progress" style="margin-bottom: 4px;">
                                            <div aria-valuemax="100" aria-valuemin="0"
                                                 aria-valuenow="40" class="progress-bar progress-bar-success" role="progressbar"
                                                 style="width: 40%">
                                                <span>40% </span>
                                            </div>
                                        </div>
                                        <div><span style="float:right;"><i
                                                class="glyphicon glyphicon-star-empty"></i></span> <span><i
                                                class="glyphicon glyphicon-user" title="支持人数"></i> 12345</span></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="thumbnail">
                                    <img alt="300x200" src="img/product-2.gif" style="cursor: pointer;">
                                    <div class="caption">
                                        <h3 class="break">
                                            <a href="project.html">酷驰触控龙头，智享厨房黑科技</a>
                                        </h3>
                                        <p>
                                        </p>
                                        <div style="float:left;"><i class="glyphicon glyphicon-screenshot"
                                                                    title="目标金额"></i> $20,000
                                        </div>
                                        <div style="float:right;"><i class="glyphicon glyphicon-calendar"
                                                                     title="截至日期"></i>
                                            2017-20-20
                                        </div>
                                        <p></p>
                                        <br>
                                        <div class="progress" style="margin-bottom: 4px;">
                                            <div aria-valuemax="100" aria-valuemin="0"
                                                 aria-valuenow="40" class="progress-bar progress-bar-success" role="progressbar"
                                                 style="width: 40%">
                                                <span>40% </span>
                                            </div>
                                        </div>
                                        <div><span style="float:right;"><i
                                                class="glyphicon glyphicon-star-empty"></i></span> <span><i
                                                class="glyphicon glyphicon-user" title="支持人数"></i> 12345</span></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="thumbnail">
                                    <img alt="300x200" src="img/product-3.png" style="cursor: pointer;">
                                    <div class="caption">
                                        <h3 class="break">
                                            <a href="project.html">小熊猫鱼眼全景安防摄像机</a>
                                        </h3>
                                        <p>
                                        </p>
                                        <div style="float:left;"><i class="glyphicon glyphicon-screenshot"
                                                                    title="目标金额"></i> $20,000
                                        </div>
                                        <div style="float:right;"><i class="glyphicon glyphicon-calendar"
                                                                     title="截至日期"></i>
                                            2017-20-20
                                        </div>
                                        <p></p>
                                        <br>
                                        <div class="progress" style="margin-bottom: 4px;">
                                            <div aria-valuemax="100" aria-valuemin="0"
                                                 aria-valuenow="40" class="progress-bar progress-bar-success" role="progressbar"
                                                 style="width: 40%">
                                                <span>40% </span>
                                            </div>
                                        </div>
                                        <div><span style="float:right;"><i
                                                class="glyphicon glyphicon-star-empty"></i></span> <span><i
                                                class="glyphicon glyphicon-user" title="支持人数"></i> 12345</span></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="thumbnail">
                                    <img alt="300x200" src="img/product-4.jpg" style="cursor: pointer;">
                                    <div class="caption">
                                        <h3 class="break">
                                            <a href="project.html">一款精致的机械表</a>
                                        </h3>
                                        <p>
                                        </p>
                                        <div style="float:left;"><i class="glyphicon glyphicon-screenshot"
                                                                    title="目标金额"></i> $20,000
                                        </div>
                                        <div style="float:right;"><i class="glyphicon glyphicon-calendar"
                                                                     title="截至日期"></i>
                                            2017-20-20
                                        </div>
                                        <p></p>
                                        <br>
                                        <div class="progress" style="margin-bottom: 4px;">
                                            <div aria-valuemax="100" aria-valuemin="0"
                                                 aria-valuenow="40" class="progress-bar progress-bar-success" role="progressbar"
                                                 style="width: 40%">
                                                <span>40% </span>
                                            </div>
                                        </div>
                                        <div><span style="float:right;"><i
                                                class="glyphicon glyphicon-star-empty"></i></span> <span><i
                                                class="glyphicon glyphicon-user" title="支持人数"></i> 12345</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <!-- FOOTER -->
    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div id="footer">
                    <div class="footerNav">
                        <a href="http://www.atguigu.com" rel="nofollow">关于我们</a> | <a href="http://www.atguigu.com"
                                                                                      rel="nofollow">服务条款</a>
                        | <a href="http://www.atguigu.com" rel="nofollow">免责声明</a> | <a href="http://www.atguigu.com"
                                                                                        rel="nofollow">网站地图</a>
                        | <a href="http://www.atguigu.com" rel="nofollow">联系我们</a>
                    </div>
                    <div class="copyRight">
                        Copyright ?2017-2017atguigu.com 版权所有
                    </div>
                </div>

            </div>
        </div>
    </div>

</div><!-- /.container -->


<script src="jquery/jquery-3.6.0.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="script/docs.min.js"></script>
<script src="script/back-to-top.js"></script>
<script>
    $(".thumbnail img").css("cursor", "pointer");
    $(".thumbnail img").click(function () {
        window.location.href = "project.html";
    });
</script>

<div id="topcontrol" style="position: fixed; bottom: 5px; right: 5px; opacity: 0; cursor: pointer;" title=""></div>
</body>
</html>

9.5 测试

运行主启动类，输入http://localhost:4000，可看到网页：

在这里插入图片描述

10 网关

10.1 Pom配置

修改member-parent\atcrowdfunding16-member-zuul\pom.xml

<dependencies>
    <dependency>
        <groupId>org.springframework.cloud</groupId>
        <artifactId>spring-cloud-starter-netflix-eureka-client</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.cloud</groupId>
        <artifactId>spring-cloud-starter-netflix-zuul</artifactId>
    </dependency>
</dependencies>

10.2 主启动类&Application

新建member-zuul\src\main\java\com\atguigu\crowd\CrowdMainClass.java

package com.atguigu.crowd;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.cloud.netflix.zuul.EnableZuulProxy;

@SpringBootApplication
@EnableZuulProxy
public class CrowdMainClass {

    public static void main(String[] args) {

        SpringApplication.run(CrowdMainClass.class, args);
    }
}

新建member-zuul\src\main\resources\application.yml

server:
  port: 80

spring:
  application:
    name: atguigu-crowd-zuul

eureka:
  client:
    service-url:
      defaultZone: http://localhost:1000/eureka

zuul:
  ignored-services: "*"
  sensitive-headers: "*" # 在 Zuul 向其他微服务重定向时保持原本头信息（请求头、响应 头）

  routes:
    crowd-portal:
      service-id: atguigu-crowd-auth
      path: /**   # 这里一定要使用两个“*”号，不然“/”路径后面的多层路径将无法访问

10.3 测试

运行主启动类，同时运行auth的启动类，两个服务同时开启中，输入http://localhost，可看到网页：

在这里插入图片描述

10.4 域名配置

下载SwitchHost，在配置中输入：

127.0.0.1    www.crowd.com

测试：

在这里插入图片描述

菜比丶

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【尚筹网】IDEA版实现（八）前台环境配置

由于尚硅谷的视频是通过Eclipse软件来做的，其中有些操作与IDEA上有所区别，所以我在这里将IDEA区别于Eclipse的操作、操作过程中涉及的源码（与视频的源码略有出入）以及大家可能遇到的种种问题分享给大家，这些源码在我这里均是通过测试的，仅供参考！1 Modules配置2 Parent工程修改atcrowdfunding07-member-parent\pom.xml<dependencyManagement> <dependencies>
复制链接

扫一扫