day45-46-Vue+ElementUI实现学生管理

news/2024/10/18 14:26:06/

Vue+ElementUI实现学生管理

代码： qiushiju/java2313_vue_elementui_crud (gitee.com)

一、思考

  1. 考虑需求（登录，查询全部，基本增删改查，分页，搜索，批量）

    image-20231207170514721
image-20231207170737870
  1. 设计数据库
  2. 搭建项目
    1. 后端项目（day39_springboot_curd)已经完成
    2. 前端项目（暂无）ps：前端写的接口数据 需要和后端一致

二、搭建前端项目

2.1 使用vue-cli创建项目，选择router，vuex

2.2 安装所需axios,elementui

# 安装依赖
npm install --save axios vue-axios
npm i element-ui -S

// 在main.js中配置axios,element
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);// axios
import axios from "axios";
axios.defaults.baseURL = 'http://localhost:8888'// 添加Axios响应拦截器
axios.interceptors.response.use(function (response) {//console.log('响应拦截',response)return response.data;
}, function (error) {console.log(error)
});

2.3 自带About,HomeView,HelloWorld组件删除

三、登录页

考虑: 项目默认访问首页是登录页.怎么实现?

解决: 在路由表中定义/路径匹配Login.vue

App.vue中只保留一个路由 出口<router-view/>

const routes = [{path: '/',component: View1Login}
]

登录页View1Login.vue

