基于Springboot+Vue的前后端分离的简单Demo案例(一)

后端创建Springboot项目

创建数据库表结构及表信息

添加依赖(pom.xml)

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.7.6</version><relativePath/> <!-- lookup parent from repository --></parent><groupId>com.example</groupId><artifactId>springboot-vue</artifactId><version>0.0.1-SNAPSHOT</version><name>springboot-vue</name><description>springboot-vue</description><properties><java.version>21</java.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>2.1.4</version></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><scope>runtime</scope><optional>true</optional></dependency><dependency><groupId>com.mysql</groupId><artifactId>mysql-connector-j</artifactId><scope>runtime</scope></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><optional>true</optional></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter-test</artifactId><version>3.0.0</version><scope>test</scope></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><configuration><excludes><exclude><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId></exclude></excludes></configuration></plugin></plugins></build></project>

entity层(Book)

package com.example.springbootvue.entity;public class Book {private int bookID;private String bookName;private int bookCounts;private String detail;public int getBookID() {return bookID;}public void setBookID(int bookID) {this.bookID = bookID;}public String getBookName() {return bookName;}public void setBookName(String bookName) {this.bookName = bookName;}public int getBookCounts() {return bookCounts;}public void setBookCounts(int bookCounts) {this.bookCounts = bookCounts;}public String getDetail() {return detail;}public void setDetail(String detail) {this.detail = detail;}@Overridepublic String toString() {return "Book{" +"bookID=" + bookID +", bookName='" + bookName + '\'' +", bookCounts=" + bookCounts +", detail='" + detail + '\'' +'}';}
}

mapper层(BookMapper)

package com.example.springbootvue.mapper;import com.example.springbootvue.entity.Book;
import org.apache.ibatis.annotations.Mapper;import java.util.List;
@Mapper
public interface BookMapper {List <Book> findAll();
}

sevice层(BookService)

package com.example.springbootvue.service;import com.example.springbootvue.entity.Book;import java.util.List;public interface BookService {List <Book> findAll();
}

service接口层(BookServiceImpl)

package com.example.springbootvue.service.impl;import com.example.springbootvue.entity.Book;
import com.example.springbootvue.mapper.BookMapper;
import com.example.springbootvue.service.BookService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import java.util.List;@Service
public class BookServiceImpl implements BookService {@Autowiredprivate BookMapper bookMapper;@Overridepublic List <Book> findAll(){return bookMapper.findAll();}}

controller层(BookController)

package com.example.springbootvue.controller;import com.example.springbootvue.entity.Book;
import com.example.springbootvue.service.BookService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
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;@RestController
@RequestMapping("book")
@CrossOrigin//允许跨域
public class BookController {@Autowiredprivate BookService bookService;@GetMapping("findAll")public List<Book> findAll(){return bookService.findAll();}
}

配置properties(Application.properties)

