Gausst松鼠会

这个屌丝很懒，什么也没留下！

热门标签

springboot校园交友网站1.0（Springboot+Mybatis+thymeleaf+人脸识别+语音助手+百度地图）_thymeleaf 接入百度地图

作者：Gausst松鼠会 | 2024-03-15 19:44:55

踩

thymeleaf 接入百度地图

文章目录

涉及技术
数据库设计
前端搭建
后端实现
接口调用（人脸识别+语音识别+百度地图API）
项目后续跟进（尽全力跟进，但不一定成，哈哈）
项目百度云链接

涉及技术

前端：以HTML+CSS+JS为基础，以LayUI为前端框架
后端：JAVA为语言基础，Springboot为后端框架，整合Mybatis替代了传统的JDBC模式，数据库是用的Mysql，模板引擎使用了Springboot推荐的Thymeleaf

数据库设计

项目的数据库设计改动过几次，以下是最终版本
在这里插入图片描述
表与表的关联性还是很强的，这里提一点，就是当一开始的测试数据不完整或者添加了太多不必要的数据时，可能涉及数据库的数据全部删除的再重添加，你可以选择使用触发器，或者使用以下的方式：
如果你是使用的SQLyog，那么你可以打开SQLyog点击上方的数据库，然后点击备份与导出，然后点击“以SQL转储文件备份数据库”，然后你可以在弹出框中选择“仅结构”，即可导出数据库的SQL脚本，再删除数据库，再运行脚本创建数据库（个人学习记录，哈哈）
在这里插入图片描述

前端搭建

前端的搭建我主要采用的是LayUI框架（好用!），这里就不多说，大家可以去官网学习学习，里面的各类组件都是直接可以使用的，官网链接如下：
LayUI框架
除此之外，注意些常见问题
在这里插入图片描述
注意在你的js最外面加上如下代码

其他相关问题 --> LayUI社区

后端实现

项目使用的是MVC设计模式（这里盗图了，具体在哪里看到的，忘记了，对不住了，兄弟），用户通过点击，发送请求，再通过控制层实现对持久层的调用，再交还数据给控制层，通过Thymeleaf模板嵌套至前端中，进行实时渲染，同时用户得到响应
在这里插入图片描述
通过maven创建JavaWeb项目，解决导入依赖的jar造成的不必要的冲突，在框架上，我们使用了SpringBoot，简化了繁琐的配置，我们整合了MyBatis，通过xml配置对数据库的数据进行映射，从而实现对数据库的操控，使用Druid数据源，可以有效监控并合理分配对数据库的连接

项目重点实现

搜索栏（模糊查询）

模糊查询

首页发布请求遍历

首页遍历

分类跳转

分类跳转
虽然都是概要图，但是我在最后配了项目百度云，你可以对比代码阅读，理解更加深刻

项目难点

图片是使用base64的格式存入数据库中（每个任务可以配多张图片）
like this：

每个任务除了可以配图以外，还有其他很多属性，比如任务时间，任务地点等（都可以在上面的数据库设计中看到，对应task表），当我们想将任务配图像其他属性一样（比如任务时间，任务地点等）在前端通过thymeleaf中的th:each遍历出来时，才发现，任务配图和任务不是一张表（也就是 "pictures"表和 "task"表是分开的，只是通过task_id这个外键关联），所以在控制层中写了一个模型工具类（ModelUtil）

package com.kuang.utils;

import lombok.Data;

import java.util.List;

/**
 * @author HP
 */
@Data
public class ModelUtil<T> {
    /**模型对象*/
    private T obj;
    /**模型对象中图片base64数据集合 指上传多张图片*/
    private List<String> base64;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

然后在控制层中的代码如下：

