目录
需要的工具
jdk、maven、idea、vsCode、MySQL、nodejs、Linux服务器（可以没有只学开发就行）、其他的暂时没想起来
前端环境
1.安装nodejs
2.安装vsCode
链接：https://pan.baidu.com/s/1ayFK-N36x0cH5CR27EcLWg
提取码：621d
3.创建vue项目并整相关环境
创建一个文件夹，在该文件夹中整环境和下载项目调出cmd（红框框内输入cmd）
在cmd中输入以下命令
npm install -g vue-cli (安装脚手架)
vue init webpack demo （下载成品的新项目模板，demo就是你的项目名）
关闭vue自带的代码规则校验（不关也行，不影响项目，就是开发的时候可能会有点难受）
在.eslintrc.js文件中添加一句 “no-unused-vars”: ‘off’ 注意添加的位置
然后在你的终端输入一下命令启动项目
npm run dev （在demo文件夹下使用该cmd命令）
这就是启动成功了，网址就是你vue的访问网址
修改vue端口号（建议将端口号改为18080，反正不要使用默认的8080都行，非强制，可不改）
以上就是前端环境整完了
后台项目搭建
java安装
idea安装（这个请到网上找）
maven安装（请网上找，可不安装，但是强烈建议安装）
创建项目
该处我遇到一个问题就是默认的 Default 选项选了之后，next会报错，所以我就选了 Custom
https://start.aliyun.com（这是值）
创建好了后，将idea默认的maven调整成我们刚刚安装的maven（可以不换，但是强烈建议换）记得apply，然后ok
这时请不要动，你的idea右下角应该有一个进度条，等它加载完（首次加载时间会很长，属于正常现象；如果没有换成自己安装的maven且没有配置阿里库那么时间会长的难以想象。本人以前最高纪录是加载了六个小时）该加载主要是下载jar包，不能动。
关闭Spring Security前期用不到这个还碍事。
更改后台端口默认是8080，改成其他的（如果前后台端口都是8080那么会报错，因为端口冲突，你最少要改一个）
数据库（Linux）
本人的数据是安装在阿里云上的Linux上面
如果你不想用Linux那么请在你的windows上安装MySQL（请自行百度）
Linux安装MySQL
安装好了之后记得在java项目中配置数据库相关数据，如上图打码部分（不然会报错）
关于云服务器
本人目前使用过腾讯云和阿里云
个人体会：除了首单优惠之外，我应该不会买云服务器。打个比方一个1核2G内存50Gb容量1Mb的服务器正常价格是500元每年，而首单优惠可以花50元买一年。（价格是打比方，具体实时价格请到官网查看）
首单优惠只能用一次，腾讯云当时只买了一年，现在想想还后悔，后来阿里云直接买了三年，也就一两百快。
首单的价格是腾讯云好像比阿里云要低一点。
目前云服务器比较知名的有：腾讯云、阿里云、华为云、百度智能云
你可以一个一个比较
再次声明，本人不是托，不是打广告，只要是首单真的便宜。你要是不想花钱可以选择以下方式安装Linux
1.另找一台电脑安装
2.安装虚拟机（VMware）
对于双系统不行，杠精请不要扛，因为你的电脑不能同时打开两个系统，不能同时打开，那你项目在windows，要链接Linux上的MySQL是不可能的。
跑通前后端
前端安装axios
相关链接
前端安装Ant Design Vue
相关链接
前端配置jQuery
jQuery请到网上下载。官网免费
前台代码文件图
相关文件夹和文件如果没有请新建
前台代码helloworld.vue
<template>
<div>
<button @click="dianji">兄弟点我</button>
<span>{{ result }}</span>
</div>
</template>
<script>
import $ from "jquery";
import { dianji } from "./api/hw";
export default {
name: "HelloWorld",
components: {
},
data() {
return {
result:"123",
};
},
methods: {
dianji() {
dianji().then((res) => {
if (res.status == 200) {
this.result = res.data;
this.$message.success("链接成功");
// window.open(fileDownloadUrl);
} else {
this.$message.error("不成功");
}
});
},
},
};
</script>
前台代码hw.js
import axios from 'axios'
const address = {
theUrl: `http://localhost:19080/allController/`,
}
export function dianji() {
return axios({
url: address.theUrl + 'dianji',
method: 'post',
data: null
})
}
后台代码文件图
后台代码AllController.java
package com.example.demo;
import com.example.demo.service.UploadAndDownload;
import com.example.demo.util.FileUtil;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.context.request.RequestContextHolder;
import org.springframework.web.context.request.ServletRequestAttributes;
import org.springframework.web.multipart.MultipartFile;
import javax.activation.MimetypesFileTypeMap;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.util.Map;
@RequestMapping("allController")
@RestController
@CrossOrigin
public class AllController {
@RequestMapping("/dianji")
public String dianjji(){
return "66666666666";
}
}
相关效果图