spring.application.name=springboot-vue
server.port=8081
spring.datasource.url=jdbc:mysql://localhost:3306/test?serverTimezone=Asia/Shanghai&useSSL=false&userUnicode=true&characterEncoding=utf-8
spring.datasource.username=root
spring.datasource.password=123
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
#??entity?*mapper.xml
mybatis.type-aliases-package=com.example.springbootvue.entity
mybatis.mapper-locations=classpath:mapper/*.xmlmybatis.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl

启动类(springbootvueApplication)

package com.example.springbootvue;import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;@SpringBootApplication
@MapperScan("com.example.springbootvue.mapper")
public class SpringbootVueApplication {public static void main(String[] args) {SpringApplication.run(SpringbootVueApplication.class, args);}}

后端测试——成功获得数据

前端创建Vue项目

vue create book-vue

安装组件

npm i element-ui -S
npm install axios

参考链接:Element - The world's most popular Vue UI framework

                  axios中文网|axios API 中文文档 | axios

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import VueRouter from 'vue-router'
//ElementUI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import Vuex from 'vuex';
Vue.use(ElementUI);
Vue.use(VueRouter);
Vue.use(Vuex);Vue.prototype.axios = axios;
Vue.config.productionTip = falsenew Vue({router,store,render: h => h(App)
}).$mount('#app')

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Book from '../views/Book.vue'Vue.use(VueRouter)const routes = [{path: '/',name: 'book',component: Book},
]const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
})export default router

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state: {},getters: {},mutations: {},actions: {},modules: {}
})

App.vue

<template><div id="app"><router-view /></div>
</template><style lang="scss">
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;
}nav {padding: 30px;a {font-weight: bold;color: #2c3e50;&.router-link-exact-active {color: #42b983;}}
}
</style>

Book.vue

<template><div><table><tr><td>编号</td><td>书名</td><td>数量</td><td>鸡汤</td></tr><tr v-for="item in books" :key="item.id"><td>{{ item.bookID }}</td><td>{{ item.bookName }}</td><td>{{ item.bookCounts }}</td><td>{{ item.detail }}</td></tr></table></div>
</template>
<script>
export default {name: "Book",data() {return {msg: "Hello,Vue!",books: [{bookID: 1,bookName: "开发部",bookCounts: 23,detail: "从入门到放弃",},],};},created() {var _this = this;this.axios.get("http://localhost:8081/book/findAll").then((res) => {_this.books = res.data;console.log(_this.books);});},
};
</script>

前端测试——成功获得数据

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/762523.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微服务网关介绍

1. 为什么是Spring Cloud Gateway 一句话&#xff0c;Spring Cloud已经放弃Netflix Zuul了。现在Spring Cloud中引用的还是Zuul 1.x版本&#xff0c;而这个版本是基于过滤器的&#xff0c;是阻塞IO&#xff0c;不支持长连接。Zuul 2.x版本跟1.x的架构大一样&#xff0c;性能也有…

GraalVM详细安装及打包springboot、java、javafx使用教程(打包普通JAVA项目篇)

前言 在当前多元化开发环境下&#xff0c;Java作为一种广泛应用的编程语言&#xff0c;其应用部署效率与灵活性的重要性日益凸显。Spring Boot框架以其简洁的配置和强大的功能深受开发者喜爱&#xff0c;而JavaFX则为开发者提供了构建丰富桌面客户端应用的能力。然而&#xff…

Python模块与包管理使用pip与virtualenv【第151篇—模块与包管理】

Python模块与包管理&#xff1a;使用pip与virtualenv 在Python开发中&#xff0c;模块和包管理是至关重要的&#xff0c;它们使得代码的组织、重用和共享变得更加简单和高效。本文将介绍两个Python生态系统中最常用的工具&#xff1a;pip和virtualenv。通过这些工具&#xff0…

探索医用制氧机的种类及其应用场景

医用制氧机是一种能够制取高纯度氧气的制氧设备&#xff0c;广泛应用于各种场景。随着科技的进步和行业需求的增加&#xff0c;医用制氧机的种类和应用领域也在不断扩展。本文将探索医用制氧机的多元种类及其应用领域&#xff0c;以更好地了解这一设备的重要性。 一、医用制氧机…

java并发编程之 volatile关键字

1、简单介绍一下JMM Java 内存模型&#xff08;Java Memory Model 简称JMM&#xff09;是一种抽象的概念&#xff0c;并不真实存在&#xff0c;指一组规则或规范&#xff0c;通过这组规范定义了程序中各个变量的访问方式。java内存模型(JMM)屏蔽掉各种硬件和操作系统的内存访问…

快速区分清楚图形渲染中的AABB,KD树和BVH这些概念

快速区分清楚图形渲染中的AABB&#xff0c;KD树和BVH这些概念 主要想形象去区分好这些术语&#xff0c;目的是扫盲&#xff0c;先开好坑&#xff0c;内容持续填充。 0.先摆出这些词的全称 AABB&#xff1a; 原名&#xff1a;axis aligned bounding box&#xff1b;中文直译名…

流畅的 Python 第二版(GPT 重译)(二)

第三章&#xff1a;字典和集合 Python 基本上是用大量语法糖包装的字典。 Lalo Martins&#xff0c;早期数字游牧民和 Pythonista 我们在所有的 Python 程序中都使用字典。即使不是直接在我们的代码中&#xff0c;也是间接的&#xff0c;因为dict类型是 Python 实现的基本部分。…

科技助力高质量发展:新质生产力的崛起与企业数字化转型

引言 随着科技的飞速发展&#xff0c;我们正逐渐步入数字化智能时代&#xff0c;这个时代不仅为企业带来了无限的机遇&#xff0c;也让其面对前所未有的挑战。在这个快速变革的时代&#xff0c;企业必须不断调整自己的经营策略&#xff0c;适应数字化转型的浪潮&#xff0c;以…

使用appuploder上架App Store流程

使用appuploder流程笔记 1.如何没有账号去apple官网注册一个&#xff0c;地址&#xff1a;https://developer.apple.com/account 2.下载解压appuploder&#xff0c;双击打开&#xff0c;用刚刚注册的账号登录&#xff0c;下载地址&#xff1a;http://www.applicationloader.n…

PHP连接达梦数据库

PDO是一种在PHP中连接数据库的接口&#xff0c;可以通过PDO接口使用PHP连接达梦数据库。 1、安装PHP环境 检查当前环境是否安装PHP [rootlocalhost ~]# php -v 当前环境并未安装PHP&#xff0c;需要进行安装&#xff0c;选择安装PHP7.3版本。 2、安装 epel-release源和源管…

人工智能时代的引领者:AI提示工程激发大语言模型的无限潜能

文章目录 一、AI提示工程的概念与定义二、AI提示工程的应用领域三、AI提示工程的技术创新与突破四、AI提示工程的未来发展趋势《AI提示工程实战&#xff1a;从零开始利用提示工程学习应用大语言模型》亮点内容简介作者简介目录 一、AI提示工程的概念与定义 在当今日新月异的科…

分类预测 | Matlab实现BiTCN双向时间卷积神经网络数据分类预测/故障识别

分类预测 | Matlab实现BiTCN双向时间卷积神经网络数据分类预测/故障识别 目录 分类预测 | Matlab实现BiTCN双向时间卷积神经网络数据分类预测/故障识别分类效果基本描述程序设计参考资料 分类效果 基本描述 1.Matlab实现BiTCN双向时间卷积神经网络数据分类预测/故障识别。 2.自…

mysql四种事务隔离级别,2024金三银四

TransactionDefinition.PROPAGATION_MANDATORY&#xff1a;如果当前存在事务&#xff0c;则加入该事务&#xff1b;如果当前没有事务&#xff0c;则抛出异常。 TransactionDefinition.PROPAGATION_NESTED&#xff1a;如果当前存在事务&#xff0c;则创建一个事务作为当前事务的…

数据结构 二叉树 力扣例题AC——代码以及思路记录

LCR 175. 计算二叉树的深 某公司架构以二叉树形式记录&#xff0c;请返回该公司的层级数。 AC int calculateDepth(struct TreeNode* root) {if (root NULL){return 0;}else{return 1 fmax(calculateDepth(root->left), calculateDepth(root->right));} } 代码思路 …

利用matplot绘制折线图(详细版-有示例数据)

对于五组数据&#xff0c;绘制折线图&#xff0c;添加有图例、不同折线的颜色等&#xff0c;如下图所示&#xff1a; python代码&#xff1a; import matplotlib.pyplot as plt import numpy as np# 定义数据 data [[1, 2, 3, 4, 5, 6, 7, 8], # 数据1[2, 2, 4, 4, 5, 5, 6,…

【Godot 3.5组件】简单血条组件HealthBar

说明 本文原文写自2022年&#xff0c;内容基于Godot3.5。是本人早期进行Godot组件化和自定义节点探索时的产物&#xff0c;当时的代码和思想可能不太成熟&#xff0c;但贴出来&#xff0c;供需要学习组件化基础思路的同学食用。 概述 血条作为一个非常基础和常见的组件&…

C语言易错知识点:二级指针、数组指针、函数指针

指针在C语言中非常关键&#xff0c;除开一些常见的指针用法&#xff0c;还有一些可能会比较生疏&#xff0c;但有时却也必不可少&#xff0c;本文章整理了一些易错知识点&#xff0c;希望能有所帮助&#xff01; 1.二级指针&#xff1a; parr是一个指针数组&#xff0c;其中每…

国创证券|上市公司破产了手里的股票怎么办?

上市公司破产了&#xff0c;那只能等候公司破产清算补偿。 上市公司破产后&#xff0c;公司的财物将进行清算&#xff0c;还完债款假如还有剩下财物&#xff0c;就会分给持有股票的股民。一般优先偿还借主、再偿还优先股东&#xff0c;最终才是一般股东&#xff0c;假如资不抵…

【网络编程基础(三)】线程同步

学习分享 1、线程同步2、用信号量进行同步2.1、信号量函数2.2、创建一个信号量2.3、sem_post函数 &#xff08;解锁&#xff09;2.4、sem_wait函数 (加锁)2.5、sem_destroy函数2.6、信号量示例 3、用互斥量进行同步3.1、互斥量函数数组3.2、互斥量示例 1、线程同步 两个&#x…