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

最新推荐文章于 2024-07-04 16:37:43 发布
最新推荐文章于 2024-07-04 16:37:43 发布
阅读量205 收藏 5
点赞数 2
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_76124361/article/details/138662452
版权

参照所给的代码，完成诗人信息列表展示的页面。

目录结构

准备工作

  • 在Database处添加数据库，配置数据源，辅助sql语句编写

  • 在application.properties中进行数据库连接

  • 创建实体类Poet和Result
//创建Poet实体类
package com.example.web.Pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Poet {
    private Integer id;
    private String name;
    private String gender;
    private String dynasty;
    private String title;
    private String style;
}

//创建Result实体类，用于返回统一结果
package com.example.web.Pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Result {
    private Integer code;//响应码，1 代表成功; 0 代表失败
    private String msg;  //响应信息 描述字符串
    private Object data; //返回的数据
    //增删改 成功响应
    public static Result success(){
        return new Result(1,"success",null);
    }
    //查询 成功响应
    public static Result success(Object data){
        return new Result(1,"success",data);
    }
    //失败响应
    public static Result error(String msg){
        return new Result(0,msg,null);
    }

}

Mapper层访问并获得数据

package com.example.web.Mapper;

import com.example.web.Pojo.Poet;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

import java.util.List;

@Mapper
public interface PoetMapper {
    @Select("select * from information")
    public List<Poet>  select();
}

Service层处理并传递数据

//创建接口PoetService
package com.example.web.Service;

import com.example.web.Pojo.Poet;

import java.util.List;

public interface PoetService {
    public List<Poet> select();
}
//重写方法，实现接口
package com.example.web.Service;

import com.example.web.Mapper.PoetMapper;
import com.example.web.Pojo.Poet;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
//@Service 是 Spring 框架提供的一种注解，用于标识一个类作为服务层组件 (Service)。
// 通过使用 @Service 注解，可以将一个普通的 Java 类标记为服务层组件，并由 Spring 容器进行管理和注入。
public class PoetService2 implements PoetService {
    @Autowired
    private PoetMapper poetMapper;
    
    @Override
    public List<Poet> select() {
        return poetMapper.select();
    }

}

Controller层获取请求并响应数据

package com.example.web.Controller;


import com.example.web.Pojo.Poet;
import com.example.web.Pojo.Result;
import com.example.web.Service.PoetService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
//相当于@ResponseBody＋@Controller
//Controller中的方法会用于返回页面视图的
//@ResponseBody注解标识后，响应数据可以是文本或者JSON数据类型
public class PoetController {

    @Autowired
    private PoetService poetService;

    //查询全部，返回的是Result类型的json数据。
    @RequestMapping("/peotfindAllJson")
    public Result selectjson(){
        return  Result.success(poetService.select());
    }

    //查询全部，返回的是Poet类型的list数据。
    @RequestMapping("/peotfindAll")
    public List<Poet> select(){
        return poetService.select();
    }

}

前端页面展示

<!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 in tableData">
      <td>{{peot.id}}</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">修改 删除</td>
    </tr>
  </table>
</div>
</body>

<script>
  new Vue({
    el: "#app",
    data() {
      return {
        tableData: []
      }
    },
    mounted(){
      //https://mock.apifox.com/m1/3761592-3393136-default/peotfindAll?apifoxApiId=171587808

      //peotfindAll   返回类型为List类型
      axios.get('peotfindAll').then(res=>{
        this.tableData = res.data;
      });
    },

  });
</script>
</html>

<!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">诗人信息列表展示json</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 in tableData">
            <td>{{peot.id}}</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">修改 删除</td>
        </tr>
    </table>
</div>
</body>

<script>
    new Vue({
        el: "#app",
        data() {
            return{
                tableData: []
            }
        },
        mounted(){
            //在apifox中建立的mock地址
            // https://mock.apifox.com/m1/3761592-3393136-default/peotfindAll?apifoxApiId=171587808
            //peotfindAllJson  返回类型为Result
                 axios.get('peotfindAllJson').then(res=>{
                    if(res.data.code){
                      this.tableData = res.data.data;
                    }
            });
        },
    });
</script>
</html>

二者区别在于异步请求地址及处理逻辑不同，前者直接返回listpoet列表，并赋值给tableData，进行v-for循环，实现静态页面的展示；后者返回json数据，判断状态码是否等于1之后，再把json数据中的data赋值给tableData。

 

自己设计一个数据库表，并进行信息展示

目录结构

StudentMapper.java

package com.example.web.Mapper;

import com.example.web.Pojo.Student;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

import java.util.List;

@Mapper
public interface StudentMapper {
    @Select("select * from studentinformation")
    public List<Student> Select();
}

StudentService接口

package com.example.web.Service;

import com.example.web.Pojo.Student;

import java.util.List;

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

StudentService2.java

package com.example.web.Service;

import com.example.web.Mapper.StudentMapper;
import com.example.web.Pojo.Student;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;
@Service
public class StudentService2 implements StudentService{
    @Autowired
    private StudentMapper studentMapper;

    @Override
    public List<Student> SelectService() {
        return studentMapper.Select();
    }
}

StudentController.java

package com.example.web.Controller;


import com.example.web.Pojo.Student;
import com.example.web.Service.StudentService;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
public class StudentController {
    @Autowired
    private StudentService studentService;

    //查询全部，返回的是Student类型的list数据。
    @RequestMapping("/StudentsAll")
    public List<Student> selectController(){
        return studentService.SelectService();
    }
}

Student.java

package com.example.web.Pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Student {
    private String Sno;
    private String Sname;
    private String Ssex;
}

student_list.html

<!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>
    </tr>
    <tr align="center" v-for="student in tableData">
      <td>{{student.sno}}</td>
      <td>{{student.sname}}</td>
      <td>{{student.ssex}}</td>
      <td class="text-center">修改 删除</td>
    </tr>
  </table>
</div>
</body>

<script>
  new Vue({
    el: "#app",
    data() {
      return {
        tableData: []
      }
    },
    mounted(){
      //https://mock.apifox.com/m1/3761592-3393136-default/peotfindAll?apifoxApiId=171587808

      //peotfindAll   返回类型为List类型
      axios.get('StudentsAll').then(res=>{
        this.tableData = res.data;
      });
    },

  });
</script>
</html>

