web三层结构前端的页面文件

pz0519前端页面.zip 326.31KB

资源文件列表:

前端页面.zip 大约有12个文件

前端页面/
前端页面/element-ui/
前端页面/element-ui/index.css 227.04KB
前端页面/element-ui/index.js 553.77KB
前端页面/element-ui/theme-chalk/
前端页面/element-ui/theme-chalk/fonts/
前端页面/element-ui/theme-chalk/fonts/element-icons.ttf 54.64KB
前端页面/element-ui/theme-chalk/fonts/element-icons.woff 27.54KB
前端页面/emp.html 1.87KB
前端页面/js/
前端页面/js/axios-0.18.0.js 12.64KB
前端页面/js/vue.js 333.46KB

资源介绍:

web三层结构前端的页面文件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>员工信息</title> </head> <link rel="stylesheet" href="element-ui/index.css"> <script src="./js/vue.js"></script> <script src="./element-ui/index.js"></script> <script src="./js/axios-0.18.0.js"></script> <body> <h1 align="center">员工信息列表展示</h1> <div id="app"> <el-table :data="tableData" style="width: 100%" stripe border > <el-table-column prop="name" label="姓名" align="center" min-width="20%"></el-table-column> <el-table-column prop="age" label="年龄" align="center" min-width="20%"></el-table-column> <el-table-column label="图像" align="center" min-width="20%"> <template slot-scope="scope"> <el-image :src="scope.row.image" style="width: 80px; height: 50px;"></el-image> </template> </el-table-column> <el-table-column prop="gender" label="性别" align="center" min-width="20%"></el-table-column> <el-table-column prop="job" label="职位" align="center" min-width="20%"></el-table-column> </el-table> </div> </body> <style> .el-table .warning-row { background: oldlace; } .el-table .success-row { background: #f0f9eb; } </style> <script> new Vue({ el: "#app", data() { return { tableData: [] } }, mounted(){ axios.get('/listEmp').then(res=>{ if(res.data.code){ this.tableData = res.data.data; } }); }, methods: { } }); </script> </html>