Technical contents involved: vue, SpringBoot, leaflet, Linux, MySQL
Only a few big head technologies are listed, and other technologies such as html, js, mybatis.... I won't explain them one by one
Main content of this issue: an example of environment construction and running through
Required tools
jdk, maven, idea, vsCode, MySQL, nodejs, Linux server (you can not just learn development), and others are not remembered for the time being
Front end environment
2. Install vsCode
Link: https://pan.baidu.com/s/1ayFK-N36x0cH5CR27EcLWg
Extraction code: 621d
3. Create vue project and integrate relevant environment
Create a folder and call out cmd (enter cmd in the red box) for the whole environment and download items in the folder
Enter the following command in cmd
npm install -g vue-cli (Installation of scaffold) vue init webpack demo (Download the new project template of the finished product, demo Is your project name)
Turn off the code rule verification provided by vue (it's OK not to turn it off, it doesn't affect the project, but it may be a little uncomfortable during development)
Yes eslintrc.js file: "no unused vars": "off" pay attention to the location of the addition
Then enter a command at your terminal to start the project
npm run dev (stay demo Use this folder cmd (command)
This is the successful startup. The website is your vue access website
Modify vue port number (it is recommended to change the port number to 18080 instead of using the default 8080 anyway. It is not mandatory and can not be changed)
The above is the front-end environment
Background project construction
idea installation (please find this online)
maven installation (please find it on the Internet. It may not be installed, but it is strongly recommended to install it)
Create project
A problem I encountered here is that after the Default option is selected, an error will be reported in next, so I chose Custom
https://start.aliyun.com (this is the value)
After the creation, adjust the default maven of idea to the maven we just installed (you can not change it, but it is strongly recommended to change it). Remember to apply, and then ok
At this time, please don't move. There should be a progress bar in the lower right corner of your idea. After it is loaded (the first loading time will be very long, which is a normal phenomenon; if you don't install maven and configure Ali library, the time will be unimaginable. My previous highest record was loaded for six hours). This loading is mainly to download jar packages and can't move.
It's not necessary to close Spring Security in the early stage.
Change the background port to 8080 by default, and change it to other ports (if the front and background ports are all 8080, an error will be reported, because the ports conflict, you should change at least one)
Database (Linux)
My data is installed on Linux on alicloud
If you don't want to use Linux, please install MySQL on your windows (please Baidu)
Installing MySQL for Linux
After installation, remember to configure database related data in the java project, as shown in the coding part above (otherwise an error will be reported)
About ECS
I have used Tencent cloud and Alibaba cloud
Personal experience: except for the first order discount, I should not buy ECs. For example, the normal price of a 1-core 2G memory server with 50Gb capacity of 1Mb is 500 yuan per year, and the first discount can be bought for 50 yuan per year. (the price is an analogy. Please check the specific real-time price on the official website)
The first discount can only be used once. Tencent cloud only bought it for one year at that time, and now I regret it. Later, Alibaba cloud directly bought it for three years, which is only one or two hundred.
The price of the first order is that Tencent cloud seems to be a little lower than Alibaba cloud.
At present, more famous cloud servers are: Tencent cloud, Ali cloud, HUAWEI cloud, Baidu intelligent cloud.
You can compare one by one
Once again, I am not asking, not advertising, as long as the first order is really cheap. If you don't want to spend money, you can install Linux in the following ways
1. Find another computer to install
2. Install virtual machine (VMware)
For dual systems, please don't carry it, because your computer can't open two systems at the same time. If your project is in windows, it's impossible to link MySQL on Linux.
Run through front and rear ends
Front mounted axios
Front end installation Ant Design Vue
Front end configuration jQuery
jQuery can be downloaded from the Internet. Free on the official website
Foreground code file diagram
Relevant folders and files, if not, please create a new one
Foreground code HelloWorld vue
<template>
<div>
<button @click="dianji">Brother, point me</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("Link successful");
// window.open(fileDownloadUrl);
} else {
this.$message.error("Unsuccessful");
}
});
},
},
};
</script>
Foreground code 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
})
}
Background code file diagram
Background code 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";
}
}
Related renderings
