一:安装node
1:检测版本 node –v
2:换镜像
npm config set registry https://registry.npm.taobao.org
二:新建vue
1:安装vue-cli
cnpm install vue-cli -g
2:初始化项目
进入一个路径下,输入
vue init webpack “项目名称”
会出现(仅供参考)
Project name //项目名称
? Project description A Vue.js project //项目描述,默认的
? Author *@qq.com //默认,回车即可
? Vue build (Use arrow keys) //默认,回车即可
? Vue build standalone //默认,回车即可
? Install vue-router? No //是否安装路由
? Use ESLint to lint your code? Yes //是否用ESLint来规范我们的代码
? Set up unit tests No //是否使用自动化的测试工具
? Setup e2e tests with Nightwatch? No //使用nightatch设置E2E测试
? Should we run npm install for you after the project has been created? (recommended) npm //选择npm安装
3:安装axios
npm install axios --save-dev
import axios from ‘axios’; /* 引入axios进行地址访问*/
Vue.prototype.$axios= axios;(注意:不使用use来使用该例,而是用prototype原型来使用)
此时访问后端springboot
后端可以正常访问,但后端return的数据接收不到,阅览器会报错
跨域问题
后端添加代码
package com.wh;
import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.Ordered;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import javax.servlet.Filter;
@Configuration
public class AppWebMvcConfigurer extends WebMvcConfigurerAdapter {
@Bean
public FilterRegistrationBean corsFilterRegistration() {
FilterRegistrationBean registration = new FilterRegistrationBean();
registration.setFilter(corsFilter());
registration.addUrlPatterns("/*");
registration.setName("corsFilter");
registration.setOrder(Ordered.HIGHEST_PRECEDENCE);
return registration;
}
@Bean
public Filter corsFilter() {
return new CorsFilter();
}
}
package com.wh;
import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
public class CorsFilter implements Filter {
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
throws IOException, ServletException {
String method = ((HttpServletRequest) request).getMethod();
HttpServletResponse res = (HttpServletResponse) response;
String host = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort();
res.addHeader("host", host);
res.addHeader("Access-Control-Expose-Headers","Roleplay-Error-Code");
res.addHeader("Access-Control-Allow-Origin", "*");
res.addHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE,OPTIONS");
res.addHeader("Access-Control-Allow-Credentials", "true");
res.addHeader("Access-Control-Allow-Headers", "Origin, Content-Type, Accept, Authorization, x-requested-with, cache-control, Access-Control-Allow-Origin, Access-Control-Allow-Credentials, uuid");
if (method.equals("OPTIONS")) {
res.setStatus(HttpServletResponse.SC_OK);
}else {
chain.doFilter(request, response);
}
}
@Override
public void destroy() {
}
}
解决跨域,可以接收后端数据。
vue页面配置全局路径
在config下的index.js里,这样配置
主要是proxyTable里面,其他页面请求就可以这样写
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://127.0.0.1:8888/wh',//目标接口域名址
changeOrigin: true,//是否允许跨越
pathRewrite: {
'^/api': '/',//这行代码的作用是在实际请求中将‘/api’变为空
}
}},