   /**
     * @return 首页
     */
    @RequestMapping(value = "/index", method = RequestMethod.GET, produces = "application/json;charset=utf-8")
    public String toMainPage(Model model){
        //导航栏  大小分类
        int parent_sort_id = 0;
        Collection<Sorts> sorts = indexService.getAll(parent_sort_id);
        model.addAttribute("sorts",sorts);
        Collection<Sorts> smallsorts = indexService.getAllSmallSorts(parent_sort_id);
        model.addAttribute("smallsorts",smallsorts);

        //发布的任务
        List<ModelUtil> m = new ArrayList<>();
        List<Task> tasks = indexService.getTaskAll();
        tasks.forEach(t -> {
            ModelUtil<Task> modelUtil = new ModelUtil<>();

            List<TaskPictures> taskPictures = indexService.getAllTaskPictures(t.getTaskId());
            List<String> bases = new ArrayList<>();
            taskPictures.forEach(p -> bases.add(new String(p.getTaskPicture(), StandardCharsets.UTF_8)));
            modelUtil.setObj(t);
            modelUtil.setBase64(bases);
            m.add(modelUtil);
        });
        model.addAttribute("tasks", m);

        return "fore/index";
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

其次是在前端中的thymeleaf：
遍历首页任务
遍历效果如图：
首页遍历

接口调用（人脸识别+语音识别+百度地图API）

人脸识别

这一方面我在博客里多次提到过了，具体实现大家可以去看看我的java学生管理系统（百度人脸识别 + Swing + mysql + 邮件发送）
里面涉及到了百度AI从注册到对单个参数的提取，可以帮助你实现人脸识别，在这次项目中唯一不同的是，我是通过H5打开的摄像头，而链接中因为用的是Swing，所以我当时采用的是opencv打开摄像头来实时监测人脸（它自带算法可以监测到人脸），下面附上H5打开摄像头的代码和一张比较重要的关系图

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>人脸识别</title>
</head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>

    #video {
        position: absolute;
        right: 0;
        top: 0;
        margin: -100px -240px auto;
    }

    #img {
        position: absolute;
        left: 0;
        top: 0;
    }

    .auto {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 320px;
        margin-top: -160px;
    }

    button {
        cursor: pointer;
        margin: 0 auto;
        border: 1px solid #f0f0f0;
        background: #5CACEE;
        color: #FFF;
        width: 100px;
        height: 36px;
        line-height: 36px;
        border-radius: 8px;
        text-align: center;
        /*禁止选择*/
        -webkit-touch-callout: none;
        /* iOS Safari */
        -webkit-user-select: none;
        /* Chrome/Safari/Opera */
        -khtml-user-select: none;
        /* Konqueror */
        -moz-user-select: none;
        /* Firefox */
        -ms-user-select: none;
        /* Internet Explorer/Edge */
        user-select: none;
        /* Non-prefixed version, currently not supported by any browser */
    }
</style>

