【实战】SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0
基于SpringBoot+uniapp简单通讯聊天软件
项目介绍
JavaDog Chat 简单通讯聊天软件是基于SpringBoot+MybatisPlus+uniapp+uview+stomp等更多优秀组件及前沿技术开发,注释丰富,代码简洁,开箱即用,兼容H5+小程序+APP,及其适合入门学习!将想说却不敢说,相爱去不敢爱的思绪放置与此。
快速链接
微信公众号:JavaDog程序狗
关注公众号,发送 chat ,无任何套路即可获得
或访问https://blog.javadog.net/archives/chat
体验地址
因二维码图被和谐,最好访问https://blog.javadog.net/archives/chat进行扫码访问体验
1.网页H5
2.APP
体验账号
账号:18306390693
密码:123456
如需多个账户可自行注册
主要模块功能
️登录注册
- 用户可自主注册,并通过用户名密码进行登录
- 如忘记密码则可通过邮箱找回密码,但需要在配置文件中配置邮箱相关内容
消息
- 展示群组及好友聊天信息,并有消息提醒及未读标记
- 可通过上方放大镜进行搜索,或者扫一扫进行好友添加
- 点击查看聊天信息,可进行文字/图片/视频/语音等发送方式
好友
- 按照字母索引展示所有好友列表,并可通过放大镜搜索
- 通过右上角扫描二维码进行好友添加
- "我添加的"本人通过扫码或者搜索添加好友申请列表数据
- "添加我的"其他用户通过扫码或者搜索添加我本人申请列表数据
- 通过点击好友进行好有名片查看
群组
- 按照字母索引展示所有群组列表,并可通过放大镜搜索
- 通过右上角扫描二维码进行群组加入
- "新建群组"可根据所需进行群组的创建
- 通过点击群组进行好有名片查看
我的
- 点击头像进行头像修改
- "我的名片"展示本人所属二维码
- "修改密码"可进行密码重置
- "关于"展示本狗的博客是个webview跳转
- 点击退出并退出当前账号
️快速启动
后端chat-provider推荐IDEA打开,前端chat-uniapp推荐HbuliderX打开。
前端支撑
| 插件 | 版本 | 用途 |
|---|---|---|
| uview-ui | ^2.0.31 | 多平台快速开发的UI框架 |
| uni-simple-router | ^2.0.7 | 专为uniapp打造的路由器 |
| moment | ^2.29.4 | js工具库 |
| mescroll-uni | ^1.3.7 | 上拉加载下拉刷新插件 |
| @uni-ui/code-ui | ^1.4.8 | 二维码生成工具 |
启动前端
- 在chat-uniapp项目目录下执行
npm install
- 在HBuilderX工具下运行,选择需要运行到哪个终端
3. 如需调整环境,请在/common/config/env.js修改环境变量
后端支撑
| 插件 | 版本 | 用途 |
|---|---|---|
| jdk | 1.8 | java环境 |
| lombok | 1.18.16 | 代码简化插件 |
| maven | 3.6.3 | 包管理工具 |
| druid | 1.1.24 | JDBC组件 |
| hutool | 5.7.20 | Java工具类库 |
| mybatis-plus | 3.4.1 | 基于 MyBatis 增强工具 |
| pinyin4j | 2.5.1 | 拼音组件库 |
| mysql | 8.0 / 5.7 | 数据库 |
启动后端
- 开发工具内配置好,并将maven配置好,建议使用阿里云镜像
- 将chat-provider包下的/doc/SQL/db_chat.sql进行本地执行,并在application配置文件中修改数据库配置
- 运行启动SpringBoot项目,如见到以下日志即为启动成功。
其他辅助
️♀️原型图
本狗第一次画原型,请大佬勿喷
项目路径下/doc/原型/chat.rp
DB设计
项目路径下/doc/数据库设计/chat.pdm
版权说明
JavaDog Chat 采用 Apache License2.0协议
代码可用于个人学习等,完全开源免费
二次开发如用于毕设等二次售卖,未经审核视为侵权
【实战】SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目的更多相关文章
- 微信小程序开发入门学习(1):石头剪刀布小游戏
从今天起开始捣鼓小程序了2018-12-17 10:02:15 跟着教程做了第一个入门实例有兴趣的朋友可以看看: 猜拳游戏布局 程序达到的效果 猜拳游戏的布局是纵向显示了三个组件:文本组件(tex ...
- 微信小程序开发入门学习(2):小程序的布局
概述 小程序的布局采用了和Css3中相同的 flex(弹性布局)方式,使用方法也类似(只是属性名不同而已). 水平排列 默认是从左向右水平依次放置组件,从上到下依次放置组件. 任何可视组件都需要使用样 ...
- 基于uniapp自定义Navbar+Tabbar组件「兼容H5+小程序+App端Nvue」
uni-app跨端自定义navbar+tabbar组件|沉浸式导航条|仿咸鱼凸起标签栏 在跨端项目开发中,uniapp是个不错的框架.采用vue.js和小程序语法结构,使得入门开发更容易.拥有非常丰富 ...
- uniapp之uni-starter小程序多端研发框架搭建与项目实践
随着移动互联网的飞速发展,无数移动APP琳琅满目:在移动App的发展的基础上,衍生了小程序.轻应用技术,它随时可用,但又无需安装卸载.小程序是一种不需要下载安装即可使用的应用,它实现了应用" ...
- 开发H5程序或者小程序的时候,后端Web API项目在IISExpress调试中使用IP地址,便于开发调试
在我们开发开发H5程序或者小程序的时候,有时候需要基于内置浏览器或者微信开发者工具进行测试,这个时候可以采用默认的localhost进行访问后端接口,一般来说没什么问题,如果我们需要通过USB基座方式 ...
- 原创:从零开始,微信小程序新手入门宝典《一》
为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里,让大家方便的从零开始学习:一:微信小程序的特点张小龙:张小龙全面阐述小程序,推荐通读此文: 小程序是一种不需要下载.安装即可使用的 ...
- 微信小程序室内地图导航开发-微信小程序JS加载esmap地图
一.在微信小程序里显示室内三维地图 需要满足的两个条件 调用ESMap室内地图需要用到小程序web-view组件,想要通过 web-view 调用ESMap室内地图需要满足以下 2 个条件: 1. 小 ...
- Java生鲜电商平台-优惠券功能设计与开发(小程序/APP)
Java生鲜电商平台-优惠券功能设计与开发(小程序/APP) 说明:Java生鲜电商平台-优惠券功能设计与开发(小程序/APP) 目录 1.项目背景与需求分析 2.需求目的与功能点列表 3.业务逻辑 ...
- 支付宝小程序室内地图导航开发-支付宝小程序JS加载esmap地图
如果是微信小程序开发,请参考微信小程序室内地图导航开发-微信小程序JS加载esmap地图文章 一.在支付宝小程序里显示室内三维地图 需要满足的两个条件 调用ESMap室内地图需要用到小程序web-vi ...
- Java生鲜电商平台-关于学习生鲜电商平台的思考(小程序/APP)
Java生鲜电商平台-关于学习生鲜电商平台的思考(小程序/APP) 说明:最近群里面的一个网友问的一个问题,让我陷入了深思,他问的问题很基础也很真实,"大佬,你们是怎么学习的呢?" ...
随机推荐
- 32 项目结构 & 事务 & Logging日志
1 项目结构 以下主要是以drf编写api时的结构为示例. 1.1 APP结构 1.1.1 单APP 例如:订单系统 1.1.2 Base + 业务APP 例如:供应链系统 1.1.3 独立的APP ...
- kubectl工具安装指南
kubectl是一个用于连接Service Mesh控制平面的工具,可以安装在办公电脑的Windows系统上,也可以安装在虚拟机的Linux系统上,只要网络能与控制平面的公网地址互通即可.下面分别介绍 ...
- Ubuntu linux下gcc、g++不同版本的安装和切换
讲解linux下gcc.g++不同版本的安装和切换 Ubuntu 18.04预装GCC版本为7.3,但有时在编译是需要用的不同gcc版本,下面介绍,如何安装不同的gcc 和g++,并设置根据不同的需要 ...
- nuxt中asyncData和fetch的区别
asyncData作用于页面pages,在组件中不能使用,并且asyncData中没有this,如果想要给data中的数据赋值,要在asyncData函数中return出去 fetch 作用于组件中c ...
- JSP和servlet之间的相互传值
1.从一个jsp页面跳转到另一个jsp页面时的参数传递 (1)使用request对象获取客户端提交的信息 login.jsp页面代码如下: 点击查看代码 <%@ page language=&q ...
- vector的使用方法
vector是STL容器的可变长度数组.可变长度数组的头文件是<vector>,有以下常见的使用方法: 1.vector<int> v(N,i):建立一个可变长度数组v,内部元 ...
- (十四).CSS3中的多列布局和伸缩盒布局
1 多列布局 ① 设置给包裹元素的 CSS 属性(共 8 个属性) CSS 属性名 含义 值 column-count 设置列数 纯数字 column-width 设置列宽 长度 columns 同时 ...
- mysqli语句的用法
改用了PHP7的环境后 mysql语句好像就不能用了.. 有点懵逼 就写一下该怎么用以免遗忘 ======= 1 链接数据库 $link=mysqli_connect('127.0.0.1:xxxx' ...
- <a-upLoad>连报三错
[Vue warn]: Invalid prop: custom validator check failed for prop "fileList". [Vue warn]: I ...
- MQ(为什么要使用MQ)
为什么使用MQ? 个人认为主要由几下几点: 1.在高并发环境下,由于来不及同步处理,请求往往会发生堵塞,比如说,大量的insert,update之类的请求同时到达数据库,直接导致无数的行锁表锁,甚至最 ...