欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Springboot+vue+axios 增删改查案例

程序员文章站 2022-07-04 19:33:43
...

Springboot+vue+axios 增删改查案例

摘要

Springboot+vue+axios 增删改查案例

关键字

springboot、vue、axios、mvc、mysql、java、crud

项目环境

IDEA、 Mysql数据库、Navicat

一、创建数据库

-- ----------------------------
-- Table structure for placesvr
-- ----------------------------
DROP TABLE IF EXISTS `placesvr`;
CREATE TABLE `placesvr` (
  `id` int NOT NULL,
  `name` varchar(255) DEFAULT NULL,
  `vrurl` varchar(255) DEFAULT NULL,
  `coverurl` varchar(255) DEFAULT NULL,
  `ctime` varchar(255) DEFAULT NULL,
  `author` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

INSERT INTO `placesvr` VALUES ('1', '华山', 'url1', '/cover/huashancover.jpeg', '2019-05-16', '明明就');
INSERT INTO `placesvr` VALUES ('3', '塔县', 'url2', '/cover/taxiancover.jpeg', '2017-05-16', '明明就');
INSERT INTO `placesvr` VALUES ('4', '大唐不夜城彩灯', 'url3', '/cover/tangdengcover.jpeg', '2014-07-15', '王小王');
INSERT INTO `placesvr` VALUES ('5', '老君山', 'url4', '/cover/laojuncover.jpeg', '2019-08-07', '屈依晨');
INSERT INTO `placesvr` VALUES ('6', '青海翡翠湖', 'url5', '/cover/feicunhucover.jpeg', '2019-12-01', '孔离');
INSERT INTO `placesvr` VALUES ('7', '龙门石窟', 'url6', '/cover/kucover.jpeg', '2017-12-25', '李白');
INSERT INTO `placesvr` VALUES ('8', '丽江古城', 'url7', '/cover/lichengcover.jpeg', '2019-06-15', '小白');
INSERT INTO `placesvr` VALUES ('9', '黄鹤楼', 'url8', '/cover/loucover.jpeg', '2014-02-03', '小新');
INSERT INTO `placesvr` VALUES ('10', '香格里拉', 'url9', '/cover/xiangcover.jpeg', '2019-11-10', '李婉');

二、项目配置

#application.yml
server:
  port: 8008

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    username: root
    password: 123456
    url: jdbc:mysql://localhost:3306/vrdemo?useUnicode=true&characterEncoding=utf-8&allowMultiQueries=true&useSSL=false&serverTimezone=GMT%2b8

mybatis:
  mapper-locations: classpath:mapper/*.xml
  type-aliases-package: edu.mm.vrdemo.javabean.VR

三、导入依赖

 <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.4</version>
  </dependency>
  <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.23</version>
   </dependency>
   <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.20</version>
            <scope>provided</scope>
   </dependency

四、前端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <link rel="stylesheet" href="css/box.css">
</head>
<body>
<script src="js/vue.min.js"></script>
<script src="js/axios.js"></script>
<!--搜索框-->
<div class="container" id="search">
    <form class="parent">
        <input type="text" v-model="keywords" autocomplete="off" @keyup.enter="query">
        <input type="button" value="搜索" @click="query">
    </form>
</div>
<div id="app2" style="background:white">
    <div>
    <form v-show="isActive">
        <span>编号:</span><input type="text" v-model="id" ><br>
        <span>景区名称:</span><input type="text" v-model="name"><br>
        <span>景区封面:</span><input type="text" v-model="coverurl"><br>
        <span>vr地址:</span><input type="text" v-model="vrurl"><br>
        <span>上传作者:</span><input type="text" v-model="author"><br>
        <span>上传时间:</span><input type="text" v-model="ctime"><br>
        <input type="button" value="保存" @click="saveOne">
    </form>
    <div><a @click="add">新增</a></div>
    </div>
    <div>
        <form v-show="isUpdate">
            <span>编号:</span><input type="text" v-model="id" :value="id"><br>
            <span>景区名称:</span><input type="text" v-model="name" :value="name"><br>
            <span>景区封面:</span><input type="text" v-model="coverurl" :value="coverurl"><br>
            <span>vr地址:</span><input type="text" v-model="vrurl" :value="vrurl"><br>
            <span>上传作者:</span><input type="text" v-model="author" :value="author"><br>
            <span>上传时间:</span><input type="text" v-model="ctime" :value="ctime"><br>
            <input type="button" value="保存" @click="updateOne">
        </form>
    </div>
    <table>
        <thead>
        <th>id</th>
        <th>景区</th>
        <th>封面</th>
        <th>作者</th>
        <th>上传时间</th>
        <th colspan="3">操作</th>
        </thead>
        <tbody>
        <tr v-for="item in placeVRList">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td><a :href="item.vrurl">
                <img :src="item.coverurl" style="width:20px;height: 20px">
            </a></td>
            <td>{{item.author}}</td>
            <td>{{item.ctime}}</td>
            <td><input type="button" value="删除" @click="deleteById(item.id)"></td>
            <td><input type="button" value="修改" @click="update(item.id)"></td>
            <td><input type="button" value="详情" @click="queryById(item.id)"></td>
        </tr>
        </tbody>
    </table>
</div>
<hr>
<script>
    var app2 = new Vue({
        el: "#app2",
        data: {
            placeVRList: [],
            isActive: false,
            isUpdate:false,
            id:'',
            name:'',
            coverurl:'',
            vrurl:'',
            author:'',
            ctime:'',
        },
        created: function () {
           this.loadData();
        },
        methods: {
            loadData:function(){
                var that = this;
                var url = "vr/findAll";
                axios.get(url)
                    .then(function (response) {
                        that.placeVRList = response.data;
                        console.log(response);
                    }, function (err) {
                        console.log(err);
                    })
            },
            add: function () {
                this.isActive = true;
            },
            saveOne: function () {
                let url="vr/saveone/";
                let that=this;
                let params={"id":this.id,"name":this.name,"coverurl":this.coverurl,
                    "vrurl":this.vrurl,"author":this.author,"ctime":this.ctime
                };
                axios.post(url,params).then(function (response) {
                    console.log(response);
                    that.loadData();
                },function (err) {
                    console.log(err);
                })
                this.isActive = false;
            },
            update:function (id) {
                let that=this;
                let url="vr/detail/"+id;
                axios.get(url).then(function (response) {
                    console.log(response);
                    that.id=response.data.id;
                    that.name=response.data.name;
                    that.coverurl=response.data.coverurl;
                    that.vrurl=response.data.vrurl;
                    that.author=response.data.author;
                    that.ctime=response.data.ctime;
                    that.isUpdate= true;
                },function (err) {
                    console.log(err);
                })
            },
            updateOne:function(){
                let url="vr/updateone/";
                let that=this;
                let params={"id":this.id,"name":this.name,"coverurl":this.coverurl,
                    "vrurl":this.vrurl,"author":this.author,"ctime":this.ctime
                };
                axios.post(url,params).then(function (response) {
                    console.log(response);
                    that.loadData();
                },function (err) {
                    console.log(err);
                })
                this.isUpdate = false;
            },
            deleteById: function (id) {
                let url = "vr/delete/"+ id;
                var that=this;
                axios.get(url).then(function (response) {
                    console.log(response.data);
                    alert(response.data);
                    that.loadData();
                }, function (err) {
                    console.log(err)
                })
            },
            queryById:function (id) {
                let url="vr/detail/"+id;
                axios.get(url).then(function (response) {
                    console.log(response);
                },function (err) {
                    console.log(err);
                })
            }
        }
    })
    var search=new Vue({
        el:"#search",
        data:{
            keywords:'',
        },
        methods: {
            query:function () {
                let url="vr/query/"+this.keywords;
                axios.get(url).then(function (response) {
                    console.log(response);
                },function (err) {
                    console.log(err);
                })
            }
        }
    })
</script>
</body>
</html>

五、javabean层

@Data
@ToString
@NoArgsConstructor
@AllArgsConstructor
public class VR {
    private int id;
    private String name;
    private String vrurl;
    private String coverurl;
    private String ctime;
    private String author;
}

六、mapper层

@Mapper
public interface VRMapper {
    public List<VR> getVR();
    public int deleteById(Integer id);
    public int saveOne(VR vr);
    public List<VR> queryByKeyWords(String data);
    public VR queryById(Integer id);
    public int updateVR(VR vr);
}

七、xxxmapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="edu.mm.vrdemo.mapper.VRMapper">
    <select id="getVR" resultType="edu.mm.vrdemo.javabean.VR">
        select * from placesvr
    </select>
    
    <select id="queryByKeyWords" parameterType="java.lang.String" resultType="edu.mm.vrdemo.javabean.VR">
        select * from placesvr where name like concat('%',#{data},'%')
    </select>

    <select id="queryById" parameterType="java.lang.Integer" resultType="edu.mm.vrdemo.javabean.VR">
        select * from placesvr where id=#{id}
    </select>
    <delete id="deleteById" parameterType="Integer">
        delete  from placesvr where id=#{id}
    </delete>

    <insert id="saveOne" parameterType="edu.mm.vrdemo.javabean.VR">
        insert into placesvr(id,name,vrurl,coverurl,ctime,author) values
        (#{id},#{name},#{vrurl},#{coverurl},#{ctime},#{author})
    </insert>
    <update id="updateVR" parameterType="edu.mm.vrdemo.javabean.VR">
        update placesvr set id=#{id},name=#{name},vrurl=#{vrurl},coverurl=#{coverurl},ctime=#{ctime},author=#{author}
        where id=#{id}
    </update>
</mapper>

八、service层

@Service
public class VRService {
    @Autowired
    public VRMapper vrMapper;

    public List<VR> getVR(){
        return vrMapper.getVR();
    }
    public int deleteById(Integer id){
        return vrMapper.deleteById(id);
    }
    public int saveOne(VR vr){
        return vrMapper.saveOne(vr);
    }
    public List<VR> queryByKeywords(String data){
        return vrMapper.queryByKeyWords(data);
    }
    public VR queryById(Integer id){
        return vrMapper.queryById(id);
    }
    public int updateVR(VR vr){
        return vrMapper.updateVR(vr);
    }
}

九、controller 层

@Controller
@RequestMapping("/vr/")
public class VRController {
    @Autowired
    public VRService vrService;

    @GetMapping("findAll")
    @ResponseBody
    public List<VR> getVR(){
        return vrService.getVR();
    }

    @GetMapping("delete/{id}")
    @ResponseBody
    public String delete(@PathVariable("id") Integer id){
        int  result= vrService.deleteById(id);
        if(result==1){
            return "删除成功";

        }else {
            return "删除失败";
        }
    }

    @PostMapping("saveone")
    @ResponseBody
    public String saveOne(@RequestBody VR vr){
        int i = vrService.saveOne(vr);
        if(i==1){
            return "插入成功";

        }else{
            return "插入失败";
        }
    }

    @GetMapping("query/{data}")
    @ResponseBody
    public List<VR> queryByKey(@PathVariable("data") String data) {
        return vrService.queryByKeywords(data);
    }

    @GetMapping("detail/{id}")
    @ResponseBody
    public VR queryById(@PathVariable("id") Integer id){
       return vrService.queryById(id);
    }

    @PostMapping("updateone")
    @ResponseBody
    public String update(@RequestBody VR vr){
        int i = vrService.updateVR(vr);
        if(i==1){
            return "更新成功";
        }else{
            return"更新失败";
        }
    }
}

十、项目总结

  • 注解

    • @RequestMapping

      /*
      RequestMapping注解的主要用途是将Web请求与请求处理类中的方法进行映射.
      配置属性:
      • value:映射的请求URL或者其别名
      • method:兼容HTTP的方法名
      */
      
    • @RequestBody

      /*
      将请求主体中的参数绑定到一个对象中
      特别的,@ResponseBody注解只能用在被@Controller注解标记的类中。如果在被@RestController标记的类中,则方法不需要使用@ResponseBody注解进行标注。@RestController相当于是@Controller和@ResponseBody的组合注解
      */
      public type method(@RequestBody T t){
          ...
      }
      
    • @RequestParam

      /*
       将url请求参数绑定到控制器的方法参数中
      */
      public type method(@RequestParam("age") Integer age){
          ...
      }
      
    • @PathVariable

    /*
    接收请求路径url中占位符的值 {}
    */
    public type method(@PathVariable("username") String name){
        ...
    }
    
    • @GetMapping

      /*
      @GetMapping注解用于处理HTTP GET请求,并将请求映射到具体的处理方法中。
      等价于@RequestMapping(method=RequestMethod.GET)
      */
      
    • @PostMapping

      /*
      @PostMapping注解用于处理HTTP POST请求,并将请求映射到具体的处理方法中。
      等价于@RequestMapping(method=HttpMethod.POST)
      */
      

十一、解决bug

Springboot+vue+axios 增删改查案例
Springboot+vue+axios 增删改查案例

问题:
在进行模糊查询、插入一条数据时,出现上图错误。404,未找到。

解决方法:

方法一: @[email protected]注解组合使用

方法二:用@RestController替换@Controller和@ResponseBody