百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程网 > 正文

白卷开源SpringBoot+Vue的前后端分离入门项目

yuyutoo 2025-03-25 19:16 2 浏览 0 评论

简介

白卷是一个简单的前后端分离项目,主要采用 Vue.js + SpringBoot 技术栈开发。除了用作入门练习,作者还希望该项目可以作为一些常见 Web 项目的脚手架,帮助大家简化搭建网站的流程。之所以叫白卷,是因为它从 0 开始,会随着时间的推移逐渐完善。

白卷是一款使用 Vue+Spring Boot 开发的前后端分离入门项目,该开源项目还提供全套开发教程,具体见github 地址。

github 地址:

https://github.com/Antabot/White-Jotter

github star: 279+

最新版本:0.2.2,MIT 协议

主要技术栈:

  • 前端
  • vue(vue项目构建、指令的灵活运用、组件封装、组件之间通信)
  • vue-router(路由预备知识:hash和history区别、动态路由、路由切换传参)
  • vuex
  • axios(网络请求)
  • ElementUI
  • 后端
  • Spring Boot
  • Spring Data + JPA
  • MySQL
  • Shiro
  • 项目截图






    快速上手

    • 1.clone 项目到本地

    git clone https://github.com/Antabot/White-Jotter

    • 2.数据库脚本放在 wj 项目的根目录下,在MySQL中执行数据库脚本
    • 3.数据库配置在 wj 项目的 src\main\resources 目录下的application.properties 文件中,mysql 版本为 8.0.15
    • 4.在IntelliJ IDEA中运行 wj 项目,为了保证项目成功运行,可以右键点击 pom.xml 选择 maven -> reimport ,并重启项目

    至此,服务端就启动成功了,同时,运行 wj-vue 项目,访问 http://localhost:8080 ,即可进入登录页面,默认账号是 admin,密码是 123

    如果要做二次开发,请继续看第五、六步。

    • 5.进入到 wj-vue 目录中,在命令行依次输入如下命令:
    # 安装依赖
    npm install
    
    # 在 localhost:8080 启动项目
    npm run dev
    
    

    由于在 wj-vue 项目中已经配置了端口转发,将数据转发到SpringBoot上,因此项目启动之后,在浏览器中输入 http://localhost:8080 就可以访问我们的前端项目了,所有的请求通过端口转发将数据传到 SpringBoot 中(注意此时不要关闭 SpringBoot 项目)。

    • 6.最后可以用 WebStorm 等工具打开 wj-vue项目,继续开发,开发完成后,当项目要上线时,依然进入到 wj-vue 目录,然后执行如下命令:
    npm run build
    

    该命令执行成功之后, wj-vue 目录下生成一个 dist 文件夹,可以将该文件夹中的两个文件 static 和 index.html 拷贝到 wj 项目中 resources/static/ 目录下,然后直接运行 wj 项目,访问 http://localhost:8443 ,实际上是把前端打包后作为静态文件,但不推荐使用这种方式。

    浏览器兼容性

    • IE / Edge

    开源项目未提供

    • Firefox

    开源项目未提供

    • Chrome

    开源项目未提供

    • Safari

    开源项目未提供

    • Opera

    开源项目未提供

    PS

    对于java全栈开发的同学来说是一个不错的一个参考项目,当然也可以单独了解其中的前端或者后端部分,该项目值得一提的是开源作者提供了全套开发教程,这个对于java或者vue入门和初学者来说具有非常好的帮助。

    相关推荐

    Python操作Word文档神器:python-docx库从入门到精通

    Python操作Word文档神器:python-docx库从入门到精通动动小手,点击关注...

    Python 函数调用从入门到精通:超详细定义解析与实战指南 附案例

    一、函数基础:定义与调用的核心逻辑定义:函数是将重复或相关的代码块封装成可复用的单元,通过函数名和参数实现特定功能。它是Python模块化编程的基础,能提高代码复用性和可读性。定义语法:...

    等这么长时间Python背记手册终于来了,入门到精通(视频400集)

    本文毫无套路!真诚分享!前言:无论是学习任何一门语言,基础知识一定要扎实,基础功非常的重要,找一个有丰富编程经验的老师或者师兄带着你会少走很多弯路,你的进步速度也会快很多,无论我们学习的目的是什么,...

    图解Python编程:从入门到精通系列教程(附全套速查表)

    引言本系列教程展开讲解Python编程语言,Python是一门开源免费、通用型的脚本编程语言,它上手简单,功能强大,它也是互联网最热门的编程语言之一。Python生态丰富,库(模块)极其丰富,这使...

    Python入门教程(非常详细)从零基础入门到精通,看完这一篇就够

    本书是Python经典实例解析,采用基于实例的方法编写,每个实例都会解决具体的问题和难题。主要内容有:数字、字符串和元组,语句与语法,函数定义,列表、集、字典,用户输入和输出等内置数据结构,类和对象,...

    Python函数全解析:从入门到精通,一文搞定!

    1.为什么要用函数?函数的作用:封装代码,提高复用性,减少重复,提高可读性。...

    Python中的单例模式:从入门到精通

    Python中的单例模式:从入门到精通引言单例模式是一种常用的软件设计模式,它保证了一个类只有一个实例,并提供一个全局访问点。这种模式通常用于那些需要频繁创建和销毁的对象,比如日志对象、线程池、缓存等...

    【Python王者归来】手把手教你,Python从入门到精通!

    用800个程序实例、5万行代码手把手教你,Python从入门到精通!...

    Python从零基础入门到精通:一个月就够了

    如果想从零基础到入门,能够全职学习(自学),那么一个月足够了。...

    Python 从入门到精通:一个月就够了

    要知道,一个月是一段很长的时间。如果每天坚持用6-7小时来做一件事,你会有意想不到的收获。作为初学者,第一个月的月目标应该是这样的:熟悉基本概念(变量,条件,列表,循环,函数)练习超过30个编...

    Python零基础到精通,这8个入门技巧让你少走弯路,7天速通编程!

    Python学习就像玩积木,从最基础的块开始,一步步搭建出复杂的作品。我记得刚开始学Python时也是一头雾水,走了不少弯路。现在回头看,其实掌握几个核心概念,就能快速入门这门编程语言。来聊聊怎么用最...

    神仙级python入门教程(非常详细),从0到精通,从看这篇开始!

    python入门虽然简单,很多新手依然卡在基础安装阶段,大部分教程对一些基础内容都是一带而过,好多新手朋友,对一些基础知识常常一知半解,需要在网上查询很久。...

    Python类从入门到精通,一篇就够!

    一、Python类是什么?大家在生活中应该都见过汽车吧,每一辆真实存在、能在路上跑的汽车,都可以看作是一个“对象”。那这些汽车是怎么生产出来的呢?其实,在生产之前,汽车公司都会先设计一个详细的蓝图...

    学习Python从入门到精通:30天足够了,这才是python基础的天花板

    当年2w买的全套python教程用不着了,现在送给有缘人,不要钱,一个月教你从入门到精通1、本套视频共487集,本套视频共分4季...

    30天Python 入门到精通(3天学会python)

    以下是一个为期30天的Python入门到精通学习课程,专为零基础新手设计。课程从基础语法开始,逐步深入到面向对象编程、数据处理,最后实现运行简单的大语言模型(如基于HuggingFace...

    取消回复欢迎 发表评论: