手把手前端入门笔记之vue-element-admin-03

最新推荐文章于 2024-04-18 09:45:14 发布

�Yosaa

最新推荐文章于 2024-04-18 09:45:14 发布

阅读量361

点赞数

文章标签： vue.js 前端 javascript elementui 前端框架

本文链接：https://blog.csdn.net/weixin_44519948/article/details/127066566

版权

前言：

本文主要为vue-element-admin框架的入门教程，本人2年后端开发经验，想自学前端转全栈工程师（听着就好酷），直接上手实战应该是入门前端最快的方式了，在此记录下学习过程，希望可以对初学者有所帮助。如有错误或未考虑完全的地方，望不吝赐教。

第一期手把手前端入门笔记之vue-element-admin-01

第二期手把手前端入门笔记之vue-element-admin-02

第三期手把手前端入门笔记之vue-element-admin-03

第四期手把手前端入门笔记之vue-element-admin-04

环境（配置）：win11操作系统，vs code编辑器

内容大纲：列表、条件搜索、列表分页。通过实现"员工管理"模块（包含员工列表，搜用员工，员工添加页面）演示。

具体步骤

回到我们/views/staff/list.vue文件，我们现在要做一个正常的表格页面，包含搜索查询功能

框架列表模板（可忽略）

（以下这一段为使用框架自带的模板，但页面结构复杂有很多不常用的东西，所以只是提一嘴，可以跳过）

为了方便参考自带的模板，另外又启动了一个原版的服务（端口会冲突，可以把其中一个端口改成别的）

可以发现模板中已经有符合我们需求的页面，然后回到我们项目中找到该页面文件路径

我们把该页面复制到我们/views/staff/list.vue里面

替换好后打开页面，发现模板已经过来了，但是没有数据，是因为我们项目替换了本地域名，并且不从mock中返回值，所以空白是正常的，替换成自己后端接口获取数据即可

（以上部分可跳过）

我们会发现这个模板的页面有很多用不到的东西，实际开发中也只会作为参考，对于需求较少的页面，直接参考element-UI组件库就好了

所以我们自己来重写一个新页面

快速生成vue页面模板

在vscode模块里面搜索" vue-helper "，进行安装

进入文件——首选项——用户片段——输入选择Vue.json，如果搜不到这个文件就直接搜索vue，没有.json后缀的那一栏点击以下就会出现该文件了

进入该文件，把以下模板代码复制进去，保存即可

//Vue2 —— 通用 { "create Vue2": { "prefix": "vue", "body": [ "<template>", " <div></div>", "</template>\n", "<script>", " export default {", " data(){", " return{}", " },", " methods:{},", " created(){},", " mounted(){}", " }", "</script>\n", "<style lang=scss>", "</style>", ], "description": "Log output to console" } }

回到我们员工列表的页面文件，输入vue 回车即可

员工列表页面

我们参考element-UI组件库，找到合适的组件，比如这个表格肯定是必要的，点开向下箭头可以看到代码

我们就使用这个“带斑马纹表格”的组件，看图

把组件代码可以先都复制到过来，在进行替换数据，保存我们看一下页面

然后我们需要把data中的信息，替换成后端返回的数据

在api文件夹下新建 staff.js文件，用于存放员工管理相关的接口请求（结构参考之前的user.js即可），传参只填上必须的token，page，pageSize，其他的搜索字段之后再补全

以下是我接口返回的数据

{ "code": 0, "message": "success", "data": { "currentPage": 0, "totalElements": 1, "elements": [ { "uid": "oQ_xGszvwxNpa_e_K6Rbyypyl3EE", "username": "test01", "cell": "10086", "position": "测试用户", "department": "测试组1", "invalid": 0, "role_id": 14, "role_name": "权限名称", "created_at": "2020-07-04 12:54:13" } ] } }

根据列表想要展示的字段，对template标签内进行对应接口返回字段名称修改