springboot+vue项目大型实战(一)后端开发

源码下载地址!!!点我

数据库创建表

在这里插入图片描述


SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for book
-- ----------------------------
DROP TABLE IF EXISTS `book`;
CREATE TABLE `book`  (
  `id` int(10) NOT NULL,
  `name` varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `author` varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `publish` varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `pages` int(10) NULL DEFAULT NULL,
  `price` float(10, 2) NULL DEFAULT NULL,
  `bookcaseid` int(10) NULL DEFAULT NULL,
  `abled` int(255) NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Compact;

-- ----------------------------
-- Records of book
-- ----------------------------
INSERT INTO `book` VALUES (1, '上下五千年', '曹操', '中国人民出版社', 999, 99.99, 10, 1);
INSERT INTO `book` VALUES (2, 'SPSS统计', '王五', 'SPSS出版社', 330, 26.00, 1, 1);
INSERT INTO `book` VALUES (3, '四级必备词汇', '李四', '清华出版社', 150, 17.30, 1, 1);
INSERT INTO `book` VALUES (4, '六级必备词汇', '张三', '北大出版社', 220, 59.00, 3, 1);
INSERT INTO `book` VALUES (5, '高考必备', '王强', '上海出版公司', 300, 27.30, 4, 1);
INSERT INTO `book` VALUES (6, '考研必备', '郭德纲', '天津出版社', 225, 22.80, 1, 1);

SET FOREIGN_KEY_CHECKS = 1;

1.创建项目

在这里插入图片描述

2.勾选的依赖

在这里插入图片描述

3.目录结构

在这里插入图片描述

4.配置application.yml

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/library?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai
    username: root
    password: 123456
    driver-class-name: com.mysql.cj.jdbc.Driver
  jpa:
    show-sql: true
    properties:
      hibernate:
        format_sql: true
server:
  port: 8181

5.Book实体类(使用JPA)

package com.xyj.entity;

import lombok.Data;

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

/**
 * @author xyj
 * @date 2020/7/12 -15:30
 */
@Entity
@Data
public class Book {
    @Id
    private Integer id;
    private String name;
    private String author;

}

6.BookRepository接口

package com.xyj.repository;

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


public interface BookRepository extends JpaRepository<Book,Integer> {
}

7.BookHandleer(实现查询功能)

package com.xyj.controller;

import com.xyj.entity.Book;
import com.xyj.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 xyj
 * @date 2020/7/12 -15:45
 */
@RestController
@RequestMapping("/book")
public class BookHandleer {
    @Autowired
    private BookRepository bookRepository;

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

    }
}

8.我们可以在测试类中查询BookSpringbootApplicationTests(控制台显示)

package com.xyj;

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

@SpringBootTest
class BookSpringbootApplicationTests {

    @Autowired
    private BookRepository bookRepository;
    @Test
    void contextLoads() {
        System.out.println(bookRepository.findAll());
    }

}

9.直接启动springboot项目,在页面可以显示所有查询的数据(我们只查询三个字段进行测试)

在这里插入图片描述

10.接下来我们需要与前端交互数据(创建的vue工程都是自动生成的,自己添加一个Book.vue)

在这里插入图片描述

补充–Vue-cli 3.x 添加axios插件

在这里插入图片描述

11.Book.vue(其中data(){}中的数据都是测试用的,created中是从后端获取的数据–数据库中)

<template>
    <div>
        <table>
            <tr>
                <td>编号</td>
                <td>图书名称</td>
                <td>作者</td>
            </tr>
            <tr v-for="item in books">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.author}}</td>
            </tr>
        </table>

    </div>
</template>

<script>
    export default {
        name: "Book",
        data(){
            return{
                msg:'hello xyj',
                books:[
                    {
                        id:1,
                        name:'xyj',
                        author:'AAAAAA',
                    },
                    {
                        id:2,
                        name:'wangwu',
                        author:'王五',
                    }
                ]
            }
        },
        created() {
            const _this =this
            axios.get('http://localhost:8181/book/findAll/').then(function(resp) {
               _this.books=resp.data
            })
        }
    }
</script>

<style scoped>

</style>

12.在index.js中添加路由

在这里插入图片描述

13.由于端口不能相同,我们需要在springboot项目里添加CrosConfig

package com.xyj.config;

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

/**
 * @author xyj
 * @date 2020/7/12 -16:11
 */
@Configuration
public class CrosConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

14.这个时候我们可以启动项目

cnpm run serve

在这里插入图片描述

这样就可以把数据库数据拿过来了!

上一篇:vue ui可视化界面进行创建vue项目安装

