The back-end code of the most played Vue video on station B

Table of contents

1. Description

Video address: Bilibili

Video picture:

Video file: Link: Baidu Netdisk Extraction code:2wyf

My explanation: First of all, I am a java back-end, but I am also interested in the front-end. Now the front-end [framework] is the most popular Vue. Then I learned this set of tutorials. You can continue to use the interface only after you support it, so I support it for 10 yuan (the minimum seems to be 9 yuan). However, I found that the teacher only provided an interface, and the picture addresses in it were all from Mogujie. One day the teacher’s interface exploded, and our front-end project would be gone. As a back-end programmer, we naturally have to provoke This beam, and I had time today, so I SpringBoot+MybatisPlus+Mysqlwrote a back-end module. The pictures in this are all pictures of Mogujie. If one day Mogujie officially deletes the pictures, or Mogujie is cold, then these pictures It will also disappear, so these codes are not permanent. Interested friends can design a database table, and then use Alibaba Cloud OSS to store pictures on Alibaba Cloud, but the implementation is a little more complicated, and the code in the back-end module is very Simple, even if you don’t understand the code inside, as long as you can import the project. In order to respond to everyone’s code, I didn’t use Alibaba Cloud OSS to implement it (mainly because I’m lazy, hahaha).

I want to say: Since these steps are written here, it means that the final result has passed my verification, and everyone can use it with confidence. If you have any questions, you can comment. If you don’t like it, don’t comment randomly, thank you! ! !

2. Preparations

  1. my.ini
    Reason for modifying the configuration file in Mysql: The default utf8 encoding in the Mysql configuration file supports up to 3 bytes, while Emoji expressions or some special characters are 4 bytes, because there are Emoji expressions in product reviews, so you need to modify the default characters Coding, used to solve the problem of data insertion failure
  2. Create a utf8mb4character-encoded database and import a table
    Create a database: Name: mogujie; Character set: utf8mb4; Collation: utf8mb4_general_ci; (It is recommended to use Navicat to create)
    Import table: Link: Baidu Netdisk Extraction code: 6xk0
    Module: Link: Baidu Netdisk Extraction code:z59c

3. Import the module

If the import is successful, open resourcesit application.properties, and then fill in your own database connection password, as follows:
Then you can start the module

4. How to use it with the current Vue project

src》》》network》》》require.jsChange the baseURLfollowing address in the vue project to http://localhost:8888/mogujie, other front-end code does not need to be changed, as follows:
remember to start the back-end code in IDEA first, and then start the front-end vue project.

Leave a Comment

Your email address will not be published. Required fields are marked *