0. Preface:

Project introduction

Project name: MINITALK

Basic functions of the project: A Netty-based chat communication APP modeled after wechat, including chat function, the function of scanning code to add friends, and the function of uploading and downloading profile pictures by FastDFS file system.

Features to be improved: circle of friends function, picture sending function, etc., detailed information display function of friends will be improved later (mainly because there are too many school classes and not enough time). After the completion of the project, a blog will be posted to supplement, and the complete code will be shared on GitHub and Gitee.

Note: If this project is helpful to you, please click “Like” to follow and bookmark. I will also update some notes or documents of other open source projects for your reference. Thank you very much!

  • Gitee code cloud address: gitee.com/caoshipeng

1. Project Introduction:

Introduction to Development Tools

Front-end development tool: HBuilderX

Back-end development tool: IDEA 2020.1

Communicate database visualization Premium Navicate For MySQL and SQLyog

Technical selection: front and rear end separation

Introduction to technology Stack

Back end: SpringBoot2.x + netty4. x + WebSocket + Mybatis

Front end: H5 Plus + MUI + VUE + Axios

Database: MySQL

File storage: Nginx + FastDFS set up distributed server (set up in own VIRTUAL machine first, and then deploy in server after project extension function is realized)

Project deployment: Tencent Cloud/Ali Cloud/Qiuniuyun

Basic Project Requirements

  • Can independently use Spring SpringMVC SpringBoot Mybatis and other common enterprise development framework
  • Familiar with MySQL
  • Understand common Linux basic commands
  • Essential front-end basics, HTML5 CSS JavaScript VUE Axios
  • Understand Nginx FastDFS and other common distributed middleware (completely unknown readers, first know what is used to use it, Nginx FastDFS in the local VIRTUAL machine specific deployment and use operation I will write a separate blog to introduce)
  • Understand communication framework such as Netty WebSocket
  • Familiar with IDEA HbuilderX development tools

Front-end framework API official documentation

‘s website development documentation: dev.dcloud.net.cn/mui/ui/

HTML5 PLUS official documentation: www.html5plus.org/doc/

All coordinate dependence

<dependencies>
    <! --netty-->
    <dependency>
        <groupId>io.netty</groupId>
        <artifactId>netty-all</artifactId>
        <version>4.1.49. The Final</version>
    </dependency>
    <! Google QRcode 插件 logo 图 片
    <dependency>
        <groupId>com.google.zxing</groupId>
        <artifactId>javase</artifactId>
        <version>3.3.0</version>
    </dependency>
    <! -- fastdfs-client distributed file storage system Client -->
    <dependency>
        <groupId>com.github.tobato</groupId>
        <artifactId>fastdfs-client</artifactId>
        <version>1.27.2</version>
    </dependency>
    <! --fastjson-->
    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>fastjson</artifactId>
        <version>1.2.62</version>
    </dependency>
    <! --druid-->
    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>druid</artifactId>
        <version>1.1.19</version>
    </dependency>
    <! --thymeleaf(not used in project, only for testing, optional)-->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <! --mybatis-->
    <dependency>
        <groupId>org.mybatis.spring.boot</groupId>
        <artifactId>mybatis-spring-boot-starter</artifactId>
        <version>2.1.3</version>
    </dependency>
    <! --IDEA hot deployment -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-devtools</artifactId>
        <scope>runtime</scope>
        <optional>true</optional>
    </dependency>
    <! --mysql-->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>5.1.45</version>
    </dependency>
    <! Lombok's very useful plug-ins help reduce the amount of code in entity classes -->
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <optional>true</optional>
    </dependency>
    <! - built-in tomcat -- -- >
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-tomcat</artifactId>
        <scope>provided</scope>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
        <exclusions>
            <exclusion>
                <groupId>org.junit.vintage</groupId>
                <artifactId>junit-vintage-engine</artifactId>
            </exclusion>
        </exclusions>
    </dependency>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-test</artifactId>
        <version>5.2.8. RELEASE</version>
    </dependency>
Copy the code

2. Effect Display:





3. Project complete source code address:

Gitee：gitee.com/caoshipeng

GitHub:github.com/CodeFarmer1…

4. Operation environment required by the project:

The project requires the following environmental support:



Among them, JDK8 is also available. I use JDK8 myself

Links to obtain related environment files:

Link: pan.baidu.com/s/10DS0W-ow… Extraction code: M197

5. Operation steps of the project:

  • Download the front and back ends of the project locally
  • Front-end import HbuilderX
  • The back-end code imports IDEA and tests the native startup

Matters needing attention

The front-end operating environment is complex:

  • First of all, the mobile phone and computer need to be in the same WIFI condition at the same time, mainly because the real phone needs the same network segment IP to find the mobile device during debugging. If the project is deployed, packaged and released APP, the back-end address can be changed to the server IP.
  • The mobile phone and computer are connected through USB cable. The mobile phone needs to open developer mode and enable USB debugging, as shown in the picture:

  • At the same time, since our avatar uploads and downloads are stored in the FastDFS distributed file system on the native CentOS7 VM, we need to start the VM and run niginx and FastDFS.
  • Blog.csdn.net/weixin_4359…
  • You can also run the app using a PC mobile emulator, see article: -blog.csdn.net/qq_41870483… (If you don’t have two phones connected to the computer during chat function testing, you can use one phone and mumu phone simulator to run)