vue 简单使用

一：安装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’变为空
      }
  }},