Ant Desgin pro of Vue从零开始(2)

我们之前已经成功地将项目添加到了我们的电脑上,现在直接将我们的项目拉到vscode中就可以了。

我们可以先将项目中所有的页面都看一下,这样可以更好的帮助我们明白那些是可以删除的,那些是我们直接保留就可以用的

我们要用这个框架那么我们首先要改掉的就是我们的登录,毕竟登录关系着我们的token,只有将这一部分改掉以后,我们的后面所有的请求才能正常的发送,这个时候我们可以先看一下我们的项目中登录页的代码。

Ant Desgin pro of Vue从零开始(2)

这个页面就在我们的src\views\user里面,这就是我们最先能看到的页面了,我们可以先看看看这个页面里面都有那些东西,刚开始的这个页面可以不用过多的去改动,我们直接去用就可以了。但是有几个点我们是要主义的,由于我们的这个项目所有的请求都是其内部的,所以我们要更改他的所有的请求,并根据我们自己接口的需要进行进一步的更改。要更改我们的请求我们就可以先去看看文档。

Ant Desgin pro of Vue从零开始(2)

 

 

 我们请求属于与服务端交互,那么我们可以先看它的文档里面写了写什么

Ant Desgin pro of Vue从零开始(2)

 

找到了我们的目标之一的拦截器,我们就可以去看看它们该如何去更改,

Ant Desgin pro of Vue从零开始(2)

 

 

 我们可以看到除了创建实例这一方面,其他的都是对请求进行的一系列操作,这时候我们要将实例改成我们要用到的实例

 Ant Desgin pro of Vue从零开始(2)

 

 

 更改一下我们的请求默认前缀,这时候以后我们的强求就只需要加上我们的接口地址就可以发送请求了。

能发送请求了以后我们就要去找我们的登录是在哪里了,毕竟我们还要用登录来获取我们的token 呢。

我在这个文件里面找到了发送账号密码到服务器的请求

Ant Desgin pro of Vue从零开始(2)

 这里面不近是将它的请求发送了过去,这里还有将用户信息获取回来的还要怎么做的操作。

这里面的请求就是我们要去更改的请求。

这个请求在这里

Ant Desgin pro of Vue从零开始(2)

 然后我们将这一个改成我们自己的接口,由于我们的接口用的请求方式是get请求所以下面我们也要更改

Ant Desgin pro of Vue从零开始(2)

 

 这时候我们的请求也就改好了,那么还剩什么呢?

我们请求到了token我们要储存起来,才能让我们的过滤器添加token的操作有意义,这时候我们可以去找一下我们的token储存在了哪里,这个时候我们回到我们刚才发现登录请求的页面,这个页面里面就有对我们token的操作,只不过我需要更改一下,由于我的返回的token的名字与这个有点区别,所以我也要改一下,这个时候我们就要先跑一下我们的项目了

我们先右键一下我们项目中任何一个文件

Ant Desgin pro of Vue从零开始(2)

 

 点击在集成终端打开

Ant Desgin pro of Vue从零开始(2)

 

 然后在里面输入:yarn run serve  然后回车就可以了。等待它跑完以后,我们可以看到这个画面

Ant Desgin pro of Vue从零开始(2)

 

 就像我们之前一样,从浏览器打开

Ant Desgin pro of Vue从零开始(2)

 

 按F12然后打开网络,输入我们的账号密码

Ant Desgin pro of Vue从零开始(2)

 

 我们就能看到我们的token是什么样子了。

然后我们继续更改我们的token,我们现在回到我们之前的登录请求页面更改我们得到的两个tokend的名字

Ant Desgin pro of Vue从零开始(2)

 

 下面这个在我们向其他能用到token的地方传输token也要更改

Ant Desgin pro of Vue从零开始(2)

 

 这个时候我们以后的请求就可以都带上我们的token了。但是这个时候我们又发现了一个问题,我们虽然已经可以正常的请求我们自己的接口了,但是我们的这个项目没有办法继续进行下一项了。正常情况下在登录的同时我们还要获取我们的用户信息,用户信息一般也都是请求到的。我们现在发送的请求已经是不在发往项目原来的地址了,我们自己的接口又没有用户信息,这个时候就有点无奈了。其实这个时候就涉及到了路由守卫的问题,你不进行我规定的步骤就无法继续进行下去,所以我们要把路由守卫给去除掉。我们的文档内就有教如何将路由守卫去除掉的操作

删除路由守卫

删除src/main.js里面的    import './permission' // permission control

Ant Desgin pro of Vue从零开始(2)

让菜单生成不经过动态路由

首先将src/router/index.js的内容用以下代码全部换掉

import Vue from 'vue' import Router from 'vue-router' import { constantRouterMap, asyncRouterMap } from '@/config/router.config'
Vue.use(Router)
export default new Router({   mode: 'history',   routes: constantRouterMap.concat(asyncRouterMap) })

Ant Desgin pro of Vue从零开始(2)

 

然后我们要在src/layouts/BasicLayout.vue里面再次引入

import { asyncRouterMap } from '@/config/router.config.js' Ant Desgin pro of Vue从零开始(2)

 

 还要再这个页面修改一下,用黄色框内的替换掉绿色

黄色框内容: const routes = asyncRouterMap.find((item) => item.path === '/')

 Ant Desgin pro of Vue从零开始(2)

 

 这个时候我们基本就算基本完成了,我们就可以登录到我们的初始页面了 

Ant Desgin pro of Vue从零开始(2)

 

上一篇:【算法】第一章 算法基础 1.基本概念+最大公约数


下一篇:create database ,drop database ,show Databases,use 数据库 ,怎么使用?