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

?

1 2	# 当使用代理方式访问web api时, 此变量指定所有的api请求的uri前缀 VUE_APP_API_BASE_URL=/api

5、后台App.User.login接口返回的数据：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

{     "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);
    }