SpringBoot

1, The WebMvc configuration class of springboot makes the static resources inaccessible

The webmvc configuration class of springboot causes an error in accessing the static file. The specific error reason is not known (no detailed look at the source code). Generally, inheriting the WebMvcConfigureSupport class will cause such problems. The problem can be solved only after inheriting the WebMvcConfigure interface. The writing contents and methods of inheritance interface and inheritance class are not different. The code is as follows:

//web mapping configuration
@Configuration
public class WebViewConfig implements WebMvcConfigurer {
    //set up path
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        //Set resolution directory
        registry.addResourceHandler("/**")
                .addResourceLocations("classpath:/public/")
                .addResourceLocations("classpath:/static/")
                .addResourceLocations("classpath:/resources/")
                .addResourceLocations("classpath:/lib/");
    }
    //Add view mapping
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/").setViewName("login");
    }
}

SpringMVC

RequestMapping of spring MVC returns String

The @ RequestMapping annotation of spring MVC returns a string representing the path of the web address to be accessed. If the path does not exist, it will return 404. (path prefix and suffix can be modified)
If you want to return data, such as json, you need to add the @ ResponseBody annotation.

VueJS

In the template of vuejs, the function of methods cannot be used to trigger some contents

  vue. When there is a value in the template (method ()) that cannot be used in the operation of the template, it can return the value of JS {in the template()} function.
Case 1: when using v-show or v-if, the function result in methods cannot be judged as the operation result value.

vuejs obtains data from the back-end through axios and solves cross domain problems

If the url to be accessed is inconsistent with the port of the current vue, cross domain configuration is required. Find index. In the config folder JS or vue under the root directory config. JS (no one can create a new one), type:

module.exports={
    devServer:{
    	//Native port
        open: true,
        host: 'localhost',
        port: 8081,
        https: false,
        proxy: {//Configure cross domain
            '/getTextNews': {
                target: 'http://localhost:8080/getTextNews / ', / / url to access
                ws: true,
                changOrigin: true,//Allow cross domain
                pathRewrite: {
                    '^/getTextNews': ''//Map to a url that provides access
                }
            }

        }
    }
}

When you want to access the target, you don't need to enter the full url, just access the path described by pathrewrite.

Front and rear end interaction

step

1. Write the front-end. Only simple tests are done here. For details, see the axios documentation
Install axios: directly enter npm install axios on the command line of the project root directory
Import axios: import axios form 'axios';
The writing position of axios can be determined by yourself. Here is a brief presentation of the general writing method:

//get
axios.get('/getTextNews').then(
			//Return response
          function (response){
            console.log(response);
          }
          //abnormal
      ).catch(
          function (error){
            console.log(error);
          }
      );

2. Write backend
Here, use spring MVC to write a controller to ensure normal access after the backend is started:

@Controller
public class NewsGetControl {
	//Note that @ responsebody should be added because the current purpose is to obtain data
    @RequestMapping("getTextNews")
    @ResponseBody
    public String getTextNews(){

        TextNewsBean textNewsBean = new TextNewsBean();
        textNewsBean.setId("123");
        textNewsBean.setTextData("wdawdwa");
        textNewsBean.setTitle("zheheheh");
        Gson gson = new Gson();

        return gson.toJson(textNewsBean).toString();
    }
}

3. Testing
After the vue and backend are started, visit the vue page and get the test results:

BootStrap

When developing with bootstrap 4, there is blank space on the left and right sides of the page

After setting the outermost div to the border, you can find that the outermost div does not match the actual page size and there is blank space. You can solve the problem by adding col-12 to the class attribute of the outermost div, that is, this div occupies the whole page. After that, there may still be blank space, and you need to jump to magin and padding.