第一版SpringBoot+Vue

最新推荐文章于 2024-07-29 14:22:26 发布
最新推荐文章于 2024-07-29 14:22:26 发布
阅读量234 收藏
点赞数
文章标签： vue java spring boot ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48211214/article/details/115208833
版权

第一版SpringBoot+Vue

SpringBoot + Vue

1.1、前后端分离

​ 前后端分离就是将一个应用的前端代码和后端代码分开写，为什么要这么做？如果不适用前后端分离会出现哪些问题：传统的 java web 开发中，前端使用的是jsp开发，JSP不是由后端开发者独立完成。前端->HTML静态布局页面->后端->JSP（需要前端与后端沟通，沟通耗时，严重影响开发效率）。–>耦合度太高。
​ 可以使用前后端分离的方式，完美的解决这个问题。前端只需要独立编写客户端的代码，后端只需要独立编写服务端代码，提供接口API即可。前端使用AJAX请求后端的数据接口，将Model展示到View中即可。
​ 前后端开发者只需要提前约定好接口文档（URL、参数、数据类型…)，然后分别独立开发即可。前端可以使用假数据进行测试，完全不需要依赖于后端，后端也不需要依赖前端，可以使用PostMan测试API。最后完成前后端集成即可。真正实现了前后端应用的解耦合，极大的提升了开发效率。

传统单体应用：

单体应用

前后端分离结构：
前后端分离

之前的单体应用拆分为前端应用于后端应用，前端应用负责数据展示与用户交互。后端应用负责提供数据处理接口。前端–>Ajax–>RESTful接口。

1.2 、实现技术

SpringBoot + Vue
使用 SpringBoot 实现后端应用开发，使用 Vue 进行前端应用开发。

2. 实战

2.1、Vue创建项目与讲解

cmd 创建项目：

  1. vue create vuetest
    1. 选择 Manually select features ，手动选择模板
    2. 选择 Babel、Router、Vuex
    3. 打开历史记录：选择 Y
    4. Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) 选择 In dedicated config files
    5. Save this as a preset for future projects? (y/N) 选择 N

  2. 等待创建
    vue创建项目

  3. 创建完成
    Vue创建项目完成

  4. 运行一下命令

    cd vuetest
npm run serve

运行 http://localhost:8080/
Vue项目首页

现在可以使用 VsCode 或者 WebStorm 进行开发。
WebStrom打开项目

  1. WebStorm 配置项目运行。
    配置

  2. 或者通过 Terminal 运行 npm run serve。以上两种哪个都可以。

  3. Vue 单页面讲解：

    1. 结合 Vue.app 源码： 是动态加载的，通过路由映射完成。
      Vue布局

      1. 路由映射讲解：

        1. App.vue讲解

          <template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |  
      <router-link to="/about">About</router-link>
<!--   
1. <router-link>可以理解为Vue的语法标签，暂时我们可以对应HTML中的<a>标签。
2. <router-link to="">中的属性 to 可以理解为 <a href="">中的属性 href。
3. to的属性值需要结合 router 文件夹中的 index.js 文件讲解 -- 路由控制
-->
    </div>
    <router-view/>
  </div>
</template>

          <router-view/> <!--给你的 <router-link>标签一个展示的位置吧，所有views文件夹中的视图都会展现在这里 -->

        2. router\index.js讲解

          // 先引用 Vue 与 VueRouter，否则路由无法使用
import Vue from 'vue'
import VueRouter from 'vue-router'

