第六次作业

最新推荐文章于 2024-09-14 17:14:08 发布

ye_kexing

最新推荐文章于 2024-09-14 17:14:08 发布

阅读量1.6k

点赞数 26

文章标签：前端 java web

本文链接：https://blog.csdn.net/ye_kexing/article/details/139709101

版权

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

1、项目准备：数据库连接


# ???? 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/mybatis
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、建立项目结构文件夹

3、编写pojo文件

package edu.wust.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 edu.wust.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文件

package edu.wust.mapper;
import edu.wust.pojo.Peot;
import org.apache.ibatis.annotations.*;

import java.util.List;

@Mapper
public interface PeotMapper {

    @Select("select * from mybatis.peot")
    public List<Peot> findAll();
}

5、编写service文件

package edu.wust.service.impl;

import edu.wust.mapper.PeotMapper;
import edu.wust.pojo.Peot;
import edu.wust.service.PeotService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class PeotServiceImpl implements PeotService {
    @Autowired
    private PeotMapper peotMapper;
    @Override
    public List<Peot> findAll(){
        return peotMapper.findAll();
    }
}

package edu.wust.service;

import edu.wust.pojo.Peot;

import java.util.List;

public interface PeotService {
    public List<Peot> findAll();
}

6、编写controller文件

package edu.wust.controller;

import edu.wust.pojo.Peot;
import edu.wust.pojo.Result;
import edu.wust.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
public class PeotController {

    @Autowired
    private PeotService peotService;

    @RequestMapping("/poetfindAllJson")
    public Result findAllJson(){
        return Result.success(peotService.findAll());

    }

    @RequestMapping("/peotfindAll")
    public List<Peot> findAll(){
        return peotService.findAll();

    }

}

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

<!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.id}}</td>
      <td>{{peot.author}}</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(){
      //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;
      });
    },
  });
</script>
</html>

基于springboot+mybatis+vue的项目实战之前端

0、项目准备

新建项目，并删除自带demo程序，修改application.properties.

# åºç¨æå¡ WEB è®¿é®ç«¯å£
server.port=8080
#ä¸é¢è¿äºåå®¹æ¯ä¸ºäºè®©MyBatisæ å°
#æå®MybatisçMapperæä»¶
mybatis.mapper-locations=classpath:mappers/*xml
#æå®Mybatisçå®ä½ç®å½
mybatis.type-aliases-package=eud.wust.mybatis.entity



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

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

json数据如下

{"code":1,"msg":"success","data":[{"id":1,"author":"Tom","gender":"男","dynasty":"现代","title":"诗人","style":"用词活泼可爱"},{"id":2,"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":"清新豪健的诗风和独特的艺术表现力"}]}

二、编写基于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.id}}</td>
            <td>{{peot.author}}</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/4651915-4302626-default/peotfindAll?apifoxApiId=184371945').then(res=>{
                if(res.data.code){
                    this.tableData = res.data.data;
                }
            });
        },
    });
</script>
</html>

3.地址栏访问 http://localhost:8080/peot_list_nofenye.html