云南省城乡建设培训中心网站,技术支持 上海做网站,求职seo,网站统计访客数量怎么做本文章转载于【SpringBootVue】全网最简单但实用的前后端分离项目实战笔记 - 前端_大菜007的博客-CSDN博客
仅用于学习和讨论#xff0c;如有侵权请联系
源码#xff1a;https://gitee.com/green_vegetables/x-admin-project.git 素材#xff1a;https://pan.baidu.com/s/…本文章转载于【SpringBootVue】全网最简单但实用的前后端分离项目实战笔记 - 前端_大菜007的博客-CSDN博客
仅用于学习和讨论如有侵权请联系
源码https://gitee.com/green_vegetables/x-admin-project.git 素材https://pan.baidu.com/s/1ZZ8c-kRPUxY6FWzsoOOjtA 提取码up4c 项目概述笔记https://blog.csdn.net/m0_37613503/article/details/128961102 数据库笔记https://blog.csdn.net/m0_37613503/article/details/128961401 前端笔记https://blog.csdn.net/m0_37613503/article/details/128961447 后端笔记https://blog.csdn.net/m0_37613503/article/details/128961569
1、写一个用户管理页面
1.1 弄成这样的布局 1.2 用户电话查询条件 2、表格分页 2.1 新增按钮 2.2 这些布局结构我们用的都是element组件 2.3 设计外观需要用到element脚手架这里我们要前往element官网他里面用到的版本是2.13.2
element官网链接element.eleme.cn/#/zh-CN/component/installation 3、使用ELEMENT组件可以查阅相关组件用到项目里来 3.1 我们先做一个查询区域输入框按钮以及新增 4 打开前端点击我们user.vue文件 4.1
5 我在这里写个输入框直接写输入框边界没有明显区域因此我先给他套一个cart 5.1 我想要Cart 这种样式 5.2 直接把代码给copy下来 5.3 先套一个el-cart 5.4 输入框 5.5 把他copy过来 6 一定一定要熟悉组件库熟悉组件库快速开发项目 6.1
7 弄一个圆角按钮 7.1 这里的宽度设置的100%。
8 这里的Cart合在一起来 8.1
9 这里的内边距怎么设那这里要点击摁住F12 9.1
10、我想给这个整体样式添加 10.1
11、全局样式在根组件里写样式代码也可以实现 11.1
12 边距出来了 12.1 13 给他们输入输入框定义宽度 13.1 给他们定义输入框 14、右外边距 14.1 我想添加一些icon图标 14.2 找到搜索的图标 14.3 把这个名字复制过来 14.4 放到项目里的icon属性就行 15 增加一个新增的按钮 15.1 找到圆形按钮 15.2 复制圆形按钮 16 这个圆形按钮默认是可以搜的给他改成plus 16.1
17 他现在的位置在这里我希望他的位置在这里 17.1 这里建议用上element布局的 17.2 这里内容组件默认是左对齐我们只要默认为右对齐就行 18 列只要加起来等于24就行分24分栏 18.1
19 把代码复制过去 19.1中间内容不需要 19.2 再来 19.3 前面这一栏就是两个输入框加一个查询按钮 19.4按钮放下面基本布局完成 19.5 对齐属性align,默认是左对齐的这里我要改成右对齐 19.6 搜索栏顺利完成 20、底部放一个Cart标签后面放一个表格 20.1 结果列表 20.2 太近了怎么办给他设置一个底部的外边距 20.3 底部边距 20.4 表格找到官网组件 20.5 找到带斑马纹的表格复制到指定内容 ##
21、系统会报错 21.1
22 定义一个Data放到里面 22.1 给他修改数据源 22.2 这里给他定义一个数据源 22.3 现在不报错了 23 现在改成我们想要的字段 23.1
24 给他生成一个索引号 24.1
25 改成username,改成# 25.1
26 宽度改成80就行 26.1
27 看一下表里有哪些字段有5处标红的字段 27.1
28 预览一下样式 28.1效果 29 分页组件也找组件库这里找完整功能 29.1
30、将完整分页复制过去 30.1
31、这里的handleSizeChange发生了改变就会触发了一件事先得把方法定义出来 31.1currentPage4 ,我们当前定义的是第几页 31.2 这里给他一个默认值1一个初始值10 32 这里要绑定到pageNo上面去 33 PageSize默认可以显示多少个 34 效果是这样 34.1
35 改变默认值以及不写死 35.1
36total总计务数这里是后台传过来的我们得定义一个变量 37 这个变量给他定义一下默认值保存为0 38、基本布局做出来了但是还有一个问题total是个英文 38.1
39 英文如何修改找到我们的main.js,把en改成zh-CN 39.1
40 布局构建成功F12检查一下有没有问题
