基于“华为云”技术的SpringBoot项目实践设计———房屋租赁系统

举报
攒钱买电动车 发表于 2023/11/07 01:52:04 2023/11/07
【摘要】 从使用CodeArts进行项目创建，接入华为云obs，到将项目部署到华为云服务器，以及开发过程中团队协同使用CodeArts进行项目构建、代码托管、代码检查以及测试环节。 为新接触华为全套软件发开相关服务的高校学生团队提供一个完整的项目开发模版，帮助其了解全套开发流程，使其能够借助华为云全套软件开发服务为其团队构建起一个完成流畅的工作流。同时也助其减少实际开发工作和高校课程之间的“代沟”·····

基于“华为云”技术的SpringBoot项目实践设计———房屋租赁系统

华为云是华为的云服务品牌，将华为30多年在ICT领域的技术积累和产品解决方案开放给客户，提供稳定可靠、安全可信、可持续发展的云服务。华为云致力于让云无处不在，让智能无所不及，共建智能世界的云底座。

OBS是什么？对象存储服务 OBS

对象存储服务（Object Storage Service）是一款稳定、安全、高效、易用的云存储服务，具备标准Restful API接口，可存储任意数量和形式的非结构化数据
image.png

实践项目介绍

本项目(房屋租赁系统)以实际运用为背景，基于华为云和SpringBoot开发，目的是为满足用户查询房屋、预约看房、房屋租赁的需求。

关键词：Spring Boot框架，华为云, CodeArts

项目架构：B/S结构

B/S（浏览器/服务器）结构是目前主流的网络化的结构模式，它能够把系统核心功能集中在服务器上面，可以帮助系统开发人员简化操作，便于维护和使用。它能够结合Web浏览器技术，ActiveX技术以及多种脚本语言等技术。帮助程序开发者节约开发成本。
image.png

项目源码下载

https://www.aliyundrive.com/t/HM6nVyH6QLXy5oOmf9in

系统功能分析

本赁系统主要分管理员和租客两大功能模块，下面将详细介绍管理员和租客分别实现的功能。

租客功能————

租客进入本系统可查看系统信息，包括网站首页、公告信息以及房屋信息，注册登录主要功能模块包括个人中心、看房申请管理、租赁合同管理、收租信息管理、报修信息管理image.png
管理员功能————————

管理员可登录系统后台，登录后可对系统进行全面管理，包括个人中心、公告信息管理、租客管理、户主管理、房屋信息管理、看房申请管理、租赁合同管理、收租信息管理、报修信息管理、收租统计管理以及维修数据管理image.png

功能简要展示

1、主界面image.png
2、租客注册与登录image.png
image.png
租客可选择房屋查看房屋详情信息，登录可进行看房申请操作，房屋详情界面展示image.png
租客登录后还可查看租赁合同信息，租赁合同界面展示image.png
租客可进入收租信息界面查看收租信息，收租信息界面展示
image.png
2、管理员登陆image.png
管理员可对租户进行管理，处理租户发起的看房、维修申请，以及对租赁合同信息进行增删改查。image.png
管理员可增删改查房屋信息，房屋信息管理界面展示如图5-11所示。image.png
——————————————大致功能及结构演示完毕———————————————

基于华为云obs实现文件上传下载

1.进入obs控制台
image.png
2.创建桶image.png
3.点击创建桶image.png
4.获得obs工具参数image.png
image.png
必要参数罗列


    private static final String endPoint = "obs.cn-east-3.myhuaweicloud.com"; 
    private static final String ak = "G4NKS1KU4V0Z7Q6RGOCV";
    private static final String sk = "RCypypmqmYA4Dv8VHjdgS7mPTwGEx5Hkngmrv71L";
    public static String BUCKET_NAME = "myclude-test";//你创建的桶名

Maven的获取!
image.png


	<dependency>
    	<groupId>com.huaweicloud</groupId>
    	<artifactId>esdk-obs-java</artifactId>
    	<version>3.20.6.2</version>
	</dependency>

分析工具类

文件上传方法


	public void ObsUpload(String bucketName, String key,InputStream inputStream) throws IOException { 
    // 创建ObsClient实例 
    	ObsClient obsClient = new ObsClient(ak, sk, endPoint);obsClient.putObject(bucketName, key, inputStream);
    	obsClient.close();
    }

