福州有网站开发的公司吗,网站策划方案ppt,怎样给网站找空间做备案,轻骑兵低代码开发平台目录
步骤
基本页面布局
基本框架
页面布局
CSS样式
完善布局
效果展示
完整代码 Element 的基本使用方式以及常见的组件已经了解完了#xff0c;接下来要完成一个案例#xff0c;通过这个案例让大家知道如何基于 Element 中的各个组件制作一个完整的页面。 案例接下来要完成一个案例通过这个案例让大家知道如何基于 Element 中的各个组件制作一个完整的页面。 案例根据页面原型完成员工管理页面开发并通过Axios完成数据异步加载。 页面列表中的数据不是写死的而是要基于 Axios 发送请求动态加载展示的提供了服务端数据获取的地址即 YAPI Pro平台提供的 MOCK 地址访问后返回 JSON 格式的数据需要将其渲染展示在列表页面中最终制作出来的页面分为三个部分上面是页头部分下面分为左侧菜单栏和右侧主展示区域。 MOCK地址https://yapi.pro/mock/401965/user/getById 该地址来源于互联网如有侵权请联系删除。 制作页面的思路是从全局到细节推进具体操作步骤如下
步骤
创建页面完成页面的整体布局规划布局中各个部分的组件实现列表数据的异步加载并渲染展示 基本页面布局
接下来着手开发页面先创建一个页面并完成整体布局规划。
基本框架
打开 VS Code在“View”目录下创建“tlias”目录在该目录下创建“EmpView.vue”组件组件包含“templates”定义 HTML 页面模板先定义根标签 div、“script”定义 view 中的数据模型和方法即编写 JS 文件、“style”定义 CSS 样式代码。
完成基本框架 创建好组件后在浏览器中访问由于在 main.js 入口文件中引用的是之前的组件现在要开发新的员工管理组件所以在App.vue组件中将之前的引用注释掉 定义新的“emp-view”标签访问项目时即为“emp-view”组件但此时组件内无内容。 页面布局
接下来编写页面布局页面布局分为三个部分可使用 Element 提供的布局组件其中有“el_container”外层容器、“el_header”顶栏容器、“el_aside”侧边栏容器、“el_main”主要区域容器、“el_footer”底栏容器。 找到所需页面布局点击显示代码将布局拷贝过来粘贴在 div 区域由于未加样式和组件页面无效果。 CSS样式
接着加入 CSS 样式在外层布局容器“el_container”中通过 style 设置样式指定容器高度和边框将设置高度为 700将顶栏替换为项目标题“tlias智能学习辅助系统”设置字体大小为 40 像素再设置顶栏背景颜色。都可在官网参考 完善布局
准备好顶栏结构后准备侧边栏菜单参照实例将菜单复制到“el_aside”区域只保留需要的“选项一”和“选项二”并修改菜单名字为“系统信息管理”、“部门管理”、“员工管理”。 然后制作右侧主展示区域参考 Element 官网实例将表格内容复制到“el_main”区域调整表格列名 将资料中准备好的表格列内容复制过来在表格渲染时要展示“data”数据模型定义一个数组“tableData”。 效果展示
最后打开浏览器确认页面最上面是页头部分左侧是菜单右侧是表格基本网页布局完成。 完整代码
EmpView.vue
templatedivel-container styleheight: 700px; border: 1px solid #eeeel-header stylefont-size: 40px; background-color: rgb(238, 241, 246)nbsp;nbsp;nbsp;nbsp;nbsp;tlias 智能学习辅助系统/el-headerel-containerel-aside width200pxel-menu :default-openeds[1, 3]el-submenu index1 stylebackground-color: rgb(215, 215, 215)template slottitlei classel-icon-message/i系统信息管理 nbsp;nbsp; /templateel-menu-item index1-1部门管理/el-menu-itemel-menu-item index1-2员工管理/el-menu-item/el-submenu/el-menu/el-asideel-main!-- 表单 --el-form :inlinetrue :modelsearchForm classdemo-form-inlineel-form-item label姓名el-input v-modelsearchForm.name placeholder姓名/el-input/el-form-itemel-form-item label性别el-select v-modelsearchForm.gender placeholder性别el-option label男 value1/el-optionel-option label女 value2/el-option/el-select/el-form-itemel-form-itemel-button typeprimary clickonSubmit查询/el-button/el-form-item/el-form!-- 表格 --el-table :datatableDatael-table-column propname label姓名 width180/el-table-columnel-table-column propimage label图像 width180/el-table-columnel-table-column propgender label性别 width140/el-table-columnel-table-column propjob label职位 width140/el-table-columnel-table-column propentryDate label入职日期 width180/el-table-columnel-table-column propupdateTime label最后操作时间 width230/el-table-columnel-table-column label操作el-button typeprimary sizemini编辑/el-buttonel-button typedanger sizemini删除/el-button/el-table-column/el-table/el-main/el-container/el-container/div
/templatescript
export default {data() {return {tableData:[],};},
};
/scriptstyle /styleEND 学习自黑马程序员——JavaWeb课程
