基于Android的JavaEE课设

目录

 

1 技术栈

2 android前端

2.1 概述

2.1.1 目录结构

2.1.2 代码分层

2.2 技术点

2.2.1 数据绑定

2.2.2 前后端数据交互

2.2.3 九宫格图片

2.2.4 未处理消息提醒

2.2.5 动画效果

2.2.6 实时聊天

2.2.7 文件上传

2.2.8 底部弹窗

2.2.9 其他

3 后端

3.1 概述

3.1.1 目录结构

3.2 技术点

3.2.1 viewmodel

3.2.2 文件上传

3.2.3 websocket

4 服务器相关

4.1 搭建环境遇到的问题

4.1.1 本地访问不了远程mysql数据库

5 前后端交互设计文档

6 后台管理系统

6.1 搭建步骤

6.1.1 初始化本地仓库

6.1.2 从Gitee上拉取项目

6.1.3 配置、运行renren-fast项目

6.1.4 配置、运行renren-fast-vue项目

6.1.5 配置,运行 renren-generator

6.2 过程中遇到的问题

6.3 最终呈现效果


 

1 技术栈

前端:

  • android

后端:

  • springboot
  • springsecurity
  • mybatis-plus
  • redis
  • websocket

项目部署阿里云服务器

 

2 android前端

2.1 概述

主要介绍引用的第三方框架、技术点

2.1.1 目录结构

1fc9ebb260d14d0ba2493424b9ceb9bc.png

 

2.1.2 代码分层

 

不论是目录结构,还是代码,都应注意分层

69099c6601d8454e9068c3f303b1aa8b.png

 

2.2 技术点

2.2.1 数据绑定

viewBinding

android {
    buildFeatures {
        viewBinding true
    }
}

2c5be7adf52e4be8b78d4efc95534db9.png

 

 

2.2.2 前后端数据交互

xutils

引入依赖

implementation 'org.xutils:xutils:3.8.5'
// gson
implementation 'com.google.code.gson:gson:2.8.2'

 

 

2.2.3 九宫格图片

AssNineGridView

ba9504ceec4c4ecd877d0407607d9c77.png

2.2.4 未处理消息提醒

badgeview

f842e16c68c84ebca526fa739ca7a59d.png

 

2.2.5 动画效果

lottie

1df5e8fac10e4d4584c44d0bdab4d023.pngd9c1d5d2c7fc4aa39676082bce56c24d.png

 

 

2.2.6 实时聊天

服务器 + websocket

e0a557d209624137b5f8240b5bf173c2.jpeg

 

 

2.2.7 文件上传

单文件、多文件

 

2.2.8 底部弹窗

2721092370dc4be9a6a8a5942cee5cea.jpeg

 

2.2.9 其他

走马灯

    <TextView
        android:id="@+id/zm_tv"
        android:layout_width="260dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:ellipsize="marquee"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:marqueeRepeatLimit="-1"
        android:padding="10dp"
        android:singleLine="true"
        android:text="@string/trotting_horse_lamp"
        android:textColor="@color/baby_blue"
        android:textSize="20dp"
        app:layout_constraintHorizontal_bias="0.497"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">
        <requestFocus />
    </TextView>

输入提示属性

android:hint="请输入用户名"

文本改变监听器

    searchEditText.addTextChangedListener(new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {}
        @Override
        public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {}
        @Override
        public void afterTextChanged(Editable editable) {
               // 文本改变后执行的动作
        }
    });

webView

spinner

 

 

3 后端

3.1 概述

3.1.1 目录结构

ff5eaa15efd64f78a214992bf35d3b61.png

3.2 技术点

3.2.1 viewmodel

使用场景:比如用户有多个字段,但是当我们注册,登录时,并不需要这么多字段

好处:节省数据交互时空间的消耗,有提升效率的作用。

 4f20c249a3124aa3a73dbb81b6ae4365.png

 实际上,我们需要的字段是比较少的,比如:

64cd0e2dae3b419699445689e9b708a8.png

 在UserController层:

