springboot+vue的增删改查，前后端使用axios

Springboot+vue+axios 增删改查案例

夢陇

942人浏览 · 2022-08-09 11:27:13

夢陇 · 2022-08-09 11:27:13 发布

一、创建数据库

-- ----------------------------
-- 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

在这里插入图片描述

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

解决方法：

方法一： @XxxMapping+@ResponseBody注解组合使用

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

华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

华为云数据仓库专业级开发者认证重磅发布

华为开发者空间

cover

一文带你搞懂GaussDB数据库性能调优

华为开发者空间

cover

KubeEdge 新版本5大特性解读：更完备的节点设备能力，全新的Dashboard体验

华为开发者空间

所有评论(0)

查看更多评论

夢陇

@weixin_45954137

已为社区贡献2条内容