Vue Cli3 + SpringBoot stepping on the pit (1)

Because I don't want to waste time, I want to use the holidays to learn new knowledge, pick up Vue again, and try to use springboot as the background. There is no actual combat experience at all. I was fortunate to see a blogger's teaching blog and tried it myself. The landing page was completed today.
Introducing the great blogger's blog Springboot + vue.js2.0 version of the actual combat is super detailed! ! ! Forced Amway

Vue static page

I used the vuetify plugin [official link] to do it.
First of all, Vue I used axios post request to post the backend spring Post the main code
because I used a version of vue3.0 or more.
A newer file
Introducing axios I used to install Taobao image. Install Axios with Taobao image and then import
Insert picture description here
main in main.js The configuration of js The configuration of Insert picture description here
vue.config.js, it is enough to add this. Want to learn more to search for cross-domain agents. I do n’t understand it. Insert picture description here
The blog of Amway ’s blogger above is so detailed that I do n’t copy so much of the same code. Friends in need can take a look, mainly to make notes for themselves. Since then the basic solution of the front end.

SpringBoot backend

SpringBoot, which I have studied for myself for a while, feels that I have learned it, but I will not use it to refer to the blog of the Amway blogger above and slowly integrate it with my knowledge. Next I made two on the back end. The main injected dependencies I injected into Mybait web jdbc mysql etc. I used a tool called postman Insert picture description hereto test the backend interface.

One:

First introduce SpringBoot with database connection.
First create a table in mysql. I used the Navicat tool. Insert picture description here
The following is the SpringBoot directory
Insert picture description here
. Make some preparations under the applicaton.yml file. If you do n’t have this file, you can change the suffix name.
Insert picture description here
Insert picture description here
The xxx in the url indicates that your server number 3306 is the port. I use the Alibaba Cloud server, so my xxx is my address
username is the database account
password is the database password

Next is the code of several files:

Insert picture description here
Insert picture description here
Insert picture description here
Insert picture description here
The name of the table should be named after the camel hump, the pit is Insert picture description here
basically here. If you want more details, please visit the blogger to browse

two

No database is relatively simple to directly upload file directories and code pictures:
Insert picture description here
Insert picture description here
Insert picture description here
Insert picture description here
Finally, I would like to thank him for providing such a good learning resource!
I hope I can have fewer holes!
Firefox browser is highly recommended to observe how the front-end request data is. Google is a headache in English and Firefox Chinese is more violent.

Published 20 original articles · praised 4 · visits 612

Guess you like

Origin blog.csdn.net/qq_45031575/article/details/104103962