参考视频教程:    **Spring Cloud + Vue 前后端分离 开发企业级在线视频课程系统  ** 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后台)

效果图

移动端

Pc后台

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

交流反馈

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