dda7100ef7394421a5c0a4a813184843.png

不过在最后,我们存入数据库的肯定还是原来的User,而不是UserRegisterVM, 所以,我们要对这两者之间作个转换:

User user = modelMapper.map(model, User.class);

以下是对modelMapper的封装,可以当做API调用。

public class BaseApiController {
 /**
     * The constant DEFAULT_PAGE_SIZE.
     */
    protected final static String DEFAULT_PAGE_SIZE = "10";
    /**
     * The constant modelMapper.
     */
    protected final static ModelMapper modelMapper = ModelMapperSingle.Instance();
}

需要使用modelMapper的时候,要继承BaseApiController 这里对应的是一个单例modelMapper

public class ModelMapperSingle {
    /**
     * The constant modelMapper.
     */
    protected final static ModelMapper modelMapper = new ModelMapper();
    private final static ModelMapperSingle modelMapperSingle = new ModelMapperSingle();

    static {
        modelMapper.getConfiguration().setFullTypeMatchingRequired(true);
        modelMapper.getConfiguration().setMatchingStrategy(MatchingStrategies.STRICT);
    }

    /**
     * Instance model mapper.
     *
     * @return the model mapper
     */
    public static ModelMapper Instance() {
        return modelMapperSingle.modelMapper;
    }
}

 

3.2.2 文件上传

3e64a78458ef49f8bb1d6de62d59b1f4.png

 

/*
* @description: 将文件保存在本地
* @author: xingxg
* @date: 2022/11/8 17:32
* @param: file , 与前端的名字相对应
* @return: 返回文件保存的路径
**/

@PostMapping("/upload")
public CommonResult<List<String>> fileLoad(MultipartFile[] file, HttpServletRequest request) throws IOException {
    String saveLocation = "e:/images/";
    //String saveLocation = "/images/";
    String fileSaveName = "";
    List<String> imageUri = new ArrayList<>();
    for (MultipartFile multipartFile : file) {
        fileSaveName = UUID.randomUUID().toString() + multipartFile.getOriginalFilename();
        multipartFile.transferTo(new File(saveLocation, fileSaveName));
        String result = request.getScheme() + "://" +
            request.getServerName() + ":" +
            request.getServerPort() + "/" +
            fileSaveName;
        imageUri.add(result);
    }
    return CommonResult.ok(imageUri);
}

 

3.2.3 websocket

此前的状态是,两个人进行聊天,A发一句,B需要重新进入聊天界面才能看到A新发的消息,这是不合理的,针对该问题进行改进。

预期效果,不用重新进入页面,只要由新消息传进来,就可以展示新的数据。

解决方法1:

前端周期性地去请求后端数据,达到实时聊天的效果。

这种方式非常消耗资源,明显是不合理的。

解决方法2:

A向B发消息, A将消息推送到服务器上,由服务器主动推动消息给B

 android

引入依赖

implementation "org.java-websocket:Java-WebSocket:1.3.7"

android核心代码

public void addUserToService() {
    URI serverURI = URI.create("ws://192.168.130.1:9000/chat/" + Global.username);

    webSocketClient = new WebSocketClient(serverURI) {
        @Override
        public void onOpen(ServerHandshake handshakedata) {
            Log.i("WebSocketClient", "onOpen");
        }
        @Override
        public void onMessage(String message) {
            loadMessage(); // 有新消息传给本用户的话,重新请求后端,加载数据。
        }
        @Override
        public void onClose(int code, String reason, boolean remote) {
            Log.i("WebSocketClient", "onClose");
        }
        @Override
        public void onError(Exception ex) {
            Log.i("WebSocketClient", "onError");
        }
    };
    try {
        webSocketClient.connectBlocking();
    } catch (InterruptedException e) {
        e.printStackTrace();
    }
}

后端核心代码

package com.huiliyi.backend.utils;

import com.fasterxml.jackson.databind.ObjectMapper;
import lombok.Data;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;