<template>
<div><el-row class="c1"><el-col class="c1" :span="6" :offset="9"><div class="c2"><el-form ref="form" :model="stu" label-width="80px"><el-form-item label="用户名"><el-input v-model="stu.sname"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">登录</el-button></el-form-item></el-form></div></el-col></el-row>
</div>
</template><script>
import axios from "axios";
export default {name: "View1Login",data(){return  {stu:{sname:""}}},methods:{onSubmit(){// axios.post('/stu/login',{},{//   params:{//     username:this.stu.sname//   }// })// console.log(this.stu.sname)axios.post('/stu/login',{sname:this.stu.sname}).then(ret => {if (ret.code==20000){this.$message({message:"登录成功",type:"success",duration:700})// TODO 跳转页面}else{this.$message({message:"登录失败",type:"error",duration:700})}})}}
}
</script><style scoped>
.c1 {margin-top: 150px;
}
.c2{border: 2px #2c3e50 solid;
}
</style>

扩展: 输入框输入完,提示该人是否注册

登录成功后,跳转主页

onSubmit(){axios.post('/stu/login',{sname:this.stu.sname}).then(ret => {if (ret.code==20000){this.$message({message:"登录成功",type:"success",duration:700})// 登陆成功 ,要跳转主页this.$router.push('/admin')}else{this.$message({message:"登录失败",type:"error",duration:700})}})}

image-20231208094942042

四、主页

思考:

  1. 登录成功后,App.vue页面切换成主页
  2. 主页面需要容器布局,在右侧main主页内容这里还能 再切换其后页面

首先,创建View2Admin.vue主页,布局效果

<template>
<div><el-container><el-header style="text-align: right; font-size: 20px"><span>王小虎</span></el-header><el-container><el-aside width="200px"><el-menu><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>导航一</template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-menu"></i>导航二</template><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item></el-submenu></el-menu></el-aside><el-container><el-main>Main</el-main><el-footer>© 2023 Taotie Copyright</el-footer></el-container></el-container></el-container>
</div>
</template><script>
export default {name: "View2Admin"
}
</script><style scoped>
.el-header, .el-footer {background-color: #3c8dbc;color: #333;text-align: center;line-height: 60px;
}.el-aside {background-color: #2f4050;color: white;text-align: center;line-height: 200px;height: 650px;
}.el-main {background-color: #E9EEF3;color: #333;text-align: center;line-height: 160px;
}body > .el-container {margin-bottom: 40px;
}.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {line-height: 260px;
}.el-container:nth-child(7) .el-aside {line-height: 320px;
}
</style>

image-20231208094959147

五、用户名

  1. 现在vuex中设置用户名变量
  2. 登录时存入state
  3. 主页中取出

// vuex

export default new Vuex.Store({state: {username:"" // 设置变量名},mutations: {setUsername(state,v){  // 提供一个改变用户名的方式state.username = v;}}
})

// 登录时存入state

axios.post('/stu/login',{sname:this.stu.sname}).then(ret => {if (ret.code==20000){this.$message({message:"登录成功",type:"success",duration:700})// 存储用户名this.$store.commit('setUsername',ret.data.sname)// 登陆成功 ,要跳转主页this.$router.push('/admin')}else{this.$message({message:"登录失败",type:"error",duration:700})}})

// 主页中取出

<script>
import {mapState}  from 'vuex'
export default {name: "View2Admin",// computed:{//   username(){//     return this.$store.state.username//   }// }computed:mapState(['username'])
}
</script>

六、退出按钮

    <el-header style="text-align: right; font-size: 20px"><span>{{username}}</span> &nbsp;&nbsp;<span><el-button @click="logout" type="warning" size="small">退出</el-button></span></el-header>

  methods:{logout(){this.$router.push("/")}}

七、欢迎页

登录成功，跳转主页，主页先不展示数据，而是展示欢迎页

创建欢迎页，引入图片

<template>
<div><img width="700px" src="../assets/bgm.jpg" alt="背景图">
</div>
</template><script>
export default {name: "View3Welcome"
}
</script><style scoped></style>

Admin.vue中设置路由出口

image-20231208102429999

router/index.js路由表给admin设置子路由,目的是访问主页时,默认跳转至欢迎页

image-20231208102453451

image-20231208102247271

八、学生列表

思路： 点击左边菜单，路由到Admin的内部（即，子路由），分页展现所有学生信息

// 创建学生信息页,写table组件展示数据,在生命周期函数发请求查数据,给data中变量赋值

<template>
<div>
<!--  卡片-->
<el-card :body-style="{ padding: '20px',height:'400px' }"><!-- TODO: 表头行高度需要修改!!:header-row-style设置无效!! --><el-table:data="stuList"style="width: 100%"border:header-row-style="{ height: '5px' }"><el-table-columntype="selection"width="55"></el-table-column><!-- label是列名,prop是对象的属性  --><el-table-columnlabel="学号"prop="id"width="180"></el-table-column><el-table-columnprop="sname"label="姓名"width="180"></el-table-column><el-table-columnprop="age"label="年龄"sortable></el-table-column><el-table-columnprop="sex"label="性别"></el-table-column><el-table-columnprop="score"label="分数"></el-table-column><el-table-columnprop="birthday"label="生日"></el-table-column></el-table>
</el-card>
</div>
</template><script>
import axios from "axios";
export default {name: "View4StuInfo",data(){return {stuList:[]}},// 定义生命周期函数,页面加载完即展现数据created() {axios.get('/stu/list',{params:{pageNum:1  // 默认访问第一页}}).then(ret => {if (ret.code == 20000){// ret.data是后端返回的PageInfoconsole.log(ret.data)this.stuList= ret.data.list;} else {this.$message.error('后台请求错误')}})}
}
</script><style scoped></style>

// 主页面,左侧菜单,点击路由跳转至学生页

image-20231208111025604

// 经过路由表映射,到admin的子路由中

image-20231208111059040

九、分页查询

1）设置分页组件

2） 设置对应的 函数

<template>
<div>
<!--  卡片-->
<el-card :body-style="{ padding: '20px',height:'400px' }"><!-- TODO: 表头行高度需要修改!!:header-row-style设置无效!! --><el-table:data="stuList"style="width: 100%"border:header-row-style="{ height: '5px' }"height="370px"><el-table-columntype="selection"width="55"></el-table-column><!-- label是列名,prop是对象的属性  --><el-table-columnlabel="学号"prop="id"width="180"></el-table-column><el-table-columnprop="sname"label="姓名"width="180"></el-table-column><el-table-columnprop="age"label="年龄"sortable></el-table-column><el-table-columnprop="sex"label="性别"></el-table-column><el-table-columnprop="score"label="分数"></el-table-column><el-table-columnprop="birthday"label="生日"></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-buttonsize="mini">编辑</el-button><el-buttonsize="mini"type="danger">删除</el-button></template></el-table-column></el-table><div><!--@size-change="handleSizeChange"      页面大小改变会触发函数@current-change="handleCurrentChange"当前页改变 触发函数:current-page.sync="currentPage":page-sizes="[3, 6, 9]"   演示每页大小列表:page-size="pageSize"     绑定页面大小,下方data中定义变量layout="sizes,prev, pager, next"  外观显示效果:total="total">   总条数,下方data中定义变量--><el-paginationbackground@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page.sync="currentPage":page-sizes="[3, 6, 9]":page-size="pageSize"layout="sizes,prev, pager, next":total="total"></el-pagination></div>
</el-card>
</div>
</template><script>
import axios from "axios";
export default {name: "View4StuInfo",data(){return {stuList:[],currentPage: 1,pageSize: 3,total: 0,}},methods:{// 抽取查询数据的方法,可以复用getData(){axios.get('/stu/list',{params:{pageNum:this.currentPage,  // 默认访问第一页pageSize: this.pageSize}}).then(ret => {if (ret.code == 20000){// ret.data是后端返回的PageInfoconsole.log(ret.data)this.stuList= ret.data.list;this.total=ret.data.total;} else {this.$message.error('后台请求错误')}})},// 页面大小变化时,改变pageSizehandleSizeChange(val) {this.pageSize = val;this.getData();},// 当前页变化,即跳转页面时handleCurrentChange(val) {this.currentPage = val;// 重新查询当前页数据this.getData();},},// 定义生命周期函数,页面加载完即展现数据created() {this.getData();}
}
</script><style scoped></style>

image-20231208113907620

十、添加

image-20231211174530052

需求:

1)表格上方设置添加按钮

2)弹出弹出层对话框

3)其中设置表单

4)点击保存,插入数据库

5)对话框隐藏,查询最新数据

在StuInfo.vue中添加对话框和对应的js

<template>
<div>
<!--  卡片-->
<el-card :body-style="{ padding: '20px',height:'400px' }"><div style="text-align: left"><el-button type="danger">批量删除</el-button><!-- 显示/隐藏对话框,通过变量 --><el-button type="primary" @click="addDialogVisible = true">添加</el-button></div><!-- 添加对话框,默认是隐藏 --><el-dialogtitle="添加":visible.sync="addDialogVisible"width="30%":before-close="handleClose"><el-form :model="stu" status-icon :rules="rules" ref="stu" label-width="100px" class="demo-stu"><el-form-item label="用户名" prop="sname"><el-input type="text" v-model="stu.sname" autocomplete="off"></el-input></el-form-item><el-form-item label="年龄" prop="age"><!-- TODO: .number是修饰符,输入的直接就是数字 --><el-input type="text" v-model.number="stu.age" autocomplete="off"></el-input></el-form-item><el-form-item label="性别" prop="sex"><!--todo: 单选框获得的值是什么?是label的值? 结论!是label值--><el-radio-group v-model="stu.sex"><el-radio label="男"></el-radio><el-radio label="女"></el-radio></el-radio-group></el-form-item><el-form-item label="分数" prop="score"><el-input type="text" v-model="stu.score" autocomplete="off"></el-input></el-form-item><el-form-item label="生日" prop="birthday"><el-col :span="11"><el-date-picker type="date" placeholder="选择日期" v-model="stu.birthday" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker></el-col></el-form-item><el-form-item><el-button @click="addDialogVisible = false">取 消</el-button><el-button type="primary" @click="submitForm('stu')">提交</el-button></el-form-item></el-form></el-dialog><!-- 表格渲染数据: 省略 --><!-- 分页: 省略 --></div>
</el-card>
</div>
</template><script>
import axios from "axios";
export default {name: "View4StuInfo",data(){// 自定义校验年龄var checkAge = (rule, value, callback) => {if (!value) {return callback(new Error('年龄不能为空'));}if (!Number.isInteger(value)) {callback(new Error('请输入数字值'));} else {if (value < 18) {callback(new Error('必须年满18岁'));} else {// 校验通过放行!!callback();}}};return {stuList:[],currentPage: 1,pageSize: 3,total: 0,addDialogVisible: false,stu:{sname:"",age:0,sex:"",score:0.0,birthday:""},rules: {age: [{ validator: checkAge, trigger: 'blur' }]}}},methods: {// 抽取查询数据的方法,可以复用getData() {axios.get('/stu/list', {params: {pageNum: this.currentPage,  // 默认访问第一页pageSize: this.pageSize}}).then(ret => {if (ret.code == 20000) {// ret.data是后端返回的PageInfoconsole.log(ret.data)this.stuList = ret.data.list;this.total = ret.data.total;} else {this.$message.error('后台请求错误')}})},// 页面大小变化时,改变pageSizehandleSizeChange(val) {this.pageSize = val;this.getData();},// 当前页变化,即跳转页面时handleCurrentChange(val) {this.currentPage = val;// 重新查询当前页数据this.getData();},handleClose(done) {this.$confirm('确认关闭？').then(_ => {done();}).catch(_ => {});},// 提交表单,并隐藏对话框submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {console.log("提交表单--->  ",this.stu)// TODO 添加成功! 但是市区不对!//  已解决! 给el-date-picker设置value-format="yyyy-MM-dd"即可axios.post('/stu/add',this.stu).then(ret =>{console.log(ret)})} else {console.log('error submit!!');return false;}});// 重置当前页为第一页,this.currentPage = 1;// 查询最新数据,从第一页查this.getData();// 隐藏对话框this.addDialogVisible = false;// 对话框清空this.$refs.stu.resetFields()},},// 定义生命周期函数,页面加载完即展现数据created() {this.getData();}
}
</script><style scoped></style>

问题1: 时区,时间差一天 // 已解决! 给el-date-picker设置value-format="yyyy-MM-dd"即可

问题2:添加表格没有清空

// 解决方案:对话框清空,注意此处stu是el-form上面定义的ref的值
this.$refs.stu.resetFields()

十一、更新

image-20231211174547519

思路:

1)点击更新按钮,弹出对话框

2)对话框回显数据 ps: elementui-table组件,按钮事件中自带属性scope,触发按钮获得当前行内数据

3)点击保存

4)对话框隐藏,重新查询

StuInfo.vue

<template>
<div>
<!--  卡片-->
<el-card :body-style="{ padding: '20px',height:'400px' }"><div style="text-align: left"><el-button type="danger">批量删除</el-button><!-- 显示/隐藏对话框,通过变量 --><el-button type="primary" @click="addDialogVisible = true">添加</el-button></div><!-- 添加对话框,默认是隐藏 --><!--更新对话框,默认是隐藏 --><el-dialogtitle="更新":visible.sync="editDialogVisible"width="30%"><el-form :model="stu" status-icon :rules="rules" ref="editStuRef" label-width="100px" class="demo-stu"><el-form-item label="用户名" prop="sname"><el-input type="text" v-model="stu.sname" autocomplete="off"></el-input></el-form-item><el-form-item label="年龄" prop="age"><el-input type="text" v-model.number="stu.age" autocomplete="off"></el-input></el-form-item><el-form-item label="性别" prop="sex"><el-radio-group v-model="stu.sex"><el-radio label="男"></el-radio><el-radio label="女"></el-radio></el-radio-group></el-form-item><el-form-item label="分数" prop="score"><el-input type="text" v-model="stu.score" autocomplete="off"></el-input></el-form-item><el-form-item label="生日" prop="birthday"><el-col :span="11"><el-date-picker type="date" placeholder="选择日期" v-model="stu.birthday" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker></el-col></el-form-item><el-form-item><el-button @click="editDialogVisible = false">取 消</el-button><el-button type="primary" @click="editForm('editStuRef')">更新</el-button></el-form-item></el-form></el-dialog><!-- 表格渲染数据 --><el-table:data="stuList"style="width: 100%"borderheight="340px"><el-table-columntype="selection"width="55"></el-table-column><!-- label是列名,prop是对象的属性  --><el-table-columnlabel="学号"prop="id"width="180"></el-table-column><el-table-columnprop="sname"label="姓名"width="180"></el-table-column><el-table-columnprop="age"label="年龄"sortable></el-table-column><el-table-columnprop="sex"label="性别"></el-table-column><el-table-columnprop="score"label="分数"></el-table-column><el-table-columnprop="birthday"label="生日"></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-buttontype="warning"size="mini"@click="handleEdit(scope.$index, scope.row)">编辑</el-button><el-buttonsize="mini"type="danger">删除</el-button></template></el-table-column></el-table><!-- 分页 --></div>
</template><script>
import axios from "axios";
export default {name: "View4StuInfo",data(){// 自定义校验年龄var checkAge = (rule, value, callback) => {if (!value) {return callback(new Error('年龄不能为空'));}if (!Number.isInteger(value)) {callback(new Error('请输入数字值'));} else {if (value < 18) {callback(new Error('必须年满18岁'));} else {// 校验通过放行!!callback();}}};// 数据return {stuList:[],currentPage: 1,pageSize: 3,total: 0,addDialogVisible: false,editDialogVisible:false,stu:{sname:"",age:0,sex:"",score:0.0,birthday:""},rules: {age: [{ validator: checkAge, trigger: 'blur' }]}}},// 函数methods: {// 抽取查询数据的方法,可以复用// 页面大小变化时,改变pageSize// 当前页变化,即跳转页面时// 提交添加表单,并隐藏对话框// 处理更新回显handleEdit(index, row) {this.editDialogVisible = true;this.stu = row},// 提交更新表单,并隐藏对话框editForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {console.log("提交更新表单--->  ",this.stu)axios.put('/stu/edit',this.stu).then(ret =>{if (ret.code == 20000) {// 重置当前页为第一页,this.currentPage = 1;// 查询最新数据,从第一页查this.getData();}})} else {console.log('error submit!!');return false;}});// 隐藏对话框this.editDialogVisible = false;// 对话框清空this.$refs.editStuRef.resetFields()},},// 定义生命周期函数,页面加载完即展现数据
}
</script>

问题1: 后端查询日期到前端显示少一天!

解决: @JsonFormat(pattern = “yyyy-MM-dd”,timezone = “GMT+8”)

参考解决springboot框架返回前端的日期值少一天_springboot 后端传给前端的时间不是24小时-CSDN博客

十二、删除

image-20231211174605778

思路:

1)删除按钮

2)弹出确认框,确定删除,取消

3)确定删除,发请求携带id

4)删除完重新查询数据

