基于springboot+mybatis+vue的项目实战之(后端+前后端联调)

慈云数据 7个月前 (05-09) 技术支持 36 0

步骤:

1、项目准备:创建数据库(之前已经创建则忽略),以及数据库连接

2、建立项目结构文件夹

3、编写pojo文件

4、编写mapper文件,并测试sql语句是否正确

5、编写service文件

6、编写controller文件

7、测试后端程序是否正确

8、前后端联调

1、项目准备:创建数据库(之前已经创建则忽略),以及数据库连接

use heima;
-- 诗人表
create table peom(
                     id int unsigned primary key auto_increment comment 'ID',
                     author varchar(100)  comment '姓名',
                     gender varchar(4) comment '性别, 1:男, 2:女',
                     dynasty varchar(100)  comment '朝代',
                     title varchar(100)  comment '头衔',
                     style varchar(100)  comment '风格'
) comment '诗人表';
-- 测试数据
insert into peom(id,author,gender, dynasty, title, style) VALUES (null,'陶渊明','1','东晋末至南朝宋初期','诗人和辞赋家','古今隐逸诗人之宗');
insert into peom(id,author,gender, dynasty, title, style) VALUES (null,'王维','1','唐代','诗佛','空灵、寂静');
insert into peom(id,author,gender, dynasty, title, style) VALUES (null,'李商隐','2','唐代','诗坛鬼才','无');
insert into peom(id,author,gender, dynasty, title, style) VALUES (null,'李白','1','唐代','诗仙','豪放飘逸的诗风和丰富的想象力');
insert into peom(id,author,gender, dynasty, title, style) VALUES (null,'李清照','2','宋代','女词人','婉约风格');
insert into peom(id,author,gender, dynasty, title, style) VALUES (null,'杜甫','1','唐代','诗圣','反映社会现实和人民疾苦');
insert into peom(id,author,gender, dynasty, title, style) VALUES (null,'苏轼','1','北宋','文学家、书画家,诗神','清新豪健的诗风和独特的艺术表现力');

2、建立项目结构文件夹

3、编写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);
    }
}

4、编写mapper文件,并测试sql语句是否正确

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 findAll();
}

5、编写service文件

package com.example.service;
import com.example.pojo.Peot;
import com.example.pojo.Result;
import java.util.List;
public interface PeotService {
    public List 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 findAll() {
        return peotMapper.findAll();
    }
}

6、编写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 findAll(){
        return peotService.findAll();
    }
}

7、测试后端程序是否正确

8、前后端联调



  
  
  
  诗人信息




诗人信息列表展示

序号 姓名 性别 朝代 头衔 风格 操作
{{peot.id}} {{peot.author}} {{peot.gender}} {{peot.dynasty}} {{peot.title}} {{peot.style}} 修改 删除
new Vue({ el: "#app", data() { return { tableData: [] } }, mounted(){ //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; }*/ //peotfindAll 返回类型为List类型 axios.get('peotfindAll').then(res=>{ this.tableData = res.data; }); }, });

微信扫一扫加客服

微信扫一扫加客服

点击启动AI问答
Draggable Icon