@Slf4j
@ServerEndpoint(value = "/chat/{username}")
@Component
@Data
public class ChatEndpoint {

    //用来存储每个用户客户端对象的ChatEndpoint对象
    public static Map<String,ChatEndpoint> onlineUsers = new ConcurrentHashMap<>();

    //声明session对象,通过对象可以发送消息给指定的用户
    private Session session;

    private String username;
    //连接建立
    @OnOpen
    public void onOpen(@PathParam("username") String username,
                       Session session, EndpointConfig config){
        this.session = session;
        this.username = username;
        //存储登陆的对象
        onlineUsers.put(username,this);
        log.info("onOpen:{}", username);
    }
    //收到消息
    @OnMessage
    public void onMessage(String toName,Session session){
        //将数据转换成对象
        try {
            //发送数据
            log.info("onMessage:{}",toName);
            onlineUsers.get(toName).session.getBasicRemote().sendText("来消息了");
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
    //关闭
    @OnClose
    public void onClose(Session session) {
        //从容器中删除指定的用户
        log.info("onClose:{}", username);
        onlineUsers.remove(username);
    }
}
public static Map<String,ChatEndpoint> onlineUsers = new ConcurrentHashMap<>();

系统中用户名昵称是全局唯一的,所以可以将用户名作为主键,使得每个用户对应一个ChatEndpoint

 

 

4 服务器相关

采用宝塔面板进行傻瓜式操作。

注意在阿里云的云服务器实例开放所需要的所有端口

4.1 搭建环境遇到的问题

4.1.1 本地访问不了远程mysql数据库

在linux本地可以登录mysql, 但是本地机连不上远程的?

a026ba80e68048c2800d99b7126d2254.png

  原因是远程主机没有开放3306端口

 

开放3306端口号后,还是出现问题:

828986e3275c4dbd84c9a069cf58c70f.png

 

这是因为远程的 主机限制了只能localhost连接数据库

所以,在远程主机上修改这个限制,就可以解决这个问题了

1、在安装Mysql数据库的主机上登录root用户:

mysql -u root -p

2、执行命令:

use mysql;
select host from user where user='root';

可以得到结果:

90cbca793e644a1590808c1aa1511e71.png

表名此时mysql数据库只允许localhost连接,所以此前才会拒绝本地的主机连接远程服务器。

3、将Host设置为通配符%

update user set host = '%' where user ='root';

4、Host修改完成后记得执行flush privileges使配置立即生效

flush privileges;

dc7cd681758e47bdba7e74710ed8b3c5.png

 

 

5 前后端交互设计文档

使用Apipost

d9b5ca64a7fa4fa8abcf704c2faac334.png

 

在课程设计的过程中,项目采用前后端分离技术。

有的人负责编写后端,有的人负责编写前端。这可以使得整个项目的结构更加清晰明了,但是前端如何去与后端交互是一个问题。

因为前后端是不同的人写的,所以需要提前规范好API文档

而ApiPost不仅可以对API接口进行调试,还可以自动生成相对应的文档,是一个非常实用的开发的工具。

 

3742662c5dc0475dadc74a4754ee1590.png

 生成的文档,就比较清晰,比自己写一个API接口文档要规范的多

00e554577fa8422dad882dd1f44d7332.png

6 后台管理系统

renren.io

人人开源是Gitee上的一个开源项目,可以快速搭建后台管理系统

9b8d1fdf5758491095161153518e7596.png

 

6.1 搭建步骤

6.1.1 初始化本地仓库

1、 创建一个总目录,用来承载多个项目

 

360c4c427653495db0e9084c0817e43e.png

 

2、初始化为git仓库

进入test_project0684f6eb027e4afe98683c18cfa48e87.png

 27f7be7985984558ba1075fa954b13cb.png

 

 

6.1.2 从Gitee上拉取项目

 

5160607295384e4185e71a1f06a4938d.png

 4c7999d395504bf591edc2a40a30544c.png

 

 

 

同理,再拉取2个项目

c1d5600a1a3a47dc938d39bda495dfcd.png

 

0fb2297b35ba41a8a476e482bb91572c.png

 

最终的目录层次为:

9d987187002b4cc6a6f4c342153fed12.png

 

6.1.3 配置、运行renren-fast项目

f43ea23ee7304fdc8c94164a55bb7b34.png

 b4ac58f589254489977db6e92c6de196.png

 f197ecd99c9b4c44b986f07812221b1d.png

 0517e334e7e44de0a88e87d19f06286b.png

 

 

运行项目, 访问Swagger文档路径,如果可以正常访问,则表明一切正常。

4f781acd25f5423899ba6cb769e9a189.png

 04b0b13bb75f440f8d3b2175438a87c1.png

 

 

6.1.4 配置、运行renren-fast-vue项目

打开renren-fast-vue项目, 这里本人使用的是WebStorm编译器

1b198fe21fce40048a2c683e383adea1.png

 

依赖安装完成, 打开终端,运行项目

这里的命令行是:

 npm run dev

5b63485463954ff88cfaeaf6bdddaee1.png

 f36b15bf9afa4e5780d4bae3850bba3d.png

登录成功后:

7ae0f2a5c5384057a6540a30267a6dd6.png

 

此时,这个项目还算是一个空壳,没有管理到真正自身的项目

这是就需要另一个项目, renren-generator 实现代码生成!

代码生成需要提供关于数据库的表


6.1.5 配置,运行 renren-generator

e1e7594a481c478aaeb4538262997441.png

 7be8f2c148e447eba3d4190921f4f5fd.png

 

修改generator.properties

d0fff75688b74e19933f6edea6ba6cb3.png

 

注释出现乱码问题,修改字符集编码

6e64d6c50f754869be932e21c807c9ca.png

 7dba7cb1e1a84f4682297bd1bc10a767.png

 

 

在renren_fast数据库中插入你真正项目中所使用的表, 可以在已有的数据库中选择转储sql文件,然后在renren_fast中执行这个sql文件即可。

34f073ddac2942a2b32d074b2e4b81e5.png

 

然后,就可以在代码生成器中查到你刚刚插入的数据库表。

运行项目,访问localhost

946a061f158e4a65afe322b4deeb1378.png

 03a31b07552a40b6aaf599f1edffaaf5.png

 

 

代码就自动生成了。

解压文件,可以看到有如下内容:

 

98d39dc786cc4be9890596bc27b0215e.png

 

这些sql文件,直接拖到navicat里执行就可以了。

作用是用来生成管理的子菜单

a9bc1cd926a542938ce1ba8c3dad48d1.png

 441c9c4f001b432b9121ff1ed160af42.png

 

将后端代码复制到renren-fast项目下的 module

94d60a9d336d44f58544efbdb3992110.png

 

最后,就可以实现对模块的管理。

33d6410e509743cc951b4968577317f0.png

 

 

 

6.2 过程中遇到的问题

人人开源后端中,自带了一个User,而我们自身模块有一个名字一模一样的User

 

冲突1:

  • Spring容器中UserService组件不唯一

解决:

cd18836755734488940eac2e86ba89e5.png

 

ea07ed19431242f796af956017718f1f.png

 

 

冲突2:

  • UserDao也是自动注入的。虽然说对应的mapper文件可以映射过去,但是名字重复了,还是会有点问题.

解决方法:

83d31a7fa51d4190b1242d3598e7dad8.png

 

 

冲突3:

  • ShiroConfig 已经存在对UserEntity的映射。意思就是说,类名不能重复。

解决方法:修改类名

fc39e65145e746d0bb5a0a7b0cd27f25.png

 

 

 

6.3 最终呈现效果

908c2956b08f45a381159b1464c47940.png

 

可以看到,用户的ID后几位都为0,这是由于前段接收Long类型时,出现精度丢失,以下为解决方式:

7729a82e4545463b874d7da41b9ba4ec.png

 

72bd1654bfb146b19083ebeae210ab4e.png

 

 

 

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xingxg.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值