该方法需要桶名，key，输入流Inputstream

输入流介绍：
表示有序的字节流，换句话说，可以将 InputStream 中的数据作为有序的字节序列读取。 这在从文件读取数据或通过网络接收时非常有用。 InputStream 通常连接到某些数据源，如文件，网络连接，管道等 看如下代码片段：

public class InputStreamExample {
	public static void main(String[] args) throws IOException{ InputStream inputStream = new FileInputStream("D:\out.txt");
    //do something with data...
    int data = inputStream.read();
    while (data != -1) 
    	{ System.out.print((char) data);
        data = inputStream.read(); }
        inputStream.close(); } }

注意：为了代码清晰，这里并没有考虑处理异常的情况，IO 异常处理有专门的介绍。
文件下载方法

public void dowloadFile(HttpServletResponse response, InputStream inputStream, String fileName) { response.setHeader("content-type", "application/octet-stream"); response.setContentType("application/octet-stream"); try { response.setHeader("Content-Disposition", "attachment;filename=" + java.net.URLEncoder.encode(fileName, "UTF-8")); } catch (Exception e) { e.printStackTrace(); }
    byte[] items = new byte[1024 * 10];
    int i = 0;
    try {
        BufferedInputStream bufferedInputStream = new BufferedInputStream(inputStream);
        OutputStream outputStream = response.getOutputStream();
        BufferedOutputStream outputStream1 = new BufferedOutputStream(outputStream);
        while ((i = bufferedInputStream.read(items)) != -1) {
            outputStream1.write(items, 0, i);
            outputStream1.flush();
        }
        outputStream1.close();
        outputStream.close();
        bufferedInputStream.close();
        inputStream.close();
    } catch (Exception e1) {
        e1.printStackTrace();
    }

}


##具体逻辑实现
文件上传 创建一个前端页面，用于获取文件，这里我们要用到bootstrap,js,css等等

```java <%-- Created by IntelliJ IDEA. User: 28571 Date: 2021/9/7 Time: 1:13 To change this template use File | Settings | File Templates. --%> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>我的text</title> </head> <body>

<div> <form action="${pageContext.request.contextPath}/upload" method="post" enctype="multipart/form-data"> <input type="submit" class="btn btn-outline-danger" onclick="return checkfile()" value="上传文件"/> <input class="btn btn-outline-primary" type="file" onchange="checkfile()" id="fileupload" name="file" onpropertychange="getFileSize(this.value)"/><br/> </form> </div> </body>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<script type="text/javascript"> var tipMsg = "建议使用chrome firefox ie等浏览器"; var browserCfg = {}; //下面一段鉴别使用者的浏览器 var ua = window.navigator.userAgent; if (ua.indexOf("MSIE") >= 1) { browserCfg.ie = true; } else if (ua.indexOf("Firefox") >= 1) { browserCfg.firefox = true; } else if (ua.indexOf("Chrome") >= 1) { browserCfg.chrome = true; }
function checkfile() {
    try {
        var obj_file = document.getElementById("fileupload");
        var isvip = ${isvip};
        if (obj_file.value == "") {
            alert("请先选择上传文件");
            return;
        }
        var filesize = 0;
        if (browserCfg.firefox || browserCfg.chrome) {
            filesize = obj_file.files[0].size;  //chrome等浏览器支持这个方法拿到文件大小
        } else if (browserCfg.ie) {
            var obj_img = document.getElementById('tempimg');
            obj_img.dynsrc = obj_file.value;
            filesize = obj_img.fileSize;
        } else {
            alert(tipMsg);
            return false;
        }
        if (filesize == -1) {
            alert(tipMsg);
            return false;
        } else {
            return true;
        }
    } catch (e) {
        alert(e);
        return false;
    }
}
</script> </html>

创建一个控制层FileController，用于获得前端响应
设置工具中的全局变量

private static final Logger LOGGER =LoggerFactory.getLogger(OBSUtils.class);
private static final String endPoint = "obs.cn-north-4.myhuaweicloud.com";
private static final String ak = "G4NKS1KU4V0Z7Q6RGOCV";

private static final String sk ="RCypypmqmYA4Dv8VHjdgS7mPTwGEx5Hkngmrv71L"; public static String BUCKET_NAME = "myteacher-test";`