// 引用 你的模板
import Home from '../views/Home.vue'

          const routes = [
  // 这个地方配置你的路由
  {
    path: '/',  // 给你的文件一个索引，对应你的浏览器url以及App.vue中<router-link>中to的属性值
    name: 'Home', // 给路由一个名字
    component: Home  // 你的模板，对应的是  import Home from '../views/Home.vue'
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')  // vue3.0 语法
  }
]

        3. 自己写一个试试（我的习惯是先写路由，再写视图）

          1. 添加路由MyTest, 在router\index.js中添加一下代码

            import MyTest from '../views/MyTest.vue' // 写在文件开头的Home下面

 { // 写在 const routes 中
    path: '/mytest',
    name: 'MyTest',
    component: MyTest
 }

          2. 现在写MyTest.vue，在views文件夹中新建MyTest.vue

            <template>
  <h2>This is the page of MyTest.</h2>
</template>

<script>
export default {
	name: "MyTest"
}
</script>

<style scoped>

</style>

          3. 在App.vue中添加 <router-link>标签

            <router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/mytest">MyTest</router-link> <!-- MyTest -->

          4. 现在你再看你的http://localhost:8080/，是不是发生了一下变化，试着点击一下，你会看到你写的界面（视图）。
            更新

          5. 通过上面这个过程，仔细回想一下，刚刚发生了什么，仔细想想，<router-link>、<router-view>
            提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

2.2、SpringBoot应用

2.2.1、创建SpringBoot应用

  1. 依赖选择
    依赖选择

  2. 修改src\main\resources\application.properties 为 application.yml，里面配置链接数据库的信息

    spring:
    datasource:
        url: jdbc:mysql://localhost:3306/library?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai
        username: root
        password: Cptbtptp123.
        driver-class-name: com.mysql.cj.jdbc.Driver
    jpa:
        show-sql: true # 打印sql信息
        properties:
            hibernate:
                format_sql: true # 格式化sql
server:
    port: 8181  # 配置端口 默认8080，与vue工程冲突

2.2.2、 使用SpringBootJPA 访问真实数据库

  1. 创建实体类在src\main\java\com.southwind.springboottest中 -> New Package -> src\main\java\com.southwind.springboottest\entity -> New Class ->src\main\java\com.southwind.springboottest\entity\Book.class。实体类与表进行绑定。

    package com.southwind.springboottest.entity;

import lombok.Data;

import javax.persistence.Entity;
import javax.persistence.Id;

/**
 * @author 田港
 * @version 1.0
 * @date 2021-03-25 11:06
 */
@Entity // Entity 注解类，绑定book表，根据表名与类名绑定: 类名首字母小写就是我们的表名
@Data  // lombok 注解，自动帮我们生成各种各种的get与set方法
public class Book {
    // 属性对应, 属性名与字段名绑定
    @Id // 主键绑定
    private Integer id;
    private String name;
    private String author;
}

  2. 创建package\interface -> com.southwind.springboottest.repository\BookRepository.interface

    package com.southwind.springboottest.repository;

import com.southwind.springboottest.entity.Book;
import org.springframework.data.jpa.repository.JpaRepository;

/**
 * @author 田港
 * @version 1.0
 * @date 2021-03-25 11:12
 */
public interface BookRepository extends JpaRepository<Book, Integer> {
    // JpaRepository 实现了很多接口，可以Ctrl+左键点进去看看
    // 第一个参数是你的实体类类型
    // 第二个参数是你的主键类型
}

  3. 单元测试

    1. 创建测试类
      单元测试类

    2. BookRepositoryTest.java

      package com.southwind.springboottest.repository;

import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;

/**
 * @author 田港
 * @version 1.0
 * @date 2021-03-25 11:40
 */

@SpringBootTest
        // 添加注解
class BookRepositoryTest {

    // 我们要测试的是BookRepository，所以先注入进来，private代表仅当前类可用
    @Autowired //添加注解，自动注入
    private BookRepository bookRepository;

    @Test // 添加注解
    void findAll() {
        System.out.println(bookRepository.findAll());
    }
}

    3. 运行测试类
      运行测试类

    4. 总结：我们每写一个Repository接口，就先测试一下，保证没有问题，再写到controller里面，让外部访问

  4. 创建Package->Class --> com.southwind.springboottest.controller\BookHandler.class

    package com.southwind.springboottest.controller;

