Separate project notes at the front and back of springboot + Vue [1] project construction

Time:2021-10-28

Recently, I studied the springboot + Vue project and found it very easy to use. The online tutorials are quite miscellaneous, so I wrote this note for my own use.

1. Build environment

Vue installation: (the basic process has been forgotten, which is basically followed)

course:Install VueTutorial – Guichen 2016 – blog Park

Springboot: the environment was built earlier. Basically, it only needs JAVA 1.8

All development tools use idea

2. Vue project creation

course:Springboot Vue login (implement springboot + Vue login from scratch)

I only refer to the first half of this tutorial. I didn’t add the element framework, nor did I use springboot to build it. I didn’t use this tutorialSeparate project notes at the front and back of springboot + Vue [1] project construction

After creation, open it with idea. After NPM is configured, you can directly start Vue:

course:Idea start Vue project

If the project is created according to the above tutorial, there is one place to change when starting the project with idea:

Separate project notes at the front and back of springboot + Vue [1] project construction

3. Springboot project creation

You can directly visit the official website to create:start.spring.io

You can also use idea to create:Quickly create a springboot project

Do not forget to change the port after creation:

application.properties

server.port=9090

The springboot project can be started directly in idea

Cross domain access is mentioned in the above tutorial. You can refer to:Springboot Vue login (implement springboot + Vue login from scratch)

Problem: the jar package in pom.xml is not loaded. The solution is to add an image

course:Maven domestic image configuration

4. Simple interaction between Vue and springboot (verification code)

In terms of verification code, I mainly generate pictures and corresponding codes from the later segment to the front end, and the verification work is handed over to the front end

Vue aspect

1. Axios configuration

request.js

Import Axios from 'Axios' / / import Axios

main.js

import axios from './utils/request';
Vue.prototype.$axios = axios;

2. Landing page

login.vue

<template>

Springboot aspect (forget to save the tutorial and paste the code directly)

ImgValidateCodeUtil.java

import javax.imageio.ImageIO;

LoginControll.java

@RestController

result:

Separate project notes at the front and back of springboot + Vue [1] project construction

This work adoptsCC agreement, reprint must indicate the author and the link to this article