记一次Spring boot 和Vue的前后端分离的入门培训

由于公司之前是写C#的,现在要转 Java分布式 + vue,所以进行一次前后端的简单培训。

前端工具和环境:
Node.js V10.15.0
Vue.js V2.5.21
yarn: V1.13.0
IDE:VScode

后端工具和环境:
Maven: 3.52
jdk: 1.8
MySql: 14.14
IDE: IDEA
Spring Boot: 2.0+
Zookeeper:3.4.13

demo 地址:http://101.132.124.171:8000/about

源代码地址在下方。可以的话,给颗星星哦,谢谢!!!

Spring Boot + Vue 代码地址:https://github.com/liangwei0101/Spring-Boot-And-Vue.git

Dubbo-Spring-Boot代码地址: https://github.com/liangwei0101/Dubbo-Spring-Boot.git

demo.png

前后端分离(服务端渲染、浏览器渲染)

  • 实现真正的前后端解耦。

  • 核心思想是前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互。

  • 前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务(多种客户端,例如:浏览器,安卓,IOS等等)打下坚实的基础。

Vue.js

在讲Vue之前,需要大概了解下 HTML、CSS、JS是什么?

HTML是写标签的;CSS是写样式的;JS是给网页增加动态效果

HTMLCSSJavaScript

Vue介绍

  1. Vue是一套用于构建用户界面的渐进式框架,网址:https://cn.vuejs.org/

  2. Vue在Github的欢迎度

GithubStar.jpg
  1. 不需要操作Dom,实现了MVVM
// jquery的操作
$("#test3").val("Dolly Duck");

// Vue的操作
MVVM,实现了双向绑定
  1. 学习成本低,文档浅显易懂

Vue 建项目

  1. Vue 提供了一个官方的 CLI,为单页面应用 (SPA) 快速搭建繁杂的脚手架。基于Vue cli项目脚手架,网址:https://cli.vuejs.org/zh/guide/

  2. 运行以下命令其一来创建一个新项目,有默认选默认即可

      vue create vue-hello-world (命令行)
    
      vue ui (界面)
    
  3. 在创建好项目以后,运行以下命令将能看到初次项目创建的界面

      cd vue-hello-world
    
      yarn serve
    
  4. 默认情况下,在 浏览器访问 http://localhost:8080/ 将能看到如下界面:

vue.png

Vue 相关结构和生命周期介绍

  • 目录结构如下图:
vue-cli3.0.png
  • 单个.vue文件的组成部介绍

    <template>
    <!--html-->
    </template>
    
    <script>
    //js
    </script>
    
    <style>
    /* css style */
    </style>
    
  • 组件化应用构建

使用小型、独立和通常可复用的组件构建大型应用,一个页面如搭积木一样

components.png
  • Vue的生命周期如下图:
    lifecycle.png
  • 钩子方法: 模板方法的执行结果,该方法就叫做钩子方法,个人理解:影响了模板的执行,把函数勾住了,这个方法就是钩子函数。
钩子函数 解释
beforeCreate 实例初始化自动调用
created 实例创建后调用
beforeMounte 在mount之前运行,元素已经加载,但是属性值没渲染
mounted 并挂载到实例上去之后调用该钩子
beforeDestroy 在开始销毁实例时调用
destroyed 在实例销毁后调用

