1. 首页
  2. IT资讯

Spring Boot 和 Vue 前后端分离教程(附源码)

“u003Cpreu003Eu003Cdivu003Eu003Cdivu003Eu003Cpu003EJava后端,选择u003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cu002Fdivu003Eu003Cdivu003Eu003Cpu003E优质文章,及时送达u003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cdivu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002FRcsUnd92eoboDR” img_width=”640″ img_height=”29″ alt=”Spring Boot 和 Vue 前后端分离教程(附源码)” inline=”0″u003Eu003Cpu003E作者 u003Cu002Fpu003Eu003Cpu003E| 梁小生0101u003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cu002Fpreu003Eu003Cpu003Ejuejin.imu002Fpostu002F5c622fb5e51d457f9f2c2381u003Cu002Fpu003Eu003Cpu003E前端工具和环境:u003Cu002Fpu003Eu003Culu003Eu003Cliu003Eu003Cpu003ENode.js V10.15.0u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cliu003Eu003Cpu003EVue.js V2.5.21u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cliu003Eu003Cpu003Eyarn: V1.13.0u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cliu003Eu003Cpu003EIDE:VScodeu003Cu002Fpu003Eu003Cu002Fliu003Eu003Cu002Fulu003Eu003Cpu003E后端工具和环境:u003Cu002Fpu003Eu003Culu003Eu003Cliu003Eu003Cpu003EMaven: 3.52u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cliu003Eu003Cpu003Ejdk: 1.8u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cliu003Eu003Cpu003EMySql: 14.14u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cliu003Eu003Cpu003EIDE: IDEAu003Cu002Fpu003Eu003Cu002Fliu003Eu003Cliu003Eu003Cpu003ESpring Boot: 2.0+u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cliu003Eu003Cpu003EZookeeper:3.4.13u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cu002Fulu003Eu003Cpu003Eu003Cu002Fpu003Eu003Ch1 toutiao-origin=”h2″u003E前后端分离(服务端渲染、浏览器渲染)u003Cu002Fh1u003Eu003Cpu003E实现真正的前后端解耦。u003Cu002Fpu003Eu003Cpu003E核心思想是前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互。u003Cu002Fpu003Eu003Cpu003E前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务(多种u003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-2″u003E客户端u003Cu002Fiu003E,例如:浏览器,安卓,IOS等等)打下坚实的基础。u003Cu002Fpu003Eu003Cpu003Eu003Cu002Fpu003Eu003Ch1 toutiao-origin=”h2″u003EVue.jsu003Cu002Fh1u003Eu003Cpu003E在讲Vue之前,需要大概了解下 HTML、CSS、JS是什么?u003Cu002Fpu003Eu003Cpu003EHTML是写标签的;CSS是写样式的;JS是给网页增加动态效果u003Cu002Fpu003Eu003Cpu003Eu003Cu002Fpu003Eu003Ch2 toutiao-origin=”h3″u003Eu003Cstrong toutiao-origin=”span” class=”highlight-text”u003EVue介绍u003Cu002Fstrongu003Eu003Cu002Fh2u003Eu003Cpu003E1,Vue是一套用于构建用户界面的渐进式框架,网址:cn.vuejs.orgu002Fu003Cu002Fpu003Eu003Cpu003E2,Vue在Github的欢迎度u003Cu002Fpu003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002FRfz0JZGG2CvWdk” img_width=”320″ img_height=”854″ alt=”Spring Boot 和 Vue 前后端分离教程(附源码)” inline=”0″u003Eu003Cpu003E3 不需要操作Dom,实现了MVVMu003Cu002Fpu003Eu003Cpreu003Eu003Ccodeu003Eu002Fu002F jquery的操作u003Cu002Fcodeu003Eu003Ccodeu003E$(“#test3”).val(“Dolly Duck”);u003Cu002Fcodeu003Eu003Cbru003Eu003Ccodeu003Eu002Fu002F Vue的操作u003Cu002Fcodeu003Eu003Ccodeu003EMVVM,实现了双向绑定u003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cpu003E4,学习成本低,文档浅显易懂u003Cu002Fpu003Eu003Cpu003Eu003Cu002Fpu003Eu003Ch2 toutiao-origin=”h3″u003Eu003Cstrong toutiao-origin=”span” class=”highlight-text”u003EVue 建项目u003Cu002Fstrongu003Eu003Cu002Fh2u003Eu003Cpu003E1,Vue 提供了一个官方的 CLI,为单页面应用 (SPA) 快速搭建繁杂的脚手架。基于Vue cli项目脚手架,网址:cli.vuejs.orgu002Fzhu002Fguideu002Fu003Cu002Fpu003Eu003Cpu003E2,运行以下命令其一来创建一个新项目,有默认选默认即可u003Cu002Fpu003Eu003Cpreu003Eu003Cdivu003Eu003Cpreu003Eu003Ccodeu003Evue create vue-hello-world (命令行)u003Cu002Fcodeu003Eu003Ccodeu003Evue ui (界面)u003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cu002Fdivu003Eu003Cu002Fpreu003Eu003Cpu003E3,在创建好项目以后,运行以下命令将能看到初次项目创建的界面u003Cu002Fpu003Eu003Cpreu003Eu003Cdivu003Eu003Cpreu003Eu003Ccodeu003Ecd vue-hello-worldu003Cu002Fcodeu003Eu003Ccodeu003Eyarn serveu003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cu002Fdivu003Eu003Cu002Fpreu003Eu003Cpu003E4,默认情况下,在 浏览器访问 u003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-3″u003Ehttpu003Cu002Fiu003E:u002Fu002Flocau003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-6″u003Elhu003Cu002Fiu003Eost:8080u002F 将能看到如下界面:u003Cu002Fpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002FRfz0JZg21iWi0c” img_width=”1080″ img_height=”687″ alt=”Spring Boot 和 Vue 前后端分离教程(附源码)” inline=”0″u003Eu003Cpu003Eu003Cu002Fpu003Eu003Ch2 toutiao-origin=”h3″u003Eu003Cstrong toutiao-origin=”span” class=”highlight-text”u003EVue 相关结构和生命周期介绍u003Cu002Fstrongu003Eu003Cu002Fh2u003Eu003Cpu003E1,目录结构如下图:u003Cu002Fpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002FRfz0JZtCH3c2pX” img_width=”640″ img_height=”400″ alt=”Spring Boot 和 Vue 前后端分离教程(附源码)” inline=”0″u003Eu003Cpu003E2,单个.vue文件的组成介绍u003Cu002Fpu003Eu003Cpreu003Eu003Cdivu003Eu003Cpreu003Eu003Ccodeu003E<template>u003Cu002Fcodeu003Eu003Ccodeu003E<!–html–>u003Cu002Fcodeu003Eu003Ccodeu003E<u002Ftemplate>u003Cu002Fcodeu003Eu003Cbru003Eu003Ccodeu003E<script>u003Cu002Fcodeu003Eu003Ccodeu003Eu002Fu002Fjsu003Cu002Fcodeu003Eu003Ccodeu003E<u002Fscript>u003Cu002Fcodeu003Eu003Cbru003Eu003Ccodeu003E<style>u003Cu002Fcodeu003Eu003Ccodeu003Eu002F* css style *u002Fu003Cu002Fcodeu003Eu003Ccodeu003E<u002Fstyle>u003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cu002Fdivu003Eu003Cu002Fpreu003Eu003Cpu003E3,组件化应用构建u003Cu002Fpu003Eu003Cpu003E使用小型、独立和通常可复用的组件构建大型应用,一个页面如搭积木一样u003Cu002Fpu003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002FRfz0Ja7IGgyZK2″ img_width=”640″ img_height=”248″ alt=”Spring Boot 和 Vue 前后端分离教程(附源码)” inline=”0″u003Eu003Cpu003E4,Vue的生命周期如下图:u003Cu002Fpu003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002FRfz0JyaAShXyB5″ img_width=”505″ img_height=”1280″ alt=”Spring Boot 和 Vue 前后端分离教程(附源码)” inline=”0″u003Eu003Cpu003E钩子方法: 模板方法的执行结果,该方法就叫做钩子方法,个人理解:影响了模板的执行,把函数勾住了,这个方法就是钩子函数。u003Cu002Fpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002FRfz0JyqF5FGPLh” img_width=”537″ img_height=”439″ alt=”Spring Boot 和 Vue 前后端分离教程(附源码)” inline=”0″u003Eu003Cpu003Eu003Cu002Fpu003Eu003Ch2 toutiao-origin=”h3″u003Eu003Cstrong toutiao-origin=”span” class=”highlight-text”u003EVue 常用指令u003Cu002Fstrongu003Eu003Cu002Fh2u003Eu003Cpu003Eu003Cstrongu003E声明式渲染u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpreu003Eu003Cdivu003Eu003Cpreu003Eu003Ccodeu003E<div id=”u003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-1″u003Eappu003Cu002Fiu003E”>u003Cu002Fcodeu003Eu003Ccodeu003E {{ message }}u003Cu002Fcodeu003Eu003Ccodeu003E<u002Fdiv>u003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cu002Fdivu003Eu003Cu002Fpreu003Eu003Cpreu003Eu003Ccodeu003Edata: {u003Cu002Fcodeu003Eu003Ccodeu003E message: ‘Hello Vue!’u003Cu002Fcodeu003Eu003Ccodeu003E}u003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cpu003Eu003Cstrongu003E条件渲染u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpreu003Eu003Cdivu003Eu003Cpreu003Eu003Ccodeu003E<div id=”u003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-1″u003Eappu003Cu002Fiu003E-3″>u003Cu002Fcodeu003Eu003Ccodeu003E <p v-if=”seen”>现在你看到我了<u002Fp>u003Cu002Fcodeu003Eu003Ccodeu003E<u002Fdiv>u003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cu002Fdivu003Eu003Cu002Fpreu003Eu003Cpreu003Eu003Cdivu003Eu003Cpreu003Eu003Ccodeu003Edata: {u003Cu002Fcodeu003Eu003Ccodeu003E seen: trueu003Cu002Fcodeu003Eu003Ccodeu003E}u003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cu002Fdivu003Eu003Cu002Fpreu003Eu003Cpu003Eu003Cstrongu003E循环渲染u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpreu003Eu003Ccodeu003E<div id=”u003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-1″u003Eappu003Cu002Fiu003E-4″>u003Cu002Fcodeu003Eu003Ccodeu003E <ol>u003Cu002Fcodeu003Eu003Ccodeu003E <u003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-5″u003Eliu003Cu002Fiu003E v-for=”todo in todos”>u003Cu002Fcodeu003Eu003Ccodeu003E {{ todo.text }}u003Cu002Fcodeu003Eu003Ccodeu003E <u002Fu003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-5″u003Eliu003Cu002Fiu003E>u003Cu002Fcodeu003Eu003Ccodeu003E <u002Fol>u003Cu002Fcodeu003Eu003Ccodeu003E<u002Fdiv>u003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cpreu003Eu003Ccodeu003Edata: {u003Cu002Fcodeu003Eu003Ccodeu003E todos: [u003Cu002Fcodeu003Eu003Ccodeu003E { text: ‘学习 JavaScript’ },u003Cu002Fcodeu003Eu003Ccodeu003E { text: ‘学习 Vue’ },u003Cu002Fcodeu003Eu003Ccodeu003E { text: ‘整个牛项目’ }u003Cu002Fcodeu003Eu003Ccodeu003E ]u003Cu002Fcodeu003Eu003Ccodeu003E}u003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cpu003Eu003Cstrongu003E监听事件u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。u003Cu002Fpu003Eu003Cpreu003Eu003Ccodeu003E<div id=”example-2″>u003Cu002Fcodeu003Eu003Ccodeu003E<!– `greet` 是在下面定义的方法名 –>u003Cu002Fcodeu003Eu003Ccodeu003E<button v-on:click=”greet”>Greet<u002Fbutton>u003Cu002Fcodeu003Eu003Ccodeu003E<u002Fdiv>u003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cpreu003Eu003Ccodeu003Emethods: {u003Cu002Fcodeu003Eu003Ccodeu003E greet: function {u003Cu002Fcodeu003Eu003Ccodeu003E u002Fu002F `this` 在方法里指向当前 Vue 实例u003Cu002Fcodeu003Eu003Ccodeu003E alert(‘Hello ‘ + this.name + ‘!’)u003Cu002Fcodeu003Eu003Ccodeu003E }u003Cu002Fcodeu003Eu003Ccodeu003E}u003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cpu003Eu003Cstrongu003E计算属性缓存 vs 方法u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpreu003Eu003Ccodeu003E<div id=”example”>u003Cu002Fcodeu003Eu003Ccodeu003E <p>Original message: “{{ message }}”<u002Fp>u003Cu002Fcodeu003Eu003Ccodeu003E <p>Computed reversed message: “{{ reversedMessage }}”<u002Fp>u003Cu002Fcodeu003Eu003Ccodeu003E<u002Fdiv>u003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cpreu003Eu003Ccodeu003Evar vm = new Vue({u003Cu002Fcodeu003Eu003Ccodeu003E el: ‘#example’,u003Cu002Fcodeu003Eu003Ccodeu003E data: {u003Cu002Fcodeu003Eu003Ccodeu003E message: ‘Hello’u003Cu002Fcodeu003Eu003Ccodeu003E },u003Cu002Fcodeu003Eu003Ccodeu003E computed: {u003Cu002Fcodeu003Eu003Ccodeu003E u002Fu002F 计算属性的 getteru003Cu002Fcodeu003Eu003Ccodeu003E reversedMessage: function {u003Cu002Fcodeu003Eu003Ccodeu003E u002Fu002F `this` 指向 vm 实例u003Cu002Fcodeu003Eu003Ccodeu003E return this.message.split(”).reverse.join(”)u003Cu002Fcodeu003Eu003Ccodeu003E }u003Cu002Fcodeu003Eu003Ccodeu003E },u003Cu002Fcodeu003Eu003Ccodeu003E methods: {u003Cu002Fcodeu003Eu003Ccodeu003E u002Fu002F 方法u003Cu002Fcodeu003Eu003Ccodeu003E reversedMessage: function {u003Cu002Fcodeu003Eu003Ccodeu003E return this.message.split(”).reverse.join(”)u003Cu002Fcodeu003Eu003Ccodeu003E }u003Cu002Fcodeu003Eu003Ccodeu003E }u003Cu002Fcodeu003Eu003Ccodeu003E})u003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cpu003Eu003Cstrongu003E数据变化,watchu003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpreu003Eu003Ccodeu003Evar vm = new Vue({u003Cu002Fcodeu003Eu003Ccodeu003E el: ‘#demo’,u003Cu002Fcodeu003Eu003Ccodeu003E data: {u003Cu002Fcodeu003Eu003Ccodeu003E firstName: ‘Foo’,u003Cu002Fcodeu003Eu003Ccodeu003E lastName: ‘Bar’u003Cu002Fcodeu003Eu003Ccodeu003E },u003Cu002Fcodeu003Eu003Ccodeu003E computed: {u003Cu002Fcodeu003Eu003Ccodeu003E u002Fu002F 当两个值变化时,将会触发此函数u003Cu002Fcodeu003Eu003Ccodeu003E fullName: function {u003Cu002Fcodeu003Eu003Ccodeu003E return this.firstName + ‘ ‘ + this.lastNameu003Cu002Fcodeu003Eu003Ccodeu003E }u003Cu002Fcodeu003Eu003Ccodeu003E }u003Cu002Fcodeu003Eu003Ccodeu003E})u003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cpu003Eu003Cstrongu003E表单输入绑定u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpreu003Eu003Ccodeu003E<input v-model=”message” placeholder=”edit me”>u003Cu002Fcodeu003Eu003Ccodeu003E<p>Message is: {{ message }}<u002Fp>u003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cpu003Eu003Cstrongu003E缩写u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Ev-bind 缩写u003Cu002Fpu003Eu003Cpreu003Eu003Ccodeu003E<!– 完整语法 –>u003Cu002Fcodeu003Eu003Ccodeu003E<a v-bind:href=”url”>…<u002Fa>u003Cu002Fcodeu003Eu003Cbru003Eu003Ccodeu003E<!– 缩写 –>u003Cu002Fcodeu003Eu003Ccodeu003E<a :href=”url”>…<u002Fa>u003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cpu003Ev-on 缩写u003Cu002Fpu003Eu003Cpreu003Eu003Ccodeu003E<!– 完整语法 –>u003Cu002Fcodeu003Eu003Ccodeu003E<a v-on:click=”doSomething”>…<u002Fa>u003Cu002Fcodeu003Eu003Cbru003Eu003Ccodeu003E<!– 缩写 –>u003Cu002Fcodeu003Eu003Ccodeu003E<a @click=”doSomething”>…<u002Fa>u003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cpu003Eu003Cstrongu003E路由u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpreu003Eu003Ccodeu003Eu002Fu002F 可提供加载u003Cu002Fcodeu003Eu003Ccodeu003Econst router = new VueRouter({u003Cu002Fcodeu003Eu003Ccodeu003Eroutes: [u003Cu002Fcodeu003Eu003Ccodeu003E {u003Cu002Fcodeu003Eu003Ccodeu003E path: ‘u002Fuseru002F:userId’,u003Cu002Fcodeu003Eu003Ccodeu003E name: ‘user’,u003Cu002Fcodeu003Eu003Ccodeu003E component: Useru003Cu002Fcodeu003Eu003Ccodeu003E }u003Cu002Fcodeu003Eu003Ccodeu003E]u003Cu002Fcodeu003Eu003Ccodeu003E})u003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cpreu003Eu003Ccodeu003E<!–html跳转–>u003Cu002Fcodeu003Eu003Ccodeu003E<router-link :to=”{ name: ‘user’, params: { useru003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-5″u003EId:u003Cu002Fiu003E 123 }}”>User<u002Frouter-link>u003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cpreu003Eu003Ccodeu003Eu002Fu002F js跳转u003Cu002Fcodeu003Eu003Ccodeu003Erouter.push({ name: ‘user’, params: { useru003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-5″u003EId:u003Cu002Fiu003E 123 }})u003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cpu003Eu003Cu002Fpu003Eu003Ch2 toutiao-origin=”h3″u003E使用 axios 访问 APIu003Cu002Fh2u003Eu003Cpreu003Eu003Ccodeu003Eu002Fu002F get请求 u003Cu002Fcodeu003Eu003Ccodeu003Eaxios.get(‘u002Fuser’, {u003Cu002Fcodeu003Eu003Ccodeu003E params: {u003Cu002Fcodeu003Eu003Ccodeu003E u003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-5″u003EID:u003Cu002Fiu003E 12345u003Cu002Fcodeu003Eu003Ccodeu003E }u003Cu002Fcodeu003Eu003Ccodeu003E})u003Cu002Fcodeu003Eu003Ccodeu003E.then(function (response) {u003Cu002Fcodeu003Eu003Ccodeu003E console.log(response);u003Cu002Fcodeu003Eu003Ccodeu003E})u003Cu002Fcodeu003Eu003Ccodeu003E.catch(function (error) {u003Cu002Fcodeu003Eu003Ccodeu003E console.log(error);u003Cu002Fcodeu003Eu003Ccodeu003E});u003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cpreu003Eu003Ccodeu003Eu002Fu002F post 请求u003Cu002Fcodeu003Eu003Ccodeu003Eaxios.post(‘u002Fuser’, {u003Cu002Fcodeu003Eu003Ccodeu003E firstName: ‘Fred’,u003Cu002Fcodeu003Eu003Ccodeu003E lastName: ‘Flintstone’u003Cu002Fcodeu003Eu003Ccodeu003E})u003Cu002Fcodeu003Eu003Ccodeu003E.then(function (response) {u003Cu002Fcodeu003Eu003Ccodeu003E console.log(response);u003Cu002Fcodeu003Eu003Ccodeu003E})u003Cu002Fcodeu003Eu003Ccodeu003E.catch(function (error) {u003Cu002Fcodeu003Eu003Ccodeu003E console.log(error);u003Cu002Fcodeu003Eu003Ccodeu003E});u003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cpu003E在学习完以上知识以后,将能使用Vue做出简单的页面运用u003Cu002Fpu003Eu003Cpu003Eu003Cu002Fpu003Eu003Ch2 toutiao-origin=”h3″u003Eu003Cstrong toutiao-origin=”span” class=”highlight-text”u003E扩展:u003Cu002Fstrongu003Eu003Cu002Fh2u003Eu003Cpu003ETypeScript、Vue组件间传值、Mock、Vuex、调试、JavaScript的同步异步,作用域、ES6、部署(打包、优化、部署在静态服务器上、node中间层)、虚拟DOM、u003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-3″u003EHttpu003Cu002Fiu003E的get和post等。u003Cu002Fpu003Eu003Cpu003Etips: 欢迎u003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-6″u003E关注u003Cu002Fiu003Eu003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-4″u003E微信u003Cu002Fiu003Eu003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-3″u003E公众号u003Cu002Fiu003E:Java后端,获取更多推送。u003Cu002Fpu003Eu003Cpu003Eu003Cu002Fpu003Eu003Ch2 toutiao-origin=”h3″u003Eu003Cstrong toutiao-origin=”span” class=”highlight-text”u003E相关:u003Cu002Fstrongu003Eu003Cu002Fh2u003Eu003Cblockquoteu003Eu003Cpu003Ehttps:u002Fu002Fgithubu003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-4″u003E.comu003Cu002Fiu003Eu002FSimulatedGREGu002Felectron-vueu003Cu002Fpu003Eu003Cpu003Ehttps:u002Fu002Fmuse-ui.orgu002F#u002Fzh-CNu002Flistu003Cu002Fpu003Eu003Cpu003Eu003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-3″u003Ehttpu003Cu002Fiu003E:u002Fu002Fmpvueu003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-4″u003E.comu003Cu002Fiu003Eu002Fu003Cu002Fpu003Eu003Cpu003Ehttps:u002Fu002Fu003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-2″u003Ewww.u003Cu002Fiu003Eiviewuiu003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-4″u003E.comu003Cu002Fiu003Eu002Fcomponentsu002Fpageu003Cu002Fpu003Eu003Cu002Fblockquoteu003Eu003Cpu003Eu003Cu002Fpu003Eu003Ch1 toutiao-origin=”h2″u003ESpring Bootu003Cu002Fh1u003Eu003Cpu003Eu003Cstrongu003E在讲Spring Boot之前,需要大概了解下Java的一些相关u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003EJava的工作原理u003Cu002Fpu003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002FRfz0Jz5CmObskI” img_width=”586″ img_height=”393″ alt=”Spring Boot 和 Vue 前后端分离教程(附源码)” inline=”0″u003Eu003Cpu003EJVM 虚拟机u003Cu002Fpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002FRfz0JzHAkhJ5wK” img_width=”611″ img_height=”586″ alt=”Spring Boot 和 Vue 前后端分离教程(附源码)” inline=”0″u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002FRfz0JzT5o4q6Cj” img_width=”810″ img_height=”306″ alt=”Spring Boot 和 Vue 前后端分离教程(附源码)” inline=”0″u003Eu003Cpu003Eu003Cu002Fpu003Eu003Ch2 toutiao-origin=”h3″u003E介绍u003Cu002Fh2u003Eu003Cpu003Eu003Cu002Fpu003Eu003Cpu003ESpring Boot 是所有基于 Spring 开发的项目的。Spring Boot 的设计是为了让你尽可能快的跑起来 Spring 应用程序并且尽可能减少你的配置文件。系统学习springboot,可以在Java知音u003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-3″u003E公众号u003Cu002Fiu003E回复关键字”Springboot聚合” ,网罗优质教程。u003Cu002Fpu003Eu003Cpu003Eu003Cu002Fpu003Eu003Ch2 toutiao-origin=”h3″u003Eu003Cstrong toutiao-origin=”span” class=”highlight-text”u003E使用Spring Boot开发单个RESTful服务u003Cu002Fstrongu003Eu003Cu002Fh2u003Eu003Cpu003E由于网上资源众多,就不详细编写创建步骤了。这里找了一个网上的教程,大家可以按这个步骤去创建一个项目,能用浏览器能访问就行。SpringBoot新建HelloWorld工程:u003Cu002Fpu003Eu003Cblockquoteu003Eu003Cpu003Ehttps:u002Fu002Fblog.csdn.netu002Fsmall_mouse0u002Farticleu002Fdetailsu002F77800737u003Cu002Fpu003Eu003Cu002Fblockquoteu003Eu003Cpu003Eu003Cu002Fpu003Eu003Ch2 toutiao-origin=”h3″u003Eu003Cstrong toutiao-origin=”span” class=”highlight-text”u003E项目目录结构u003Cu002Fstrongu003Eu003Cu002Fh2u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002FRfz0KLLJIEf5G4″ img_width=”636″ img_height=”464″ alt=”Spring Boot 和 Vue 前后端分离教程(附源码)” inline=”0″u003Eu003Cpu003Eu003Cu002Fpu003Eu003Ch2 toutiao-origin=”h3″u003Eu003Cstrong toutiao-origin=”span” class=”highlight-text”u003E和前端交互u003Cu002Fstrongu003Eu003Cu002Fh2u003Eu003Cpu003E1,前端的u003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-3″u003EHttpu003Cu002Fiu003E请求会到controller这一层,而controller层根据相应路由信息注解会跳转到相应的类。u003Cu002Fpu003Eu003Cpreu003Eu003Ccodeu003Eu002Fu002F 如: u002Fapiu002Fuser 的get请求将会被 UserQry 函数处理u003Cu002Fcodeu003Eu003Cbru003Eu003Ccodeu003E@RequestMu003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-1″u003Eappu003Cu002Fiu003Eing(“u002Fapi”)u003Cu002Fcodeu003Eu003Ccodeu003Epublic class UserController {u003Cu002Fcodeu003Eu003Cbru003Eu003Ccodeu003E @RequestMu003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-1″u003Eappu003Cu002Fiu003Eing(value =”u002Fuser”, method = RequestMethod.GET)u003Cu002Fcodeu003Eu003Ccodeu003E public List<User> UserQry {u003Cu002Fcodeu003Eu003Ccodeu003E return userService.getUser;u003Cu002Fcodeu003Eu003Ccodeu003E }u003Cu002Fcodeu003Eu003Ccodeu003E}u003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cpu003E2,在框架经过处理以后,最终调用的是mu003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-1″u003Eappu003Cu002Fiu003Eer层。u003Cu002Fpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002FRfz0KLoGQdnuKk” img_width=”408″ img_height=”240″ alt=”Spring Boot 和 Vue 前后端分离教程(附源码)” inline=”0″u003Eu003Cpreu003Eu003Ccodeu003E @Select(“select * from user”)u003Cu002Fcodeu003Eu003Ccodeu003E List<User> getUser;u003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cpu003E3,在执行相应的Sql以后,将会依次返回到controller层,然后在u003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-3″u003EHttpu003Cu002Fiu003E的返回中将会以Json串对象返回给前端的调用方。u003Cu002Fpu003Eu003Cpu003E4,前端在u003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-3″u003EHttpu003Cu002Fiu003E的response中拿到返回的值,然后再进行一些处理。u003Cu002Fpu003Eu003Cpu003Eu003Cu002Fpu003Eu003Ch2 toutiao-origin=”h3″u003Eu003Cstrong toutiao-origin=”span” class=”highlight-text”u003E概念u003Cu002Fstrongu003Eu003Cu002Fh2u003Eu003Culu003Eu003Cliu003Eu003Cpu003Espring ioc容器:,主要用来管理对象和依赖,以及依赖的注入u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cliu003Eu003Cpu003E依赖注入: 不用new,让Spring控制new过程u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cliu003Eu003Cpu003E控制反转: 不是用new方式实例化对象,实质的控制权已经交由程序管理u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cliu003Eu003Cpu003E面向切面:把一些功能抽离出来,再通过“动态”的方式掺入到业务中u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cu002Fulu003Eu003Cpu003Eu003Cu002Fpu003Eu003Ch2 toutiao-origin=”h3″u003Eu003Cstrong toutiao-origin=”span” class=”highlight-text”u003EBeanu003Cu002Fstrongu003Eu003Cu002Fh2u003Eu003Cpu003Ebean是一个对象,由ioc容器生成的对象就是一个beanu003Cu002Fpu003Eu003Cpu003Eu003Cu002Fpu003Eu003Ch2 toutiao-origin=”h3″u003Eu003Cstrong toutiao-origin=”span” class=”highlight-text”u003E配置VS注解u003Cu002Fstrongu003Eu003Cu002Fh2u003Eu003Cpreu003Eu003Ccodeu003Eu002Fu002F Spring 的操作u003Cu002Fcodeu003Eu003Ccodeu003Epackage com.yiibaiu003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-4″u003E.comu003Cu002Fiu003Emon;u003Cu002Fcodeu003Eu003Cbru003Eu003Ccodeu003Epublic class Customer u003Cu002Fcodeu003Eu003Ccodeu003E{u003Cu002Fcodeu003Eu003Ccodeu003E private Person person;u003Cu002Fcodeu003Eu003Cbru003Eu003Ccodeu003E public Customer(Person person) {u003Cu002Fcodeu003Eu003Ccodeu003E this.person = person;u003Cu002Fcodeu003Eu003Ccodeu003E }u003Cu002Fcodeu003Eu003Cbru003Eu003Ccodeu003E public void setPerson(Person person) {u003Cu002Fcodeu003Eu003Ccodeu003E this.person = person;u003Cu002Fcodeu003Eu003Ccodeu003E }u003Cu002Fcodeu003Eu003Ccodeu003E u002Fu002F…u003Cu002Fcodeu003Eu003Ccodeu003E}u003Cu002Fcodeu003Eu003Cbru003Eu003Ccodeu003Epackage com.yiibaiu003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-4″u003E.comu003Cu002Fiu003Emon;u003Cu002Fcodeu003Eu003Cbru003Eu003Ccodeu003Epublic class Person u003Cu002Fcodeu003Eu003Ccodeu003E{u003Cu002Fcodeu003Eu003Ccodeu003E u002Fu002F…u003Cu002Fcodeu003Eu003Ccodeu003E}u003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cpreu003Eu003Ccodeu003Eu002Fu002F Spring 的配置Bean的xmlu003Cu002Fcodeu003Eu003Ccodeu003E<bean id=”customer” class=”com.yiibaiu003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-4″u003E.comu003Cu002Fiu003Emon.Customer”>u003Cu002Fcodeu003Eu003Ccodeu003E <property name=”person” ref=”person” u002F>u003Cu002Fcodeu003Eu003Ccodeu003E<u002Fbean>u003Cu002Fcodeu003Eu003Cbru003Eu003Ccodeu003E<bean id=”person” class=”com.yiibaiu003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-4″u003E.comu003Cu002Fiu003Emon.Person” u002F>u003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cpreu003Eu003Ccodeu003Eu002Fu002F Spring 的注解方式u003Cu002Fcodeu003Eu003Ccodeu003Epublic class Customer u003Cu002Fcodeu003Eu003Ccodeu003E{u003Cu002Fcodeu003Eu003Ccodeu003E @Autowiredu003Cu002Fcodeu003Eu003Ccodeu003E private Person person;u003Cu002Fcodeu003Eu003Ccodeu003E}u003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cpu003Eu003Cu002Fpu003Eu003Ch2 toutiao-origin=”h3″u003Eu003Cstrong toutiao-origin=”span” class=”highlight-text”u003E注解u003Cu002Fstrongu003Eu003Cu002Fh2u003Eu003Cpu003Eu003Cstrongu003E@SpringBootApplicationu003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E@SpringBootApplication = @Configuration + @EnableAutoConfiguration + @ComponentScan 简化程序的配置。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E@Configurationu003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E注解在类上,表示这是一个IOC容器,相当于spring的配置文件,IOC容器的配置类。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E@ComponentScanu003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E如果扫描到有@Component @Controller @Service等这些注解的类,则把这些类注册为bean。@Controller, @Service, @Repository是@Component的细化,这三个注解比@Component带有更多的语义,它们分别对应了控制层、服务层、持久层的类。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E@RestControlleru003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E告诉Spring以JSON字符串的形式渲染结果,并直接返回给调用者。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E@RequestMu003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-1″u003Eappu003Cu002Fiu003Eingu003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E告诉Spring这是一个用来处理请求地址映射的注解。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E@Autowiredu003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E可以对类成员变量、方法及构造函数进行标注。从IoC容器中去查找,并自动装配。(去除@Autowired可以运行一下试试)u003Cu002Fpu003Eu003Cpu003EMybatis的u003Cstrongu003E@Mu003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-1″u003Eappu003Cu002Fiu003Eeru003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E注解的接口生成一个实现类u003Cu002Fpu003Eu003Cpu003Eu003Cu002Fpu003Eu003Ch2 toutiao-origin=”h3″u003Eu003Cstrong toutiao-origin=”span” class=”highlight-text”u003E跨域u003Cu002Fstrongu003Eu003Cu002Fh2u003Eu003Cpu003E浏览器从一个域名的网页去请求另一个域名的资源时,域名、端口、协议任一不同,都是跨域。u003Cu002Fpu003Eu003Cpu003E跨域资源共享(CORS) 是一种机制,它使用额外的 u003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-3″u003EHTTPu003Cu002Fiu003E 头来告诉浏览器 让运行的Web应用被准许访问来自不同源服务器上的指定的资源。u003Cu002Fpu003Eu003Cpu003Eu003Cu002Fpu003Eu003Ch2 toutiao-origin=”h3″u003Eu003Cstrong toutiao-origin=”span” class=”highlight-text”u003ERESTful风格u003Cu002Fstrongu003Eu003Cu002Fh2u003Eu003Cpu003ERest是web服务的一种架构风格,一种设计风格,URL只指定资源,以u003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-3″u003EHTTPu003Cu002Fiu003E方法动词进行不同的操作。u003Cu002Fpu003Eu003Cpreu003Eu003Ccodeu003Eu002Fu002F 非RESTful接口u003Cu002Fcodeu003Eu003Ccodeu003Eapiu002Fgetfile.php – 获取文件信息,u003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-3″u003E下载u003Cu002Fiu003E文件u003Cu002Fcodeu003Eu003Ccodeu003Eapiu002Fuploadfile.php – 上传创建文件u003Cu002Fcodeu003Eu003Ccodeu003Eapiu002Fdeletefile.php – 删除文件u003Cu002Fcodeu003Eu003Cbru003Eu003Ccodeu003Eu002Fu002F 只需要apiu002Fusers这一个接口u003Cu002Fcodeu003Eu003Ccodeu003EGET u003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-3″u003Ehttpu003Cu002Fiu003E:u002Fu002Flocau003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-6″u003Elhu003Cu002Fiu003Eost:8080u002Fapiu002Fusers (查询用户) u003Cu002Fcodeu003Eu003Ccodeu003EPOST u003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-3″u003Ehttpu003Cu002Fiu003E:u002Fu002Flocau003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-6″u003Elhu003Cu002Fiu003Eost:8080u002Fapiu002Fusers (新增用户) u003Cu002Fcodeu003Eu003Ccodeu003EPUT u003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-3″u003Ehttpu003Cu002Fiu003E:u002Fu002Flocau003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-6″u003Elhu003Cu002Fiu003Eost:8080u002Fapiu002Fusers (更新用户) u003Cu002Fcodeu003Eu003Ccodeu003EDELETE u003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-3″u003Ehttpu003Cu002Fiu003E:u002Fu002Flocau003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-6″u003Elhu003Cu002Fiu003Eost:8080u002Fapiu002Fusers (删除用户) u003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cpu003Eu003Cu002Fpu003Eu003Ch2 toutiao-origin=”h3″u003Eu003Cstrong toutiao-origin=”span” class=”highlight-text”u003ERestful好处:u003Cu002Fstrongu003Eu003Cu002Fh2u003Eu003Culu003Eu003Cliu003Eu003Cpu003EURL具有很强可读性的,具有自描述性u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cliu003Eu003Cpu003E规范化请求过程和返回结果u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cliu003Eu003Cpu003E资源描述与视图的松耦合u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cliu003Eu003Cpu003E可提供OpenAPI,便于第三方系统集成,提高互操作性u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cliu003Eu003Cpu003E提供无状态的服务接口,降低复杂度,可提高应用的水平扩展性u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cu002Fulu003Eu003Cpu003Eu003Cu002Fpu003Eu003Ch2 toutiao-origin=”h3″u003Eu003Cstrong toutiao-origin=”span” class=”highlight-text”u003E扩展u003Cu002Fstrongu003Eu003Cu002Fh2u003Eu003Cpu003EJAVA的内存模型(非线程安全)、Linq、JWT、Redis、WebSocket、单点登录(SSO)、消息队列u003Cu002Fpu003Eu003Cpu003Eu003Cu002Fpu003Eu003Ch2 toutiao-origin=”h3″u003Eu003Cstrong toutiao-origin=”span” class=”highlight-text”u003ESpring Cloud的分布式u003Cu002Fstrongu003Eu003Cu002Fh2u003Eu003Cpu003E其实在上面我们做的一个Spring Boot小的demo就是一个服务。若干个小的Spring Boot的模块,合在一起。使用一些分布式的套件,将模块集群化,让模块之间联系和管理起来,其实就是Spring Cloud的基本的微服务。u003Cu002Fpu003Eu003Cpu003Eu003Cu002Fpu003Eu003Ch2 toutiao-origin=”h3″u003Eu003Cstrong toutiao-origin=”span” class=”highlight-text”u003ESpring Boot和 Spring Cloud的关系u003Cu002Fstrongu003Eu003Cu002Fh2u003Eu003Cpu003E基于Spring Boot 快速开发单个微服务,Spring Cloud是一个基于Spring Boot实现的开发工具;Spring Boot专注于快速、方便集成的单个微服务个体,Spring Cloudu003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-6″u003E关注u003Cu002Fiu003E全局的服务治理框架;Spring Boot可以离开Spring Cloud独立使用开发项目,但是Spring Cloud离不开Spring Boot,属于依赖的关系。u003Cu002Fpu003Eu003Cpu003Eu003Cu002Fpu003Eu003Ch1 toutiao-origin=”h2″u003EDubbou003Cu002Fh1u003Eu003Cpu003EDubbo 是一款高性能Java RPC框架,地址:dubbo.apache.orgu002Fzh-cnu002Fu003Cu002Fpu003Eu003Cpu003Eu003Cu002Fpu003Eu003Ch2 toutiao-origin=”h3″u003Eu003Cstrong toutiao-origin=”span” class=”highlight-text”u003EDubbo的微服务的一些概念u003Cu002Fstrongu003Eu003Cu002Fh2u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002FRfz0KM059bbzI1″ img_width=”1060″ img_height=”824″ alt=”Spring Boot 和 Vue 前后端分离教程(附源码)” inline=”0″u003Eu003Culu003Eu003Cliu003Eu003Cpu003E生产者发布服务到服务注册中心中u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cliu003Eu003Cpu003E消费者在服务注册中心中订阅服务u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cliu003Eu003Cpu003E消费者调用已经注册的服务u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cu002Fulu003Eu003Cpu003Eu003Cu002Fpu003Eu003Ch2 toutiao-origin=”h3″u003Eu003Cstrong toutiao-origin=”span” class=”highlight-text”u003EDubbo的实现单个微服务u003Cu002Fstrongu003Eu003Cu002Fh2u003Eu003Cpreu003Eu003Ccodeu003Eu002Fu002F 定义服务接口标准u003Cu002Fcodeu003Eu003Ccodeu003Epublic interface DemoService {u003Cu002Fcodeu003Eu003Cbru003Eu003Ccodeu003E String sayHello(String name);u003Cu002Fcodeu003Eu003Ccodeu003E}u003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cpreu003Eu003Ccodeu003Eu002Fu002F 生产者项目引用并实现u003Cu002Fcodeu003Eu003Ccodeu003E@Serviceu003Cu002Fcodeu003Eu003Ccodeu003Epublic class DemoServiceImpl implements DemoService {u003Cu002Fcodeu003Eu003Cbru003Eu003Ccodeu003E @Overrideu003Cu002Fcodeu003Eu003Ccodeu003E public String sayHello(String name) {u003Cu002Fcodeu003Eu003Ccodeu003E return “Hello, ” + name + ” (from Spring Boot)”;u003Cu002Fcodeu003Eu003Ccodeu003E }u003Cu002Fcodeu003Eu003Ccodeu003E}u003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cpreu003Eu003Ccodeu003Eu002Fu002F 消费者引用然后调用u003Cu002Fcodeu003Eu003Ccodeu003E@RestControlleru003Cu002Fcodeu003Eu003Ccodeu003Epublic class DemoConsumerController {u003Cu002Fcodeu003Eu003Cbru003Eu003Ccodeu003E @Referenceu003Cu002Fcodeu003Eu003Ccodeu003E private DemoService demoService;u003Cu002Fcodeu003Eu003Cbru003Eu003Ccodeu003E @RequestMu003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-1″u003Eappu003Cu002Fiu003Eing(“u002FsayHellou002F{name}”)u003Cu002Fcodeu003Eu003Ccodeu003E public String sayHello(@PathVariable(“name”) String name) {u003Cu002Fcodeu003Eu003Ccodeu003E return demoService.sayHello(name);u003Cu002Fcodeu003Eu003Ccodeu003E }u003Cu002Fcodeu003Eu003Ccodeu003E}u003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cpu003Eu003Cu002Fpu003Eu003Ch2 toutiao-origin=”h3″u003E分布式的基础套件介绍u003Cu002Fh2u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002FRfz0KMHCDodLi3″ img_width=”719″ img_height=”720″ alt=”Spring Boot 和 Vue 前后端分离教程(附源码)” inline=”0″u003Eu003Cpu003Eu003Cstrongu003Eeureka、zookeeper u003Cu002Fstrongu003E服务注册和发现模块,服务注册在服务中心,提供给消费者使用。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003EHystrix u003Cu002Fstrongu003E断路器。为了保证其高可用,单个服务通常会集群部署。如果单个服务出现问题,调用这个服务就会出现线程阻塞,此时若有大量的请求涌入,Servlet容器的线程资源会被消耗完毕,导致服务瘫痪。服务与服务之间的依赖性,故障会传播,会对整个微服务系统造成灾难性的严重后果。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003Ezuulu003Cu002Fstrongu003E路由网关。Zuul的主要功能是路由转发和过滤器。比如u002Fapiu002Fuser转发到到user服务,u002Fapiu002Fshop转发到到shop服务u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003ESpring Cloud Config u003Cu002Fstrongu003E在服务数量巨多时,为了方便服务配置文件统一管理,实时更新,需要分布式配置中心组件。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003ESpring Cloud Sleuth u003Cu002Fstrongu003E功能就是在分布式系统中提供追踪解决方案。u003Cu002Fpu003Eu003Cpu003Eu003Cu002Fpu003Eu003Ch2 toutiao-origin=”h3″u003Eu003Cstrong toutiao-origin=”span” class=”highlight-text”u003ESpring Cloud 和 Dubbo 对比u003Cu002Fstrongu003Eu003Cu002Fh2u003Eu003Cpu003Eu003Cstrongu003E基础套件对比u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002FRfz0KMTljc1h4″ img_width=”723″ img_height=”483″ alt=”Spring Boot 和 Vue 前后端分离教程(附源码)” inline=”0″u003Eu003Cpu003EDubbo 只是实现了服务治理,而 Spring Cloud 子项目分别覆盖了微服务架构下的众多部件,而服务治理只是其中的一个方面。Dubbo 提供了各种 Filter,对于上述中“无”的要素,可以通过扩展 Filter 来完善。例如:u003Cu002Fpu003Eu003Culu003Eu003Cliu003Eu003Cpu003E分布式配置:可以使用淘宝的 diamond、百度的 disconf 来实现分布式配置管理;u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cliu003Eu003Cpu003E服务跟踪:可以使用京东开源的 Hydra,或者扩展 Filter 用 Zippin 来做服务跟踪;u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cliu003Eu003Cpu003E批量任务:可以使用当当开源的 Elastic-Job、tbschedule。u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cu002Fulu003Eu003Cpu003Eu003Cstrongu003E性能比较u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002FRfz0Km9EUv6J2v” img_width=”345″ img_height=”221″ alt=”Spring Boot 和 Vue 前后端分离教程(附源码)” inline=”0″u003Eu003Cpu003Eu003Cstrongu003E服务依赖方式u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003EDubbo:服务提供方与消费方通过接口的方式依赖,因此需要为每个微服务定义了各自的 Interface接口,并通过持续集成发布到私有仓库中,调用方应用对微服务提供的抽象接口存在强依赖关系,开发、测试、集成环境都需要严格的管理版本依赖。u003Cu002Fpu003Eu003Cpu003ESpring Cloud:服务提供方和服务消费方通过 JSON 方式交互,因此只需要定义好相关 JSON 字段即可,消费方和提供方无接口依赖。u003Cu002Fpu003Eu003Cpu003Eu003Cu002Fpu003Eu003Ch2 toutiao-origin=”h3″u003Eu003Cstrong toutiao-origin=”span” class=”highlight-text”u003E源代码地址u003Cu002Fstrongu003Eu003Cu002Fh2u003Eu003Cpu003ESpring Boot + Vue 代码地址:u003Cu002Fpu003Eu003Cblockquoteu003Eu003Cpu003Ehttps:u002Fu002Fgithubu003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-4″u003E.comu003Cu002Fiu003Eu002Fliangwei0101u002FSpring-Boot-And-Vueu003Cu002Fpu003Eu003Cu002Fblockquoteu003Eu003Cpu003EDubbo-Spring-Boot代码地址:u003Cu002Fpu003Eu003Cblockquoteu003Eu003Cpu003Ehttps:u002Fu002Fgithubu003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-4″u003E.comu003Cu002Fiu003Eu002Fliangwei0101u002FDubbo-Spring-Bootu003Cu002Fpu003Eu003Cu002Fblockquoteu003Eu003Cpreu003Eu003Cbru003Eu003Cp class=”pgc-end-source”u003E-END-u003Cu002Fpu003Eu003Cp class=”pgc-end-source”u003E如果看到这里,说明你喜欢这篇文章,请转发、点赞。u003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-4″u003E微信u003Cu002Fiu003Eu003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-4″u003E搜索u003Cu002Fiu003E「web_resource」,u003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-6″u003E关注u003Cu002Fiu003E后回复「进群」或者扫描下方二维码即可进入无广告u003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-2″u003E交流群u003Cu002Fiu003E。u003Cu002Fpu003Eu003Cp class=”pgc-end-source”u003E↓扫描二维码进群↓u003Cu002Fpu003Eu003Cdivu003Eu003Cu002Fdivu003Eu003Cbru003Eu003Cbru003Eu003Cdivu003Eu003Cu002Fdivu003Eu003Cdivu003Eu003Cu002Fdivu003Eu003Cu002Fpreu003E”

原文始发于:Spring Boot 和 Vue 前后端分离教程(附源码)

主题测试文章,只做测试使用。发布者:逗乐男神i,转转请注明出处:http://www.cxybcw.com/17862.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code