攻略做的比较好的网站,wordpress 个人简历模板下载,成都哪家做网站做的好,工业软件开发前景目录
Vue-前端工程化
1. 前后端分离开发
1.1 介绍
1.2 Yapi
2. 前端工程化
2.1 环境准备
2.2 Vue项目简介
2.3 Vue项目开发流程
3. Vue组件库Element
3.1 快速入门
3.2 常用组件
3.3 案例 Vue-前端工程化 前面我们已经讲解了HTML、CSS、JavaScript以及Vue等知识。已…
目录
Vue-前端工程化
1. 前后端分离开发
1.1 介绍
1.2 Yapi
2. 前端工程化
2.1 环境准备
2.2 Vue项目简介
2.3 Vue项目开发流程
3. Vue组件库Element
3.1 快速入门
3.2 常用组件
3.3 案例 Vue-前端工程化 前面我们已经讲解了HTML、CSS、JavaScript以及Vue等知识。已经通过前端网页开发的三剑客完成了基本网页的制作如下图的样子 但是呢我们会发现上面的页面样式太过简陋。而在现在的企业开发中前端开发人员会通过CSS来美化页面当然如果是做一些管理系统的页面也会通过一些现成的组件库来美化页面、快速开发。 我们今天呢主要就是要来介绍这么一套基于Vue的桌面端组件库Element。
今日课程内容
前后端分离开发前端工程化Vue组件库Element1. 前后端分离开发
1.1 介绍
前面在Web开发的课程开篇我们就已经提到现在企业开发中最为主流的就是前后端分离的开发模式。 所谓前后端分离是指前端人员开发前端的工程然后再将开发好的前端工程打包部署在前端服务器上后端开发人员开发后端的工程然后再将后端的工程打包部署在后端服务器上这种模式呢我们就称之为 前后端分离开发。 而最终呢前端开发人员开发的前端工程是需要请求调用后端开发人员开发的后端工程然后后端工程再给前端响应数据。那么此时就可能存在一个问题前端开发前端的后端开发后端的最终前后端如何顺利的对接起来呢 那此时前后端再开发的时候就需要遵循一定的开发规范而这种开发规范呢我们会定义在一份文档中这份文档就是接口文档 。 在接口文档中呢就规定了每一个功能前端需要传递什么参数后端需要返回什么样的结果请求方式请求路径等等。 有了这份接口文档之后前后端只需要根据这份接口文档进行开发即可。而这份接口文档呢是根据产品原型以及需求文档分析出来的。 而接口文档的形式呢也各种各样可以是在线的也可以是离线的。 在线的呢有很多现成的API接口管理平台如 Yapi EasyApi等。离线的可以是txtexcelwordmd等形式。 那我们在开发一个项目时具体的开发流程到底是什么样子的呢 ①. 需求分析根据产品经理提供的产品原型以及需求文档来分析需求、熟悉业务。
②. 接口定义根据需求文档及需求梳理并定义接口文档可能是前端也可能是后端。
③. 前后端并行开发前后端开发人员依据接口文档进行并行开发在开发时需要严格遵循接口文档中的各项规范说明。
④. 测试前后端工程功能开发完毕后自行测试。前端在测试时需要通过模拟数据测试。
⑤. 前后端联调测试前后端都开发完毕后进行联调测试。 1.2 Yapi
1.2.1 介绍 概念YApi 是高效、易用、功能强大的 api 管理平台旨在为开发、产品、测试人员提供更优雅的接口管理服务 地址 YApi-高效、易用、功能强大的可视化接口管理平台 主要作用
①. API接口管理 管理项目的API接口
②. Mock测试数据自动生成Mock数据模拟的假数据供前端人员进行功能测试。 1.2.2 操作 添加项目 点击 添加项目 按钮输入项目名称就可以添加一个项目。 添加分类 点击项目就会进入到该项目然后在左侧的菜单栏中就会展示当前项目的接口每个接口呢会归属到一个分类下所以呢还需要创建对应的分类。 添加接口 点击某个分类栏的 号按钮就可以在该分类下创建接口。 1.2.3 Mock模拟数据 接口创建完毕之后查看接口的信息就会看到这么一栏Mock地址该地址就是Yapi平台为前端准备的Mock数据地址已经自动的生成了对应的测试模拟数据。 如果对生成的数据不满意我们也可以点击右侧的 高级Mock 栏手动添加Mock数据这样前端在测试时请求Mock地址就会获取到我们自己准备好的Mock数据了。 2. 前端工程化 小白眼中的前端开发
前面我们已经讲解了网页开发的三剑客 HTML、CSS、JavaScript以及基于JavaScript封装的非常流行的前端js框架Vue。如果要发送一步请求呢我们也可以借助于Axios很方便的就完成了。如果要美化样式那其实前端呢也可以再拉一个BootStrap进来。最终呈现的工程结构就如下图所示 上述的这种前端开发模式呢存在以下问题 ①. 项目难以维护到处使用的弹窗需要修改业务的时候要修改很多地方每个人都有自己的编码规范项目代码混乱难以阅读
②. 工作效率低下一个日期格式化函数一个从url获取参数的函数每个人都实现了一遍不仅耗时也增加项目体积
③. 用工成本大五花八门的技术栈和业务实现方式导致需要专门的人来维护甚至需要比较有经验的人来维护 实际的前端开发
而在现在的前端开发中呢为了提高开发效率、降低开发成本、保证项目质量往往要求前端工程的开发呢模块化、组件化、规范化、自动化也就是前端工程化。 前端工程化是指在企业级的前端项目开发中把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。 2.1 环境准备 2.1.1 Vue-cli介绍 介绍 Vue-cli 是Vue官方提供的一个脚手架用于快速生成一个工程化的 Vue项目模板。Vue-cli提供了如下功能
①. 统一的目录结构
②. 本地调试
③. 热部署
④. 单元测试
⑤. 集成打包上线
依赖环境NodeJSNodeJS 是一个基于Chrome V8引擎的JavaScript运行环境是一个让JS运行在服务端的开发平台Nodejs对JS有着巨大的提升对于前端来说它就是js代码的运行环境类似于java代码的运行环境JDK一样。
2.1.2 NodeJS安装 具体的安装文档请参考资料中提供的 《NodeJS安装文档》。
百度网盘 请输入提取码百度网盘为您提供文件的网络备份、同步和分享服务。空间大、速度快、安全稳固支持教育网加速支持手机端。注册使用百度网盘即可享受免费存储空间https://pan.baidu.com/s/1Gc-FWat12b4s0frJ46WHDw?pwd1111 2.1.3 Vue-cli安装 NodeJS安装完毕之后给我们提供了一个软件包管理工具npm我们下载js相关软件包只需要在命令行中通过 npm 指令就可以了。NodeJS的环境已经准备好接下来我们就来安装 Vue-cli也就是vue的脚手架。 在命令行中执行命令
npm install -g vue/cli 执行这条指令时会联网下载安装所以可能需要耗时几分钟。 执行完毕之后我们可以再次打开命令行输入以下指令验证一下是否安装成功。
vue --version 2.2 Vue项目简介 2.2.1 创建 A. 打开UI界面
在命令行中执行如下指令
vue ui B. 打开项目管理器 C. 创建项目 创建项目的过程需要联网进行这可能会耗时比较长的时间请耐心等待。 windows的命令行容易卡顿我们可以随便敲击一下键盘。 如果出现如下字样就说明前端工程已经创建完毕了。 创建完毕后就可以直接关闭页面和命令行了到此工程创建完毕。
2.2.2 目录结构
基于Vue脚手架创建出来的工程有着标准的目录结构如下 目录 说明 node_modules 存放整个项目的依赖包本工程所有依赖的资源都会自动下载并存储在这个目录中 public 存放项目的静态资源文件 src 存放项目的源代码 package.json 模块基本信息项目开发所需要模块版本信息 vue.config.js 保存vue的配置文件如代理、端口的配置等 对于这些目录我们需要重点关注的是 srcsrc下的目录结构为 目录 说明 assets 静态资源 components 可重用的组件 router 路由配置 views 视图组件(页面) App.vue 入口页面(根组件) main.js 入口js文件 2.2.3 启动 Vue项目创建完毕后前端项目会运行在一台独立的服务器中我们可以通过如下两种方式来启动这台服务器。 方式一图形化界面 方式二命令行 在当前工程的目录下打开命令行执行如下指令
npm run serve 启动起来之后就可以在浏览器访问 8080 端口http://localhost:8080 2.2.4 配置端口 8080 端口对于我们java开发工程师来说是非常非常重要的一个端口号因为我们后面所开发的web后端工程都需要部署在后端服务器中而对于java开发来说后端服务器最常见的就是tomcat而tomcat默认端口号就是 8080 。 如果我们后面在同一台电脑上再启动一个后端工程的tomcat服务器此时就会出现端口冲突问题。为了避免这个问题呢我们就可以修改端口号。 如果要修改vue项目的端口号就可以在创建的vue项目的配置文件 vue.config.js 中添加如下配置。 devServer: {port: 7000} 添加后的完整配置为
const { defineConfig } require(vue/cli-service)
module.exports defineConfig({transpileDependencies: true,devServer: {port: 7000}
}) 此时我们再次重新启动前端工程就会看到占用的端口号为 7000。 2.3 Vue项目开发流程 vue 项目的入口js文件就是创建工程时默认生成的 main.js 。 在main.js 文件中导入了App.vue这个根组件。 我们就可以在App.vue这个根组件中来定义页面内容、行为和样式 。 vue的组件文件是以 .vue 结尾的每个组件由三个部分组成template、script、style。
template ... /template : 模板部分由它生成HTML代码script ... /script : 控制模板的数据来源和行为 style ... /style : css样式部分
示例自定义一个Vue组件去使用
在views文件夹中创建一个vue文件注意后缀一定是 .vue 。命名 xxxxxView.vue
在DemoView中书写
templatedivh1Hello Vue!!!/h1/div
/templatescript
/scriptstyle
/style 在App.vue中使用
templatediv idapp!-- 2 使用 --DemoView/DemoView/div
/templatescript
// 1 import 导入import DemoView from /views/DemoView.vueexport default{components:{DemoView}}/script
查看 运行项目打开网址查看内容3. Vue组件库Element Element是饿了么公司研发的一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 。 组件组成网页的部件例如 超链接、按钮、图片、表格、表单、分页条等等 。 官网https://element.eleme.cn/#/zh-CNListener 我们可以来看看我们原来通过HTML所编写的页面按钮与表单与Element提供的现成组件之间的区别上面是原始html下面是Element 通过对比我们可以明显的看出 Element提供的组件明显好看的多完胜 使用 Element 整体的思路 拷贝 修改。 3.1 快速入门
接下来我们就在刚才基于vue-cli脚手架创建出来的vue项目中来演示Element的相关组件。 首先通过一个快速入门快速感受一下Element的组件 。 具体操作步骤如下 A. 安装ElementUI组件库(在当前工程的目录下)在命令行执行命令 npm install element-ui2.15.3 B. 在main.js中引入ElementUI组件库
import ElementUI from element-ui;
import element-ui/lib/theme-chalk/index.css;Vue.use(ElementUI); 引入之后的完整代码为:
import Vue from vue
import App from ./App.vue
import router from ./router
import ElementUI from element-ui;
import element-ui/lib/theme-chalk/index.css;Vue.use(ElementUI);
Vue.config.productionTip falsenew Vue({router,render: h h(App)
}).$mount(#app) C. 在views目录下 创建一个子文件夹 element_components然后再 ElementView.vue 访问官方网站复制组件代码到 ElementView.vue以 Button按钮 组件为例 点击显示代码之后就会将组件的源代码显示出来然后直接复制过来放在 ElementView.vue对应的位置template中的代码就放在template中script的代码就放在script中style的代码就放在style中即可。 D. 在 main.js 中引入该组件.
import ElementUI from element-ui
import element-ui/lib/theme-chalk/index.cssVue.use(ElementUI) E. 在VsCode中直接启动工程。 F. 访问 3.2 常用组件 3.2.1 Table表格
1). 介绍 Table表格用于展示多条结构类似的数据可对数据进行排序、筛选、对比或其他自定义操作。
官方文档Element - The worlds most popular Vue UI framework 在左菜单栏找到 Table 表格并点击右边主体就会定位到表格这一块找到我们需要的表格效果如上图点击 显示代码 就可以看到这个表格的代码了。 将html标签拷贝到 template中的div idapp /div 中如下 将方法和模型数据拷贝到 Vue 对象指定的位置(script ... /script) 拷贝完成后通过浏览器打开就可以看到表格的效果。 表格效果出来了但是显示的表头和数据并不是我们想要的所以接下来就需要对页面代码进行修改了。 2). 说明
下面是对表格代码进行分析的图解。根据下图说明修改自己的列数和列名 如果我们想设置table表格的其他属性样式可以将文档继续往下滑动在每一个组件的最下面都会有该组件详细的属性、事件说明。 3.2.2 Pagination分页条 介绍当数据量过多时使用分页分解数据。 常见属性说明 page-size 每页显示的条目数page-sizes 每页显示个数选择器的选项设置。currentPage 当前页码。我们点击那个页码此属性值就是几。total 总记录数。用来设置总的数据条目数该属性设置后 Element 会自动计算出需分多少页并给我们展示对应的页码。事件说明
size-change pageSize 改变时会触发。也就是当我们改变了每页显示的条目数后该事件会触发。current-change currentPage 改变时会触发。也就是当我们点击了其他的页码后该事件会触发。3.2.3 Dialog对话框
介绍在保留当前页面状态的情况下告知用户并承载相关操作。 常见属性说明
对于Dialog对话框来说visible 属性是最重要的控制对话框的展示与隐藏如果为true则展示如果为false则隐藏。 3.2.4 Form表单
介绍由输入框、选择器、单选框、多选框等控件组成用以收集、校验、提交数据 常见属性说明 3.3 案例 3.3.1 需求 需求根据产品原型完成员工管理列表展示的页面开发并通过Axios完成数据异步加载。 页面原型在资料中已经提供本案例我们需要完成的页面效果如下 3.3.2 分析 要通过ElementUI实现上述的需求我们通过分析发现需要用Element中的如下组件 A. Container容器布局
B. Form表单
C. Button按钮
D. Table表格 而表格中展示的数据是需要通过Axios动态加载的所以在我们的vue项目中我们还需要引入Axios的依赖。 3.3.3 环境准备 由于需要用到Axios我们先在当前项目中安装Axios。在当前项目的目录下执行命令
npm install axios 3.3.4 案例实现 1). 页面布局 在Element的container布局中有各种各样的布局我们只需要参考官方组件的源码适当修改即可。
基础布局的页面源代码如下
templatedivel-container styleheight: 720px; border: 1px solid #eeeel-header stylefont-size: 40px; font-weight: bold;Tlias 智能学习辅助系统/el-headerel-container styleheight: 500px; border: 1px solid #eeeel-aside width200px stylebackground-color: rgb(238, 241, 246)el-menu :default-openeds[1]el-submenu index1template slottitlei classel-icon-message/i系统信息管理/templateel-menu-item-groupel-menu-item index1-1i classel-icon-user-solid/i部门管理/el-menu-itemel-menu-item index1-2i classel-icon-user/i员工管理/el-menu-item/el-menu-item-group/el-submenu/el-menu/el-asideel-containerel-mainel-table :datatableDatael-table-column propdate label日期 width140/el-table-columnel-table-column propname label姓名 width120/el-table-columnel-table-column propaddress label地址/el-table-column/el-tablebr!-- 分页条 --el-paginationbackgroundlayoutsizes, total, prev, pager, next, jumper:total1000/el-pagination/el-main/el-container/el-container/el-container/div
/template
script
export default {data () {return {}}
}
/script
style.el-header {background-color: #B3C0D1;color: #333;line-height: 60px;}.el-aside {color: #333;}
/style
scriptexport default {data() {const item {date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄};return {tableData: Array(10).fill(item)}}};
/script 展示效果为 2). 搜索表单 我们所需要的表单包括姓名 性别 入职日期的时间组件。 我们从ElementUI的组件库中查找对应的组件然后做适当的修改即可。 搜索框完整的页面代码如下
templatedivel-container styleheight: 720px; border: 1px solid #eeeel-header stylefont-size: 40px; font-weight: bold;Tlias 智能学习辅助系统/el-headerel-container styleheight: 500px; border: 1px solid #eeeel-aside width200px stylebackground-color: rgb(238, 241, 246)el-menu :default-openeds[1]el-submenu index1template slottitlei classel-icon-message/i系统信息管理/templateel-menu-item-groupel-menu-item index1-1i classel-icon-user-solid/i部门管理/el-menu-itemel-menu-item index1-2i classel-icon-user/i员工管理/el-menu-item/el-menu-item-group/el-submenu/el-menu/el-asideel-containerel-mainel-form :inlinetrue :modelform classdemo-form-inlineel-form-item label姓名el-input v-modelform.name placeholder请输入姓名/el-input/el-form-itemel-form-item label性别el-select v-modelform.gender placeholder请输入性别el-option label男 value1/el-optionel-option label女 value2/el-option/el-select/el-form-itemel-form-item label入职时间el-form-itemel-date-picker typedate placeholder选择日期 v-modelform.date1 stylewidth: 100%;/el-date-picker/el-form-itemel-form-itemel-date-picker typedate placeholder选择日期 v-modelform.date2 stylewidth: 100%;/el-date-picker/el-form-item/el-form-itemel-form-itemel-button typeprimary查询/el-button/el-form-item/el-formbrel-table :datatableDatael-table-column propdate label日期 width140/el-table-columnel-table-column propname label姓名 width120/el-table-columnel-table-column propaddress label地址/el-table-column/el-tablebr!-- 分页条 --el-paginationbackgroundlayoutsizes, total, prev, pager, next, jumper:total1000/el-pagination/el-main/el-container/el-container/el-container/div
/template
script
export default {data () {return {}}
}
/script
style.el-header {background-color: #B3C0D1;color: #333;line-height: 60px;}.el-aside {color: #333;}
/style
scriptexport default {data() {const item {date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄};return {tableData: Array(10).fill(item),form: {name: ,region: ,gender: ,date1: ,date2: }}}};
/script 展示效果为 3). Table表格完善 根据产品原型、需求、已经Mock数据地址返回的数据改造table组件适当的添加和修改列。
在图片展示、性别展示时需要获取当这一行数据中的 image 和 gender 字段这里可以使用Vue中的插槽来解决。
表格完整的页面代码如下
templatedivel-container styleheight: 720px; border: 1px solid #eeeel-header stylefont-size: 40px; font-weight: bold;Tlias 智能学习辅助系统/el-headerel-container styleheight: 500px; border: 1px solid #eeeel-aside width200px stylebackground-color: rgb(238, 241, 246)el-menu :default-openeds[1]el-submenu index1template slottitlei classel-icon-message/i系统信息管理/templateel-menu-item-groupel-menu-item index1-1i classel-icon-user-solid/i部门管理/el-menu-itemel-menu-item index1-2i classel-icon-user/i员工管理/el-menu-item/el-menu-item-group/el-submenu/el-menu/el-asideel-containerel-mainel-form :inlinetrue :modelform classdemo-form-inlineel-form-item label姓名el-input v-modelform.name placeholder请输入姓名/el-input/el-form-itemel-form-item label性别el-select v-modelform.gender placeholder请输入性别el-option label男 value1/el-optionel-option label女 value2/el-option/el-select/el-form-itemel-form-item label入职时间el-form-itemel-date-picker typedate placeholder选择日期 v-modelform.date1 stylewidth: 100%;/el-date-picker/el-form-itemel-form-itemel-date-picker typedate placeholder选择日期 v-modelform.date2 stylewidth: 100%;/el-date-picker/el-form-item/el-form-itemel-form-itemel-button typeprimary查询/el-button/el-form-item/el-formel-button typeprimary sizesmall 添加员工/el-buttonel-button typeprimary sizesmall- 批量删除/el-buttonbrbrel-table :datatableData borderel-table-column propname label姓名 width180/el-table-columnel-table-column propimage label图像 width180template slot-scopescopeel-image stylewidth: 100px; height: 60px :srcscope.row.image /el-image/template/el-table-columnel-table-column propgender label性别 width140template slot-scopescope{{scope.row.gender 1? 男 : 女}}/template/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操作 template slot-scopescopeel-button typeprimary sizemini clickedit(scope.row.id)编辑/el-buttonel-button typedanger sizemini clickdelete(scope.row.id)删除/el-button/template/el-table-column/el-tablebr!-- 分页条 --el-paginationbackgroundlayoutsizes, total, prev, pager, next, jumper:total1000/el-pagination/el-main/el-container/el-container/el-container/div
/template
script
export default {data () {return {}}
}
/script
style.el-header {background-color: #B3C0D1;color: #333;line-height: 60px;}.el-aside {color: #333;}
/style
scriptexport default {data() {const item {id: 1,name: 谢逊,image: https://web-framework.oss-cn-hangzhou.aliyuncs.com/03b7b8836e4aec3015bd937938951170.jpeg,gender: 1,job: 班主任,entrydate: 2008-05-09,updatetime: 2022-10-01 12:00:00};return {tableData: Array(4).fill(item),form: {name: ,region: ,gender: ,date1: ,date2: }}},methods: {edit:function(id){console.log(编辑数据: id);},delete:function(id){console.log(删除数据: id);}}};
/script 展示效果为 4). 发送异步请求 目前页面中展示的数据还是静态的模拟数据。那最终我们是需要发送异步请求请求服务端获取数据的。 所以接下来我们就需要通过Axios发送异步请求来获取数据然后展示在页面上 。
scriptimport axios from axios;export default {data() {return {tableData: [],form: {name: ,region: ,gender: ,date1: ,date2: }}},methods: {edit:function(id){console.log(编辑数据: id);},delete:function(id){console.log(删除数据: id);}},mounted () {axios.get(https://mock-java.itheima.net/mock/13530/emp/list).then((result) {this.tableData result.data.data ; });}};
/script 整个案例的完整代码如下
templatedivel-container styleheight: 720px; border: 1px solid #eeeel-header stylefont-size: 40px; font-weight: bold;Tlias 智能学习辅助系统/el-headerel-container styleheight: 500px; border: 1px solid #eeeel-aside width200px stylebackground-color: rgb(238, 241, 246)el-menu :default-openeds[1]el-submenu index1template slottitlei classel-icon-message/i系统信息管理/templateel-menu-item-groupel-menu-item index1-1i classel-icon-user-solid/i部门管理/el-menu-itemel-menu-item index1-2i classel-icon-user/i员工管理/el-menu-item/el-menu-item-group/el-submenu/el-menu/el-asideel-containerel-mainel-form :inlinetrue :modelform classdemo-form-inlineel-form-item label姓名el-input v-modelform.name placeholder请输入姓名/el-input/el-form-itemel-form-item label性别el-select v-modelform.gender placeholder请输入性别el-option label男 value1/el-optionel-option label女 value2/el-option/el-select/el-form-itemel-form-item label入职时间el-form-itemel-date-picker typedate placeholder选择日期 v-modelform.date1 stylewidth: 100%;/el-date-picker/el-form-itemel-form-itemel-date-picker typedate placeholder选择日期 v-modelform.date2 stylewidth: 100%;/el-date-picker/el-form-item/el-form-itemel-form-itemel-button typeprimary查询/el-button/el-form-item/el-formel-button typeprimary sizesmall 添加员工/el-buttonel-button typeprimary sizesmall- 批量删除/el-buttonbrbrel-table :datatableData borderel-table-column propname label姓名 width180/el-table-columnel-table-column propimage label图像 width180template slot-scopescopeel-image stylewidth: 100px; height: 60px :srcscope.row.image/el-image/template/el-table-columnel-table-column propgender label性别 width140template slot-scopescope{{scope.row.gender 1? 男 : 女}}/template/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操作 template slot-scopescopeel-button typeprimary sizemini clickedit(scope.row.id)编辑/el-buttonel-button typedanger sizemini clickdelete(scope.row.id)删除/el-button/template/el-table-column/el-tablebr!-- 分页条 --el-paginationbackgroundlayoutsizes, total, prev, pager, next, jumper:total1000/el-pagination/el-main/el-container/el-container/el-container/div
/template
script
export default {data () {return {}}
}
/script
style.el-header {background-color: #B3C0D1;color: #333;line-height: 60px;}.el-aside {color: #333;}
/style
scriptimport axios from axios;export default {data() {return {tableData: [],form: {name: ,region: ,gender: ,date1: ,date2: }}},methods: {edit:function(id){console.log(编辑数据: id);},delete:function(id){console.log(删除数据: id);}},mounted () {axios.get(https://mock-java.itheima.net/mock/13530/emp/list).then((result) {this.tableData result.data.data ; });}};
/script
