项目实战（cloud）--配置中心Config（码云来做一个配置中心）

已于 2023-05-24 13:50:59 修改
阅读量652 收藏 1
点赞数 1
文章标签： java spring spring boot
于 2023-05-24 13:47:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_60281421/article/details/130826843
版权

 服务的拆分原则：

 单体应用向微服的一个改造：

 搭建一个聚合项目

创建一个maven项目  父项目

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.pb</groupId>
    <artifactId>parent</artifactId>
    <packaging>pom</packaging>
    <version>1.0-SNAPSHOT</version>
    <modules>
        <module>register</module>
        <module>gateway</module>
        <module>member</module>
    </modules>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.5.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

    <properties>
        <java.version>1.8</java.version>
        <spring-cloud.version>Hoxton.SR5</spring-cloud.version>
        <mysql.version>5.1.48</mysql.version>
        <mybatis-spring.version>2.2.1</mybatis-spring.version>
        <lombok.version>1.16.18</lombok.version>
    </properties>

    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>org.springframework.cloud</groupId>
                <artifactId>spring-cloud-dependencies</artifactId>
                <version>${spring-cloud.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
            <dependency>
                <groupId>mysql</groupId>
                <artifactId>mysql-connector-java</artifactId>
                <version>${mysql.version}</version>
            </dependency>
            
            <dependency>
                <groupId>org.projectlombok</groupId>
                <artifactId>lombok</artifactId>
                <version>${lombok.version}</version>
            </dependency>
        </dependencies>
    </dependencyManagement>

</project>

yml

spring:
  application:
    name: register
server:
  port: 8761
eureka:
  client:
    fetch-registry: false
    register-with-eureka: false

启动类：

@EnableEurekaServer
@SpringBootApplication
public class RegisterApp {
    public static void main(String[] args) {
        SpringApplication.run(RegisterApp.class,args);
    }
}

 yml

spring:
  application:
    name: gateway

server:
  port: 9000

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

启动类：

 创建模块：（member）

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">
    <parent>
        <artifactId>parent</artifactId>
        <groupId>com.pb</groupId>
        <version>1.0-SNAPSHOT</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <artifactId>member</artifactId>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>

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

</project>

创建数据库

CREATE TABLE `t_member` (
  `mid` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(50) DEFAULT NULL,
  `idno` varchar(50) DEFAULT NULL,
  `mobile` varchar(50) DEFAULT NULL,
  `regdate` date DEFAULT NULL,
  `expdate` date DEFAULT NULL,
  PRIMARY KEY (`mid`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=gbk

实体类：

@Data
@Entity
@Table(name="t_member")
public class Member implements Serializable {
    private static final long serialVersionUID = 7796360948254473734L;
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long mid;
    private String name;
    private String idno;
    private String mobile;
    private Date regdate;
    private Date expdate;
}

repositroy--MemberRepository

public interface MemberRepository extends JpaRepository<Member, Long> {

    /**
     * 根据手机号码查询会员信息
     * @param mobile
     * @return
     */
    List<Member> findMemberByMobile(String mobile);
}

自定义异常

package com.pb.exception;
//spring的事物有回滚，默认出现异常回滚的是RuntimeException
public class MemberNotFoundException extends RuntimeException {
    public MemberNotFoundException(String message) {
        super(message);
    }
}

 service

 impl

@Service
public class MemberServiceImpl implements MemberService {
    @Autowired
    private MemberRepository memberRepository;

    //@Transactional(rollbackFor=Exception.class)
    @Override
    public Member findMemberByMobile(String mobile) {
        List<Member> list = memberRepository.findMemberByMobile(mobile);
        if(list.size() <= 0) {
            throw new MemberNotFoundException("会员未找到");  //这里自动异常回向上抛出MemberNotFoundException
        }
        Member member = list.get(0);
        return member;
    }
}

controller

@RestController
public class MemberController {

    @Autowired
    private MemberService memberService;

    @CrossOrigin
    @RequestMapping("/selectMemberByMobile")
    public Map<String, Object> selectMemberByMobile(String mobile) {
        Map<String, Object> map = new HashMap<>();
        //给异常
        try {
            Member member = memberService.findMemberByMobile(mobile);
            map.put("code", 200);
            map.put("msg", "success");
            map.put("data", member);
        } catch (Exception e) {
            e.printStackTrace();
            map.put("code", 500);
            map.put("msg", e.getMessage());
            System.out.println(e);
            System.out.println(e.getMessage());

        }
        return map;
    }

}

启动getway

 引入一个html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">

    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<h2 style="text-align: center">图书借阅登记</h2>
<form id="frmBorrow" action="">
    <div class="weui-cells weui-cells_form">
        <div class="weui-cells__title">手机号<span id="errMobile" style="margin-left:10px;color: red"></span>
            <span id="succMobile" style="margin-left:10px;color: green"></span>
        </div>

        <div class="weui-cell weui-cell_vcode">
            <div class="weui-cell__bd">
                <input id="mobile" name="mobile" class="weui-input" type="tel" placeholder="请输入手机号">
            </div>
            <div class="weui-cell__ft">
                <button id="btnCheck" type="button" class="weui-vcode-btn">获取验证码</button>
            </div>
        </div>
        <div class="weui-cells__title">验证码</div>
        <div class="weui-cell weui-cell_vcode">
            <div class="weui-cell__bd">
                <input class="weui-input"  type="number" placeholder="请输入6位验证码">
            </div>

        </div>
        <div class="weui-cells__title">借阅图书</div>
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <input class="weui-input" id="name" name="name" type="text" placeholder="请选择要借阅的图书">
                <input type="hidden" name="bid" id="bid">
            </div>
        </div>

        <div class="weui-cells__title">借阅时间</div>
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <input type="text" name="takedate" class="weui-input" placeholder="请选择取书日期" id='takedate'/>
            </div>
        </div>

        <div class="weui-cells__title">归还时间</div>
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <input type="text" name="returndate" class="weui-input" placeholder="请选择还书日期" id='returndate'/>
            </div>
        </div>
        <br>
        <a href="javascript:;" id="btnSubmit" class="weui-btn weui-btn_primary">提交</a>
    </div>

</form>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>

<script>
    $("#takedate,#returndate").calendar({
        dateFormat: "yyyy-mm-dd"
    });

	$("#btnCheck").click(function(){
		var mobile = $("#mobile").val();
        $.ajax({
            type:"post",
            url:"http://localhost:9000/member/selectMemberByMobile",
            data:{mobile: mobile},
            dataType:"json",
            success:function (res){
                console.log(res);
            }

        })

	});

    //我们先来通过ajax进行所有数据的查询超操作,并通过下拉菜单进行展示
    var name = $("#name").val();


</script>
</body>
</html>


$("#btnCheck").click(function(){
		var mobile = $("#mobile").val();
        $.ajax({
            type:"post",
            url:"http://localhost:9000/member/selectMemberByMobile",
            data:{mobile: mobile},
            dataType:"json",
            success:function (res){
                console.log(res);
                if (res.code == 200){
                    $("#succMobile").text("会员："+res.data.name);
                    $("#succMobile").show();
                    $("#errMobile").hide();
                }else {
                    $("#errMobile").text(res.msg);
                    $("#succMobile").hide();
                    $("#errMobile").show();
                }

            }

        })

	});

 

配置中心Config

进入到码云来做一个配置中心，官方网址为：Gitee - 企业级 DevOps 研发效能平台

然后你可以申请一个密码进行登录即可

然后我们点击红色的部门新建一个项目：

 创建项目：

 创建完成后会出现如下界面：

然后点击文件里面的新建文件进行操作：

 然后点击提交，如下图所示：

 让后我们通过idea创建配置中心项目：

<?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>parent</artifactId>
        <groupId>com.pb</groupId>
        <version>1.0-SNAPSHOT</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <artifactId>config</artifactId>
    <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-config-server</artifactId>
        </dependency>
    </dependencies>



</project>

然后设置config项目的yml文件：

spring:
  application:
    name: config
  #配置配置中心
  cloud:
    config:
      server:
        git:
          #刚才您创建项目时候登记的远程地址
          uri: https://gitee.com/light_breeze_dawn/sc-config
          username: xxxxxxxx
          password: xxxxxxxx
server:
  port: 9100

设置主启动类：

package com.laosan.config;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.cloud.config.server.EnableConfigServer;
import org.springframework.cloud.netflix.eureka.EnableEurekaClient;
@SpringBootApplication
@EnableEurekaClient     //开启向注册中心注册
@EnableConfigServer     //启用配置中心
public class ConfigApplication {
   public static void main(String[] args) {
      SpringApplication.run(ConfigApplication.class, args);
   }
}

最后启动所有的服务包括配置中心，如下图所示：

 我们所有的服务都启动起来了，然后我们把浏览器打开进行对配置中心的测试，但是还是会报错，根本查询不到我要的数据不能从配置中心把数据拿回来，如下图所示：

这个是非常容易犯的一个错误

因为我们在访问配置中心的时候是需要一定的格式的，具体的格式是http://localhost:9100/clientid-profile.yml|xml|json，这么写才可以，我们上面浏览器里面写的地址是不正确的不符合我们需要的格式

在配置中心我们添加2个文件名字分别member-dev.yml 和member-prd.yml，具体的内容如下所述：

 

 

 我们看到我们根据配置中心来添加两个对应的文件，根据这两个文件我们可以在浏览器中输入如下地址，如下图所示：

你会发现当我们输入上图的地址后他给我们现实了member-dev.yml里面的端口还会把member.yml的公共部分现实出来呢，server.port会以member-dev.yml的为准

我们来换个地址，如下图所示：

你也会发现他把所有的member.yml文件的公共部分显示过来，至于端口号部分只显示member-prd.yml里面设置的端口号

综上所述我们在配置中心可以设置一个公共的yml文件，然后设置几个不同的配置的yml文件，反问某一个的时候会把公共的部分也进行加载

当然配置中心不仅仅能显示一种yml文件，它还能显示json， properties，xml等格式的文件，你只需要把后缀名切换成json，properties或者是xml即可,但是xml文件不支持暂时

如下图：

现在我们要把我们的配置中心的项目member做远程的连接和我的配置中心做连接，具体的操作如下所示:

我们要把resources目录下的application.yml删除

然后在resources目录中创建一个新的文件叫bootstrap.yml,为什么要切换成这个文件呢，是因为配置中心强制要求bootstrap.yml这个文件，并且必须是这个

具体的配置，如下所示：

spring:
  application:
    name: member   #这里的名字必须要和Eureka中的服务名称，和配置中心的名字保持一致

  #开启配置中心
  cloud:
    config:
      discovery:
        enabled: true
        service-id: config   #这里的名字要和我Eureka服务中的配置中心名称的服务保持一致

#注册进服务
eureka:
  client:
    service-url:
      defaultZone: defaultZone: http://localhost:8761/eureka/

让后我们启动项目member，但是它会报错，因为我们少了一个依赖，就是配置中心的客户端：

<!--配置中心的客户端-->
<dependency>
    <groupId>org.springframework.cloud</groupId>
    <artifactId>spring-cloud-config-client</artifactId>
</dependency>

但是我们启动后依旧会报错，我们需要再次更改bootstrap.yml配置文件：

spring:
  application:
    name: member   #这里的名字必须要和Eureka中的服务名称，和配置中心的名字保持一致

  #开启配置中心
  cloud:
    config:
      discovery:
        enabled: true
        service-id: config   #这里的名字要和我Eureka服务中的配置中心名称的服务保持一致

#找的是配置中心的哪个配置文件，因为在配置中心中我有两个类型的文件一个是dev一个是prd

#注意上线的时候把dev切换成prd就OK了
      profile: dev     
#注册进服务
eureka:
  client:
    service-url:
      defaultZone: http://localhost:8761/eureka/

eureka可以不写

#注册进服务
eureka:
  client:
    service-url:
      defaultZone: http://localhost:8761/eureka/

见到如下操作表明成功

 我们可以在浏览器中输入地址进行测试即可，如返回对应信息表明OK：

构建图书管理模块：

创建项目：(book)

<?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>parent</artifactId>
        <groupId>com.pb</groupId>
        <version>1.0-SNAPSHOT</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <artifactId>book</artifactId>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-config-client</artifactId>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-netflix-eureka-client</artifactId>
        </dependency>
    </dependencies>

</project>

bootstrap.yml

spring:
  application:
    name: book   #这里的名字必须要和Eureka中的服务名称，和配置中心的名字保持一致

  #开启配置中心
  cloud:
    config:
      discovery:
        enabled: true
        service-id: config   #这里的名字要和我Eureka服务中的配置中心名称的服务保持一致
      #找的是配置中心的哪个配置文件，因为在配置中心中我有两个类型的文件一个是dev一个是prd
      #注意上线的时候把dev切换成prd就OK了
      profile: dev

然后到我们的git的仓库中进行创建yml文件名字叫做book-dev.yml，具体的内容如下所示：

 

好下面我们开始对book项目进行操作：

数据库：

/*
SQLyog Professional v13.1.1 (64 bit)
MySQL - 5.7.29 : Database - scbook
*********************************************************************
*/

/*!40101 SET NAMES utf8 */;

/*!40101 SET SQL_MODE=''*/;

/*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;
CREATE DATABASE /*!32312 IF NOT EXISTS*/`scbook` /*!40100 DEFAULT CHARACTER SET utf8 */;

USE `scbook`;

/*Table structure for table `t_book` */

DROP TABLE IF EXISTS `t_book`;

CREATE TABLE `t_book` (
  `bid` int(11) NOT NULL AUTO_INCREMENT,
  `sn` varchar(20) DEFAULT NULL,
  `name` varchar(20) DEFAULT NULL,
  `author` varchar(20) DEFAULT NULL,
  `publishing` varchar(20) DEFAULT NULL,
  `bprice` float DEFAULT NULL,
  `sprice` float DEFAULT NULL,
  `btype` varchar(20) DEFAULT NULL,
  `stock` int(11) DEFAULT NULL,
  PRIMARY KEY (`bid`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8;

/*Data for the table `t_book` */

insert  into `t_book`(`bid`,`sn`,`name`,`author`,`publishing`,`bprice`,`sprice`,`btype`,`stock`) values 
(1,'aaa','java基础','admin','清华出版社',250,20,'动作',91),
(2,'bbb','spring强化','sasa','北大出版社',210,30,'言情',100),
(3,'admin','springboot','any','信息出版社',150,90,'java',99);

/*Table structure for table `t_borrow` */

DROP TABLE IF EXISTS `t_borrow`;

CREATE TABLE `t_borrow` (
  `brid` int(11) NOT NULL AUTO_INCREMENT,
  `bid` int(11) DEFAULT NULL,
  `mid` int(11) DEFAULT NULL,
  `takedate` datetime DEFAULT NULL,
  `returndate` datetime DEFAULT NULL,
  `createtime` datetime DEFAULT NULL,
  PRIMARY KEY (`brid`)
) ENGINE=InnoDB AUTO_INCREMENT=93 DEFAULT CHARSET=utf8;

/*Data for the table `t_borrow` */

insert  into `t_borrow`(`brid`,`bid`,`mid`,`takedate`,`returndate`,`createtime`) values 
(89,1,1,'2019-01-01 00:00:00','2019-05-05 00:00:00','2023-05-24 12:18:03'),
(90,1,1,'2019-01-01 00:00:00','2019-05-05 00:00:00','2023-05-24 12:20:04'),
(91,1,1,'2019-01-01 00:00:00','2019-05-05 00:00:00','2023-05-24 12:20:34'),
(92,3,1,'2023-05-02 00:00:00','2023-05-15 00:00:00','2023-05-24 12:32:24');

/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
/*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */;
/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;

先创建好book项目中对应的实体类Book;

package com.laosan.book.entity;
import lombok.Data;
import javax.persistence.*;
@Data
@Entity
@Table(name="t_book")
public class Book {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long bid;
    private String sn;
    private String name;
    private String author;
    private String publishing;
    private Float bprice;
    private Float sprice;
    private String btype;
    private Integer stock;
}

创建Dao层的代码：

package com.laosan.book.repository;
import com.laosan.book.entity.Book;
import org.springframework.data.jpa.repository.JpaRepository;
/**
 * Book的数据访问
 */
public interface BookRepository extends JpaRepository<Book, Long> {
}

创建Service层的代码：

package com.laosan.book.service;
import com.laosan.book.entity.Book;
import com.laosan.book.repository.BookRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class BookService {
    @Autowired
    private BookRepository repository;
    public List<Book> findAll() {
        List<Book> bookList = repository.findAll();
        return bookList;
    }
}

创建Controller层的代码：

package com.laosan.book.controller;
import com.laosan.book.entity.Book;
import com.laosan.book.service.BookService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@RestController

@CrossOrigin       //进行该Controller的跨域操作
public class BookController {
    @Autowired
    private BookService bookService;
    /**
     * book模块返回所有的操作
     * @return
     */
    @GetMapping("/list")
    public Map<String, Object> list() {
        Map<String, Object> map = new HashMap<>();
        try {
            List<Book> list = bookService.findAll();
            map.put("code", "0");
            map.put("message", "success");
            map.put("data", list);
        } catch (Exception e) {
            e.printStackTrace();
            map.put("code", e.getClass().getSimpleName());
            map.put("message", e.getMessage());
        }
        return map;
    }
}

写完之后我们先对book项目进行单体应用的测试操作即可，好重启我们的book项目，如下图所示：

我们再测试上通过网关的路由能够获得我们对应的book请求呢，如下图所示：以为我的book 项目也已经注册到了Eureka的服务中了 

下面我们完成对HTML页面部分ajax的开发：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">

    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<h2 style="text-align: center">图书借阅登记</h2>
<form id="frmBorrow" action="">
    <div class="weui-cells weui-cells_form">
        <div class="weui-cells__title">手机号<span id="errMobile" style="margin-left:10px;color: red"></span>
            <span id="succMobile" style="margin-left:10px;color: green"></span>
        </div>

        <div class="weui-cell weui-cell_vcode">
            <div class="weui-cell__bd">
                <input id="mobile" name="mobile" class="weui-input" type="tel" placeholder="请输入手机号">
            </div>
            <div class="weui-cell__ft">
                <button id="btnCheck" type="button" class="weui-vcode-btn">获取验证码</button>
            </div>
        </div>
        <div class="weui-cells__title">验证码</div>
        <div class="weui-cell weui-cell_vcode">
            <div class="weui-cell__bd">
                <input class="weui-input"  type="number" placeholder="请输入6位验证码">
            </div>

        </div>
        <div class="weui-cells__title">借阅图书</div>
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <input class="weui-input" id="name" name="name" type="text" placeholder="请选择要借阅的图书">
                <input type="hidden" name="bid" id="bid">
            </div>
        </div>

        <div class="weui-cells__title">借阅时间</div>
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <input type="text" name="takedate" class="weui-input" placeholder="请选择取书日期" id='takedate'/>
            </div>
        </div>

        <div class="weui-cells__title">归还时间</div>
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <input type="text" name="returndate" class="weui-input" placeholder="请选择还书日期" id='returndate'/>
            </div>
        </div>
        <br>
        <a href="javascript:;" id="btnSubmit" class="weui-btn weui-btn_primary">提交</a>
    </div>

</form>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>

<script>
    $("#takedate,#returndate").calendar({
        dateFormat: "yyyy-mm-dd"
    });


    //用户部分的开发
   $("#btnCheck").click(function() {
       var mobile = $("#mobile").val();
       $.ajax({
          url:"http://localhost:9000/member/check",
         type:"get",
         data:{"mobile":mobile},
         dataType:"json",
         success:function(json) {
             //console.log(json);   //测试
            if(json.code == "0") {
                $("#succMobile").text("会员：" + json.data.name);
               $("#succMobile").show();
               $("#errMobile").hide();
            }
            else {
                $("#errMobile").text(json.message);
               $("#succMobile").hide();
               $("#errMobile").show();
            }
         }
      });
   });

   //图书借阅部分的开发
    //我们先来通过ajax进行所有数据的查询超操作,并通过下拉菜单进行展示
    var name = $("#name").val();
    $.ajax({
        url:"http://localhost:9000/book/list",
        type:"get",
        dataType: "json",
        success : function(json) {
            //console.log(json);   //测试而已
            var books = json.data;
            var bs = new Array();  //创建一个数组用来封装多个book的信息
            for(var i = 0; i < books.length;i++) {
                var item = {};   //创建一个临时数组用来保存数据
                item.title = books[i].name;
                item.value = books[i].bid;
                bs.push(item);   //把item数组放入bs数组中
            }
            console.log(bs);    //进行数组的测试

            //jquery的weiui的下拉组件
            $("#name").select({           //下拉组件
                title: "请选择图书",      //小标题
                items: bs   //这里把刚才封装好的数组直接拿过来就可以了
            });
        }
    });
</script>
</body>
</html>

//我们先来通过ajax进行所有数据的查询超操作,并通过下拉菜单进行展示
    var name = $("#name").val();
    $.ajax({
        type:"GET",
        url:"http://localhost:9000/book/selectBookAll",
        dataType:"json",
        success:function (res) {
            console.log(res);
            var bs = new Array();   //javascript创建了一个数组
            for(var i = 0; i < res.length; i++) {
                var result = {};  //创建一个对象，这里JavaScript的一个对象操作，属性自己定义
                result.value= res[i].bid
                result.title  = res[i].name
                bs.push(result);
            }
            $("#name").select({           //下拉组件
                title: "请选择图书",      //小标题
                items: bs   //这里把刚才封装好的数组直接拿过来就可以了
            });

        }

    });

具体的效果如下图所示：

潇洒（sa）一点
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
spring-cloud入门之spring-cloud-config（配置中心）
08-28
使用 Spring Cloud Config 需要创建一个配置项目，用于存储所有项目的配置文件。然后，开发者可以使用 Git 仓库来存储配置文件，并使用 Spring Cloud Config Server 来管理和维护配置信息。 Spring Cloud Config ...
config-keeper配置中心-其他
06-12
config-keeper是一个基于Spring Boot 和Spring Cloud开发的配置中心，无缝兼容Spring Boot 和 Spring Cloud应用。 在微服务架构中，配置中心是个必不可少的基础服务。应用部署到生产环境后，由于各种原因，需要调整...
使用SpringCloudConfig连接码云报错Cannot clone or checkout repository:xxx
起航的博客
04-10 2586
使用SpringCloudConfig集中管理配置，将配置文件上传到码云（gitee.com），然后开始配置配置中心微服务。 新建微服务，导入maven依赖： <dependencies> <dependency> <groupId>org.springframework.cloud</groupId> ...
Spring Cloud Config 配置中心使用说明(6) -- 服务器 配置文件格式
xgw的专栏
09-06 436
1. 更多配置文件的格式
SpringCloud-config（git+码云）-（一）
fengchao169的博客
04-27 1572
SpringCloud-config（git+码云）新建一个工程 config-server 新建一个工程 config-server 1、启动类：ConfigServerApplication package com.cloud.config; import org.springframework.boot.autoconfigure.SpringBootApplication; import...
在git(码云)上托管SpringCloud的配置中心的配置文件，并通过springcloud配置中心读取配置文件
weixin_41756573的博客
03-20 4639
原创文章转载请注明来源：https://blog.csdn.net/weixin_41756573/article/details/88681721 1.访问https://gitee.com/登录码云 2.创建仓库 3.在弹出的页面填写仓库的相关信息，使用下面的方法初始化仓库 4.创建成功后，显示如下界面 5.创建springcloud微服务配置中心的文件 6.在新建...
学习springcloud的SpringCloudConfig(配置中心-码云git)。记录其中遇见的问题(参考纯洁的微笑)...
weixin_34161083的博客
04-30 1409
2019独角兽企业重金招聘Python工程师标准>>> ...
Springcloud-nacos实现配置和注册中心的方法
08-25
Springcloud-nacos是一种实现配置和注册中心的方法，它主要基于Nacos框架，提供了一种简洁易用的解决方案。Nacos是阿里开源的一款框架，致力于帮助开发者发现、配置和管理微服务。下面我们将详细介绍Springcloud-...
springcloud-config:springcloud-config的配置中心
05-23
SpringCloud Config 是一个基于 Spring Boot 的微服务配置中心，它提供了集中化管理和版本控制的配置管理平台，使得在分布式系统中能够动态地更新配置。在本文中，我们将深入探讨 SpringCloud Config 的核心概念、...
SpringCloud学习十：SpringCloud config 分布式配置
huiguo_的博客
11-11 718
文章目录一、概述二、环境搭建第一步：先建立连接码云长仓库的server端第二步：创建服务端项目springcloud-config-server-3344第一步：导入依赖第二步：修改application.yml第三步：修改主类Config_Server_3344第四步：然后你码云或者Githup里面要有一个 application.yml 文件第五步：测试第三步：配置客户端项目第一步：创建git的yml文件第二步：创建客户端springcloud-config-client-3355第三步：导入依赖第四步
SpringCloud Config(一) 配置方式的几种搭配
知易行难
08-02 1202
使用的本人的开放的git仓库，放在码云上： https://gitee.com/Sunyelw/springcloud-config.git 先给出Config所有的访问路径： ../{application}/{profile}[/{label}] ../{application}-{profile}.yml ../{label}/{application}-{profile}...
springcloud config配置中心，访问码云文件时报500错误，或者读取文件为空
sosmmh的博客
06-22 3083
springcloud config配置中心：    访问码云文件时报500错误：一开始在码云上建立了私有仓库，然后再config项目里配置账户密码访问一直报500错误。之后把仓库改成了公开，就可以了。用私有仓库的我还没搞好怎么弄，有大神说可能是需要使用公钥访问。    读取文件为空：一开始在码云建立的文件为 order.yml，结果访问时内容一直未空，之后就把码云的文件改为 order-prof...
SpringCloud Config 配置中心
da_kiku的博客
08-31 201
Spring Cloud Config 分布式配置中心 spring cloud config介绍： 在分布式系统中，由于服务数量非常多，配置文件分散在不同的微服务项目中，管理不方便。为了方便配置文件集中管理，需要分布式配置中心组件。在Spring Cloud中，提供了Spring Cloud Config，它支持配置文件放在配置服务的本地，也支持放在远程Git仓库（GitHub、码云）。 使用Spring Cloud Config配置中心后的架构如下图： Spring Boot版本：2.3.4.REL
SpringCloud config分布式配置
我能在河边钓一整天的鱼
05-21 174
目录 什么是SpringCloud config 分布式系统面临的配置文件问题 SpringCloud config 如何使用远程SpringCloud config配置 新建远程配置文件 server端连接远程config client端连接远程config 什么是SpringCloud config 分布式系统面临的配置文件问题 每个微服务都需要必要的配置信息才能运行，所以一套集中式的，动态的配置管理设施是必不可少的。SpringCloud提供了ConfigSe...
Spring Cloud Config 分布式配置中心实战详解
小小默：进无止境
07-27 3233
分布式系统中面临的配置问题 微服务意味着要将单体应用中的业务拆分成一个个子服务，每个服务的粒度相对较小，因此系统中会出现大量的服务。由于每个服务都需要必要的配置信息才能运行，所以一套集中式的、动态的配置管理设施是必不可少的。 SpringCloud提供了ConfigServer来解决这个问题—我们每一个微服务自己带着一个application.yml，项目中可能会有几十个上百个配置文件。 ...
SpringCloud Config分布式配置中心
xzy的博客
10-10 330
文章目录SpringCloud Config分布式配置中心总体思维导图大体概述Config配置中心总控中心搭建什么叫做总控中心？在码云上新建仓库在本地idea里面创建一个springcloud-config项目和码云中的仓库联系起来新建Module模块也就是配置中心的服务端cloud-config-center-3344POMYML主启动类Windows下修改hosts文件，增加映射启动类启动错误测试配置读取规则Config客户端配置与测试新建cloud-config-client-3355模块POMboo
SpringCloud Config配置中心
weixin_42914989的博客
02-26 194
14、Config：配置中心介绍 在分布式系统中，由于微服务数量特别多，配置文件分散在不同的微服务中，不方便管理。为了更方便管理配置文件，就需要统一管理的配置中心。Spring Cloud 提供了Spring Cloud Config，它支持配置文件统一管理，可以把全部微服务的配置文件放在Git远程仓库（GitHub、gitee码云）。 使用Spring Cloud Config配置中心后的架构如下图： 官网学习文档：https://cloud.spring.io/spring-cloud-static/
SpringClound——Config——尚硅谷阳哥学习视频笔记
qq_44891295的博客
03-31 523
文章目录1：Config介绍2：Config工作机制3：Config的使用 1：Config介绍 微服务意味着要将单体应用中的业务拆分成一个个子服务, 每个服务的粒度相对较小，因此系统中会出现大量的服务。由于每个服务都需要必要的配置信息才能运行，所以一套集中式的、动态的配置管理设施是必不可少的。 SpringCloud提供了ConfigServer来解决这个问题，我们每一个微服务自己带着一...
Spring cloud config 使用gitHub或者gitee连接
weixin_34146986的博客
06-15 939
1. 创建SpringCloud项目，引入对应的Spring-config-server对应的jar &lt;dependency&gt; &lt;groupId&gt;org.springframework.cloud&lt;/groupId&gt; &lt;artifactId&gt;spring-cloud-confi...
nacos配置中心的maven依赖名称是什么? A. spring-cloud-starter-alibaba-nacos-config B. spring-cloud-alibaba-nacos-config C. spring-cloud-starter-nacos-config D. spring-cloud-nacos-config
最新发布
05-29
nacos配置中心的 Maven 依赖名称是 `spring-cloud-starter-alibaba-nacos-config`，选项 A 是正确的。 该依赖是 Spring Cloud Alibaba 中集成 Nacos 配置中心的 Starter，包含了 Nacos 配置中心的核心依赖和 Spring...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值