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
问题:
在进行模糊查询、插入一条数据时,出现上图错误。404,未找到。
解决方法:
方法一: @[email protected]注解组合使用
方法二:用@RestController替换@Controller和@ResponseBody
上一篇: axios和drf结合的增删改查