配置数据库
项目准备:创建数据库
编写pojo文件
package com.example.pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Peot {
private Integer id;
private String author;
private String gender;
private String dynasty;
private String title;
private String style;
}
package com.example.pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@NoArgsConstructor
@AllArgsConstructor
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.mapper;
import com.example.pojo.Peot;
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 PeotMapper {
@Select("select * from peom")
public List<Peot> findAll();
}
测试sql语句是否正确
编写Service文件
package com.example.service;
import com.example.pojo.Peot;
import com.example.pojo.Result;
import java.util.List;
public interface PeotService {
public List<Peot> findAll();
}
package com.example.service.impl;
import com.example.mapper.PeotMapper;
import com.example.pojo.Peot;
import com.example.pojo.Result;
import com.example.service.PeotService;
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 PeotServiceImpl implements PeotService {
@Autowired
private PeotMapper peotMapper;
//直接返回数据列表
@Override
public List<Peot> findAll() {
return peotMapper.findAll();
}
}
编写Controller文件
package com.example.controller;
import com.example.pojo.Peot;
import com.example.pojo.Result;
import com.example.service.PeotService;
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 PeotController {
@Autowired
private PeotService peotService;
//查询全部,返回的是Result类型的json数据。
@RequestMapping("/peotfindAllJson")
public Result findAllJson(){
return Result.success(peotService.findAll());
}
//查询全部,返回的是Result类型的json数据。
@RequestMapping("/peotfindAll")
public List<Peot> findAll(){
return peotService.findAll();
}
}
编写接口文档
mock地址的json数据
{
"code": 1,
"msg": "success",
"data": [
{
"id": 1,
"author": "陶渊明",
"gender": "1",
"dynasty": "东晋末至南朝宋初期",
"title": "诗人和辞赋家",
"style": "古今隐逸诗人之宗"
},
{
"id": 3,
"author": "李商隐",
"gender": "2",
"dynasty": "唐代",
"title": "诗坛鬼才",
"style": "无"
},
{
"id": 4,
"author": "李白",
"gender": "1",
"dynasty": "唐代",
"title": "诗仙",
"style": "豪放飘逸的诗风和丰富的想象力"
},
{
"id": 5,
"author": "李清照",
"gender": "2",
"dynasty": "宋代",
"title": "女词人",
"style": "婉约风格"
},
{
"id": 6,
"author": "杜甫",
"gender": "1",
"dynasty": "唐代",
"title": "诗圣",
"style": "反映社会现实和人民疾苦"
},
{
"id": 7,
"author": "苏轼",
"gender": "1",
"dynasty": "北宋",
"title": "文学家、书画家,诗神",
"style": "清新豪健的诗风和独特的艺术表现力"
},
{
"id": 9,
"author": "王维",
"gender": "1",
"dynasty": "11",
"title": "11",
"style": "11"
},
{
"id": 12,
"author": "王维",
"gender": "0",
"dynasty": "唐代11",
"title": "诗佛11",
"style": "空灵、寂静11"
},
{
"id": 13,
"author": "2221111",
"gender": "22",
"dynasty": "22",
"title": "22",
"style": "22"
},
{
"id": 14,
"author": "王维",
"gender": "1",
"dynasty": "唐代",
"title": "诗佛",
"style": "空灵、寂静"
},
{
"id": 17,
"author": "0000",
"gender": "1",
"dynasty": "0000",
"title": "000",
"style": "000"
},
{
"id": 18,
"author": "热帖",
"gender": "0",
"dynasty": "特瑞",
"title": "特热",
"style": "天热"
},
{
"id": 19,
"author": "热帖",
"gender": "0",
"dynasty": "特瑞",
"title": "特热",
"style": "天热"
},
{
"id": 20,
"author": "热舞",
"gender": "0",
"dynasty": "问题",
"title": "特",
"style": "他"
},
{
"id": 21,
"author": "111",
"gender": "1",
"dynasty": "11111",
"title": "11111",
"style": "1111"
},
{
"id": 22,
"author": "3333",
"gender": "0",
"dynasty": "333",
"title": "33",
"style": "33"
}
]
}
云端MOCK使用快捷请求
云端地址
https://mock.apifox.com/m1/3833657-0-default/peotfindAll
复制云端地址:https://mock.apifox.com/m1/3833657-0-default/peotfindAll保存用例
二、编写基于vue的静态页面
2.1 拷贝axios和vue的被包含文件
编写peot_list_nofenye.html
更改contrller文件mount中的地址
3.2 地址栏访问 http://localhost:8080/peot_list_nofenye.html