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

编辑:业余草
来源:https://www.xttblog.com/?p=4851

昨天,一位网友问我要 SpringBoot + 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

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

实现真正的前后端解耦。

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

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


Vue.js

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

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

Vue介绍

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

2,Vue在Github的欢迎度

3,不需要操作Dom,实现了MVVM

// jquery的操作
$("#test3").val("Dolly Duck");

// Vue的操作
MVVM,实现了双向绑定

4,学习成本低,文档浅显易懂

Vue 建项目

1,Vue 提供了一个官方的 CLI,为单页面应用 (SPA) 快速搭建繁杂的脚手架。基于Vue cli项目脚手架,网址: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 相关结构和生命周期介绍

1,目录结构如下图:

2,单个.vue文件的组成介绍

<template>
<!--html-->
</template>

<script>
//js
</script>

<style>
/* css style */
</style>

3,组件化应用构建

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

4,Vue的生命周期如下图:

钩子方法: 模板方法的执行结果,该方法就叫做钩子方法,个人理解:影响了模板的执行,把函数勾住了,这个方法就是钩子函数。

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做出简单的页面运用

扩展:

TypeScript、Vue组件间传值、Mock、Vuex、调试、JavaScript的同步异步,作用域、ES6、部署(打包、优化、部署在静态服务器上、node中间层)、虚拟DOM、Http的get和post等。

相关:

https://github.com/SimulatedGREG/electron-vue
https://muse-ui.org/#/zh-CN/list
http://mpvue.com/
https://www.iviewui.com/components/page


Spring Boot

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

Java的工作原理

JVM 虚拟机

介绍

Spring Boot 是所有基于 Spring 开发的项目的。Spring Boot 的设计是为了让你尽可能快的跑起来 Spring 应用程序并且尽可能减少你的配置文件。系统学习springboot,可以在Java知音公众号回复关键字"Springboot聚合" ,网罗优质教程。

使用Spring Boot开发单个RESTful服务

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

https://blog.csdn.net/small_mouse0/article/details/77800737

项目目录结构

和前端交互

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();
    }
}

2,在框架经过处理以后,最终调用的是mapper层。

  @Select("select * from user")
  List<User> getUser();

3,在执行相应的Sql以后,将会依次返回到controller层,然后在Http的返回中将会以Json串对象返回给前端的调用方。

4,前端在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;
}

注解

@SpringBootApplication

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

@Configuration

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

@ComponentScan

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

@RestController

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

@RequestMapping

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

@Autowired

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

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,属于依赖的关系。

源代码地址

Spring Boot + Vue 代码地址:

https://github.com/liangwei0101/Spring-Boot-And-Vue

