盐析白兔

这个屌丝很懒，什么也没留下！

热门标签

Vue 新手学习笔记：vue-element-admin 之入门开发教程（v4.0.0 之后）_vue-element-admin教学

作者：盐析白兔 | 2024-04-05 13:10:52

踩

vue-element-admin教学

由于 vue-element-admin 的架构再 4.0.0 版本后做了重构，所以写这个文章，对改动比较大的部分做个讲解，方便大家入门学习。虽说项目做了重构，但是整体结构上和之前的还是很相似的，所以有些和之前差不多的我会直接放之前文章的链接

由于 Markdown 实在不太会用，这里手动列下目录，毕竟东西有点杂

安装&准备工作&ESLint配置
连接后台真数据
Mock 假数据
不需要 Mock 虚拟数据怎么办？
前端拦截器
登陆功能
自定义 vuex 参数
Mock 数据部分代码

安装&准备工作&ESLint配置

安装&准备工作&ESLint 部分：Vue 新手学习笔记：vue-element-admin 之安装，配置及入门开发（v4.0.0 之前）
这个就不多做讲解了，可以直接参考之前的文章，写的应该算详细了，这里只对下面 4 个内容做个说明

node&npm 版本要求：

都知道框架对这两点是有要求的，那么最低要求要达到哪呢？
最下面：package.json
这个是官方项目里的 package.json 文件，别人说的都不一定对，毕竟版本会迭代，自己看才是最实在的

i18n 国际化：

大部分人下的代码都是 master 分支的代码，照官方的说法国际化的功能被单独拿出来开了个分支，所以需要这个功能的要去下
i18n 分支的代码

要下分支代码的可以看这篇：Git 克隆指定分支的代码

命令：

新版本的命令和旧版本的略有不同，还加了些命令，有兴趣的可以试下，具体的可看 package.json 文件


# 发布
# 本地环境启动
npm run dev
 
# 构建测试环境
npm run build:stage
 
# 构建生产环境
npm run build:prod
 
# 其它
# 预览发布环境效果
npm run preview
 
# 预览发布环境效果 + 静态资源分析
npm run preview -- --report
 
# 代码格式检查
npm run lint
 
# 代码格式检查并自动修复
npm run lint -- --fix

启动访问报错 404：

我在新项目启动登陆报错，那是因为官方 mock 只在正式环境启用，我在 i18n 分支遇到的，缺心眼？
打开文件 src/main.js 把环境判断去掉

连接后台真数据

这个是很多人都关心的，我看了网上很多文章都是直接去 vue.config.js 去配 proxy，这并不是正确的配置方法。
还记得上个版本有分出各个环境的配置文件配置的，怎么可能这个版本就没有了？官方是有提供配置文件的

.env.development：本地
.env.staging：测试环境
.env.production：正式环境

PS：这里唯一注意的就是旧版本是用用冒号连接，这里是等于，写错了就拿不到路径
src/utils/request.js 在请求拦截器里打印看看

打印：拿到说明配置正确

PS：其他的静态配置都可以在这个文件里配置，比如一些静态文件路径之类的

Mock 假数据

为了更好的说明，这里使用的示例为自己写的，不是项目里带的，先大致列下项目对应文件，具体代码放文章结尾
这里 service 文件夹自己建的，就是个简单的分页列表示例

vue页面文件：/src/views/service/index.vue
api接口：/src/api/service/index.js
PS：可能很多人觉得 api 文件多余，直接在页面写路径，但是用 api 文件在路径上更方便管理，这点在微服务中通过特定服务名去访问显得尤为明显，类似这种：
mock 虚拟数据文件：/mock/service/index.js
mock 数据加载文件（这个原来就有）：/mock/index.js

流程说明：

页面接口先去请求 api 文件

vue页面文件

api接口

在 api 请求时会被 mock 拦截，先来看下 mock 数据

可以看到新版本在路径拦截方面做了优化，比之前的版本配置好理解

mock/index.js 中如果需要拦截就会被拦截

下拉可以看到，这里循环了 mocks 把这个页面里所有有配置的接口都进行了拦截

不需要 Mock 虚拟数据怎么办？

很简单，两个字：注掉，这样就不会拦截了

前端拦截器

路径：/src/utils/request.js

这个文件分为 3 个部分

axios 实例，所以不需要自己去写，引用下这个文件包下就好了，可以看下 api
service.interceptors.request.use 请求拦截器
可以凭需要自己新增一些请求头之类的
service.interceptors.response.use 返回值拦截器
这里的逻辑不多说不难

登陆功能

去除那些无关的东西，比如什么 rules 校验啊，默认的账号密码之类的东西，直接看核心登陆方法

/src/views/login/index.vue

逻辑很简单，登陆参数校验 ➡ 调用 store 里的 login 方法登陆 ➡ 成功跳到对应页面


handleLogin() {
    // 登陆校验
    this.$refs.loginForm.validate(valid => {
        // 如果校验通过
	if (valid) {
	  this.loading = true
	  // 这里进行登陆请求 login 方法
          // 在 src/store/modules/user.js
	  this.$store.dispatch('user/login', this.loginForm)
	    .then(() => {
	      // otherQuery 就是你从哪个页面退出的，帮你重定向回那个页面
	      this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
	      this.loading = false
	    })
	    .catch((errorMsg) => {
	      this.loading = false
	      // 登陆失败提示
	      Message({
		message: errorMsg,
		type: 'error',
		duration: 5 * 1000
	      })
	    })
	} else {
	  console.log('error submit!!')
	  return false
	}
    })
},

/src/store/modules/user.js ➡ login方法

在登陆方法里建议不要做多于操作，就登陆就行了，因为缓存用的时 vuex 和之前版本一样刷新就没了，所以还需要走 getInfo 方法来获取需要的数据，如果你按照框架的来，建议必要权限数据在这取，然后放 vuex，那些准备直接放 localStorage 的请无视。

/src/views/permissions.js

和之前的版本一样，这个文件就是你路由走的逻辑，简单看下重要部分

PS：这里对比你自己的会发现，原本代码里写的是 const { roles } = await xxxxx，我这里直接把括号去了，按我的理解这个括号应该是只能接收数组类型的参数，但是我不管怎么传拿到的都是 null，要么报错，我就干脆改掉了

/src/store/modules/user.js ➡ getInfo方法

这里直接看下我改过的，可以对比下自己源代码，然后进行修改，至于这里调的 api 接口啥的就不多说了，没区别
commit 方法就是把值传到 vuex 里


