李成笔记网

专注域名、站长SEO知识分享与实战技巧

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

简介

白卷是一个简单的前后端分离项目,主要采用 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入门和初学者来说具有非常好的帮助。

    发表评论:

    控制面板
    您好,欢迎到访网站!
      查看权限
    网站分类
    最新留言