vue-项目的整体增删改查
Dept:
package com.example.demo.gs; public class Dept { private int id; private String name; private String location; public int getId() { return id; } public void setId(int id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getLocation() { return location; } public void setLocation(String location) { this.location = location; } @Override public String toString() { return "Dept [id=" + id + ", name=" + name + ", location=" + location + "]"; } }
DeptMapper:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | package com.example.demo;import java.util.List;import org.apache.ibatis.annotations.Delete;import org.apache.ibatis.annotations.Insert;import org.apache.ibatis.annotations.Mapper;import org.apache.ibatis.annotations.Select;import org.apache.ibatis.annotations.Update;import org.w3c.dom.ls.LSOutput;import com.example.demo.gs.Dept;@Mapperpublic interface DeptMapper { @Select("select * from dept") List<Dept>select(); @Insert("insert into `dept`(name,location)values(#{name},#{location})") void Insert (String name,String location); @Select("select * from dept where id =#{id}") List<Dept>selectFrom(int id); @Update("update `dept` set location =#{location}where location=#{OldLocation}") void updateFromLocation(String location,String OldLocation); @Delete("delete from dept where location =#{location}") void deleteFromDept(String location);} |
ServeMapper
package com.example.demo; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import org.springframework.transaction.annotation.Transactional; import com.example.demo.gs.Dept; @Service public interface DeptService { List<Dept>selectFromService(); void Insert(Dept dept); List<Dept>selectFromId(int id); void updateFromLocation(String location ,String oldLocation); void Delete(String location); }
DeptServiceImplement:
package com.example.demo.gs; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import org.springframework.transaction.annotation.Transactional; import com.example.demo.DeptMapper; import com.example.demo.DeptService; @Service public class DeptServiceImplement implements DeptService { @Autowired private DeptMapper Mapper; @Transactional @Override public List<Dept> selectFromService() { // TODO Auto-generated method stub return this.Mapper.select(); } @Transactional @Override public void Insert(Dept dept) { this.Mapper.Insert(dept.getName(),dept.getLocation()); // TODO Auto-generated method stub } @Transactional @Override public List<Dept> selectFromId(int id) { // TODO Auto-generated method stub return this.Mapper.selectFrom(id); } @Transactional @Override public void updateFromLocation(String location ,String oldLocation) { this.Mapper.updateFromLocation(location, oldLocation); } @Transactional @Override public void Delete(String location ) { this.Mapper.deleteFromDept(location); System.out.println(location); } }
DeptContorller
package com.example.demo.gs; import java.util.List; import org.apache.ibatis.annotations.Delete; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.transaction.annotation.Transactional; import org.springframework.web.bind.annotation.DeleteMapping; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.bind.annotation.RestController; import com.example.demo.DeptService; @RestController public class DeptContorller { @Autowired private DeptService Service; @GetMapping("/select") @ResponseBody List<Dept>Select(){ List<Dept> userDepts =this.Service.selectFromService(); return userDepts; } @GetMapping("/delete") @ResponseBody List<Dept>delete(int id) { return this.Service.selectFromId(id); } @PostMapping("/Insert") @ResponseBody void Insert(@RequestBody Dept dept) { this.Service.Insert(dept); } @GetMapping("/Deletes") @ResponseBody void Deletes(String location){ this.Service.Delete(location); System.out.println(location); } @GetMapping("/Update") @ResponseBody void Update(String location ,String OldLocation){ this.Service.updateFromLocation(location, OldLocation); } }
路由：
import Vue from "vue";
import VueRouter from "vue-router";
import SelectView from "../components/SelectView.vue";
import SelectFromView from "../components/SelectFromView.vue";
import InsertView from "../components/InsertView.vue";
import DeleteView from "../components/DeleteView.vue";
import UpdateView from "../components/UpdateView.vue";
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "Select",
component: SelectView,
},
{
path: "/1",
name: "Delete",
component: SelectFromView,
},
{
path: "/2",
name: "Insert",
component: InsertView,
},
{
path: "/3",
name: "DeleteView",
component: DeleteView,
},
{
path: "/4",
name: "UpdateView",
component: UpdateView,
},
];
const router = new VueRouter({
routes,
});
export default router; 查询部分：
<template>
<div class="nav">
<!-- <button @click="inserts()">查询</button> -->
<el-button size="small" @click="inserts()" type="primary">查询</el-button>
<div class="navs">
<!-- ------------------- -->
<div v-for="item in count" :key="item.id">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="账号" width="180">
<span>{{ item.id }}</span>
</el-table-column>
<el-table-column prop="name" label="部门" width="180">
<span>{{ item.location }}</span>
</el-table-column>
<el-table-column prop="address" label="名字">
<span>{{ item.name }}</span>
</el-table-column>
</el-table>
</div>
</div>
</div>
<!-- </div> -->
</template>
<script>
import axios from "axios";
export default {
name: "LoginView",
data() {
return {
count: [],
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
],
};
},
methods: {
inserts() {
axios.get("http://localhost:8086/select/").then((result) => {
console.log(result.data);
this.count = result.data;
});
},
},
};
</script>
<style>
label {
font-size: 20px;
font-weight: 700;
}
.navs {
margin-top: 10px;
}
-- > -- > .nav {
border-top: 3px solid #ff8500;
background-color: #fcfcfc;
border-bottom: 1px solid #edeeed;
line-height: 41px;
}
.nav a {
display: inline-block;
height: 41px;
padding: 0px 10px;
font-size: 15px;
color: #4c4c4c;
font-family: "微软雅黑";
text-decoration: none;
}
.nav a:hover {
background: #edeeed;
color: #ff8500;
}
</style>根据ID进行查找：
<template>
<div class="nav">
<label for="#">查询账号:</label>
<!-- <input v-model="count" type="text" /> -->
<el-input
size="small"
style="width: 150px"
v-model="count"
placeholder="请输入内容"
></el-input>
<div v-for="item in name" :key="item.id">
<div class="navs">
<label for="#">账号:</label>
<span>{{ item.id }}</span
> <label for="#">部门:</label>
<span>{{ item.location }}</span
> <label for="#">名字:</label>
<span>{{ item.name }}</span>
</div>
</div>
<!-- <button @click="Delete()">查询</button> -->
<el-button
style="margin-left: 12px"
size="medium"
@click="Delete()"
type="success"
>查询</el-button
>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "DleteView",
data() {
return {
count: [],
name: [],
};
},
methods: {
Delete() {
axios({
// 请求方式
method: "GET",
// 请求地址
url: `http://localhost:8086/delete`,
// URL中的查询参数
params: {
id: this.count,
},
}).then((result) => {
console.log(result.data);
this.name = result.data;
});
},
},
};
</script>
<style>
label {
color: #303133;
}
.nav {
margin-top: 20px;
border-top: 3px solid #ff8500;
background-color: #fcfcfc;
border-bottom: 1px solid #edeeed;
line-height: 41px;
}
.nav a {
display: inline-block;
height: 41px;
padding: 0px 10px;
font-size: 15px;
color: #4c4c4c;
font-family: "微软雅黑";
text-decoration: none;
}
.nav a:hover {
background: #edeeed;
color: #ff8500;
}
</style>增加：
<template>
<div class="nav">
<label for="name">名称:</label
><input class="inps" v-model="name" type="text" />
<label for="location">部门:</label
><input class="inps" v-model="location" type="text" />
<br />
<input value="增加" @click="Insert()" type="button" />
<h4 v-if="font === 4">成功</h4>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "LoginView",
data() {
return {
name: "",
location: "",
font: "",
};
},
methods: {
Insert() {
axios({
// 请求方式/
method: "POST",
// 请求地址
url: "http://localhost:8086/Insert",
data: {
name: this.name,
location: this.location,
},
// URL中的查询参数
}).then((res) => {
console.log(res);
this.font = 4;
});
},
},
};
</script>
<style>
label {
font-size: 20px;
font-weight: 700;
}
.inps {
margin-left: 20px;
margin-right: 20px;
}
.nav {
border-top: 3px solid #ff8500;
background-color: #fcfcfc;
border-bottom: 1px solid #edeeed;
line-height: 41px;
}
.nav a {
display: inline-block;
height: 41px;
padding: 0px 10px;
font-size: 15px;
color: #4c4c4c;
font-family: "微软雅黑";
text-decoration: none;
}
.nav a:hover {
background: #edeeed;
color: #ff8500;
}
</style>
根据部门进行删除：
<template>
<div class="nav">
<label for="#">部门名称:</label>
<input v-model="location" type="text" />
<el-button size="small" @click="Deletes()" type="primary">删除</el-button>
<!-- <input @click="Deletes()" value="删除" type="button" /> -->
<h4 v-if="font === 4">成功,但不晓得你数据库有没有这个数据;</h4>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "DeleteView",
data() {
return {
location: "",
font: [],
};
},
methods: {
Deletes() {
axios({
// 请求方式
method: "GET",
// 请求地址
url: `http://localhost:8086/Deletes`,
// URL中的查询参数
params: {
location: this.location,
},
}).then((sta) => {
console.log(sta);
this.font = 4;
});
},
},
};
</script>
<style>
label {
font-size: 20px;
font-weight: 700;
}
.navs {
margin-top: 10px;
}
.nav {
margin-top: 10px;
border-top: 3px solid #ff8500;
background-color: #fcfcfc;
border-bottom: 1px solid #edeeed;
line-height: 41px;
}
.nav a {
display: inline-block;
height: 41px;
padding: 0px 10px;
font-size: 15px;
color: #4c4c4c;
font-family: "微软雅黑";
text-decoration: none;
}
.nav a:hover {
background: #edeeed;
color: #ff8500;
}
</style>
修改部门名称：
<template>
<div class="nav">
<label for="">新部门</label><input v-model="location" type="text" />
<label for="">旧部门</label><input v-model="OldLocation" type="text" />
<input @click="Updata()" value="更改" type="button" />
<h4 v-if="font === 4">更改成功，但是不晓得你数据库有没有前置部门条件;</h4>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "UpdateView",
data() {
return {
location: [],
OldLocation: [],
font: [],
};
},
methods: {
Updata() {
axios({
// 请求方式
method: "GET",
// 请求地址
url: `http://localhost:8086/Update`,
// URL中的查询参数
params: {
location: this.location,
OldLocation: this.OldLocation,
},
}).then((res) => {
console.log(res);
this.font = 4;
});
},
},
};
</script>
<style>
label {
font-size: 20px;
font-weight: 700;
margin-left: 10px;
margin-right: 10px;
}
input {
margin-left: 10px;
margin-right: 10px;
}
.navs {
margin-top: 10px;
}
.nav {
border-top: 3px solid #ff8500;
background-color: #fcfcfc;
border-bottom: 1px solid #edeeed;
line-height: 41px;
}
.nav a {
display: inline-block;
height: 41px;
padding: 0px 10px;
font-size: 15px;
color: #4c4c4c;
font-family: "微软雅黑";
text-decoration: none;
}
.nav a:hover {
background: #edeeed;
color: #ff8500;
}
</style>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix