Vue 若依框架常见问题

问题1：获取当前用户信息

获取当前用户id或其它信息

user.js

import { login, logout, getInfo } from '@/api/login'
import { getToken, setToken, removeToken } from '@/utils/auth'

const user = {
  state: {
    token: getToken(),
    id: '',
    name: '',
    avatar: '',
    roles: [],
    permissions: [], 
    shop: [] // 店铺列表
  },

  mutations: {
    SET_TOKEN: (state, token) => {
      state.token = token
    },
    SET_ID: (state, id) => {
      state.id = id
    },
    SET_NAME: (state, name) => {
      state.name = name
    },
    SET_AVATAR: (state, avatar) => {
      state.avatar = avatar
    },
    SET_ROLES: (state, roles) => {
      state.roles = roles
    },
    SET_PERMISSIONS: (state, permissions) => {
      state.permissions = permissions
    },
    SET_SHOP: (state, shop) => {
      state.shop = shop
    },
  },

  actions: {
    // 登录
    Login({ commit }, userInfo) {
      const username = userInfo.username.trim()
      const password = userInfo.password
      const code = userInfo.code
      const uuid = userInfo.uuid
      return new Promise((resolve, reject) => {
        login(username, password, code, uuid).then(res => {
          setToken(res.token)
          commit('SET_TOKEN', res.token)
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },

    // 获取用户信息
    GetInfo({ commit, state }) {
      return new Promise((resolve, reject) => {
        getInfo().then(res => {
          const user = res.user
          const shop = res.shop
          const avatar = (user.avatar == "" || user.avatar == null) ? require("@/assets/images/profile.jpg") : process.env.VUE_APP_BASE_API + user.avatar;
          if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
            commit('SET_ROLES', res.roles)
            commit('SET_PERMISSIONS', res.permissions)
          } else {
            commit('SET_ROLES', ['ROLE_DEFAULT'])
          }
          commit('SET_ID', user.userId)
          commit('SET_NAME', user.userName)
          commit('SET_AVATAR', avatar)
          // 设置店铺
          commit('SET_SHOP', shop)
          resolve(res)
        }).catch(error => {
          reject(error)
        })
      })
    },

    // 退出系统
    LogOut({ commit, state }) {
      return new Promise((resolve, reject) => {
        logout(state.token).then(() => {
          commit('SET_TOKEN', '')
          commit('SET_ROLES', [])
          commit('SET_PERMISSIONS', [])
          // 设置店铺
          commit('SET_SHOP', [])
          removeToken()
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },

    // 前端 登出
    FedLogOut({ commit }) {
      return new Promise(resolve => {
        commit('SET_TOKEN', '')
        removeToken()
        resolve()
      })
    }
  }
}

export default user

getters.js

const getters = {
  sidebar: state => state.app.sidebar,
  size: state => state.app.size,
  device: state => state.app.device,
  dict: state => state.dict.dict,
  visitedViews: state => state.tagsView.visitedViews,
  cachedViews: state => state.tagsView.cachedViews,
  token: state => state.user.token,
  avatar: state => state.user.avatar,
  name: state => state.user.name,
  introduction: state => state.user.introduction,
  roles: state => state.user.roles,
  permissions: state => state.user.permissions,
  shop: state => state.user.shop, // 设置店铺
  permission_routes: state => state.permission.routes,
  topbarRouters:state => state.permission.topbarRouters,
  defaultRoutes:state => state.permission.defaultRoutes,
  sidebarRouters:state => state.permission.sidebarRouters,
}
export default getters

问题2：若依部署nginx配置

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen    80;
        server_name  127.0.0.1;
		charset utf-8;

        location / {
            root   /home/front/dist;
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
		
		location /prod-api/ {
			proxy_set_header Host $http_host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header REMOTE-HOST $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_pass http://localhost:9999/;
		}

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

问题2：若依分页多选

<template>
  <div>
    <!-- 按钮组 -->
    <el-row :gutter="10" class="mb8">
      <el-button @click="toggleSelection()">取消选择</el-button>
    </el-row>
    <el-table
      ref="multipleTable"
      :row-key="getRowKey"
      v-loading="loading"
      :data="dataList"
      @selection-change="handleSelectionChange"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column type="selection" :reserve-selection="true" width="55" />
      <el-table-column label="序号" fixed>
        <template #default="scope">
          <span>{{
            (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1
          }}</span>
        </template>
      </el-table-column>
      <el-table-column property="name" label="名称" />
      <el-table-column property="date" label="日期" />
      <el-table-column property="address" label="地址" />
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<script>
export default {
  name: "Test",
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 遮罩层
      loading: false,
      // 数据集
      dataList: [],
      // 总条数
      total: 0,
      // 数据
      datas: [
        {
          id: 1,
          date: "2016-01-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: 2,
          date: "2017-03-04",
          name: "王虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          id: 3,
          date: "2017-04-01",
          name: "王小",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          id: 4,
          date: "2016-05-03",
          name: "李三",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          id: 5,
          date: "2016-05-03",
          name: "李三",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          id: 6,
          date: "2016-05-03",
          name: "李三",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          id: 7,
          date: "2016-05-03",
          name: "李三",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          id: 8,
          date: "2016-05-03",
          name: "李三",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          id: 9,
          date: "2016-05-03",
          name: "李三",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          id: 10,
          date: "2016-05-03",
          name: "李三",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          id: 11,
          date: "2016-05-03",
          name: "李三",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          id: 12,
          date: "2016-05-03",
          name: "李三",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      // 选择项
      ids: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 获取唯一标识
    getRowKey(row) {
      return row.id;
    },
    // 分页获取数据
    getList() {
      this.loading = true;
      this.dataList = JSON.parse(JSON.stringify(this.datas)).splice(
        (this.queryParams.pageNum - 1) * this.queryParams.pageSize,
        this.queryParams.pageSize
      );
      this.total = this.datas.length;
      this.loading = false;
    },

    // 多选
    handleSelectionChange(e) {
      this.ids = e.map((item) => item.id);
    },

    // 取消多选
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
  },
};
</script>