前序
下载axios
npm install axios
在main.js中引入插件import axios from "axios";
前端
实例
router 路由
在main.js中引入
Vue.config.productionTip = true
Vue.prototype.$http = axios
application
server.port=8080
server.servlet.context-path=/
spring.datasource.url=jdbc:mysql://localhost:3306/day20211105?serverTimezone=Asia/Shanghai&zeroDateTimeBehavior=convertToNull
spring.datasource.username=root
spring.datasource.password=0000
spring.datasource.driverClassName=com.mysql.cj.jdbc.Driver
spring.datasource.druid.initial-size=5
spring.datasource.druid.min-idle=5
spring.datasource.druid.max-active=30
User_list
<template>
<div>
<table border="2">
<tr>
<td colspan="4">
<router-link to="/User_add">
<button>添加用户</button>
</router-link>
</td>
</tr>
<tr>
<td>id</td>
<td>用户名</td>
<td>地址</td>
<td>操作</td>
</tr>
<tr v-for="(user, index) in this.UserList" :key="index">
<td>{
{ user.id }}</td>
<td>{
{ user.username }}</td>
<td>{
{ user.address }}</td>
<td>
<button @click="SelectByUid(user.id)">修改</button>
<button @click="DeleteByUid(user.id)">删除</button>
</td>
</tr>
</table>
</div>
</template>
<script>
export default {
data() {
return {
urlOne: "http://localhost:8081/user/",
UserList: [],
};
},
methods: {
DeleteByUid(id){
this.$http.delete(this.urlOne+id)
.then(res => {
if(res.data){
this.$router.go(0)
}
})
.catch(err => {
console.error(err);
})
},
SelectByUid(id){
this.$router.push({
path:'/User_edit',
query:{
id:id
}
})
},
querySelectAll() {
this.$http
.get(this.urlOne)
.then((res) => {
this.UserList = res.data;
})
.catch((err) => {
console.error(err);
});
},
},
mounted() {
this.querySelectAll();
},
};
</script>
<style>
</style>
User_add
<template>
<div>
<table border="2">
<tr>
<td>姓名</td>
<td>
<input type="text" v-model="user.username">
</td>
</tr>
<tr>
<td>地址</td>
<td>
<input type="text" v-model="user.address">
</td>
</tr>
<tr>
<td colspan="2">
<button @click="InsertUser()">添加</button>
</td>
</tr>
</table>
</div>
</template>
<script>
export default {
data() {
return {
user:{
},
urlOne: "http://localhost:8081/user"
}
},
methods: {
InsertUser(){
this.$http.post(this.urlOne,this.user)
.then(res => {
if(res.data){
this.$router.push("/User_list")
}
})
.catch(err => {
alert("添加失败")
})
}
},
mounted() {
},
}
</script>
<style>
</style>
list_edit
<template>
<div>
<table border="2">
<tr>
<td>姓名</td>
<td>
<input type="text" v-model="user.username" />
</td>
</tr>
<tr>
<td>地址</td>
<td>
<input type="text" v-model="user.address" />
</td>
</tr>
<tr>
<td colspan="2">
<button @click="UpdateUser()">修改</button>
</td>
</tr>
</table>
</div>
</template>
<script>
export default {
data() {
return {
id: null,
urlOne: "http://localhost:8081/user/",
user: {
},
};
},
methods: {
UpdateUser(){
this.$http
.put(this.urlOne, this.user)
.then((res) => {
if (res.data) {
this.$router.push("/User_List");
}
})
.catch((err) => {
alert("修改失败");
});
},
SelectByUid(id) {
this.$http
.get(this.urlOne + id)
.then((res) => {
this.user = res.data;
})
.catch((err) => {
console.error(err);
});
},
},
mounted() {
this.id = this.$route.query.id;
this.SelectByUid(this.id);
},
};
</script>
<style>
</style>
后端
使用resultful风格
SpringBoot需要的pom文件
<!--2 确定版本-->
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<java.version>1.8</java.version>
<spring-cloud-release.version>Hoxton.SR3</spring-cloud-release.version>
<nacos.version>1.1.0</nacos.version>
<alibaba.cloud.version>2.2.1.RELEASE</alibaba.cloud.version>
<mybatis.starter.version>1.3.2</mybatis.starter.version>
<mapper.starter.version>2.0.2</mapper.starter.version>
<pageHelper.starter.version>1.2.5</pageHelper.starter.version>
<mysql.version>8.0.19</mysql.version>
<durid.starter.version>1.1.10</durid.starter.version>
<mybatis.plus.version>3.4.0</mybatis.plus.version>
<swagger.version>2.7.0</swagger.version>
<jwt.jjwt.version>0.9.0</jwt.jjwt.version>
<jwt.joda.version>2.9.7</jwt.joda.version>
<beanutils.version>1.9.3</beanutils.version>
</properties>
<!-- 3 锁定版本-->
<dependencyManagement>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<!--lombok-->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<!-- sprig cloud-->
<dependency>
<groupId>org.springframework.cloud</groupId>
<artifactId>spring-cloud-dependencies</artifactId>
<version>${
spring-cloud-release.version}</version>
<type>pom</type>
<scope>import</scope>
</dependency>
<!--nacos -->
<dependency>
<groupId>com.alibaba.nacos</groupId>
<artifactId>nacos-client</artifactId>
<version>${
nacos.version}</version>
</dependency>
<!--nacos cloud 发现 -->
<dependency>
<groupId>com.alibaba.cloud</groupId>
<artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
<version>${
alibaba.cloud.version}</version>
</dependency>
<!--nacos cloud 配置 -->
<dependency>
<groupId>com.alibaba.cloud</groupId>
<artifactId>spring-cloud-starter-alibaba-nacos-config</artifactId>
<version>${
alibaba.cloud.version}</version>
</dependency>
<!-- https://mvnrepository.com/artifact/com.alibaba.cloud/spring-cloud-starter-alibaba-sentinel -->
<dependency>
<groupId>com.alibaba.cloud</groupId>
<artifactId>spring-cloud-starter-alibaba-sentinel</artifactId>
<version>${
alibaba.cloud.version}</version>
</dependency>
<!-- mybatis启动器 -->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>${
mybatis.starter.version}</version>
</dependency>
<!-- 通用Mapper启动器 -->
<dependency>
<groupId>tk.mybatis</groupId>
<artifactId>mapper-spring-boot-starter</artifactId>
<version>${
mapper.starter.version}</version>
</dependency>
<!-- 分页助手启动器 -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>${
pageHelper.starter.version}</version>
</dependency>
<!-- mybatis plus-->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>${
mybatis.plus.version}</version>
</dependency>
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-annotation</artifactId>
<version>${
mybatis.plus.version}</version>
</dependency>
<!-- mysql驱动 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>${
mysql.version}</version>
</dependency>
<!-- Druid连接池 -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid-spring-boot-starter</artifactId>
<version>${
durid.starter.version}</version>
</dependency>
<!--swagger2-->
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger2</artifactId>
<version>${
swagger.version}</version>
</dependency>
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger-ui</artifactId>
<version>${
swagger.version}</version>
</dependency>
<!--jwt-->
<!--JavaBean工具类，用于JavaBean数据封装-->
<dependency>
<groupId>commons-beanutils</groupId>
<artifactId>commons-beanutils</artifactId>
<version>${
beanutils.version}</version>
</dependency>
<!--jwt工具-->
<dependency>
<groupId>io.jsonwebtoken</groupId>
<artifactId>jjwt</artifactId>
<version>${
jwt.jjwt.version}</version>
</dependency>
<!--joda 时间工具类 -->
<dependency>
<groupId>joda-time</groupId>
<artifactId>joda-time</artifactId>
<version>${
jwt.joda.version}</version>
</dependency>
</dependencies>
</dependencyManagement>
<dependencies>
<!--web起步依赖-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- mybatis启动器 -->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
</dependency>
<!-- 通用Mapper启动器 -->
<dependency>
<groupId>tk.mybatis</groupId>
<artifactId>mapper-spring-boot-starter</artifactId>
</dependency>
<!-- 分页助手启动器 -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
</dependency>
<!-- mysql驱动 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
<!-- Druid连接池 -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid-spring-boot-starter</artifactId>
</dependency>
<!--swagger2-->
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger2</artifactId>
</dependency>
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger-ui</artifactId>
</dependency>
<!--lombok-->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>RELEASE</version>
<scope>compile</scope>
</dependency>
<!--热部署-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
</dependencies>
后端样例
@CrossOrigin
@RestController
@RequestMapping("/category")
public class CategoryController {
@Resource
CategoryService categoryService;
@GetMapping
public BaseResult SelecctAllCategory(){
try {
List<Category> list = categoryService.SelecctAllCategory();
return BaseResult.ok("查询成功",list);
} catch (Exception e) {
return BaseResult.error("查询失败");
}
}
@PostMapping
public BaseResult AddCategory(@RequestBody Category category){
Boolean flag = categoryService.AddCategory(category);
if(flag){
return BaseResult.ok("添加成功");
}else{
return BaseResult.error("添加失败");
}
}
@GetMapping("/{cid}")
public BaseResult SelectByCid(@PathVariable("cid") String cid){
try {
Category category = categoryService.SelectByCid(cid);
return BaseResult.ok("查询成功",category);
} catch (Exception e) {
return BaseResult.error("查询失败");
}
}
@PutMapping
public BaseResult UpdateCategory(@RequestBody Category category){
Boolean flag = categoryService.UpdateCategory(category);
if(flag){
return BaseResult.ok("更新成功");
}else{
return BaseResult.error("更新失败");
}
}
@DeleteMapping("/{cid}")
public BaseResult DeleteByCid(@PathVariable("cid") String cid){
Boolean flag = categoryService.DeleteByCid(cid);
if(flag){
return BaseResult.ok("删除成功");
}else{
return BaseResult.error("删除失败");
}
}