Vue创建项目（axios）访问后台数据与路由理解

配置

1、（基于springboot）后台配置
使用CorsConfiguration类配置访问对象
使用CorsFilter配置访问地址
创建测试Controller
2、前端使用vscode创建vue项目
打开创建项目文件夹
vue init webpack demo（项目名）
npm install --save axios （安装跨域请求访问插件）
3、封装axios

import axios from 'axios' //引入 axios
//import baseUrl from '../api/baseUrl' //使用环境变量 + 模式的方式定义基础URL
 
// 创建 axios 实例
const service = axios.create({
  //baseURL: baseUrl, // api 的 base_url
  timeout: 15000, // 请求超时时间
})
 
export default service

4、调用

import request from '@/utils/request' //引入封装好的 axios 请求
 
export function login(username, password) {
 //登录接口
  return request({ 
  //使用封装好的 axios 进行网络请求
    url: 'http://localhost:8088/admin/login',
    method: 'post',
    data: { //提交的数据
      username,
      password
    }
  })
}

5、路由

main.js
//导入App.vue模板组件
import App from './App'

new vue（）{
el:'#app',//配置路由显示位置
router,//配置启用路由
components:{App},//配置要显示的组件
template:'<App/>'//配置使用APP模板
}

配置路由

router/index.js
//方法一
export const constantRouterMap = [
  //配置默认的路径，默认显示登录页
  { path: '/', component: () => import('@/views/login')},

  //配置登录成功页面，使用时需要使用 path 路径来实现跳转
  { path: '/success', component: () => import('@/views/success')},

  //配置登录失败页面，使用时需要使用 path 路径来实现跳转
  { path: '/error', component: () => import('@/views/error'), hidden: true }
]

export default new Router({
  // mode: 'history', //后端支持可开
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRouterMap //指定路由列表
})

//方法二
 export default new Router({
   routes: [
     {
       path: '/',
       name: 'HelloWorld',
       component: HelloWorld，
       redirect:‘/’，
       children[
			//子路由配置 
			{内容一}，
			{内容二}
		]
     }，
     {内容三}
   ]
 })