9.20总结

一、VUE脚手架搭建

        1.1下载Node

        1.2下载vue客户端 

        npm install -g @vue/cli 

        更换下载源

        npm config set registry https://registry.npm.taobao.org

         1.3 在命令窗口创建vue项目

        vue create jsd2206-csmall-web-client-teacher

         1.4 用 idea打开vue项目，后加载 element -ui 、axios和node库

    npm i element-ui -S    npm i axios -S     npm install

        1.5 下载完成后，需要在`src/main.js`中添加配置：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios';

Vue.prototype.axios = axios;
Vue.use(ElementUI);

 二、创建vue文件

        vue将页面拆封为视图组件，只需要在一个页面上，调用不同的组件来实现不同的页面。

        2.1启动vue项目

        npm run serve

        2.2添加vue文件

        添加完vue文件后在 src/router/index.js中添加path路径

{
          path:'/registerForm',
          name:'注册',
          component: () => import("../components/operate/Register_Form")
        }

在vue脚手架模式下

this.axios.post(url, this.ruleForm).then((response) => {}）

跨域

默认情况下，不允许向别的服务提交异步请求，例如，在`http://localhost:9000`服务上，向`http://localhost:8080`提交异步请求，这是不允许的！

在基于Spring Boot的项目中，要允许跨域访问，可以在启动类上实现`WebMvcConfigurer`接口，并重写`addCorsMappings()`方法：

```java
@ServletComponentScan
@SpringBootApplication
public class CoolsharkApplication implements WebMvcConfigurer {

    public static void main(String[] args) {
        SpringApplication.run(CoolsharkApplication.class, args);
    }

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowCredentials(true)
                .allowedHeaders("*")
                .allowedMethods("*")
                .allowedOriginPatterns("*")
                .maxAge(3600);
    }
}