Vue 常用指令

  • 声明式渲染

    <div id="app">
      {{ message }}
    </div>
    
    data: {
        message: 'Hello Vue!'
    }
    
  • 条件渲染

    <div id="app-3">
      <p v-if="seen">现在你看到我了</p>
    </div>
    
    data: {
        seen: true
    }
    
  • 循环渲染

    <div id="app-4">
      <ol>
        <li v-for="todo in todos">
          {{ todo.text }}
        </li>
      </ol>
    </div>
    
    data: {
      todos: [
        { text: '学习 JavaScript' },
        { text: '学习 Vue' },
        { text: '整个牛项目' }
      ]
    }
    
  • 监听事件

    可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。

    <div id="example-2">
    <!-- `greet` 是在下面定义的方法名 -->
    <button v-on:click="greet">Greet</button>
    </div>
    
    methods: {
      greet: function () {
        // `this` 在方法里指向当前 Vue 实例
        alert('Hello ' + this.name + '!')
      }
    }
    
  • 计算属性缓存 vs 方法

    <div id="example">
      <p>Original message: "{{ message }}"</p>
      <p>Computed reversed message: "{{ reversedMessage }}"</p>
    </div>
    
    var vm = new Vue({
      el: '#example',
      data: {
        message: 'Hello'
      },
      computed: {
        // 计算属性的 getter
        reversedMessage: function () {
          // `this` 指向 vm 实例
          return this.message.split('').reverse().join('')
        }
      },
      methods: {
        // 方法
        reversedMessage: function () {
        return this.message.split('').reverse().join('')
        }
      }
    })
    
  • 数据变化,watch

    var vm = new Vue({
      el: '#demo',
      data: {
        firstName: 'Foo',
        lastName: 'Bar'
      },
      computed: {
        // 当两个值变化时,将会触发此函数
        fullName: function () {
          return this.firstName + ' ' + this.lastName
        }
      }
    })
    
  • 表单输入绑定

    <input v-model="message" placeholder="edit me">
    <p>Message is: {{ message }}</p>
    
  • 缩写

    v-bind 缩写

    <!-- 完整语法 -->
    <a v-bind:href="url">...</a>
    
    <!-- 缩写 -->
    <a :href="url">...</a>
    

    v-on 缩写

    <!-- 完整语法 -->
    <a v-on:click="doSomething">...</a>
    
    <!-- 缩写 -->
    <a @click="doSomething">...</a>
    

路由

  // 可提供懒加载
  const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
  })
<!--html跳转-->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
// js跳转
router.push({ name: 'user', params: { userId: 123 }})

使用 axios 访问 API