在FilesController创建方法

package com.example.demo.Controller;
import com.example.demo.Util.OBSUtils; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.*; import org.springframework.web.multipart.commons.CommonsMultipartFile;

import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpSession; import java.io.IOException; import java.io.InputStream;

import static java.lang.System.out;

@Controller public class FilesController { //文件下载页面路由 @RequestMapping("/text") public String load(){ return "upfile";//返回upfile.html } //前端请求路由 @RequestMapping("/upload") public String upload(@RequestParam("file") CommonsMultipartFile file, HttpSession Session, HttpServletRequest req) throws IOException { if(file==null) return "/upload"; //将文件存入obs OBSUtils obs = new OBSUtils(); String Key = file.getOriginalFilename(); // out.println(Key); InputStream inputStream = file.getInputStream(); obs.ObsUpload("myteacher-test",Key,inputStream); out.println("上传成功"+Key); return "upfile";//返回upfile.html }

}

启动项目并测试

接下来我们将该项目部署到华为云上

1.华为云控制台 -> 我的资源 -> 云服务器

以此找到华为云分配的公网IP地址入口

2.添加端口

添加8080端口（你Sprig Boot项目启动时的端口，如果Spring Boot项目没有设置，默认是8080）
添加3308端口（你华为云服务器设置的Mysql端口）
image.png

3.测试远程连接是否成功

下载 Mysql WorkBench。https://dev.mysql.com/downloads/workbench/

新建连接 -> 输入Mysql数据库远程地址、端口号、用户名、密码
image.png

4.修改Spring Boot项目关于Mysql的连接配置

5.编译后端项目为jar文件

将后端项目使用Maven进行编译

6.上传项目jar文件到云服务器

在根目录新建一个文件夹，命名为projects, 然后单击右键上传文件。 上传成功后，运行项目
既将房屋租赁系统部署到华为云上完毕
使用CodeArts
开通CodeArts服务：登陆华为云账号购买CodeArts
image.png
点击“新建项目”（如果这里已有项目，那我们就点击已又的项目）

image.png
选择模版（这里我们选择常用的Scrum）

image.png

填写完成后进入项目

image.png

CodeArts的功能

CodeArts全系列工具，包括需求管理、代码托管、编译构建、代码测试、流水线等的关键特性，开发者在掌握前沿研发理念的同时，也能深度了解CodeArts是如何融合华为在软件开发领域的丰富经验以及开发工具上的能力积累。

image.png
在团队开发过程中我们可以使用CodeArts为我们整合的功能进行团队合作，协同开发。

CodeArts的功能的具体使用

这里我们以代码托管为例

image.png

新建项目
image.png
这就是项目界面

image.png

点击右上角“克隆/下载”
image.png

点击密钥管理查看密钥，（这里我们选择HTTPS）

image.png

记下来此密钥，带回Push时要用

使用git将代码推入CodeArts远程仓库

这里我们以Mac系统的IDEA为例
点击菜单栏【VCS】—>【Import into Version Control】—>【Create git Repository】，选择本地项目

image.png

这时项目旁边显示Master即表示成功接下来就可以用git来管理了image.png

接下来我们将项目推入CodeArts远程仓库

image.png

点击push

填入我们远程仓库的路径

image.png

之后根据提示填入我们前文保留的用户名和密码
Push之后，查看idea提示：
image.png
即为成功推入。
__________________________________________________
以上便是基于华为云技术，团队协同使用一站式软件开发生产线 CodeArts和华为云obs，并将项目部署的云服务器上的项目实践开发全过程。

__________________________________________________

从使用CodeArts进行项目创建，接入华为云obs，到将项目部署到华为云服务器，以及开发过程中团队协同使用CodeArts进行项目构建、代码托管、代码检查以及测试环节。 为新接触华为全套软件发开相关服务的高校学生团队提供一个完整的项目开发模版，帮助其了解全套开发流程，使其能够借助华为云全套软件开发服务为其团队构建起一个完成流畅的工作流。同时也助其减少实际开发工作和高校课程之间的“代沟”，为将来步入实际开发环境打下基础。**

【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
代码托管 CodeArts Repo 对象存储服务 OBS 流水线 CodeArts Pipeline 部署 CodeArts Deploy
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入