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.