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文件，調用方法實現功能