SpringBoot+VUE前后端分离项目学习笔记 - 【24 服务器安装部署】

news2025/1/11 15:54:09

本节主要实现服务器购买以及服务部署
PS: 由于没有服务器本节仅做大致流程记录，无实际操作步骤

服务器配置安装

文档：docker安装centos、jdk、mysql、redis…
链接：http://note.youdao.com/noteshare?id=6a01550a3acfbafc7cbbea4ae99c0e48&sub=A10A5B91977D4AA2A91742C78A1F562E

文档：安装docker.note
链接：http://note.youdao.com/noteshare?id=08d2d6371df597b77f49d575a5d83c6a&sub=AA93C21816DF493AB1B95440064660A1

文档：linux安装jdk.note
链接：http://note.youdao.com/noteshare?id=0d342eb40a5f6989f739c896ef04e785&sub=0797625CCF4943B5BBD526CB6EE0E6C4

文档：Linux安装Nginx.md
链接：http://note.youdao.com/noteshare?id=7dcc76c547a2e6e2e59b7c9587635a0a&sub=67BC8070EF41484CADA731CDB036C906

项目打包

后台打包

跳过test

mvn clean package -DskipTests

在这里插入图片描述

后台启动

本地启动

java -jar .\springboot-0.01-SNAPSHOT.jar

在这里插入图片描述

服务器启动

nohup java -jar springboot-0.0.1-SNAPSHOT.jar &

关闭

kill -9 [进程号]

前台打包

npm run build

在这里插入图片描述

前台启动

安装 anywhere前端静态资源服务器插件：

npm install anywhere -g

在这里插入图片描述

本地启动

anywhere -p 8080

在这里插入图片描述

再次刷新就无法get 【之后再补充解决办法】

在服务器端可以通过nginx里的try_files来解决

服务器启动【通过nignx】

先给dist文件777权限，

chmod 777 *

在这里插入图片描述

vue dist nginx配置：

到nginx/conf目录下，编辑nginx.conf 【80端口要开放】
在这里插入图片描述

vim nginx.conf

添加如下配置

location / {
            root /home/server/dist; #前端dist目录
            index index.html index.htm; 
            try_files $uri $uri/ /index.html;
        }

在这里插入图片描述

输入:wq 按回车保存

nginx启动&重启：

启动

[root@localhost nginx-1.14.0]# cd ../nginx/sbin
[root@localhost sbin]# ./nginx

重启

/nginx -s reload

在这里插入图片描述
访问服务器ip即可得到前端页面

ip配置

注意：前端文件上传和导出的 url都需要配置 serverIp

文件上传、下载和导出都需要使用到服务器的公网IP

接口请求也需要使用公网IP

注意：上传必须这样写：<el-upload :action=“‘http://’ + serverIp + ‘:9090/user/import’”

前台进行ip配置

public/config.js

新增该文件
在这里插入图片描述

utils/request.js

从图一改成如下代码
在这里插入图片描述
代码：

import axios from 'axios'
import ElementUI from "element-ui";
import {serverIp} from "../../public/config";

const request = axios.create({
    baseURL: `http://${serverIp}:9090`,
    timeout: 30000
})

然后按Ctrl+Shift+F, 搜索前端所有localhost，将其改成serverIp，具体见下

Person.vue

      <el-upload
          class="avatar-uploader"
          :action="'http://' + serverIp +':9090/file/upload'"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
      >
        <img v-if="form.avatarUrl" :src="form.avatarUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>

==============================================================================
import {serverIp} from "../../public/config";

export default {
  name: "Person",
  data() {
    return {
      serverIp: serverIp,
      form: {},
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
    }
  },

File.vue

      <el-upload :action="'http://' + serverIp + ':9090/file/upload'" :show-file-list="false"
                 :on-success="handleFileUploadSuccess" style="display: inline-block">
        <el-button type="primary" class="ml-5">上传文件 <i class="el-icon-top"></i></el-button>
      </el-upload>
=================================================
import {serverIp} from "../../public/config";

export default {
  name: "File",
  data() {
    return {
      serverIp: serverIp,
      tableData: [],
      name: '',
      multipleSelection: [],
      pageNum: 1,
      pageSize: 10,
      total: 0
    }
  },

Menu.vue

    exp() {
      window.open(`http://${serverIp}:9090/role/export`)
    },

User.vue

 <el-upload :action="'http://' + serverIp + ':9090/user/import'" :show-file-list="false" accept="xlsx" :on-success="handleExcelImportSuccess" style="display: inline-block">
        <el-button type="primary" class="ml-5">导入 <i class="el-icon-bottom"></i></el-button>
      </el-upload>
==========================================================================
import {serverIp} from "../../public/config";

export default {
  name: "User",
  data() {
    return {
      serverIp: serverIp,
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      username: "",
      email: "",
      address: "",
      form: {},
      dialogFormVisible: false,
      multipleSelection: [],
      roles: [],
      courses: [],
      vis: false,
      stuCourses: [],
      stuVis: false
    }
  },
  =======================================================================
      exp() {
      window.open(`http://${serverIp}:9090/user/export`)
    },

后台ip配置：

application.yml

File.controller

    @Value("${files.upload.path}")
    private String fileUploadPath;

    @Value("${server.ip}")
    private String serverIp;
    ===============================
            if (dbFiles != null) {
            url = dbFiles.getUrl();
        } else {
            // 上传文件到磁盘
            file.transferTo(uploadFile);
            // 数据库若不存在重复文件，则不删除刚才上传的文件
            url = "http://" + serverIp + ":9090/file/" + fileUUID;
        }