- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

【技术方案分享】华为云OBS&RDS开发实战-java版（下篇）

HuaweiCloudDeveloper 发表于 2022/01/12 17:05:57 2022/01/12

【摘要】本实践是一个前后端分离的项目，通过集成华为云OBS Java SDK 和华为云RDS数据库，实现用户中心个人图片上传、更新功能。获取源代码：gitee上获取（https://gitee.com/HuaweiCloudDeveloper/dtse-practice）

1 实验目的

使用IDEA、Vscode开发工具，基于springboot、VUE.js框架开发和测试单元编写
能够集成 OBS-Java-SDK 和 RDS for MySQL 进行业务开发
了解用户鉴权、用户信息查询以及用户数据更新等业务实现逻辑

2 项目实战要求

在华为云上创建OBS桶和 RDS for MySQL 并初始化数据库
IDEA工具导入Springboot项目，集成 OBS SDK 和数据库RDS开发环境
查看华为云官方SDK文档，实现“OBSservice”类中 uploadOneFile 和 deleOneFile 方法
能够编写junit测试类，实现接口数据测试
使用VScode工具加载前端代码，输入用户名密码后，查看profile 图片，并修改图片

3 实战项目介绍

本实践是一个前后端分离的项目，通过集成华为云OBS Java SDK 和华为云RDS数据库，实现用户中心个人图片上传、更新功能。

3.1 业务流程图

3.2 部署架构图

3.3 项目实战技术栈

本项目是一个前后端分离项目，涉及：

开发工具：后端开发工具 IntelliJ IDEA 、前端开发工具 VScode
开发技术栈：springboot 、vue.js 、jwt、mybatis-plus、OBS Java-SDK
应用部署技术栈：ECS、EIP 、 RDS（MySQL）、OBS、华为云CodeHub
运维技术栈：云日志服务 LTS

4 前置条件

已注册华为云账号，完成实名认证，同时账号不能处于欠费或冻结状态；
账户需有足够的余额或代金券；
工具安装：安装好IDEA以及VScode。
获取源代码：gitee上获取（https://gitee.com/HuaweiCloudDeveloper/dtse-practice）

5 前端服务调试

5.1 项目导入以及参数配置

点击 前端代码获取

下载插件 npm install

修改后端服务配置，修改文件 /project/vue.conf.js

let proxyObj = {}
proxyObj['/'] = {
  //websocket
  ws:false,
  //目标地址
  target:'http://IP:9090',        //后端服务地址
  //发送请求头中host会设置成target
  changeOrigin:true,
  //不重写请求地址
  pathRewrite:{
    '^/':'/'
  }
}
module.exports = {
  devServer:{
    host:'localhost',
    port:8080,
    proxy:proxyObj
  }
}

修改后端文件上传接口配置，修改文件 /project/src/views/profile.vue

<!-- 右边头像+基本信息 -->
      <el-container>
        <el-header style="padding-left:13px">
            <el-card >
              <el-row>
                <el-col :span="2">
                  <img ref="logo" title="点击修改用户头像" :src="userInfo.iconURL" v-if="userInfo.iconURL" style="margin-left:10px">
                  <el-upload
                    action="http://xxxxxxx/upload"              //后端图片上传接口地址
                    :headers="headers"
                    :data="userInfo"
                    :show-file-list="false"
                    :on-success="reload"
                    >
                    <el-button size="small" type="primary">点击上传 <i class="el-icon-upload el-icon--right"></i></el-button>
                  </el-upload>
                </el-col>
                <el-col :span="22">
                  <ul style="margin-left:30px">
                    <li style="padding-top: 0rem; font-size:30px">{{ userInfo.username }}</li>
                  </ul>
                </el-col>
              </el-row>
            </el-card>
        </el-header>
    </el-container>

5.2 项目打包

VScode执行命令 npm run build

打包成功

5.3 项目部署

静态资源包上传

安装 nginx 并进行配置

user root;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;
# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;
events {
    worker_connections 1024;
}
http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
    access_log  /var/log/nginx/access.log  main;
    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 4096;
    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;
    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;
    server {
        listen       8080;             //前端访问端口
        listen       [::]:8080;
        server_name  _;
        root         /usr/share/nginx/html;
        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;
        location / {                    //前端静态资源配置
        root /root/dist;
        index index.html;
        }
        location /login {                //后端路由配置
        proxy_pass http://localhost:9090;
        }
        location /profile {                //后端路由配置
        proxy_pass http://localhost:9090;
        }
        error_page 404 /404.html;
        location = /404.html {
        }
        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        }
    }