Glorysunfan
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
web应用技术 第三次课后作业
lengxiaoyi__的博客
04-17 150
1.springboots
《web》应用技术第六次课后作业
最新发布
hjw1970551826的博客
07-04 100
通过mybatis和vue展示了一个表格，并在element-ui官网使用组件对表格进行美化。
《web应用技术》第六次课后作业
2202_75844191的博客
05-10 300
联系Mybatis技术和vue框架在表格中显示简单数据利用element组件美化后的表格以及关键代码如下。
《web应用技术》第6次课后作业
m0_74859433的博客
07-04 186
【代码】《web应用技术》第6次课后作业。
《web应用技术》第11次课后作业
m0_74859433的博客
07-04 140
多个过滤器形成一个过滤器链，按类名（字符串）的自然排序执行。可以使用注解来配置这些过滤器。获取请求头中的令牌（token）,判断令牌是否存在，不存在则返回错误结果（未登录）获取请求URL,判断请求URL中是否包含login，若包含则是登录操作，放行。解析token，解析失败则返回错误结果（未登录）,令牌校验通过后，放行请求。/notices/* 访问 /notices 下的所有资源都会被拦截。/login 只拦截登录页面。/* 访问所有资源都会被拦截。配置Filter拦截路径。
《web应用技术》第8次课后作业
a1833919188的博客
06-25 194
明确课程设计的小组题目，并认领功能模块（课程设计中要求个人独立完成该模块的前后端所有功能的开发请具体说明。我们组课程设计的题目是：仓库管理，我认领的功能模块是：仓库信息。
第五次课后作业
2302_76973330的博客
04-26 894
Mybatis是一个持久层框架，用于简化jdbc的开发，mybatis操作数据库是在java程序当中编写SQL语句，然后将SQL语句发给数据库执行。
C#网络应用编程第3版 马骏 课后答案.rar
06-14
《C#网络应用编程》是马骏先生撰写的一本深入探讨C#在构建网络应用程序方面的专著，第三版更是对前两版的完善和提升，旨在帮助开发者掌握使用C#进行网络编程的核心技术和实践方法。这本书涵盖了从基础的网络概念到...
林子雨大数据技术原理及应用第五章课后作业答案.docx
09-14
- 文档数据库：适用于Web应用，存储半结构化数据，便于快速开发。 - 图形数据库：适合社交网络、推荐系统等需要处理复杂关系的场景。 7. CAP理论： - C（一致性）：数据一致性，所有节点在同一时间具有相同数据...
第二天课后作业练习的练习答案展示
02-26
"第二天课后作业练习的练习答案展示"这一主题，旨在帮助学员们对照答案，理解并检查自己在完成作业时的理解是否准确，进一步深化对相关知识点的掌握。下面我们将详细探讨可能涉及到的IT知识领域和具体知识点。 首先...
使用SSM开发企业级应用第7章课后作业答案.rar
10-21
6.配置MyBatis应用配置文件，配置MyBatis应用配置文件MyBatis-Configuration.xml。 7.配置Spring应用配置文件 第2题 回答要点： 使用org.mybatis.spring.mapper.MapperFactoryBean创建数据映射器 使用org.mybatis....
第三天课后作业练习的练习答案展示
02-26
在这个“第三天课后作业练习”的场景中，我们可能涉及到一系列关于HTML的知识点，包括但不限于以下内容： 1. HTML基础结构：一个基本的HTML文件通常包含`<!DOCTYPE html>`声明，指示浏览器使用哪种HTML版本来解析...
WHAT - NextJS 的路由系统和 react-router-dom
weixin_58540586的博客
07-04 861
不，Next.js 的路由系统并不基于。Next.js 本身内置了自己的路由系统，并且在其生命周期和工作方式上与有所不同。
Vuex 核心揭秘：打造高效前端状态库
a3098448071的博客
07-03 1079
状态（State）类似于 Vue 组件的data属性，用于存储组件的响应式数据。在 Vuex 中，state用于存储整个应用的全局状态。Getters类似于 Vue 组件的computed计算属性，它们用于从其他数据派生出新的数据。在 Vuex 中，getters用于从state中派生出一些状态，这些状态可以根据state的变化而缓存或重新计算。Mutations类似于 Vue 组件的methods中的方法，用于改变组件的data。在 Vuex 中，mutations用于改变state。
Vue前端打包
weixin_63680330的博客
07-04 262
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
JWT（JSON Web Token）
Casual_Lei的博客
07-03 1262
JWT 提供了一种简洁而强大的方式来进行身份验证和授权，特别适用于分布式系统和微服务架构。Spring Security 通过其强大的扩展机制，使得与 JWT 的集成变得非常简单和高效。通过了解和应用这些技术，开发者可以构建出安全、可靠的现代 Web 应用。
ESP32-Web-Server编程- 使用 mDNS 建立域名系统
wangyx1234的博客
07-02 241
1）本节首先介绍了 DNS 域名服务系统，然后引出了 mDNS（multicast DNS，组播 DNS）系统的基本原理。 2）在 ESP32 Web Server 系统中部署 mDNS 服务，并演示了通过建立的域名访问 Web 服务器的方法。
react自定义hooks---useCounter
weixin_73098736的博客
07-02 277
【代码】react自定义hooks---useCounter。
《电力电子技术第二版》课后习题及解答.pdf
07-13
"《电力电子技术第二版》课后习题及解答，涵盖了关于晶闸管的多个核心知识点，包括其导通与关断条件、温度对晶闸管参数的影响、非正常导通方式、关断时间定义、晶闸管的派生器件，以及光控晶闸管的特性。" 在电力...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值