import com.southwind.springboottest.entity.Book;
import com.southwind.springboottest.repository.BookRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

/**
 * @author 田港
 * @version 1.0
 * @date 2021-03-25 12:17
 */

@RestController
@RequestMapping("/book")
public class BookHandler {
    // 注入 BookRepository
    @Autowired
    private BookRepository bookRepository;

    @GetMapping("/findAll")
    public List<Book> findAll() {
        return bookRepository.findAll();
    }

}

  5. 启动Application，就是启动整个项目
    Run

  6. 访问 http://localhost:8181/book/findAll, 注意整个url与我们写的BookHandler.java中的@GetMapping对应关系，然后理解一下这个注解的作用。
    接口展示

2.3、 修改前端应用

按照2.1文档创建Book.vue，并在路由以及App.vue中配置好

Bool.vue

<template>
  <div>
    <table>
      <tr>
        <td>编号</td>
        <td>图书名称</td>
        <td>作者</td>
      </tr>
      <!--  v-for 语法 : https://cn.vuejs.org/v2/guide/list.html  -->
      <tr v-for="book in books" :key="book.id">
        <td>{{ book.id }}</td>
        <td>{{ book.name }}</td>
        <td>{{ book.author }}</td>
      </tr>
    </table>
    {{ msg }}
  </div>
</template>

<script>
export default {
  name: "Book",
  data() {
    return { // 定义json数据
      msg: "Hello Vue",
      books: [
        {
          id: 1,
          name: '我们的爱情',
          author: '田港'
        },
        {
          id: 2,
          name: '提问的智慧',
          author: '田港'
        },
        {
          id: 3,
          name: '锻炼的姿势',
          author: '田港'
        },
      ]
    }
  }
}
</script>

<style scoped>

</style>

router\index.js路由中的const routes添加如下代码：

{
    path: '/book',
    name: 'Book',
    component: Book

}

App.vue修改

<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> | <!-- 添加一个竖线 -->
<router-link to="/book">Book</router-link>  <!-- 添加这个代码 -->

  1. 现在我们的想法就是在Book.vue页面中发送Ajax请求，请求8181端口，最终把图书信息替换。那么在Vue中怎么去请求Ajax呢，我们需要安装一个组件axios。

  2. 安装axios，打开Terminal， 输入：

    vue add axios

add
3. 安装完成后，plugins中多了一个axios.js文件。然后，使用一下命令

npm install

  1. main.js中多了一下一行代码，下面就可以使用axios了。
    main.js

  2. 我们的目的是：当用户刷新Book页面时，就读取图书数据。所以在Book.vue中的script标签中写created函数（初始化函数，当页面被加载时，自动执行created函数代码）。

    created() {
    // 使用 axios的get请求，第一个参数为请求的url，即接口
    // 后面是一个回调函数，就是当执行完get请求后，紧接着做哪些操作，then就是然后的意思嘛
    // then里面是一个匿名函数
    axios.get('http://localhost:8181/book/findAll').then(function (resp){
      // 看看resp是啥东西
      console.log(resp); 
    })
  }

  3. 打开http://localhost:8080/book，打开控制台，然后F5刷新页面，会发现控制台报错
    跨域
    关于跨域问题我们使用后端解决方法，也就是SpringBoot进行配置，当然，前端可以通过一个nginx访问接口。跨域问题是什么呢

2.4、后端解决跨域问题

解决方式很简单，只需要添加一个配置类就ok！创建一个包com.southwind.springboottest.config，里面创建一个类CorsConfig.java

package com.southwind.springboottest.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * @author 田港
 * @version 1.0
 * @date 2021-03-25 13:27
 * SpringBoot解决跨域问题，先记住就行，用的时候copy到项目中
 */
@Configuration // 添加这个注解
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
				// .allowCredentials(true)
                .allowedHeaders("*")
                .allowedOrigins("*")
                // 运行请求的方法
                .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
                .maxAge(3600);
    }
}

