前后端分离项目知识汇总（阿里云Oss，EasyExcel，视频点播，SpringCloud，Redis，Nuxt）-1-阿里云开发者社区

前后端分离项目知识汇总（阿里云Oss，EasyExcel，视频点播，SpringCloud，Redis，Nuxt）-1

2024-01-23 291

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

本文涉及的产品

对象存储 OSS，OSS 加速器 50 GB 1个月

简介： 前后端分离项目知识汇总（阿里云Oss，EasyExcel，视频点播，SpringCloud，Redis，Nuxt）

前言

源码代码：

https://github.com/YuyanCai/gulixueyuan-back–zs

https://github.com/YuyanCai/gulixueyuan-front–zs

前端页面：

https://github.com/YuyanCai/guli-xy-fd

整合CRUD

前后端对接流程

我们这里拿查询所有user做实例

全栈开发流程

添加路由

模板中给的其实也有目录，我们看着复制粘贴根据自己的需求改改即可

点击路由显示页面

redirect:'/teacher/table’作用是当访问/teacher时会自动跳到/teacher/table

component是做布局的，就是页面做固定不动的部分

在api文件夹创建js文件，定义接口地址和参数

创建vue页面引入js文件，调用方法实现功能

我们先来了解一下response对象

以下是response对象的属性和方法

所以说，response就是代表接口返回的数据

在看我们后端定义的接口

这里的scope.row是获取行数据是固定写法

这样功能就实现了

补充下分页条实现方式

分页条

直接拿element-ui里面的来用就可以

因为我分页条和表单在同一页面，所以写在同一组件下

多条件查询

直接拿element-ui里面的来用就可以

因为我分页条和表单在同一页面，所以写在同一组件下

主要是js对象和java对象的问题，注意区分即可

其余的也是直接用element-ui组件直接拿过来改改数据

有了查询对象之后把查询对象传入我们写的获取讲师列表即可

我们在查询按钮绑定方法

测试

删除功能

增加功能

3、定义增加API

4、引入js，写vue页面

5、测试

6、补充

修改功能

我们想让增加和修改在同一页面下进行

增加和修改不同点在于，修改要做数据回显

那么如何区分这两个请求呢？

答案是修改的时候地址栏会有id，而保存没有

定义Api、定义路由、定义跳转路径

修改功能逻辑

测试

修改成功

修改是用put请求还是post请求？

idempotent 幂等的

这两个方法看起来都是讲一个资源附加到服务器端的请求，但其实是不一样的。一些狭窄的意见认为，POST方法用来创建资源，而PUT方法则用来更新资源。

幂等（idempotent、idempotence）是一个抽象代数的概念。在计算机中，可以这么理解，一个幂等操作的特点就是其任意多次执行所产生的影响均与依次一次执行的影响相同。

POST在请求的时候，服务器会每次都创建一个文件，但是在PUT方法的时候只是简单地更新，而不是去重新创建。因此PUT是幂等的。

举一个简单的例子，假如有一个博客系统提供一个Web API，模式是这样http://superblogging/blogs/post/{blog-name}，很简单，将{blog-name}替换为我们的blog名字，往这个URI发送一个HTTP PUT或者POST请求，HTTP的body部分就是博文，这是一个很简单的REST API例子。我们应该用PUT方法还是POST方法？取决于这个REST服务的行为是否是idempotent的，假如我们发送两个http://superblogging/blogs/post/Sample请求，服务器端是什么样的行为？如果产生了两个博客帖子，那就说明这个服务不是idempotent的，因为多次使用产生了副作用了嘛；如果后一个请求把第一个请求覆盖掉了，那这个服务就是idempotent的。前一种情况，应该使用POST方法，后一种情况，应该使用PUT方法。

整合阿里云OSS

我们想实现在添加讲师信息的时候加上头像上传功能，怎么办呢？

用阿里云的OSS对象存储即可

环境部署

首先我们打开阿里云注册个OSS对象存储

Java操作OSS

详细操作可查官方文档，下面只写关键代码

[SDK示例 (aliyun.com)](https://help.aliyun.com/document_detail/32008.html)

1、定义工具类读取配置文件

通过继承InitializingBean

当项目已启动，spring加载之后，执行接口一个方法。就是afterPropertiesSet

读取配置文件内容后，在通过执行接口里的一个方法，从而让外面能使用

2、编写上传文件接口

MultipartFile类是org.springframework.web.multipart包下面的一个类，如果想使用MultipartFile类来进行文件操作，那么一定要引入Spring框架。MultipartFile主要是用表单的形式进行文件上传，在接收到文件时，可以获取文件的相关属性，比如文件名、文件大小、文件类型等等。

我们对着官网实例进行修改

3、controller调用接口

4、前端部分

引入上传图片框也在save页面，所以

5、测试

上传成功

nginx反向代理

Nginx快速入门_小蜗牛耶的博客-CSDN博客_nginx 快速入门

首先知道nginx的配置文件是nginx.config

其次是nginx的配置文件是可以看成一个http请求处理的

然后是nginx的server服务。可以理解为每个服务监听不同的端口，分发不同的连接服务。如果是自己的可以直接删掉初始server ，直接新建自己的server。

配置文件如下：

worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
  client_max_body_size 1024m;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       81;
        server_name  localhost;
        location / {
            root   html;
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
  server {
        listen       9001;    #监听端口号
        server_name  localhost;  #主机名称
        location ~ /eduService/ {  #匹配路径        
            proxy_pass http://localhost:8001;
        }
    location ~ /eduService1/ {  #匹配路径        
            proxy_pass http://localhost:6001;
        }
        location ~ /eduUser/ {
            proxy_pass http://localhost:8001;
        }
        location ~ /eduOss/ {
            proxy_pass http://localhost:8002;
        }
        location ~ /eduVod/ {
            proxy_pass http://localhost:8003;
        }
        location ~ /eduCms/ {
            proxy_pass http://localhost:8004;
        }
        location ~ /ucenterService/ {
            proxy_pass http://localhost:8006;
        }
        location ~ /eduMsm/ {
            proxy_pass http://localhost:8005;
        }
        location ~ /orderService/ {
            proxy_pass http://localhost:8007;
        }
        location ~ /staService/ {
            proxy_pass http://localhost:8008;
        }
        location ~ /admin/ {
            proxy_pass http://localhost:8009;
        }
    }
}

启动nginx

修改项目访问路径为nginx的ip

前后端分离项目知识汇总（阿里云Oss，EasyExcel，视频点播，SpringCloud，Redis，Nuxt）-2

https://developer.aliyun.com/article/1425269?spm=a2c6h.13148508.setting.25.51724f0eKyy4D1

前后端分离项目知识汇总（阿里云Oss，EasyExcel，视频点播，SpringCloud，Redis，Nuxt）-1