山东大学软件学院创新实训（三）——数据与前端

最新推荐文章于 2024-07-12 15:51:39 发布

ch1pMunk

最新推荐文章于 2024-07-12 15:51:39 发布

阅读量873

点赞数 11

分类专栏：创新实训文章标签： java

本文链接：https://blog.csdn.net/m0_55518439/article/details/139156512

版权

创新实训专栏收录该内容

12 篇文章 1 订阅

订阅专栏

山东大学软件学院创新实训（三）——数据与前端

将网页中的图片存储到阿里云OSS中

若是把所有图片都存储到本地数据库，可能需要较大的内存。阿里云OSS可以提供高可用性和高可靠性的存储解决方案，确保数据安全和持久性。

同时，阿里云OSS具有良好的扩展性，可以根据需求动态扩展存储容量，适应业务增长。此外，阿里云OSS支持多种访问方式和丰富的API接口，便于数据管理和集成应用。其全球分布的CDN加速节点还可以提升数据访问速度，优化用户体验。综合来看，使用阿里云OSS能有效提升数据存储和管理的效率，降低运营成本。
在这里插入图片描述

其中，@RequestMapping("/file")：定义请求的基本路径为/file，该路径下的所有请求都会被这个控制器处理。FileController继承了BaseController<User>，这意味着它可以使用BaseController中的通用功能，同时也可以访问泛型类型User的特定方法或属性。@Autowired：注入OssClient实例，用于与阿里云OSS交互。

String url = ossClient.upload(file, String.valueOf(loginUser.getId()));：调用ossClient的upload方法上传文件，并将当前登录用户的ID作为参数传递。loginUser.getId()获取当前登录用户的ID，将其转为字符串形式。if (Assert.isEmpty(url))：检查返回的url是否为空（上传是否成功）。

在这里插入图片描述

这段代码实现了一个文件上传到阿里云OSS的完整流程，包括检查输入参数、初始化OSS客户端、检查和创建存储桶、生成文件路径和URL、上传文件、设置访问权限以及返回文件URL。这样可以确保文件上传过程的顺利进行，并使上传后的文件可以通过URL访问。

上传之后的格式在数据库中如下所示。

在这里插入图片描述

智能医生前端

<!DOCTYPE html>
......

<div id="dashboard">
    <div class="container">
        <div class="dashboard-main">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="dashboard-content">
                        <div class="row">
                            <div class="col-lg-12 col-md-12">
                                <div class="message">
                                    <div class="message-header inbox-item">
                                        <div class="inbox-image">
                                            <img src="assets/images/team/doctor.png" alt="image">
                                        </div>
                                        <div class="inbox-content">
                                            <p>智能在线医生</p>
                                            <span>你的专属医生，随时为您服务</span>
                                        </div>
                                    </div>
                                    <div class="message-content">
                                        <div id="messages" style="height: 300px;overflow-y: auto">
                                            <div class="msg-received">
                                                <div class="msg-image">
                                                    <img src="assets/images/team/doctor.png" alt="image">
                                                </div>
                                                <div class="msg-content">
                                                    <p>现在</p>
                                                    <p class="msg">
                                                        [[${session.loginUser.userName}]]你好，我是您的智能专属医生，身体不舒服或者有任何需要咨询的问题，都可以向我提问，我会全心全意为您解答！</p>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="msg-reply">
                                            <textarea id="message" placeholder="输入要咨询的内容..."></textarea>
                                            <button onclick="send()" class="btn btn-na mt-2 pull-right">发送</button>
......

<div th:replace="common/common-bar::#back"></div>

<div th:replace="common/common-bar::#footer"></div>

<div th:replace="common/common-bar::#search"></div>

<div th:replace="common/common-bar::#back-to-top"></div>

<script src="assets/js/jquery-3.5.1.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/plugin.js"></script>
<script src="assets/js/main.js"></script>
<script src="assets/js/custom-nav.js"></script>
<script src="assets/js/jpanelmenu.min.js"></script>
<script src="assets/js/dashboard-custom.js"></script>
<script src="common/utils/reg.js"></script>
<script src="common/layer/layer.js"></script>
<script src="common/custom.js"></script>
</body>
</html>

<script>
    window.onload = messageInit;
</script>

这段前端代码是一个网页的HTML结构，主要用于展示一个智能在线医生的仪表盘页面。页面包含头部信息、预加载动画、主内容区域和多个脚本文件引用。头部部分定义了页面的字符集、视口设置以及引用的各种CSS文件，用于样式化页面。页面主体包括一个可替换的公共头部、一个仪表盘容器和多个可替换的公共组件，如页脚和搜索框。仪表盘主要展示了一个消息区域，包含医生头像、欢迎信息和一个滚动消息显示区域，用户可以在此输入和发送咨询内容。页面末尾引用了多个JavaScript文件，用于实现页面功能和交互，包括jQuery、Bootstrap以及自定义脚本。页面加载完成后，会调用messageInit函数进行初始化。总体而言，这段代码创建了一个功能齐全的网页界面，用于与在线智能医生进行交互。

ch1pMunk

关注

11
点赞
踩
10

收藏

觉得还不错? 一键收藏
2
评论
山东大学软件学院创新实训（三）——数据与前端

若是把所有图片都存储到本地数据库，可能需要较大的内存。阿里云OSS可以提供高可用性和高可靠性的存储解决方案，确保数据安全和持久性。同时，阿里云OSS具有良好的扩展性，可以根据需求动态扩展存储容量，适应业务增长。此外，阿里云OSS支持多种访问方式和丰富的API接口，便于数据管理和集成应用。其全球分布的CDN加速节点还可以提升数据访问速度，优化用户体验。综合来看，使用阿里云OSS能有效提升数据存储和管理的效率，降低运营成本。其中，：定义请求的基本路径为/file，该路径下的所有请求都会被这个控制器处理。
复制链接

扫一扫