<body background="/static/img/face_bg.png">
    <div class="auto">
        <video id="video" width="480" height="320" autoplay></video>
        <canvas id="canvas" width="480" height="320" style="display: none;"></canvas>
        <div>
            <button id="capture" onclick="alert('请将正脸置于摄像头前');" style="display: none;"></button>
        </div>

    </div>


    <script>
        var file, stream;
        //访问用户媒体设备的兼容方法
        function getUserMedia(constraints, success, error) {
            if (navigator.mediaDevices.getUserMedia) {
                //最新的标准API
                navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
            } else if (navigator.webkitGetUserMedia) {
                //webkit核心浏览器
                navigator.webkitGetUserMedia(constraints, success, error)
            } else if (navigator.mozGetUserMedia) {
                //firfox浏览器
                navigator.mozGetUserMedia(constraints, success, error);
            } else if (navigator.getUserMedia) {
                //旧版API
                navigator.getUserMedia(constraints, success, error);
            }
        }

        let video = document.getElementById('video');
        let canvas = document.getElementById('canvas');
        let context = canvas.getContext('2d');

        function success(stream) {
            //兼容webkit核心浏览器
            let CompatibleURL = window.URL || window.webkitURL;
            //将视频流设置为video元素的源
            console.log(stream);
            stream = stream;
            //video.src = CompatibleURL.createObjectURL(stream);
            video.srcObject = stream;
            video.play();
        }

        function error(error) {
            console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
        }

        if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
            //调用用户媒体设备, 访问摄像头
            getUserMedia({ video: { width: 480, height: 320 } }, success, error);
        } else {
            alert('不支持访问用户媒体');
        }

        // 获取base64图片链接
        document.getElementById('capture').addEventListener('click', function () {
            context.drawImage(video, 0, 0, 480, 320);
            // 获取图片base64链接
            var image_js = canvas.toDataURL('image/png');
            console.log(image_js);

            //ajax传输图片至后端
            $.ajax({
                async: false,
                type: "post",
                url: "/login/receiveData",
                data: { 'base64': JSON.stringify(image_js) },
                dataType: "json",
                mimeType: "multipart/form-data",
                success: function (data) {
                    alert(data.msg);
                    location.reload();

                    if (data.success) {
                        location.href = "/index";
                        $(".msg").stop(true, true).animate({
                            opacity: 1
                        }, 550, function () {
                            $(".msg").animate({
                                opacity: 0
                            }, 1500, function () {
                                location.href = "/index";
                            });
                        });
                    } else {
                        location.href = "/user/toLogin";
                    }
                },

                error: function (data) {
                }
            })


        });

        // 两秒后模拟点击
        setTimeout(function () {
            // IE
            if (document.all) {
                document.getElementById("capture").click();
            }
            // 其它浏览器
            else {
                var e = document.createEvent("MouseEvents");
                e.initEvent("click", true, true);
                document.getElementById("capture").dispatchEvent(e);
            }
        }, 2000);



    </script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178

人脸识别总览图
展示效果：这是人脸注册的，和人脸登录页面基本一样（注册成功后跳转登录页，人脸登录后跳首页）
人脸识别展示图

语音识别

其实语音播报这块，我之前也发过博客，主要是利用语音播报（文字转语音）和实时录音并上传百度AI（语音转文字），就这两项即可实现简单的人机对话，大家可以移步至：
java+百度语音识别（语音助手）
而这次项目只是在首页加了一个小按钮，供用户点击，再将点击事件通过ajax传到后端的控制层，控制层再和持久层交互，这样实现语音操作数据库，当然你也可以加个工具类，通过语音播报的形式，实现人机对话（此时就有小伙伴要问了，你这不智能啊！还要手点，辣鸡！这个嘛，后面还在学习语音唤醒，敬请期待）

以下是上图页面中关于语音助手的js（“Tiko”是上图黄色机器人按钮button的id，回调函数中主要是写的跳转到的对应分类页面，也就是我上面说的调用持久层的给予用户的响应）
语音助手js
总览关系图：（上传百度AI平台这块和人脸识别步骤基本一致，你可以多看看人脸识别是如何实现的）
语音识别总览图
控制层的代码涉及语音的比较广，我后面直接给项目代码，就不单独写出来了

百度地图API

这块调用我也只是小有涉及，不多但确实对我的项目有帮助，提升了用户体验
百度地图API
这块确实不难，我就不细说了，具体参看它的官网 --> 百度地图开放平台官网示例
这些示例都很好用，基本拿来即用，只是有一点很不好就是在定位方面，百度地图没法让我们准确定位到自己的位置，只能定位到城市级别的水平，我参看了其他几个地图开发平台好像都是这样

项目后续跟进（尽全力跟进，但不一定成，哈哈）

会加入语音唤醒，这样就不用点击按钮
加入消息通知（应该是通过消息队列）
设置会员等级，加入支付功能（支付即可成为会员，你懂的）
美化UI

项目百度云链接

分享给小伙伴们，希望能帮到你，共同努力！一起进步！（安装方式和相关配置都在链接中）
链接：https://pan.baidu.com/s/1sCaZIzTnGDJwgCrZeVog3Q
提取码：wbpe

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/244071