下一篇:springboot+vue项目大型实战(二)Elemen UI深入浅出分页操作

  • 21
    点赞
  • 158
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
当前课程中博客项目实战源码是我在 GitHub上开源项目 My-Blog,目前已有 3000 多个 star:本课程是一个 Spring Boot 技术栈的实战类课程,课程共分为 3 大部分,前面两个部分为基础环境准备和相关概念介绍,第三个部分是 Spring Boot 个人博客项目功能的讲解,通过本课程的学习,不仅仅让你掌握基本的 Spring Boot 开发能力以及 Spring Boot 项目的大部分开发使用场景,同时帮你提前甄别和处理掉将要遇到的技术难点,认真学完这个课程后,你将会对 Spring Boot 有更加深入而全面的了解,同时你也会得到一个大家都在使用的博客系统源码,你可以根据自己的需求和想法进行改造,也可以直接使用它来作为自己的个人网站,这个课程一定会给你带来巨大的收获。作者寄语本课程录制于 2020 年,代码基于 Spring Boot 2.x 版本。到目前为止,Spring Boot 技术栈也有一些版本升级,比如 Spring Boot 2.7 发版、Spring Boot 3.x 版本发布正式版本。对于这些情况,笔者会在本课程实战项目的开源仓库中创建不同的代码分支,保持实战项目的源码更新,保证读者朋友们不会学习过气的知识点。课程特色 课程内容紧贴 Spring Boot 技术栈,涵盖大部分 Spring Boot 使用场景。开发教程详细完整、文档资源齐全、实验过程循序渐进简单明了。实践项目页面美观且实用,交互效果完美。包含从零搭建项目、以及完整的后台管理系统和博客展示系统两个系统的功能开发流程。技术栈新颖且知识点丰富,学习后可以提升大家对于知识的理解和掌握,对于提升你的市场竞争力有一定的帮助。实战项目预览    
当前课程中商城项目实战源码是我发布在 GitHub 上的开源项目 newbee-mall (新蜂商城),目前已有 9900 多个 Star,本课程是一个 Spring Boot 技术栈的实战类课程,课程共分为 3 大部分,前面两个部分为基础环境准备和相关概念介绍,第三个部分是 Spring Boot 商城项目功能的讲解,让大家实际操作并实践上手一个大型的线上商城项目,并学习到一定的开发经验以及其中的开发技巧。商城项目所涉及的功能结构图整理如下: 作者寄语本课程录制于2019年,距今已有一段时间。期间,Spring Boot技术栈也有一些版本升级,比如Spring Boot 2.7.x发版、Spring Boot 3.x版本正式版本。对于这些情况,笔者会在本课程实战项目的开源仓库中创建不同的代码分支,保持实战项目的源码更新,保证读者朋友们不会学习过气的知识点。新蜂商城的优化和迭代工作不会停止,不仅仅是功能的优化,在技术栈上也会不断的增加,截止2023年,新蜂商城已经发布了 7 个重要的版本,版本记录及开发计划如下图所示。 课程特色 对新手开发者十分友好,无需复杂的操作步骤,仅需 2 秒就可以启动这个完整的商城项目最终的实战项目是一个企业级别的 Spring Boot 大型项目,对于各个阶段的 Java 开发者都是极佳的选择实践项目页面美观且实用,交互效果完美教程详细开发教程详细完整、文档资源齐全代码+讲解+演示网站全方位保证,向 Hello World 教程说拜拜技术栈新颖且知识点丰富,学习后可以提升大家对于知识的理解和掌握,可以进一步提升你的市场竞争力 课程预览 以下为商城项目的页面和功能展示,分别为:商城首页 1商城首页 2购物车订单结算订单列表支付页面后台管理系统登录页商品管理商品编辑
Spring Boot + Vue实战RABC(Role-based Access Control)项目是一种常见的企业级应用开发组合。Spring Boot是一个快速开发框架,为Java开发人员提供了一种简单且高效的方式来构建独立的、可执行的Spring应用程序。Vue是一个流行的JavaScript框架,用于构建用户界面。RABC是一种基于角色的访问控制方法,用于管理用户对不同系统资源的访问权限。 在这个项目中,Spring Boot被用来构建后端的应用程序。它可以处理与数据库的交互、业务逻辑的实现以及其他与后端相关的功能。Spring Boot为开发人员提供了一套强大的工具和库,使其能够快速、高效地构建功能完善的应用程序。 而Vue则被用于构建前端的用户界面。它可以通过使用数据绑定和组件化的方式,创建交互性强、用户友好的界面。Vue的响应式设计使得开发人员能够根据用户的交互动作实时更新界面,提供更好的用户体验。 RABC是这个项目的核心,它用于管理用户对系统资源的访问权限。通过RABC,系统管理员可以定义不同的角色,并将不同的权限分配给这些角色。用户登录后,系统会根据其所属的角色来确定其可以访问哪些资源。这样可以提高系统的安全性和灵活性,确保各个用户只能访问他们所需的资源。 在这个实战项目中,开发人员需要利用Spring BootVue的强大功能,实现用户的注册和登录、角色和权限管理、资源的授权和访问等功能。通过合理的架构设计和技术选择,可以实现一个高效、安全、易于扩展的RABC项目。 总的来说,Spring Boot + Vue RABC项目实战结合了后端和前端的开发技术,使开发人员能够更快速、高效地构建出功能完善的企业级应用程序。这个项目不仅可以提升系统的安全性和用户体验,也可以帮助开发人员更好地理解和运用Spring BootVue的相关知识。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值