// get请求 
axios.get('/user', {
  params: {
  ID: 12345
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});
// post 请求
axios.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

在学习完以上知识以后,将能使用Vue做出简单的页面运用

Spring Boot

在讲Spring Boot之前,需要大概了解下Java的一些相关

  • 语法层面和 C# 差不多,这里略过

  • Java的工作原理


    java.jpg
  • JVM 虚拟机


    jvm1.png
区域 解释
堆(heap) 由所有线程共享;new的对象的实例。
虚拟机栈(Stack) 每个线程拥有独立的栈;存放局部变量、对象引用。被调方法结束后,对应栈区变量等立即销毁
静态/方法区 方法区包含所有的class信息和static变量

介绍

Spring Boot 是所有基于 Spring 开发的项目的。Spring Boot 的设计是为了让你尽可能快的跑起来 Spring 应用程序并且尽可能减少你的配置文件。

使用Spring Boot开发单个RESTful服务

由于网上资源众多,就不详细编写创建步骤了。这里找了一个网上的教程,大家可以按这个步骤去创建一个项目,能用浏览器能访问就行。SpringBoot新建HelloWorld工程: https://blog.csdn.net/small_mouse0/article/details/77800737

项目目录结构

SpringBootCli.png

和前端交互

  1. 前端的Http请求会到controller这一层,而controller层根据相应路由信息注解会跳转到相应的类。
// 如: /api/user 的get请求将会被 UserQry() 函数处理

@RequestMapping("/api")
public class UserController {
    
    @RequestMapping(value ="/user", method = RequestMethod.GET)
    public List<User> UserQry() {
        return userService.getUser();
    }
}
  1. 在框架经过处理以后,最终调用的是mapper层。
mysql.png
  @Select("select * from user")
  List<User> getUser();
  1. 在执行相应的Sql以后,将会依次返回到controller层,然后在Http的返回中将会以Json串对象返回给前端的调用方。

  2. 前端在Http的response中拿到返回的值,然后再进行一些处理。

概念

  • spring ioc容器:,主要用来管理对象和依赖,以及依赖的注入

  • 依赖注入: 不用new,让Spring控制new过程

  • 控制反转: 不是用new方式实例化对象,实质的控制权已经交由程序管理

  • 面向切面: 把一些功能抽离出来,再通过“动态织入”的方式掺入到业务中

Bean

bean是一个对象,由ioc容器生成的对象就是一个bean

配置VS注解

// Spring 的操作
package com.yiibai.common;

public class Customer 
{
    private Person person;
    
    public Customer(Person person) {
        this.person = person;
    }
    
    public void setPerson(Person person) {
        this.person = person;
    }
    //...
}

package com.yiibai.common;

public class Person 
{
  //...
}
// Spring 的配置Bean的xml
<bean id="customer" class="com.yiibai.common.Customer">
  <property name="person" ref="person" />
</bean>

<bean id="person" class="com.yiibai.common.Person" />
// Spring 的注解方式
public class Customer 
{
  @Autowired
  private Person person;
}

注解

  1. @SpringBootApplication

@SpringBootApplication = @Configuration + @EnableAutoConfiguration + @ComponentScan 简化程序的配置。

  1. @Configuration

注解在类上,表示这是一个IOC容器,相当于spring的配置文件,IOC容器的配置类。

  1. @ComponentScan

如果扫描到有@Component @Controller @Service等这些注解的类,则把这些类注册为bean。@Controller, @Service, @Repository是@Component的细化,这三个注解比@Component带有更多的语义,它们分别对应了控制层、服务层、持久层的类。

  1. @RestController

告诉Spring以JSON字符串的形式渲染结果,并直接返回给调用者。

  1. @RequestMapping

告诉Spring这是一个用来处理请求地址映射的注解。

  1. @Autowired

可以对类成员变量、方法及构造函数进行标注。从IoC容器中去查找,并自动装配。(去除@Autowired可以运行一下试试)

  1. Mybatis的@Mapper

注解的接口生成一个实现类

跨域

浏览器从一个域名的网页去请求另一个域名的资源时,域名、端口、协议任一不同,都是跨域。

跨域资源共享(CORS) 是一种机制,它使用额外的 HTTP 头来告诉浏览器 让运行的Web应用被准许访问来自不同源服务器上的指定的资源。

RESTful风格

Rest是web服务的一种架构风格,一种设计风格,URL只指定资源,以HTTP方法动词进行不同的操作。

// 非RESTful接口
api/getfile.php - 获取文件信息,下载文件
api/uploadfile.php - 上传创建文件
api/deletefile.php - 删除文件

// 只需要api/users这一个接口
GET http://localhost:8080/api/users (查询用户) 
POST http://localhost:8080/api/users (新增用户) 
PUT http://localhost:8080/api/users (更新用户) 
DELETE http://localhost:8080/api/users (删除用户) 

Restful好处:

  • URL具有很强可读性的,具有自描述性
  • 规范化请求过程和返回结果
  • 资源描述与视图的松耦合
  • 可提供OpenAPI,便于第三方系统集成,提高互操作性
  • 提供无状态的服务接口,降低复杂度,可提高应用的水平扩展性

扩展

JAVA的内存模型(非线程安全)、Linq、JWT、Redis、WebSocket、单点登录(SSO)、消息队列

Spring Cloud的分布式

其实在上面我们做的一个Spring Boot小的demo就是一个服务。若干个小的Spring Boot的模块,合在一起。使用一些分布式的套件,将模块集群化,让模块之间联系和管理起来,其实就是Spring Cloud的基本的微服务。

Spring Boot和 Spring Cloud的关系

基于Spring Boot 快速开发单个微服务,Spring Cloud是一个基于Spring Boot实现的开发工具;Spring Boot专注于快速、方便集成的单个微服务个体,Spring Cloud关注全局的服务治理框架;Spring Boot可以离开Spring Cloud独立使用开发项目,但是Spring Cloud离不开Spring Boot,属于依赖的关系。

Dubbo

Dubbo 是一款高性能Java RPC框架,地址:http://dubbo.apache.org/zh-cn/

Dubbo的微服务的一些概念

architecture.png
  1. 生产者发布服务到服务注册中心中

  2. 消费者在服务注册中心中订阅服务

  3. 消费者调用已经注册的服务

Dubbo的实现单个微服务

// 定义服务接口标准
public interface DemoService {

    String sayHello(String name);
}
// 生产者项目引用并实现
@Service
public class DemoServiceImpl implements DemoService {

  @Override
  public String sayHello(String name) {
    return "Hello, " + name + " (from Spring Boot)";
  }
}
// 消费者引用然后调用
@RestController
public class DemoConsumerController {

  @Reference
  private DemoService demoService;

  @RequestMapping("/sayHello/{name}")
  public String sayHello(@PathVariable("name") String name) {
    return demoService.sayHello(name);
  }
}

Dubbo监控和接口展示

Dubbo ops.png

分布式的基础套件介绍

cloud.png
  • eureka、zookeeper 服务注册和发现模块,服务注册在服务中心,提供给消费者使用。

  • Hystrix 断路器。为了保证其高可用,单个服务通常会集群部署。如果单个服务出现问题,调用这个服务就会出现线程阻塞,此时若有大量的请求涌入,Servlet容器的线程资源会被消耗完毕,导致服务瘫痪。服务与服务之间的依赖性,故障会传播,会对整个微服务系统造成灾难性的严重后果。

  • zuul 路由网关。Zuul的主要功能是路由转发和过滤器。比如/api/user转发到到user服务,/api/shop转发到到shop服务

  • Spring Cloud Config 在服务数量巨多时,为了方便服务配置文件统一管理,实时更新,需要分布式配置中心组件。

  • Spring Cloud Sleuth 功能就是在分布式系统中提供追踪解决方案。

Spring Cloud 和 Dubbo 对比

  • 基础套件对比


    duobbo@Spring.png

Dubbo 只是实现了服务治理,而 Spring Cloud 子项目分别覆盖了微服务架构下的众多部件,而服务治理只是其中的一个方面。Dubbo 提供了各种 Filter,对于上述中“无”的要素,可以通过扩展 Filter 来完善。例如:

分布式配置:可以使用淘宝的 diamond、百度的 disconf 来实现分布式配置管理;
服务跟踪:可以使用京东开源的 Hydra,或者扩展 Filter 用 Zippin 来做服务跟踪;
批量任务:可以使用当当开源的 Elastic-Job、tbschedule。

  • 性能比较

[图片上传失败...(image-20b722-1550892455751)]

  • 服务依赖方式

Dubbo:服务提供方与消费方通过接口的方式依赖,因此需要为每个微服务定义了各自的 Interface接口,并通过持续集成发布到私有仓库中,调用方应用对微服务提供的抽象接口存在强依赖关系,开发、测试、集成环境都需要严格的管理版本依赖。

Spring Cloud:服务提供方和服务消费方通过 JSON 方式交互,因此只需要定义好相关 JSON 字段即可,消费方和提供方无接口依赖。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,802评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,109评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,683评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,458评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,452评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,505评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,901评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,550评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,763评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,556评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,629评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,330评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,898评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,897评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,140评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,807评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,339评论 2 342

推荐阅读更多精彩内容

  • 前言 现在研发的项目启动今已近一年之久,期间从项目属性、人员规模、系统定位等方面都发生了很大的变化,而且是越变越好...
    孙振强阅读 12,276评论 1 58
  • 今天是什么日子 起床:4:32 就寝:21:00 纪念日:2.0践行第27天 叫我起床的不是闹钟是梦想 年度目标及...
    fc877a4d7371阅读 195评论 0 0
  • 一整天都没有你的消息 现在的你在值班吧 已经睡了么 会不会也有一点不习惯呢 白天好几次手机响了以为也许会是你 但打...
    大宝天天天天见阅读 77评论 0 0
  • 个人估值,就是凭借自己对该商品的估值,且愿意为了获得该商品而放弃其他商品的最大数量。(一个人对一件商品的个人估值,...
    idyllis阅读 590评论 0 0
  • 我应该谢谢你,在和你吵过无数次架,每次都想离婚之后。你就像什么都没有发生过一样,继续夸我的好。 我应该感谢你,在我...
    唐晓诗阅读 656评论 0 0