《web应用技术》第6次课后作业

最新推荐文章于 2024-09-30 15:42:36 发布

小金牛piano

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量146

点赞数 2

文章标签：前端 vue.js elementui

本文链接：https://blog.csdn.net/m0_74924408/article/details/138969325

版权

一、诗人信息列表展示的页面

 <template>
        <el-table
                :data="poetList"
                stripe
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="序号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="gender"
                    label="性别">
            </el-table-column>
            <el-table-column
                    prop="dynasty"
                    label="朝代">
            </el-table-column>
            <el-table-column
                    prop="title"
                    label="称号">
            </el-table-column>
            <el-table-column
                    prop="style"
                    label="风格">
            </el-table-column>
            <el-table-column label="操作">
                <el-button type="primary" plain>修改</el-button>
                <el-button type="primary" plain>删除</el-button>
            </el-table-column>
        </el-table>
    </template>

二、自己编写一个数据库表格进行数据显示

package com.lenovo.springbootmybatis.data;
 
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
 
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Student {
    private String Sno;
    private String Sname;
    private Integer gender;
    private String Stelephone;
    private String Saddress;
}

package com.lenovo.springbootmybatis.mapper;
 
import com.lenovo.springbootmybatis.data.Student;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
 
import java.util.List;
 
@Mapper
public interface StudentMapper {
    @Select("select * from student")
    public List<Student> selectall();
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>student</title>
  <script src="./js/vue.js"></script>
  <script src="./js/axios-0.18.0.js"></script>
  <link rel="stylesheet" href="element-ui/index.css">
  <script src="./element-ui/index.js"></script>
</head>
<body>
<h1 style="text-align: center">学生信息列表</h1>
<div id="app" align="center">
 
  <template>
    <el-table
            :data="studentlist"
            style="width: 100%">
      <el-table-column
              prop="sno"
              label="学号"
              width="180">
      </el-table-column>
      <el-table-column
              prop="sname"
              label="姓名"
              width="180">
      </el-table-column>
      <el-table-column
              prop="ssex"
              label="性别">
      </el-table-column>
      <el-table-column
              prop="stelephone"
              label="电话号码">
      </el-table-column>
      <el-table-column
              prop="saddress"
              label="地址">
      </el-table-column>
    </el-table>
  </template>
 
 
</div>
<script>
  new Vue({
    el:"#app",
    data(){
      return{
        studentlist:[]
      }
    },
    mounted(){
      axios.get('/student').then(res=>{
        if(res.data.statusCode){
          this.studentlist=res.data.data;
        }
      })
    }
  })
 
 
 
</script>
 
 
 
</body>
</html>