ant-design-pro-vue 開發筆記（二）配置連接后台數據庫

1、vue.config.js   (后台使用phalapi)

devServer: {
    // development server port 8000 
    port: 8000,

      // TODO api proxy 關於api請求代理: 如果期望啟用代理,請刪除mockjs的配置 mockjs /src/main.js

    proxy: {
      '/api': {
      target: 'http://127.0.0.1:8082/phalapi/public/',
      ws: false,
      changeOrigin: true,  //開啟代理，是否跨域
      pathRewrite: {
        '^/api': ''  //需要rewrite的
      }
      }
     }
  }

 2、src/main.js 注釋掉mock

//import './mock'

3、src/api/login.js  修改api

export function login (parameter) {
  return axios({
    //url: '/auth/login',
    url: '?service=App.User.login',
    method: 'post',
    data: parameter
  })
}

 4、修改.env

# 當使用代理方式訪問web api時, 此變量指定所有的api請求的uri前綴
VUE_APP_API_BASE_URL=/api

5、后台App.User.login接口返回的數據：

{
    "ret": 200,
    "data": {
        "title": "Hello World!",
        "token": "afsd123123123123123123",
        "avatar": "https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png",
        "createTime": "1497160610259",
        "creatorId": "admin",
        "deleted": "0",
        "id": "7DEadbb2-F6d7-e08D-FA70-EEbBb132f91D",
        "lang": "zh-CN",
        "lastLoginIp": "27.154.74.117",
        "lastLoginTime": "1534837621348",
        "name": "Jennifer Young",
        "roleId": "admin",
        "username": "admin"
    },
    "msg": ""
}

6、src/store/modules/user.js 修改前台的獲取數據：