业余草 CSDN认证博客专家 Java Go/GoLang Redis
如今的编程是一场程序员和上帝的竞赛,程序员要开发出更大更好、傻瓜都会用到软件。而上帝在努力创造出更大更傻的傻瓜。目前为止,上帝是赢的。个人网站:www.xttblog.com。个人微信:codedq或dart996
<div> 适用人群 <p> Java开发人员,Vue开发人员,前后分离开发人员,权限管理和配置开发人员 </p> </div> <div> 课程概述 <div style="color:#666666;"> 【讲师介绍】<br /> 讲师职称:<br />               现某知名大型互联网公司资深架构师,技术总监,职业规划师,首席面试官,曾在某上市培训机构,高校任教多年。<br />             Array(Array老师)10多年互联网公司实战经验,知名的大型互联网公司的架构师,高管等职,在企业长期从事于技术的源码阅读和新技术的研究;擅长于职业规划,面试辅导,从事面试官多年;擅长于JAVA,人工智能AI应用,Xmind等等,曾服役于国内某上市培训机构数年,独特的培训思路,培训体系,培训方式,实践的职场技能,职场现状,职场晋升等让你快速适应企业职场的所需。 <br /> 【课程介绍】<br /> 技术选型<br /> 开发环境:Eclipse/Idea ,JDK 1.8以上 <br /> 后技术<br /> 核心框架:SpringBoot2.x框架系列(同样适用Springcloud F版本以后的版本),如下(节选):    <br /> 持久层框架:MyBatis 3.x + Mybatis-plus 3.x<br /> 日志管理:SLF4J 1.7 + Log4j2 2.7<br /> 工具类:Apache Commons、Jackson 、fastjson、Gson<br /> 权限验证<br /> 前技术  <br /> Vue  <br /> Vue-cli<br /> ElementUI ---https://element.eleme.io/<br /> JSX (JavaScript Xml)<br /> 前台的权限验证和路由设置<br /> 开发模式  <br />      前后分离的开发<br /> 数据库 <br />       Mysql5<br /> IDE<br />     Intellij Idea </div> </div>
相关推荐
<div style="color:#444444;"> 适用人群 <p style="color:#666666;"> 所有的IT从业者,尤其适合快速掌握新技术,快速增长工作经验人群,对教育公平,教育公益,教育爱心公益人士 </p> </div> <p> </p> 课程概述 <p> 该互联网实战项目是基于 Spring Boot 2+ SpringSecurity5+Element UI+Vue Admin Template+蚂蚁可视化AntV 等技术栈开发的项目,采用分布式,多模块,前后分离开发。包括图形展示、权限管理、用户管理等功能。<br /> 【后技术】<br /> 技术 说明<br /> Spring Boot2 MVC框架 开发的一站式解决方案<br /> Spring Security5  认证和授权框架<br /> MyBatisPlus3.3.1  基于 MyBatis 框架的快速研发框架<br /> MyBatisCode工具 生成 MyBatis 相关代码<br /> Jackson 提供了处理 JSON 数据的工具<br /> Lombok 简化对象封装工具 <br /> Druid   数据库连接池 <br /> 【前技术】<br /> Vue        互联网最火的前框架<br /> Vue Router 路由框架<br /> Vuex 全局状态管理框架<br /> Axios 前 HTTP 框架<br /> Element UI 前 UI 框架<br /> Vue Element Admin 前模板<br /> Antv  蚂蚁金服可视化技术,阿里巴巴可视化技术,天猫,淘宝,支付宝,花呗均使用AntV<br /> 【开发工具】<br /> IntelliJ IDEA 开发 IDE<br /> SQLyog 数据库连接客户<br /> Postman HTTP 请求工具<br /> 【开发环境】<br /> 工具 版本<br /> JDK 1.8 </p> <p> MySQL 5.7 </p> <p> <img src="https://img-bss.csdn.net/202004100922276928.png" alt="" /><img src="https://img-bss.csdn.net/202004100922434479.png" alt="" /><img src="https://img-bss.csdn.net/202004100922566924.png" alt="" /><img src="https://img-bss.csdn.net/202004100923062693.png" alt="" /></p> <p> <br /></p> <p> <br /></p>
<p> <span style="font-size:16px;"><br /> </span> </p> <p> <span style="font-size:16px;"><strong>课程简介:<br /> </strong>本课程主要是跟各位小伙伴分享、介绍并实战两大核心的用户身份认证(接口鉴权)模式,即</span><span style="font-size:16px;">基于</span><span style="font-size:16px;">Token</span><span style="font-size:16px;">的认证模式</span><span style="font-size:16px;"> 以及 </span><span style="font-size:16px;">基于</span><span style="font-size:16px;">Session</span><span style="font-size:16px;">的认证模式</span><span style="font-size:16px;">,其中</span><span></span> </p> <p> <span style="font-size:16px;">(1)   </span><span style="font-size:16px;">基于</span><span style="font-size:16px;">Token</span><span style="font-size:16px;">的认证模式</span><span style="font-size:16px;"> 则主要介绍了三种核心、主流的认证模式,即基于</span><span style="font-size:16px;">Token+</span><span style="font-size:16px;">数据库、基于</span><span style="font-size:16px;">Token+</span><span style="font-size:16px;">缓存中间件</span><span style="font-size:16px;">Redis</span><span style="font-size:16px;">、基于</span><span style="font-size:16px;">Token+JWT</span><span style="font-size:16px;">的认证模式。</span><span></span> </p> <p> <span style="font-size:16px;">(2)   </span><span style="font-size:16px;">基于</span><span style="font-size:16px;">Session</span><span style="font-size:16px;">的认证模式 </span><span style="font-size:16px;">也主要介绍了三种核心、主流的认证模式,即基于原生</span><span style="font-size:16px;">Spring Session</span><span style="font-size:16px;">以及</span><span style="font-size:16px;">Session</span><span style="font-size:16px;">共享的认证模式、基于</span><span style="font-size:16px;">Shiro Session</span><span style="font-size:16px;">的认证模式、基于</span><span style="font-size:16px;">Shiro + Redis </span><span style="font-size:16px;">的</span><span style="font-size:16px;">Session</span><span style="font-size:16px;">共享认证模式</span><span></span> </p> <p> <span style="font-size:16px;">即课程的整体介绍如下图所示:</span> </p> <p> <span style="font-size:16px;"><img src="https://img-bss.csdn.net/201909120730297517.png" alt="" /><br /> </span> </p> <p> <span style="font-size:16px;"> </span> </p> <p> 核心技术栈列表: </p> 值得介绍的是,本课程在技术栈层面涵盖了“用户身份认证”、“接口鉴权”等业务场景 常用的大部分技术,包括<span>Spring Boot2.x</span>、<span>Spring MVC</span>、<span>Mybatis</span>、加密解密算法<span>AES</span>、雪花算法<span>Snowflake</span>、统一验参工具<span>ValidatorUtil</span>、<span>JWT</span>(<span>Json Web Token</span>)、缓存中间件<span>Redis</span>、<span>Shiro(</span>身份认证与会话等等<span>)</span>、过滤器<span>Filter</span>、拦截器<span>Interceptor</span>、热部署插件<span>Devtools</span>、等等,如下图所示<br /> <p> <span style="font-size:16px;"><img src="https://img-bss.csdn.net/201909120732073201.png" alt="" /><br /> </span> </p> <p> <span style="font-size:16px;"> </span> </p> <p> <br /> </p> <p> 值得一提的是,本课程所介绍的核心重点在于“仅仅围绕基于<span>Token</span>的认证模式”进行展开讲解与实战,如下图所示为<span>Debug</span>亲自罗列、归纳出来的几大核心要点(面试官就经常喜欢这样面): </p> <img src="https://img-bss.csdn.net/201909120732381227.png" alt="" /><br /> <p> <span style="font-size:16px;"><br /> </span> </p> <p> <span style="font-size:16px;"> </span> </p> <p> 如下图所示为 基于<span>Token</span>认证模式 总体上的时序图:<span></span> </p> <img src="https://img-bss.csdn.net/201909120733009772.png" alt="" /><br /> <p> <br /> </p>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页