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

影Nothing

已于 2024-05-16 22:57:29 修改

阅读量126

点赞数 2

文章标签： vue.js spring boot mybatis

于 2024-05-16 20:53:49 首次发布

本文链接：https://blog.csdn.net/qq_74105106/article/details/138680136

版权

运行界面：

代码

前端

<!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="(poet,index) in tableData">
            <td>{{poet.id}}</td>
            <td>{{poet.name}}</td>
            <td>{{poet.gender}}</td>
            <td>{{poet.dynasty}}</td>
            <td>{{poet.title}}</td>
            <td>{{poet.style}}</td>
            <td class="text-center">
                <!--a :href="'poet_edit.html?id='+poet.id"-->
                <!--button type="button" @click="deleteId(poet.id)-->
                修改
                删除
            </td>
        </tr>
    </table>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                tableData: []
            }
        },
        mounted(){
            //peotfindAll
            axios.get('poetfindAllJson').then(res=>{
                if(res.data.code){
                    this.tableData = res.data.data;
                }
            });
        },
    });
</script>
</html>

后端+前后端联调

连接数据库

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

#数据库连接
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/db01
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

PoetController

package com.example.controller;

import com.example.pojo.Poet;
import com.example.pojo.Result;
import com.example.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
public class PoetController {

    @Autowired
    private PoetService poetService;

    //查询全部，返回的是Result类型的json数据。
    @RequestMapping("/poetfindAllJson")
    public Result findAllJson() {
        return Result.success(poetService.findAll());
    }
    //查询全部，返回的是Result类型的json数据。
    @RequestMapping("/poetfindAll")
    public List<Poet> findAll(){
        return poetService.findAll();
    }

}

poetMapper

package com.example.mapper;

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

import java.util.List;

@Mapper
//@Mapper: 这个注解一般使用在Dao层接口上，
// 相当于一个mapper.xml文件，它的作用就是将接口生成一个动态代理类。加入了@Mapper注解，
// 目的就是为了不再写mapper映射文件。这个注解就是用来映射mapper.xml文件的。
public interface PoetMapper {

    @Select("select * from poet")
    public List<Poet> findAll();

}

Pojo.Poet

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

PoetService

package com.example.service;


import com.example.pojo.Poet;
import com.example.pojo.Result;
import java.util.List;

public interface PoetService {
    public List<Poet> findAll();
}

PoetServiceimpl

package com.example.service.impl;

import com.example.mapper.PoetMapper;
import com.example.pojo.Poet;
import com.example.service.PoetService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class PoetServiceImpl implements PoetService {
    @Autowired
    private PoetMapper poetMapper;

    //直接返回数据列表
    @Override
    public List<Poet> findAll() {
        return poetMapper.findAll();

    }
}