【实战】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) 说明:最近群里面的一个网友问的一个问题,让我陷入了深思,他问的问题很基础也很真实,"大佬,你们是怎么学习的呢?" ...
随机推荐
- python批量导出、安装依赖库文件
导出: 在原环境中 pip freeze > fname.txt 安装: 在新环境中 pip install -r fname.txt 其中fname.txt 可以随意命名,其存储安装库文件列 ...
- Windows 10 ~ Jenkins 安装
首先: jenkins是由java写的,所以在使用之前请安装好JDK(最好安装JDK1.8) 下载jenkins.war包并放到一个自己创建的目录D:\jenkins下:https://mirrors ...
- tomcat 重启脚本
1 创建脚本后将脚本放到tomcat/bin目录下并授权,就可以通过此脚本一键重启拉! #!/bin/bash tomcat_path1="$( cd "$( dirname &q ...
- 移动端H5开发坑位指南
一.HTML方向 调用系统功能 使用<a>能快速调用移动设备的电话/短信/邮件三大通讯功能,使用<input>能快速调用移动设备的的图库/文件. 这些功能方便了页面与系统的交互 ...
- h5移动端识别二维码信息
jsqr插件 图片跨域时不允许绘制到canvas,所以先转blob在画到canvas上面就可以,如果不跨域直接画就行 function getImageBlob (url) { ...
- Vue+Element+Table表格动态跨列文章
https://my.oschina.net/u/4772459/blog/4699602 如图所示: 1 <template class="SysRole"> 2 & ...
- CMD输出文本文件内容的type指令(替代Linux的cat指令)
:: 本脚本的所有指令本身不输出到屏幕 @echo off :: 打印文本文件内容并匹配关键字,结果不输出到屏幕 type result.txt | find "error" &g ...
- 【python】第一模块 步骤五 第二课、Python多线程
第二课.Python多线程 一.课程介绍 1.1 课程概要 章节概要 进程.线程与并发 对多核的利用 实现一个线程 线程之间的通信 线程的调度和优化 1.2 为什么要学习多线程 (线程)使用场景 快速 ...
- Spring系列之字段格式化-13
字段格式化 Spring 3 引入了一个方便的SPI,它为客户端环境的实现Formatter提供了一个简单而健壮的替代方 Formatter Formatter实现字段格式化逻辑的SPI . pack ...
- Vue组件template中html代码自动补齐设置
1.vscode设置==>扩展==>JSON==>在settings.json中编辑 2.在最后 } 前添加如下代码保存文件即可 // 自动补全模板字符串 "emmet.t ...