// get user info
getInfo({ commit, state }) {
	return new Promise((resolve, reject) => {
		getInfo(state.token).then(response => {
			const data = response.data
 
			// 设置按钮权限到 vuex
			commit('SET_BUTTON', data.retData.button)
			if (data.retData.module && data.retData.module.length > 0) { // 验证返回的roles是否是一个非空数组
			  commit('SET_ROLES', data.retData.module)
			} else {
			  // 当用户无任何权限时设置
			  commit('SET_ROLES', ['普通用户'])
			}
			commit('SET_NAME', data.retData.username)
			commit('SET_AVATAR', 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif')
			commit('SET_INTRODUCTION', data.retData.username)
 
			resolve(data.retData.module)
			}).catch(error => {
			reject(error)
		})
	})
},

/src/store/modules/permission.js ➡ generateRoutes方法

这里就是，目录加载了，这个部分和之前差不多一样，就不多说了

目录权限部分：Vue 新手学习笔记：vue-element-admin 之登陆及目录权限控制

PS：旧版本的 filterAsyncRoute 方法在新版里叫 filterAsyncRoutes 多了个 s 注意下

自定义 vuex 参数

比如我自定义的 button 参数

使用 commit 之前上面对应的也是要的

Mock 数据部分代码

vue页面文件：/src/views/service/index.vue


<template>
  <div class="app-container">
    <el-table :data="list" border fit highlight-current-row style="width: 100%;" height="611px">
      <el-table-column :show-overflow-tooltip="true" aellign="center" label="服务单号">
        <template slot-scope="scope">
          <span>{{ scope.row.data1 }}</span>
        </template>
      </el-table-column>
 
      <el-table-column :show-overflow-tooltip="true" align="center" label="性质">
        <template slot-scope="scope">
          <span>{{ scope.row.data2 }}</span>
        </template>
      </el-table-column>
 
      <el-table-column :show-overflow-tooltip="true" align="center" label="客户">
        <template slot-scope="scope">
          <span>{{ scope.row.data3 }}</span>
        </template>
      </el-table-column>
 
      <el-table-column :show-overflow-tooltip="true" align="center" label="联系人">
        <template slot-scope="scope">
          <span>{{ scope.row.data4 }}</span>
        </template>
      </el-table-column>
 
      <el-table-column :show-overflow-tooltip="true" align="center" label="工程师">
        <template slot-scope="scope">
          <span>{{ scope.row.data5 }}</span>
        </template>
      </el-table-column>
 
      <el-table-column :show-overflow-tooltip="true" align="center" label="送修/上门时间">
        <template slot-scope="scope">
          <span>{{ scope.row.data7 }}</span>
        </template>
      </el-table-column>
 
      <el-table-column :show-overflow-tooltip="true" align="center" label="修复/结束时间">
        <template slot-scope="scope">
          <span>{{ scope.row.data8 }}</span>
        </template>
      </el-table-column>
 
      <el-table-column :show-overflow-tooltip="true" align="center" class-name="status-col" label="部门">
        <template slot-scope="scope">
          <span>{{ scope.row.data10 }}</span>
        </template>
      </el-table-column>
 
      <el-table-column :show-overflow-tooltip="true" align="center" class-name="status-col" label="操作">
        <template slot-scope="scope">
          <input :loading="checkLoading" type="button" class="el-button el-button--primary el-button--medium" value="确认" @click="checkFwdbh(scope.row.data1)">
        </template>
      </el-table-column>
 
    </el-table>
    <!-- 分页 -->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getServiceList"
    />
  </div>
</template>
 
<script>
import { getServiceList } from '@/api/service/index'
import Pagination from '@/components/Pagination'
 
export default {
  components: { Pagination },
  data() {
    return {
      // 加载样式控制
      checkLoading: false,
 
      // 数据列表
      list: [],
      // 数据条数
      total: 0,
      // 按钮加载等待
      loading: false,
 
      listQuery: {
        // 分页参数
        page: 1,
        limit: 10
      }
    }
  },
  created() {
    // 加载列表
    this.getServiceList()
  },
  methods: {
    // 获取列表数据
    getServiceList() {
      getServiceList(this.listQuery).then(response => {
        this.list = response.items
        this.total = response.total
      })
    },
    // 确认请求
    checkFwdbh(fwdbh) {
      alert(fwdbh)
    }
  }
}
</script>
 
<style scoped>
.icon-star{
  margin-right:2px;
}
.drag-handler{
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.show-d{
  margin-top: 15px;
}
 
/* 布局样式 */
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>

api接口：/src/api/service/index.js


import request from '@/utils/request'
 
const SERVICE = '/service'
 
// 获取列表数据
export function getServiceList(query) {
  return request({
    url: SERVICE + '/service/getServiceLogList',
    method: 'post',
    data: query
  })
}

mock 虚拟数据文件：/mock/service/index.js


 
const List = []
const count = 30
 
// 模拟数据列表
for (let i = 0; i < count; i++) {
  List.push({
    data1: 'ABCD00000000000',
    data2: '1004553',
    data3: '送修',
    data4: 'xxxxxxxx办事处',
    data5: '林xx',
    data6: '王xxx',
    data7: '2005-11-07 00:00',
    data8: '2006-07-20 00:00',
    data9: '已核销不开票',
    data10: '技术支持部'
  })
}
 
const SERVICE = '/service'
 
export default [
  {
    // 拦截的路径
    url: SERVICE + '/service/getServiceLogList',
    type: 'post',
    response: _ => {
      return {
        code: 20000,
        total: List.length,
        items: List,
        limit: 10
      }
    }
  }
]

mock 数据加载文件（这个原来就有）：/mock/index.js

效果图：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/365780

Vue 新手学习笔记：vue-element-admin 之 入门开发教程（v4.0.0 之后）_vue-element-admin教学