一、index.html文件的功能:
1.文件内容只有一个<div id="id"></div>
,相当于整个web项目页面的载体;
index.html文件内容:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>myvue</title>
</head>
<body>
<div id="home"></div>
<!-- built files will be auto injected -->
</body>
</html>
二、main.js文件的功能:
1.配合index.html构成整个web项目页面的载体;
2.new Vue中el元素:联系index.html中div,el: '#home'
3.new Vue中router,定义的路由名称:import router from './router'
4.new Vue中components元素:需要用到的组件,components: { Home }
5.new Vue中template元素:首次载入index.html中的页面,template: '<Home/>'
main.js文件内容:
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import Home from './views/Home'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#home',
router,
components: { Home },
template: '<Home/>'
})
三、路由跳转index.js配置
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home,
children: [
{ path: 'login1',
component: () => import('@/views/Login')
}
]
},
{
path: '/login',
name: 'Login',
component: () => import('@/views/Login')
}
]
})
1.path:访问的路径
2.name:组件名称
3.component:引入组件
4.children:子组件,当父组件中有<router-view/>
时,访问子组件路径(父组件path+子组件path),将会显示子组件内容;注:子组件path值不需要加/
四、解决跨域访问问题:
package com.example.mymicroserviceuser.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.filter.OncePerRequestFilter;
import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* 不加这个前端报No Access-Control-Allow-Origin错误
*/
@Configuration
public class CorsFilter extends OncePerRequestFilter {
@Override
protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response,
FilterChain filterChain)throws ServletException, IOException {
// Access-Control-Allow-Origin: 指定授权访问的域
response.addHeader("Access-Control-Allow-Origin", request.getHeader("Origin")); //此优先级高于@CrossOrigin配置,此处应该与前端配置的一致
//response.addHeader("Access-Control-Allow-Headers", "Origin, x-requested-with, Content-Type, Accept,X-Cookie");
response.addHeader("Access-Control-Allow-Headers", request.getHeader("Access-Control-Request-Headers"));//
response.setHeader("Access-Control-Allow-Credentials", "true");
// Access-Control-Allow-Methods: 授权请求的方法(GET, POST, PUT, DELETE,OPTIONS等)
response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE,OPTIONS");
response.addHeader("Access-Control-Max-Age", "1800");//30 min
filterChain.doFilter(request, response);
}
}