中软国际暑期实习day15(2020.08.24)-Spring Cloud简单实践及vue简单实践

本文链接：https://blog.csdn.net/ataraxy_/article/details/108243216

今天主要学习Spring Cloud简单实践及vue简单实践。

文章目录

1.Spring Cloud简单实践

Spring Cloud 是一系列框架的有序集合，它利用 Spring Boot 的开发便利性简化了分布式系统的开发，比如服务发现、服务网关、服务路由、链路追踪等。Spring Cloud 并不重复造轮子，而是将市面上开发得比较好的模块集成进去，进行封装，从而减少了各模块的开发成本。换句话说：Spring Cloud 提供了构建分布式系统所需的“全家桶”。

SpringCloud 是基于SpringBoot实现的云应用开发工具。

（1）新建一个maven项目

引入相关依赖

<parent>
        <artifactId>spring-boot-starter-parent</artifactId>
        <groupId>org.springframework.boot</groupId>
        <version>2.3.3.RELEASE</version>
    </parent>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
    </dependencies>

    <!-- maven 可以帮助我们管理项目 -->
    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>org.springframework.cloud</groupId>
                <artifactId>spring-cloud-dependencies</artifactId>
                <version>Hoxton.RELEASE</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>

（2）新建一个eureka服务端模块

注意是在新建的maven项目上建立模块。

①引入依赖

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

②配置eureka服务端

application.yml

server:
  port: 8761

eureka:
  instance:
    hostname: localhost #ip
  client:
    service-url:
      defaultZone: http://localhost:8761/eureka
    register-with-eureka: false
    fetch-registry: false  #

③新建启动类

package com.example;

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

/**
 * @className: EurekaServerApplication
 * @description:
 * @author:
 * @date: 24/08/2020 09:14
 */
@SpringBootApplication
@EnableEurekaServer
public class EurekaServerApplication {

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

（3）新建一个eureka客户端模块

注意是在新建的maven项目上建立模块。

①引入依赖

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

②配置eureka客户端

application.yml

server:
  port: 8090

spring:
  application:
    name: demo

eureka:
  client:
    service-url:
      defaultZone: http://localhost:8761/eureka
  instance:
    prefer-ip-address: true

③新建启动类

package com.example;

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

/**
 * @className: EurekaClientApplication
 * @description:
 * @author:
 * @date: 24/08/2020 09:40
 */
@SpringBootApplication
@EnableEurekaClient
public class EurekaClientApplication {

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

（4）启动服务端启动类成功后再启动客户端

在浏览器中输入http://localhost:8761/，即可看到以下页面

并且也可以明显看到客户端以成功注册到服务端。

2.Vue简单实践

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

使用vue有两种方式，一种是直接使用vue的js文件，一种是借助cli构建vue项目，这里采用前一种。

（1）新建一个html文件

（2）引入vue.js文件

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

也可以去网上下载相应的js文件。

（3）编写相应的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

    <div id="app">
        {{msg}}
    </div>

    <script>
        let vm=new Vue({
            el:'#app',
            data:{
                msg:"今天天气真好"
            }

        })

    </script>

</body>
</html>