image-20231211142808829

image-20231211142910357

十三、批量删除

image-20231211174629974

1)设置复选框改变,获得选中行数据

image-20231211150256814

2)点击批量删除按钮,发请求

image-20231211150435783

3)后端接收id数组

image-20231211150535084

十四、模糊搜索

image-20231211174503098

需求: 提供根据名字模糊搜索,年龄等值搜索,时间区间搜

思路:

1)设置卡片,卡片中设置 搜索表单

2)点击搜索,发请求搜索 -->用的还是查询全部,只不过多带了一些搜索关键词

3)搜索后数据还在表格 中展现

  <div style="margin-bottom: 10px">
<!--  搜索框卡片--><el-card :body-style="{ padding: '20px',height:'30px'}"><el-form :inline="true" :model="searchModel" status-icon ref="searchModelRef" label-width="100px" class="demo-stu"><el-form-item label="用户名"prop="sname"><el-input style="width: 200px" size="small" type="text" v-model="searchModel.sname" autocomplete="off"></el-input></el-form-item><el-form-item label="年龄" prop="age"><el-input style="width: 50px" size="small" type="text" v-model.number="searchModel.age" autocomplete="off"></el-input></el-form-item><el-form-item label="生日"><el-col :span="11"><el-form-item prop="birthday1"><el-date-picker size="small" type="date" placeholder="选择日期" v-model="searchModel.birthday1" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker></el-form-item></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-form-item prop="birthday2"><el-date-picker size="small" type="date" placeholder="选择日期" v-model="searchModel.birthday2" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker></el-form-item></el-col></el-form-item><el-form-item><el-button size="small" type="primary" @click="searchSubmit">提交</el-button><el-button size="small" @click="resetSearch('searchModelRef')">重置 </el-button></el-form-item></el-form></el-card></div>
<script>
import axios from "axios";
export default {name: "View4StuInfo",data(){return{// 搜索关键词searchModel:{sname:"",age:0,birthday1:"",birthday2:"",pageSize:3,pageNum:1}}},methods:{//代码见图}
}

image-20231211163946789

改动 了getData()函数,从原来只有分页查询,改成了带上模糊关键词查询

image-20231211164039908

后端查询全部的接口,变成接收map,map中就包含搜索关键词和分页数据

image-20231211164139806

mapper做动态sql查询

image-20231211164241383

总结

  1. 前后端对接注意事项
// 前端发 get,用params
axios.get('/login',{params:{username:this.username,password:this.password,}
}).then(ret =>{})// 后端Controller,方法正常写两个变量名接收
@GetMapping("/login")
public R login(String username,String password){}

// 前端发 post
axios.post('/login',{username:this.username,password:this.password,
}).then(ret =>{})// 后端Controller,方法正常写两个变量名接收接不到!!!
// 方法参数列表需要用对象,且加@RequestBody
@PostMapping("/login")
public R login(@RequestBody User user){}

  1. 看日志,从日志中 你自己写过的相关的单词,变量,属性,方法等等

  2. axios有响应拦截,确定项目是否配置拦截!! 如果配置了拦截,我们已经在拦截中取出了响应的数据,即axios成功回调函数then中的ret就是获得的R

  3. 前后端对接

    增前端发post,携带数据是json后端@PostMapping,参数列表用json对应的java实体类,配上@RequestBody
删一个前端发get,携带参数可以 用{param:{id:1}}后端@GetMapping,参数列表用一个基本类型int id接收
删多个(批量)方案一:前端发get,携带参数可以拼接后端@GetMapping,参数列表用List,配合@RequestParam方案一:前端发post,携带参数,直接将数组放在data处后端@PostMapping,参数列表用List,配合@RequestBody	  	
改前端发post/put,携带数据是json后端@PostMapping,参数列表用json对应的java实体类,配上@RequestBody
查(空参)
查(简单参数)前端发post,携带json参数后端方法参数列表用对象接收,@RequestBody------前端发get,携带{params:{username:'zs',password:'123'}}后端方法参数列表,直接设置(String username,String password)
查(复杂参数)前端发get,携带params参数后端方法参数列表用Map接收,配合@RequestParam

    基本上,前端只要使用post发送json,后端就得使用@RequestBody+对象

    前端使用get发送,普通参数,后端 正常接收 ,默认List,Map类型参数需要@RequestParam
    ord){}

```js
// 前端发 post
axios.post('/login',{username:this.username,password:this.password,
}).then(ret =>{})// 后端Controller,方法正常写两个变量名接收接不到!!!
// 方法参数列表需要用对象,且加@RequestBody
@PostMapping("/login")
public R login(@RequestBody User user){}

  1. 看日志,从日志中 你自己写过的相关的单词,变量,属性,方法等等

  2. axios有响应拦截,确定项目是否配置拦截!! 如果配置了拦截,我们已经在拦截中取出了响应的数据,即axios成功回调函数then中的ret就是获得的R

  3. 前后端对接

    增前端发post,携带数据是json后端@PostMapping,参数列表用json对应的java实体类,配上@RequestBody
删一个前端发get,携带参数可以 用{param:{id:1}}后端@GetMapping,参数列表用一个基本类型int id接收
删多个(批量)方案一:前端发get,携带参数可以拼接后端@GetMapping,参数列表用List,配合@RequestParam方案一:前端发post,携带参数,直接将数组放在data处后端@PostMapping,参数列表用List,配合@RequestBody	  	
改前端发post/put,携带数据是json后端@PostMapping,参数列表用json对应的java实体类,配上@RequestBody
查(空参)
查(简单参数)前端发post,携带json参数后端方法参数列表用对象接收,@RequestBody------前端发get,携带{params:{username:'zs',password:'123'}}后端方法参数列表,直接设置(String username,String password)
查(复杂参数)前端发get,携带params参数后端方法参数列表用Map接收,配合@RequestParam

    基本上,前端只要使用post发送json,后端就得使用@RequestBody+对象

    前端使用get发送,普通参数,后端 正常接收 ,默认List,Map类型参数需要@RequestParam


http://www.ppmy.cn/news/1266201.html

相关文章

蓝牙配对、连接和删除汇总

蓝牙配对、连接和删除汇总

目的&#xff1a;处理PC连接蓝牙设备的配对、连接和删除操作&#xff0c;以及常见故障。 命令行配对蓝牙设备并连接 要求&#xff1a;配对BLUET043蓝牙&#xff0c;密码为4444&#xff0c;然后连接该蓝牙。操作步骤如下&#xff1a; Step1.下载 修复工具&#xff0c;然后安装…
阅读更多...
【后端学前端】第二天 css动画 动感菜单（css变量、过渡动画、过渡延迟、js动态切换菜单）

【后端学前端】第二天 css动画 动感菜单（css变量、过渡动画、过渡延迟、js动态切换菜单）

目录 1、学习信息 2、源码 3、变量 1.1 定义变量 1.2 使用变量 1.3 calc() 函数 4、定位absolute和fixed 5、transform 和 transition&#xff0c;动画 5.1 变形transform 5.2 transition 5.3 动画animation 6、todo 1、学习信息 视频地址&#xff1a;css动画 动感菜…
阅读更多...
数据结构 | c++编程实现求二叉树的叶节点的个数。(递归非递归)

数据结构 | c++编程实现求二叉树的叶节点的个数。(递归非递归)

目录 非递归 递归 非递归 #include<iostream> #include<stack> using namespace std; struct BTNode {int data;BTNode* left, * right;BTNode(int val) :data(val), left(NULL), right(NULL) {}}; //递归的方式求二叉树的叶子结点数 int countnode(BTNode* t) …
阅读更多...
JavaScript 函数的返回值

JavaScript 函数的返回值

JavaScript 函数的返回值 JavaScript 函数的返回值是函数执行后返回的值&#xff0c;可以是任意类型的值&#xff0c;包括数字、字符串、布尔值、对象等。函数的返回值通过 return 关键字来指定&#xff0c;如果函数没有指定返回值&#xff0c;则默认返回 undefined。例如&…
阅读更多...
Dockerfile创建镜像介绍

Dockerfile创建镜像介绍

1.介绍 Docker 提供了一种更便捷的方式&#xff0c;叫作 Dockerfile&#xff0c;docker build命令用于根据给定的Dockerfile构建Docker镜像。 docker build语法&#xff1a; # docker build [OPTIONS] <PATH | URL | -> 常用选项说明 --build-arg&#xff0c;设置构建时的…
阅读更多...
数据结构-矩阵

数据结构-矩阵

介绍 数据结构中的矩阵主要涉及以下几种&#xff1a; 对称矩阵&#xff1a;若矩阵A n*n中的元素特点是a[ij]a[ji]&#xff0c;则称之为n阶对称矩阵。对称矩阵的每一对元素占用一个存储单元&#xff0c;那么对于n阶矩阵&#xff0c;可以压缩到n(n1)/2个元素的存储单元。对角矩阵…
阅读更多...
基于SpringBoot的就业信息管理系统设计与实现（源码+数据库+文档）

基于SpringBoot的就业信息管理系统设计与实现（源码+数据库+文档）

摘 要 在新冠肺炎疫情的影响下&#xff0c;大学生的就业问题已经变成了一个引起人们普遍重视的社会焦点问题。在这次疫情的冲击之下&#xff0c;大学生的就业市场的供求双方都受到了不同程度的影响&#xff0c;大学生的就业情况并不十分乐观。目前&#xff0c;各种招聘平台上…
阅读更多...
Maven项目引入本地jar

Maven项目引入本地jar

Maven项目引入本地jar 1.对应maven模块项目中建lib目录&#xff0c;将jar放入进去 2.在对应的模块pom.xml中引入此依赖jar 3.在对应的maven-plugin插件打包的pom.xml中指定需要includeSystemScope为true的jar
阅读更多...
最新文章

Copyright @ 2022~2023