一、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);
- }
- }