第六次web作业

最新推荐文章于 2024-10-14 18:12:09 发布

zy20040726

最新推荐文章于 2024-10-14 18:12:09 发布

阅读量207

点赞数 3

文章标签：前端

本文链接：https://blog.csdn.net/zy20040726/article/details/139887754

版权

1、项目准备：新建项目，并删除自带demo程序，修改application.properties.

# 应用服务 WEB 访问端口
server.port=8080
#下面这些内容是为了让MyBatis映射
#指定Mybatis的Mapper文件
mybatis.mapper-locations=classpath:mappers/*xml
#指定Mybatis的实体目录
mybatis.type-aliases-package=com.wust.mybatis.entity

#数据库连接
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/poem
spring.datasource.username=root
spring.datasource.password=1234
#开启mybatis的日志输出
mybatis.configuration.logimpl=org.apache.ibatis.logging.stdout.StdOutImpl
#开启数据库表字段
#实体类属性的驼峰映射
mybatis.configuration.map-underscore-to-camel-case=true

2、使用Apifox准备好json数据的mock地址

3、编写基于vue的静态页面

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

<script src="./js/vue.js"></script>
<script src="./js/axios-0.18.0.js"></script>

<body>

<h1 align="center">诗人信息列表展示</h1>

<div id="app" align="center">
  <table border="1" cellspacing="0" width="60%">
    <tr>
      <th>序号</th>
      <th>姓名</th>
      <th>性别</th>
      <th>朝代</th>
      <th>头衔</th>
      <th>风格</th>
      <th>操作</th>
    </tr>
    <tr align="center" v-for="(peot,index) in tableData">
      <td>{{peot.number}}</td>
      <td>{{peot.name}}</td>
      <td>{{peot.gender}}</td>
      <td>{{peot.dynasty}}</td>
      <td>{{peot.title}}</td>
      <td>{{peot.style}}</td>
      <td class="text-center">
        <!--a :href="'peot_edit.html?id='+peot.id"-->
        <!--button type="button" @click="deleteId(peot.id)-->
        修改
        删除
      </td>
    </tr>
  </table>
</div>
</body>
<script>
  new Vue({
    el: "#app",
    data() {
      return {
        tableData: []
      }
    },
    mounted(){
      //peotfindAll
      axios.get('https://mock.apipark.cn/m1/4703748-4355740-default/peotfindAll').then(res=>{
        if(res.data.code){
          this.tableData = res.data.data;
        }
      });
    },
  });
</script>
</html>