配置好之后，再启动。测试一下接口，http://localhost:8181/book/findAll，对于接口没影响，没问题！！！

2.5、前端继续完善

  1. 刷新我们的http://localhost:8080/book，会在控制台看到：
    console

  2. 现在只需要把resp中的data赋值给 <script> 标签data 的books就可以了。

    created() {
    // 回调函数中的this作用域指的是回调
    // 定义一个vue的this，this指向当前的vue对象
    const _this = this;
    // 使用 axios的get请求，第一个参数为请求的url，即接口
    // 后面是一个回调函数，就是当执行完get请求后，紧接着做哪些操作，then就是然后的意思嘛
    // then里面是一个匿名函数
    axios.get('http://localhost:8181/book/findAll').then(function (resp){
      // 看看resp是啥东西
      // console.log(resp);
      _this.books = resp.data; // 将resp中的data赋值给vue对象中的books
    })
  }

  3. 效果
    展示

2.6、撒花

对基本的前后端分离开发有了了解，掌握一些特定功能的代码，比如created函数中使用axios以及_this与this的区别。记住使用springboot开发接口的过程与特定代码以及注解。

WebStorm
WebStorm
IDEA
IDEA

来年的诗
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
新手小白运行Springboot+vue项目
qq_54641516的博客
06-02 7492
新手运行Springboot+vue项目的参考
SpringBoot + Vue 案例实战完整代码（第一版）
07-01
《SpringBoot + Vue 案例实战完整代码（第一版）》 本案例实战项目结合了SpringBoot和Vue.js两大主流技术，旨在提供一个全面、实际的开发体验，帮助开发者快速掌握这两项技术的整合应用。SpringBoot是Spring框架的...
基于Java+SpringBoot+Vue前后端分离仓库管理系统设计实现
java李阳勇的博客
04-04 6万+
仓库管理系统进行了字典管理、公告管理、用户管理、物资管理、物资申请管理、仓库员管理、统计报表等服务。设备采用关联数据库里的MySQL做为全面的数据库，合理存放数据，合理备份数据，确保数据稳定性。除此之外，程序流程还具备程序流程所需要的所有功能，大大提升了实际操作安全度，使库房管理系统软件从概念迈向实际，真真正正提升了信息资源管理效率。
基于springboot+vue+Mysql的学生就业管理系统
老卓爱爪哇 的博客
05-22 756
本学生就业管理系统以springboot作为框架，b/s模式以及MySql作为后台运行的数据库，同时使用Tomcat用为系统的服务器。本系统主要包括首页，个人中心，辅导员管理，学生管理，企业管理，工作类型管理，企业招聘管理，投简信息管理求职信息管理，面试邀请管理，就业信息管理，学生消息管理，企业消息管理，系统管理等功能，通过这些功能的实现基本能够满足日常学生就业管理的操作。
基于Java+Springboot+vue高校资源共享交流平台设计和实现
热门推荐
java李阳勇的博客
03-17 11万+
高校资源共享交流系统主要功能设计：用户登录、注册、修改密码、首页信息展示、系统轮播图 、模糊搜索、收藏、点击数量统计、点赞、点踩、评论、详情、富文本图文上传、文件上传、下载、视频上传下载、文件资料、视频资料、公告信息、留言讨论区、加上一些基本的功能模块
基于Java+Springboot+vue在线版权登记管理系统设计实现
java李阳勇的博客
03-20 9万+
在线版权登记系统主要功能设计： 用户登录、注册、修改密码、首页信息展示、系统轮播图 、模糊搜索、收藏、版权热度点击数量统计、版权文件下载、评论、收藏、富文本图文上传、文件上传、下载、视频上传下载、版权资料、视频资料、公告信息、加上一些基本业务功能的添加修改删除操作等
SpringBoot + Vue基本知识点荟萃
qq_35963482的博客
09-27 3万+
参考Bilibili课程https://www.bilibili.com/video/BV1nV4y1s7ZN?p=1，总结
从 0 开始实现一个 SpringBoot + Vue 项目
ProgramNovice的博客
12-17 8905
从 0 开始实现一个 SpringBoot + Vue 项目
搭建SpringBoot+Vue框架
zd15690912965的博客
10-08 8554
自己学习框架做项目
Springboot+Vue项目启动流程
luocong321的博客
03-19 2462
mysql8安装教程，还有mysql的可视化工具navicat的安装以及破解教程以上安装完成之后，即可以进去navicat，右键，然后输入数据库名字，然后运行项目中附带的.sql文件，这样就有了项目运行的数据库文件。
基于Java+SpringBoot+Vue前后端分离手机销售商城系统设计和实现
java李阳勇的博客
04-14 6万+
现代经济快节奏发展以及不断完善升级的信息化技术，让传统数据信息的管理升级为软件存储，归纳，集中处理数据信息的管理方式。本手机销售网站就是在这样的大环境下诞生，其可以帮助管理者在短时间内处理完毕庞大的数据信息，使用这种软件工具可以帮助管理人员提高事务处理效率，达到事半功倍的效果。此手机销售网站利用当下成熟完善的SpringBoot框架，使用跨平台的可开发大型商业网站的Java语言，以及最受欢迎的RDBMS应用软件之一的MySQL数据库进行程序开发。
基于Springboot+Vue+Element-ui的精美个人博客系统
11-24
标题 "基于Springboot+Vue+Element-ui的精美个人博客系统" 涉及到的是一个现代Web应用的开发框架组合，主要包括三个核心技术：Spring Boot、Vue.js和Element UI。 Spring Boot是Spring框架的一个扩展，旨在简化Java...
SpringBoot + Vue 案例实战完整代码（第二版）
07-01
在本项目中，"SpringBoot + Vue 案例实战完整代码（第二版）" 提供了一个基于SpringBoot和Vue.js的实际开发案例，旨在帮助开发者深入理解和应用这两个流行的技术栈。项目结合了Spring的多个核心模块，如Spring、...
SpringBoot + Vue 项目部署上线到Linux 服务器的教程详解
09-14
本教程将详细讲解如何将一个使用SpringBoot作为后端、Vue.js作为前端的项目部署到Linux服务器上。我们将探讨Vue项目的打包、Express作为静态文件服务器以及SpringBoot项目的部署。 **Vue 项目打包与部署** 1. **...
SpringBoot+Vue 企业级 智能通用报表 调度平台 管理系统
12-18
本文将深入探讨如何利用Java技术栈，特别是SpringBoot和Vue.js，构建一个高效、智能且通用的企业级报表调度平台。这个管理系统不仅能满足日常的数据分析需求，还能实现自动化调度，提高工作效率。 首先，SpringBoot...
使用hutool工具判断字符串是否全部是字母(包括大小写)，java判断字符串是否全部是字母(包括大小写)
最新发布
qq_43700885的博客
07-29 452
1.导入hutool的maven依赖。2.复制一下代码执行。
java判断邮箱地址是否正确，使用hutool工具判断邮箱地址是否正确
qq_43700885的博客
07-29 253
1.导入hutool的maven依赖。2.直接复制一下代码运行。
Swagger使用Map接受参数时，页面如何显示具体参数及说
a1058926697的博客
07-26 623
后端使用Map接受参数，要求在swagger页面上显示具体的参数名称、类型及说明。当Map接受参数数量少时，可以使用Swagger自带的注解。自定义注解 @ApiGlobalModel。编写处理注解对应的插件。
springboot+vue+oss pdf在线预览
08-27
- *1* *2* *3* [springboot+vue整合pdf.js实现预览pdf](https://blog.csdn.net/qq_14853853/article/details/111176085)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值