Springboot - Vue 个人博客 主目录

Springboot + Vue 个人博客 主目录

原创文章链接 Vue + Spring Boot 项目实战(一):项目简介

本项目是参考上述博客进行项目的搭建的 对于我这个前端菜鸟的学习帮助很大

主要区别在于参考博文的后端使用是JPA 而我使用Mybatis来进行增删改查

而目前来讲 这个项目还没完全完成 对于Shiro/Spring Security + Vuex 还没有整合以及部分非关键前端没有完成 但基本实现上传博客 查看评论等等的功能


目录

Springboot + Vue 个人博客 主目录
Springboot + Vue 个人博客 前端配置
Springboot + Vue 个人博客 后端配置
Springboot + Vue 个人博客 前端交换样例
Springboot + Vue 个人博客 后端交换样例

代码

Github 后端代码
Github 前端代码

Springboot

  • 开发环境: IntelliJ IDEA + Mysql8.0

  • 目录结构

├─ src
│    ├─ main
│    │    ├─ java
│    │    │    └─ com.example.demo
│    │    │                       ├─ DemoApplication.java   //启动
│    │    │                       ├─ config                 //跨域配置
│    │    │                       ├─ controller            
│    │    │                       ├─ domain                
│    │    │                       ├─ exception              //异常处理
│    │    │                       ├─ mapper                 //mapper接口
│    │    │                       ├─ result                 //返回数据封装
│    │    │                       └─ service
│    │    │                                └─ impl
│    │    └─ resources
│    │           ├─ application.yml                         //springboot配置
│    │           ├─ config                                  
│    │           └─ mapper                                  //mapper xml

Vue

  • 开发环境: WebStorm + npm
  • 目录结构
├─ package-lock.json
├─ package.json
├─ public
├─ src
│    ├─ App.vue
│    ├─ assets                              // JPG PNG 图片
│    ├─ components                          // Vue 组件
│    ├─ main.js                             // Vue 配置
│    ├─ router
│    │    └─ index.js                       // Vue-router 配置
│    └─ store
│           └─ index.js                     // Vuex 配置
├─ static                                   // 静态 资源
│    ├─ js
│    ├─ css
│    └─ html

└─ vue.config.js                            // Vue 跨域配置



实现效果

1. 登录

Springboot - Vue 个人博客 主目录_第1张图片


2. 首页

Springboot - Vue 个人博客 主目录_第2张图片


3. 博客

Springboot - Vue 个人博客 主目录_第3张图片


4. 博客详情

Springboot - Vue 个人博客 主目录_第4张图片


5. 后台

Springboot - Vue 个人博客 主目录_第5张图片

你可能感兴趣的:(SpringBoot)