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

最新推荐文章于 2024-09-06 22:20:29 发布

vvvolcanoooo

最新推荐文章于 2024-09-06 22:20:29 发布

阅读量339

点赞数 9

文章标签：前端 vue.js elementui

本文链接：https://blog.csdn.net/2202_75844191/article/details/138679689

版权

1.显示诗人信息

联系Mybatis技术和vue框架在表格中显示简单数据

利用element组件美化后的表格以及关键代码如下

 <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>

2.自己编写一个数据库表格进行数据显示

先在数据库first中新建一个数据表Student，其中包括学生的学号，姓名，性别，电话，住址等信息。

再编写对应的实体类Student，具体代码如下：

package com.liuxiaocan.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;
}

编写对应的StudentMapper类实现对数据的基础查询操作，具体代码如下：

package com.liuxiaocan.springbootmybatis.mapper;

import com.liuxiaocan.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();
}

StudentService接口及其实现类：

public interface StudentService {
    public List<Student> selectallService();
}

@Service
public class StudentServiceA implements StudentService {
    @Autowired
    StudentMapper studentMapper;
    @Override
    public List<Student> selectallService() {
        return studentMapper.selectall();
    }
}

对应的StudentController类如下：

@RestController
public class StudentController {
    @Autowired
    StudentService studentService;
    @RequestMapping("/student")
    public Result select1(){
        return Result.success(studentService.selectallService());
    }

}

html界面代码如下：

<!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>