[java+vue+WeChat applet project] Build from scratch - gym management platform (2) back-end cross-domain, login module, springboot layered architecture, IDEA modification shortcut keys, vue code style

The project notes are project summary notes. If there are any errors, please point them out~

[Project Column]
[java+vue+WeChat Mini Program Project] Build from scratch - gym management platform (1) spring boot project construction, vue project construction, WeChat mini program Program project construction
[java+vue+WeChat applet project] Build from scratch - gym management platform (2) back-end cross-domain, login module, springboot layered architecture, IDEA modification shortcut keys , vue code style

Back-end processing cross-domain

1. Processing methods (3 types)

There are several ways to handle cross-domain requests in Spring Boot. Here are some common ways:

1. Use the @CrossOrigin annotation: You can use the @CrossOrigin annotation on the controller class or method to enable cross-domain support. Cross-domain support for specific requests can be achieved by specifying the source address, request method, header information, etc. that allow cross-domain requests. The sample code is as follows:

@CrossOrigin(origins = "http://example.com", methods = RequestMethod.GET)
@RestController
public class MyController {
   
    
    
    // 控制器方法
}

2. Custom Filter: You can write a custom Filter and add response header information to it to support cross-domain requests. First create a class that implements the javax.servlet.Filter interface, and then add response header information in the doFilter method. In Spring Boot, this Filter can be registered into the application through the configuration class. The sample code is as follows:

@Component
public class CorsFilter implements Filter {
   
    
    
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
   
    
    
        HttpServletResponse httpResponse = (HttpServletResponse) response;
        httpResponse.setHeader("Access-Control-Allow-Origin", "http://example.com");
        httpResponse.setHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE");
        httpResponse.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
        chain.doFilter(request, response);
    }
}

3. Global configuration of cross-domain support: Global cross-domain support can be achieved by adding cross-domain related configuration items in the Spring Boot configuration file. Add the following configuration in the application.properties or application.yml file:

# application.properties
spring.webmvc.cors.allowed-origins=http://example.com
spring.webmvc.cors.allowed-methods=GET,POST,PUT,DELETE
spring.webmvc.cors.allowed-headers=Content-Type, Authorization

2. Cross-domain processing

util——>WebConfig.java

package com.hui.util;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

//全局配置类，配置跨域请求
@Configuration
public class WebConfig implements WebMvcConfigurer {
   
    
    

    @Override
    public void addCorsMappings(CorsRegistry registry) {
   
    
    
        registry
                //允许访问的路径
                .addMapping("/**")
                //配置请求来源
                .allowedOrigins("http://localhost:8080")
                //允许跨域访问的方法
                .allowedMethods("GET","POST","DELETE","PUT","OPTION")
                //允许携带参数
                .allowCredentials(true)
                //请求头
                //.allowedHeaders()
                //最大效应时间
                .maxAge(3600);

    }
}

Login module

1.Interface design

2.Interface design

• Interface address: localhost:9999/login
• Return format: json
• Request method: post

parameter name	explain
username	account
password	password

• Login interface return parameter description

parameter name	explain
id	ID number
username	account
password	password
phoneNumber	telephone number
role	Role
state	state
flag	Indicates whether the login is successful

Front-end login component

1. Remove unnecessary components

app.vue

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<style>

</style>

router——>index.js

import Vue from "vue";
import VueRouter from "vue-router";
import TestView from "../views/TestView.vue";

Vue.use(VueRouter);

const routes = [
  {
   
    
    
    path: "/",
    name: "TestView",
    component: TestView,
  },

];

const router = new VueRouter({
   
    
    
  routes,
});

export default router;

2. Connect backend test

views——>TestView.vue

<template>
  <div>
    <button @click="click">test测试</button>
  </div>
</template>

<script>

import axios from 'axios';

export default {
     
      
      
  name: "TestView",
  components: {
     
      
      
    
  },
  methods: {
     
      
      
    click(){
     
      
      
      axios.get('http://localhost:9999/test').then((res)=>{
     
      
      
        console.log(res);
      }).catch((err)=>{
     
      
      
        console.log(err)
      })
    }
  }
};
</script>

Core code explanation

click(){
    axios.get('http://localhost:9999/test').then((res)=>{
      console.log(res);
    }).catch((err)=>{
      console.log(err)
    })
}

This code is written in JavaScript programming language using some syntax and function libraries.

1. axios.get('http://localhost:9999/test'): This is the syntax for sending an HTTP GET request using the Axios library. Axios is a Promise-based HTTP client that provides a concise API to perform asynchronous requests. Here, we use Axios’ get() method to send a GET request to the specified URL.

2. .then((res) => { console.log(res); }): This is the use of Promise's then() method to register a successful callback function. When the request completes successfully, the server's response is passed as a parameter to this callback function and printed to the console.

3. .catch((err) => { console.log(err); }): This is the use of Promise's catch() method to register a callback function on failure. When an error occurs during the request, the error message will be passed to this callback function as a parameter and printed to the console.

Test success

3. Global style

1. Create the file global.css
assets——>css——>global.css

/* 全局式样 */
html,body,#app{
   
    
    
    height: 100%;
    margin: 0px;
    padding: 0px;
}

2. Introduce global styles
Project entry file main.js

import './assets/css/global.css'  // 添加全局样式

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import './assets/