做快手头像的网站,做网站免费吗,青岛网站建设迅优,站群论坛项目笔记#xff0c;教学视频来源于B站青戈 https://www.bilibili.com/video/BV1H14y1S7YV
保证前面的都功能都实现后#xff0c;接着往下走。
查 分页
接下来#xff0c;实现前端页面分页功能。
前端分页组件
打开elementplus官网#xff0c;找到合适的分页组件…项目笔记教学视频来源于B站青戈 https://www.bilibili.com/video/BV1H14y1S7YV
保证前面的都功能都实现后接着往下走。
查 分页
接下来实现前端页面分页功能。
前端分页组件
打开elementplus官网找到合适的分页组件其对应代码如下
templateel-pagination background layoutprev, pager, next :total1000 /
/template放到前端的表格组件下方加个div包裹。
js加个变量因为total总记录数量应该是从数据库拿到的是动态的。
!-- 分页组件--divel-pagination background layoutprev, pager, next :totaltotal //divconst total ref(0) //总记录数初始为0然后打开后端项目实现分页查询需要与SQL语句配合而且浏览器的路由也可以修改后缀。
后端SQL语句修改
首先是数据库的SQL语句复制上个SQL代码稍加修改让其实现分页借助LIMIT这个分页函数后面的两个参数第一个是开始序号第二个是每页放置多少条记录。
select * from user where name like ‘%张%’ or date like ‘%张%’ or address like ‘%张%’ or user_no like ‘%张%’ LIMIT 1,2接着尝试修改后端的SQL代码
在UserMapper新增SQL代码
注意Param在导入包的时候要选择有apache单词的包选错会导致报错。
Select(select * from user where name like concat(%,#{name},%) or date like concat(%,#{name},%) or address like concat(%,#{name},%) or user_no like concat(%,#{name},%) limit #{start}, #{pageSize})
ListUser selectPage(Param(name) String name,Param(start) Integer start,Param(pageSize) Integer pageSize); //三个参数在UserController这个文件添加以下代码 GetMapping(/page) //表示访问到这个函数返回值其路径是【localhost:9090/user/page】public Result selectPage(RequestParam String name,RequestParam Integer start,RequestParam Integer pageSize){ListUser userList userMapper.selectPage( name,start,pageSize);return Result.success(userList);}前端SQL相关修改
后端配置得差不多前端也进行相应修改来到HomeView.vue 把数据请求的路由更改成与后端SQL语句还参数一致的
const load () {request.get(user/page?name input.value start1pageSize2).then(res { // request.get(user/all?name input.value).then(res { //name改成inputconsole.log(res)state.tableData res.data})
}然后数据库、前端、后端都运行打开前端项目生成的本地网址若表格出现数据则这一步成功。
但是上面的分页参数start1pageSize2是静态的写死的我们希望这个分页参数是可以根据用户手动选择的于是要考虑运用分页组件的参数。
找到elementplus前端分页组件的代码加上两个数据绑定
原来
el-pagination layoutprev, pager, next :totaltotal/修改
el-pagination layoutprev, pager, next v-model:current-pagepageNum v-model:page-sizepageSize :page-size[1,2,5] :totaltotal/
在js加上这两个变量为了把页码的两个参数变成动态的初步修改如下
const pageNum ref(1) //页码。最小的是1
const pageSize ref(1) //页码大小实际上数据库无记录可以显示零条但是理论上最起码显示一条const load () {let start pageNum.value - 1 //数据库的记录序号从0开始但是前端页面数据从1开始request.get(user/page?name input.value start start pageSize pageSize.value).then(res { //省略代码})
}去看前端的分页但是发现没反应。
首先因为组件的total 变量数值默认是 零但数据库目前的总数量是2故手动修改。
const total ref(2) //总记录数其次分页没有触发load函数故回到elementplus官网找到分页切换触发的两个函数所以修改如下
原来其他属性省略没写el-pagination layoutprev, pager, next / 修改后el-pagination layoutsizes,prev, pager, next size-changeload current-changeload/补充
layout属性有多个属性值它们有不同的功能从左到右依次为
total表示后端数据的总条数即页面上的 “ 共400条 ”sizes表示每页能容纳多少条数据即页面上的下拉选框 “ 100条/页 ”prev表示向前翻一页即页面上的 “ ”pager表示指定翻到哪一页即页面上的 “ 1 2 3 4 ”next表示向后翻一页即页面上的 “ ”jumper表示直接跳去哪一页即页面上的 “ 前往 3 页 ”
二个核心事件
size-change事件当你使用下拉选框改变page-size属性时它能监听到page-size属性的变化并立刻将最新的值自动传给的事件处理函数你甚至无需给它手动传参current-change事件当你改变current-page属性时它能监听到current-page属性的变化并立刻将最新的值自动传给相应的事件处理函数你甚至无需给它手动传参 然后发现分页组件的文案都是英文想改成中文可以使用elementplus的国际化功能。来到前端项目的main.js 添加下面的代码
import zhCn from element-plus/dist/locale/zh-cn.min// app.use(ElementPlus) //原来的
app.use(ElementPlus,{ //修改的locale: zhCn,
})一个新的问题随着数据库记录数量的增多发现最后一条记录会被吞掉原因是数据库页的起始序号计算有问题
原来
const load () {let start pageNum.value - 1 //数据库的记录序号从0开始但是前端页面数据从1开始//省略代码
}修改
const load () {let start (pageNum.value - 1)*pageSize.value //数据库的记录序号从0开始但是前端页面数据从1开始为了避免吞数据需要乘每页的数量//省略代码
}动态total 修改
下一个问题total的数值目前还是静态写死的为了改成动态的需要从数据库中查出具体数值并显示到前端上。
第一步后端项目在UserMapper文件新增代码复制粘贴上面的SQL语句然后修改如下
Select(select count(id) from user where name like concat(%,#{name},%) or date like concat(%,#{name},%) or address like concat(%,#{name},%) or user_no like concat(%,#{name},%))
Integer selectTotal(Param(name) String name); //一个参数,函数返回值是integer类型第二步后端项目UseController文件新增代码主要是增加total这个变量把数值顺利传递到前端修改如下
原来
GetMapping(/page) //表示访问到这个函数返回值其路径是【localhost:9090/user/page】
public Result selectPage(RequestParam String name,RequestParam Integer start,RequestParam Integer pageSize){ListUser userList userMapper.selectPage( name,start,pageSize);return Result.success(userList);
}修改
GetMapping(/page) //表示访问到这个函数返回值其路径是【localhost:9090/user/page】
public Result selectPage(RequestParam String name,RequestParam Integer start,RequestParam Integer pageSize){ListUser userList userMapper.selectPage( name,start,pageSize);Integer total userMapper.selectTotal(name);MapString,Object map new HashMap();map.put(list,userList);map.put(total,total);return Result.success(map);
} 然后重新访问前端页面发现表格里面的数据没有显示出来。
为什么因为刚才修改的Controller文件把返回的数据包裹成map类型keyvalue里面有两个key如下图data里面有两个对象需要进一步访问。
所以前端访问data的代码要稍加修改在前端项目HomeView.vue修改
原来
el-pagination layoutsizes,prev, pager, next/const load () {//省略代码({state.tableData res.data})
}修改(layout加上total这个布局展示一共有多少条数据)
el-pagination layoutsizes,prev, pager, next,total/const load () {//省略代码({state.tableData res.data.list //修改这里total.value res.data.total //添加这个语句 })
}补充说明layout等号右边的单词排序也有是有讲究的会根据你排放的顺序调整哦 增
刚开始前端的增删改查都是在前端单方面的简易模拟接下来与数据库挂钩。
先做增加功能。
增加的数据中有“日期”信息之前为了简单只用了字符串String类型但是实际上是用专门的日期组件更加方便美观。
在elementplus找到日期选择器组件复制粘贴然后根据自身需求修改代码如下
el-date-picker v-modelstate.form.data typedate placeholder选择一个日期 /来到后端把数据库SQL语句写好来到UseMapper新增代码如下
Insert(insert into user(name,date,address,user_no) values( #{name} , #{date} ,#{address},#{userNo} ))
void insert(User user);来到UseController新增代码如下 PostMapping(/save)public Result save(RequestBody User user){userMapper.insert(user);return Result.success();}至此后端代码ok需要修改前端的相应代码。
来到前端项目HomeViews.vue 修改save函数
原来
const save () {if (globalIndex.value -1) { //编辑数据state.tableData[globalIndex.value] state.form;globalIndex ref(-1)} else { //新增数据// 向表格添加数据state.tableData.push(state.form);}// 关闭弹窗dialogFormVisible.value false;
}修改
const save () {console.log(state.form)//打印当前弹窗的数据内容request.post(/user/save,state.form).then(res{if (res.code 200){ElMessage.success(保存成功)// 关闭弹窗dialogFormVisible.value false;}else {ElMessage.error(res.msg)}},err{console.log(发送post请求失败,err) //现在是后端返回错误})
}但是运行的时候出现错误如下
Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed; nested exception is org.springframework.http.converter.HttpMessageConversionException: Type definition error: [simple type, class com.example.springboot.entity.User]; nested exception is com.fasterxml.jackson.databind.exc.InvalidDefinitionException: Cannot construct instance of com.example.springboot.entity.User (no Creators, like default constructor, exist): cannot deserialize from Object value (no delegate- or property-based Creator)at [Source: (org.springframework.util.StreamUtils$NonClosingInputStream); line: 1, column: 2]] with root cause找了师兄才解决这个问题
在后端UseMapper添加三个注解并且引入相关的包
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;Data
AllArgsConstructor
NoArgsConstructor接着就可以在数据库中查看数据是否被增加进去。
发现虽然添加成功了但是添加的时间格式有问题 故需要修改时间格式解决很简单elementplus有时间格式的属性修改如下
原来el-date-pickerv-modelstate.form.datetypedateplaceholder选择日期/修改el-date-pickerv-modelstate.form.datetypedateplaceholder选择日期value-formatYYYY-MM-DD/改
下一个功能修改数据
跟“增加数据”步骤相似
后端项目修改SQL语句打开UseMapper新增下面的代码一定不能写错变量的名字
Update(update user set name #{name}, date #{date}, address #{address} ,user_no #{userNo} where id #{id} )
void update(User user);然后打开UseController新增代码如下 PutMapping(/update)public Result update(RequestBody User user){ //函数名原来是saveuserMapper.update(user);return Result.success();}相应地前端网络请求也要进行相应修改来到HomeView.vue
原来
const save () {console.log(state.form)request.post(/user/save,state.form).then(res{if (res.code 200){ElMessage.success(操作成功)// 关闭弹窗dialogFormVisible.value false;}else {ElMessage.error(res.msg)}},err{console.log(发送post请求失败,err)})
} 修改
const save () {console.log(state.form)request({url: state.form.id ? /user/update:/user/save,method: state.form.id ? PUT :POST,data: state.form}).then(res{if (res.code 200){ElMessage.success(操作成功)dialogFormVisible.value false}else{ElMessage.error(操作失败, res.msg)}})
}更新数据操作成功后发现虽然数据库的记录更新了
但是前端页面还没有及时更新所以调用load
const save () {//省略代码if (res.code 200){ElMessage.success(操作成功)dialogFormVisible.value falseload() //调用查询方法及时更新数据 }//省略代码
}补充一个细节希望新增的记录能够显示在最前面所以SQL语句查询的时候增加一个倒序排序
order by id desc
原来
Select(select * from user where name like concat(%,#{name},%) or date like concat(%,#{name},%) or address like concat(%,#{name},%) or user_no like concat(%,#{name},%) limit #{start}, #{pageSize})
ListUser selectPage(Param(name) String name,Param(start) Integer start,Param(pageSize) Integer pageSize); //三个参数注意相应类型修改
Select(select * from user where name like concat(%,#{name},%) or date like concat(%,#{name},%) or address like concat(%,#{name},%) or user_no like concat(%,#{name},%) order by desc limit #{start}, #{pageSize})
ListUser selectPage(Param(name) String name,Param(start) Integer start,Param(pageSize) Integer pageSize); //三个参数注意相应类型删
后端
UseMapper新增代码 Delete(delete from user where id #{id})void delete(Integer id);UseController新增代码 DeleteMapping(/del)public Result delete(RequestParam Integer id){userMapper.delete(id);return Result.success();}前端HomeView.vue 多余的代码省略了
原来
el-button click.preventremove(scope.$index)删除/el-button
// 删除数据
const remove (index) {// 从index的位置开始删除一行state.tableData.splice(index, 1)
}修改
el-button click.preventremove(scope.row.id)删除/el-button
// 删除数据
const remove (id) {request.delete(user/del?idid).then(res{if (res.code 200){ElMessage.success(操作成功)load() //调用查询方法及时更新数据}else{ElMessage.error(操作失败, res.msg)}})
}以上就是小白入门增删改查的基础操作了
