springcloud+vue 前后端分离

原文链接: https://my.oschina.net/u/3801375/blog/1922465

springcloud-hichat(前后端分离)

 

一个简单的移动web聊天室,做这个小项目主要是想体验当今时代的一些新潮的技术,尤其是springcloud和vue,所以里面用到的东西是挺多的。

该项目分为:用户移动web端和后台web管理系统

 

码云地址: https://gitee.com/gaojunjie03/springboot-hichat

 

技术选型

 

1、后端

- 核心框架:Spring Boot Spring Cloud(用到的组件有eureka、feign、zuul、hystrix、ribbon)

- 安全框架:Apache Shiro

- 持久层框架:MyBatis

- 数据库连接池:Alibaba Druid

- 缓存框架:Redis

- 日志管理:logback

- 数据库:mysql

- 及时通讯框架:t-io(websocket生态组件。码云GVP项目,大神的开源项目不错呀)

- 代码生成工具:mybatis generator

 

 

 

2、前端

- JS框架:vue、vuex、vue-router

- 页面构建:vue-cli脚手架+webpack

- html框架:framework7+vue(移动web),element-ui(后台管理)

- 异步请求框架:axios

- 对象、集合等工具:lodash

- 图表工具:v-charts

- 通讯:websocket

- 图片懒加载:vue-lazyload

- 图片切图截图:photoclip

- pc图轮播:va-carousel

- pc页面跳转进度条:nprogress

- pc图片浏览:vue-photo-preview

 

4、平台

 

开发环境:java1.8以上、intellij idea、webstorm 、maven 、svn、nodejs、mysql、谷歌浏览器、图片目录nginx代理

 

 

 

系统项目说明(后端):

- hichat-common(实体类、dto、工具类)

- hichat-eureka(服务治理与注册中心)

- hichat-mobile(移动端web接口项目,服务消费者)

- hichat-provider(服务提供者)

- hichat-web(后台管理系统,服务消费者)

- hichat-zuul(系统服务网关)

 

系统项目说明(前端):

- hichat(移动端)

- hichat-web(pc后台)

 

 

效果图

移动端

springcloud+vue 前后端分离_第1张图片springcloud+vue 前后端分离_第2张图片springcloud+vue 前后端分离_第3张图片springcloud+vue 前后端分离_第4张图片springcloud+vue 前后端分离_第5张图片springcloud+vue 前后端分离_第6张图片springcloud+vue 前后端分离_第7张图片springcloud+vue 前后端分离_第8张图片

springcloud+vue 前后端分离_第9张图片springcloud+vue 前后端分离_第10张图片

 

Pc后台

springcloud+vue 前后端分离_第11张图片

springcloud+vue 前后端分离_第12张图片

springcloud+vue 前后端分离_第13张图片

springcloud+vue 前后端分离_第14张图片

springcloud+vue 前后端分离_第15张图片

springcloud+vue 前后端分离_第16张图片

springcloud+vue 前后端分离_第17张图片

 

springcloud+vue 前后端分离_第18张图片

springcloud+vue 前后端分离_第19张图片

springcloud+vue 前后端分离_第20张图片

 

码云地址: https://gitee.com/gaojunjie03/springboot-hichat

交流反馈

QQ 807758751

转载于:https://my.oschina.net/u/3801375/blog/1922465

你可能感兴趣的:(springcloud+vue 前后端分离)