[外门弟子]JS-1|2019年12月21日的日报-技能树.IT修真院

发表于： 2019-12-21 10:34:35

1 1395

今天完成的事情：

今天效率不是很高，主要是解决跨域的问题，vue跨域是通过axios并且配置vue.congfig来实现的。

devServer: {
    proxy: {
      '/api': {
        target: 'http://dev.admin.carrots.ptteng.com',
        ws: true,  //代理websockets
        changeOrigin: true, // 虚拟的站点需要更管origin
        pathRewrite: {   //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
          '^/api': ''
        }
      }
    }
  }

通过'/api'来替代需要代理的真实站点

然后再axios中发送post请求可以直接使用api来代替原本的站点：

 axios.post('/api/a/login'

指定站点和接口直接发送就可以了。这样就相当于把站点代理到本地，因为发送的时候会默认加上本地的地址。

然后向服务器发送的数据需要用qs这个插件来转换一下，用法跟JSON类似，通过qs.stringify和qs.parse来转换格式。当然用的时候需要再使用的地方导入这个插件

import qs from 'qs'

还有就是路由的时候遇到的一个问题，也是才想起来路由可以通过设置子路由，这样对之前做好的路由进行了一个调整，提高一下代码的复用率，下面是路由的配置

const routes = [
  {
    path: '',
    redirect: '/login' 
  },
  {
    path: '/login',
    component: SignIn
  },
  {
    path: '/backstage',
    component: BackStage,
    children: [
      {
        path:'',
        redirect:'/welcome'
      },
      {
        path: '/welcome',
        component: Welcome,
      },
      {
        path: '/userset',
        component: UserSet,
      },
      {
        path: '/article',
        component: Article,
      },
    ],
  } 
]

总体来说，登录页面是一个单独的组件，点击登录跳转到后台页面

后台页面拆分成header、侧面导航栏以及welcome，artive详情和article设置页面，然后分别个他们设置为后台总页面的子路由。

下面是后台页面的布局方式：

<template>
  <div>
    <BackHeader></BackHeader>
    <div class="container-fluid">
      <div class="row">
        <BackNav></BackNav>
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

明天要做的事：

axios发送的请求数据还有一些问题，应该是格式不太多调试一下。继续任务7的内容。

返回列表

【任务5】 [外门弟子]JS-1 | 2019年12月21日 的日报 中品

评论

分享到

【任务5】 [外门弟子]JS-1 | 2019年12月21日的日报中品