23.前端框架的模拟登录及使用

在上一章中，我们使用了vue-admin-template-master模板创建了前端项目，这一章使用框架进行模拟登录并介绍框架的使用。

一、模拟登录

1、修改登录的默认地址

config/dev.env.js 中BASE_API 为项目的easymock地址，目前具有模拟登录、登出、获取用户信息的功能。我们需要把地址改为我们的本地地址：

 2、创建登录方法

进行登录需要调用两个方法，login登录操作方法和info登录之后获取用户信息的方法。

在src/api/login.js文件中添加login方法：  （返回token值）

export function login(username, password) {
  return request({
    url: '/eduservice/user/login',
    method: 'post',
    data: {
      username,
      password
    }
  })
}

在src/api/login.js文件中添加getInfo方法：  （返回roles  name  avatar头像）

export function getInfo(token) {
  return request({
    url: '/eduservice/user/info',
    method: 'get',
    params: { token }
  })
}

返回值在src/store/modules/user.js中查看

3、后端开发接口（跨域问题）

 在controller文件夹中创建EduLoginController类：

@RestController
@RequestMapping("/eduservice/user")
@CrossOrigin  //跨域处理
public class EduLoginController {

    //login
    @PostMapping("login")
    public R login() {
        return R.ok().data("token","admin");
    }

    //info
    @GetMapping("info")
    public R info(){
        return R.ok().data("roles","[admin]").data("name","admin").data("avatar","https://c-ssl.duitang.com/uploads/item/201712/19/20171219234358_VRdrH.jpeg");
    }
}

跨域问题：通过一个地址取访问另外一个地址，这个过程如果有三个地方任何一个不一样

①访问协议：http    https

②ip地址：192.168.1.1      172.11.11.11

③端口号：9528    8001

4、修改接口路径

修改src/api/login.js文件中的本地接口路径（对应后端接口路径）

 

5、测试

 二、框架使用

1、添加路由

在src/router/index.js中添加路由代码：

{
    path: '/example',
    component: Layout,
    redirect: '/example/table',
    name: 'Example',
    meta: { title: 'Example', icon: 'example' },
    children: [
      {
        path: 'table',
        name: 'Table',
        component: () => import('@/views/table/index'),
        meta: { title: 'Table', icon: 'table' }
      },
      {
        path: 'tree',
        name: 'Tree',
        component: () => import('@/views/tree/index'),
        meta: { title: 'Tree', icon: 'tree' }
      }
    ]
  }

　路由页面如图所示　

 2、创建对应vue页面

点击某个路由，则显示路由对应的页面内容，我们需要创建路由对应页面。

 3、创建对应js文件

在src/api文件夹中创建对应的js文件，定义接口地址和参数

import request from '@/utils/request'

export function getList(params) {
  return request({
    url: '/table/list',
    method: 'get',
    params
  })
}

4、引入js文件

在对应的vue页面引入js文件，调用方法实现功能