// TODO login 登錄:這里執行真正的登錄邏輯
    Login ({ commit }, userInfo) {
      return new Promise((resolve, reject) => {
        login(userInfo).then(response => {
          //const result = response.result
          const result = response.data
          console.log(result)
          // TODO login 登錄:token的作用, 只是用於判斷用戶是否登錄, 無其它作用
          Vue.ls.set(ACCESS_TOKEN, result.username, 7 * 24 * 60 * 60 * 1000)
          commit('SET_TOKEN', result.username)
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },

7、后台App.User.info接口返回的數據：

{
    "ret": 200,
    "data": {
        "id": "4291d7da9005377ec9aec4a71ea837f",
        "name": "管理員",
        "username": "admin",
        "password": "",
        "avatar": "https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png",
        "status": "1",
        "telephone": "",
        "lastLoginIp": "27.154.74.117",
        "lastLoginTime": "1534837621348",
        "creatorId": "admin",
        "createTime": "1497160610259",
        "merchantCode": "TLif2btpzg079h15bk",
        "deleted": "0",
        "roleList": [
            "admin",
            "company-admin"
        ],
        "funPermissionList": [
            "user_add",
            "user_delete"
        ],
        "menuPermissionList": [
            "fun-permission",
            "dashboard",
            "form",
            "table",
            "profile",
            "result",
            "exception",
            "user",
            "dashboard",
            "support"
        ],
        "menuTree": [
            {
                "path": "/welcome/index",
                "flag": "welcome",
                "title": "menu:welcome",
                "icon": "smile"
            },
            {
                "path": "/dashboard",
                "flag": "dashboard",
                "title": "menu:dashboard",
                "icon": "eye",
                "children": [
                    {
                        "path": "/dashboard/analysis",
                        "flag": "analysis",
                        "title": "menu:analysis"
                    },
                    {
                        "path": "https://www.baidu.com/",
                        "flag": "monitor",
                        "title": "menu:monitor"
                    },
                    {
                        "path": "/dashboard/workplac",
                        "flag": "workplac",
                        "title": "menu:workplac"
                    },
                    {
                        "path": "/other/test",
                        "flag": "test",
                        "title": "menu:test"
                    }
                ]
            },
            {
                "path": "/form",
                "flag": "form",
                "title": "menu:form",
                "icon": "form",
                "children": [
                    {
                        "path": "/form/base-form",
                        "flag": "BaseForm",
                        "title": "menu:BaseForm"
                    },
                    {
                        "path": "/form/step-form",
                        "flag": "StepForm",
                        "title": "menu:StepForm"
                    },
                    {
                        "path": "/form/advanced-form",
                        "flag": "AdvancedForm",
                        "title": "menu:AdvancedForm"
                    },
                    {
                        "path": "/form/other-form",
                        "flag": "OtherForm",
                        "title": "menu:OtherForm"
                    }
                ]
            }
        ]
    },
    "msg": ""
}

 

8、src/api/login.js  修改api

export function getInfo (username) {
  return axios({
    //url: '/user/info',
    url: '?service=App.User.info',
    method: 'post',
    data: {
      username
    },
    headers: {
      'Content-Type': 'application/json;charset=UTF-8'
    }
  })
}

 9、src/store/modules/user.js 修改前台的獲取數據：

// 獲取用戶信息
    GetInfo ({ commit }) {
      return new Promise((resolve, reject) => {
        // TODO login 登錄:登錄成功之后, GetInfo獲取用戶基本信息
        getInfo(Vue.ls.get(ACCESS_TOKEN)).then(response => {
          commit('SET_LOADED_USER_INFO_FROM_BACKEND', true)
          //const result = response.result
          const result = response.data
          commit('SET_ROLES', result.roleList)
          // 緩存功能權限
          commit('SET_FUN_PERMISSIONS', result.funPermissionList)
          // 緩存路由權限
          commit('SET_ROUTER_PERMISSIONS', result.menuPermissionList)

          // TODO 構建動態菜單
          // 設置用戶動態菜單(這是由服務器返回的動態菜單), 一般來說您的數據結構和我這肯定是不一樣的. 因此可以在這里進行轉換, 轉換成功完成之后, 再執行下面的`SET_MENU_TREE`方法
          commit('SET_MENU_TREE', result.menuTree)

          // 設置用戶信息
          commit('SET_INFO', result)
          // 用戶姓名
          // TODO login tips 修改登錄成功之后的提示語
          commit('SET_NAME', { name: result.name, welcome: welcome() })
          // 用戶圖片
          commit('SET_AVATAR', result.avatar)

          resolve(response)
        }).catch(error => {
          reject(error)
        })
      })
    },

  10、src/permission.js 修改前台的獲取數據：

// TODO login 登錄:用戶已登錄, 但尚未獲取到用戶信息
      if (!store.getters.loadedUserInfoFromBackend) {
        // TODO login 登錄:登錄成功之后, GetInfo獲取用戶基本信息
        store
          .dispatch('GetInfo')
          .then(res => {
            console.log('permission.js,res:'+JSON.stringify(res))
            //const menuPermissionList = res.result && res.result.menuPermissionList
            const menuPermissionList = res.data && res.data.menuPermissionList
            console.log('permission.js,res.result.menuPermissionList'+menuPermissionList)
            // TODO login 登錄:用戶基本信息獲取成功之后, 獲取路由信息(菜單信息)
            store.dispatch('GenerateRoutes', { menuPermissionList }).then(() => {
              // 根據菜單標識集合生成可訪問的路由表
              // 動態添加可訪問路由表
              router.addRoutes(store.getters.addRouters)
              // TODO login 登錄:獲取url中的redirect參數,有redirect參數值,則轉入redirect指定的界面
              const redirect = decodeURIComponent(from.query.redirect || to.path)
              if (to.path === redirect) {
                // hack方法 確保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
                next({ ...to, replace: true })
              } else {
                // 跳轉到目的路由
                next({ path: redirect })
              }
            })
          })
          .catch(() => {
            // TODO login 登錄:用戶基本信息獲取失敗的處理
            notification.error({
              message: '錯誤',
              description: '請求用戶信息失敗，請重試'
            })
            store.dispatch('Logout').then(() => {
              next({ path: '/user/login', query: { redirect: to.fullPath } })
            })
          })
      } else {
        next()
      }

11、phalapi后台代碼：

public function info() {
        // $username = $this->username;   // 賬號參數
        // $password = $this->password;   // 密碼參數
        // 更多其他操作……

        $roleList=array('admin','company-admin');
        $funPermissionList=array('user_add','user_delete');
        $menuPermissionList=array('fun-permission','dashboard','form','table','profile','result','exception','user','dashboard','support');
        $menuTree=array(array('path'=>'/welcome/index','flag'=>'welcome','title'=>'menu:welcome','icon'=>'smile'),array('path'=>'/dashboard','flag'=>'dashboard','title'=>'menu:dashboard','icon'=>'eye','children'=>array(array('path'=>'/dashboard/analysis','flag'=>'analysis','title'=>'menu:analysis'),array('path'=>'https://www.baidu.com/','flag'=>'monitor','title'=>'menu:monitor'),array('path'=>'/dashboard/workplac','flag'=>'workplac','title'=>'menu:workplac'),array('path'=>'/other/test','flag'=>'test','title'=>'menu:test'))),array('path'=>'/form','flag'=>'form','title'=>'menu:form','icon'=>'form','children'=>array(array('path'=>'/form/base-form','flag'=>'BaseForm','title'=>'menu:BaseForm'),array('path'=>'/form/step-form','flag'=>'StepForm','title'=>'menu:StepForm'),array('path'=>'/form/advanced-form','flag'=>'AdvancedForm','title'=>'menu:AdvancedForm'),array('path'=>'/form/other-form','flag'=>'OtherForm','title'=>'menu:OtherForm'))));
        
      

        return array('id' => '4291d7da9005377ec9aec4a71ea837f','name'=>'管理員','username'=>'admin','password'=>'','avatar'=>'https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png','status'=>'1','telephone'=>'','lastLoginIp'=>'27.154.74.117','lastLoginTime'=>'1534837621348','creatorId'=>'admin','createTime'=>'1497160610259','merchantCode'=>'TLif2btpzg079h15bk','deleted'=>'0','roleList'=>$roleList,'funPermissionList'=>$funPermissionList,'menuPermissionList'=>$menuPermissionList,'menuTree'=>$menuTree);
    }