关于做系统的种种逻辑
做系统的难点如何在后端用mapper对数据库查询?如何弹出一个表单?如何把查询到的类放在一个分页里面关于vue里面的方法和发送请求如何在表单里面限制只能选择固定个数的选项?一些小的语法小的心得
对于类的理解对于计算机网络的理解关于一些逻辑
搜索逻辑后端响应逻辑前端编写逻辑 做系统的难点
这是我做的第一个系统,因此在完成这个系统的时候,感觉还是有很多困难的地方的。很多时候好不容易懂了各种各样的逻辑,但是实际上写代码的时候又不知道如何下手,写新的功能的时候,不知道怎么实现,怎么查找都不知道应该怎么办。其实出现这样的情况的原因主要如下:
1)系统存在的多数情况为异步的,和我们常规的顺序思维有很大的差异,无法用归纳性的思维进行思考
2)对于数据库,各种工具不熟练,导致要不是语法不熟悉不知道应该如何写,要不是不知道小工具和实现功能的内在逻辑
解决的办法如下:
1)不要试着对代码进行归纳,而是梳理业务逻辑线。先搭好前端的框架,然后按照业务的逻辑来一点点写页面的功能和后端的功能。
2)熟悉这种工具的使用方法,明白逻辑,慢慢的一点点的搞懂,不要着急
下面就是我积累的常用的一些逻辑的写法~
其中,前端我们使用了element plus中的组件,后端我们用到了mybatis和mybatis-plus的框架。
在实现后端和数据库的查询的时候,我们使用了mybatis和mybatis-plus工具来帮助我们。其中我们在重新写mapper的时候,直接重写查询语句,对于数据库进行查询。语法如下。之后就可以直接用mapper.方法名字进行查询。
查询所有不同的数据/带前端参数的查询
public interface BatchMapper extends baseMapper
那么如何在有搜索内容的时候,完成查询,并且更改对应的数字呢?
@Select({"select thesis.thesisid,thesis.title,thesis.author,thesis.supervisor," + "thesis.department,thesis.submit_Time,thesis.memo,thesis.url,thesis.status, n" + "(case when thesis.status=1 then "未分配"n" + "when thesis.status=2 then "已分配" n" + "when thesis.status=3 then "已评审"n" + "when thesis.status=4 then "评审已分配上会"n" + "when thesis.status=5 then "会评通过"n" + "when thesis.status=6 then "会评不通过"n" + "when thesis.status=7 then "已分配给系主任"n" + "when thesis.status=8 then "已安排答辩"n" + "when thesis.status=9 then "答辩通过"n" + "when thesis.status=10 then "答辩上会"n" + "when thesis.status=11 then "答辩已分配上会"n" + "when thesis.status=12 then "答辩上会未通过"n" + "end) as stringstatus from thesisn" + "where ((thesis.thesisid like concat("%",#{search},"%")) orn" + "(thesis.title like concat("%",#{search},"%")) orn" + "(thesis.author like concat("%",#{search},"%")) orn" + "(thesis.supervisor like concat("%",#{search},"%")) orn" + "(thesis.department like concat("%",#{search},"%"))) and " + "(thesis.batch = #{batch}) and (thesis.degreetype = #{type_id})"}) List
写一个表单,其中绑上一个batchDialogVisible来控制是否显示
按钮写的时候改变变量为true就可以
这个里面的search需要在data里面写好,输入点击按钮之后,就会跳到load方法里面对于后端发起请求~
后端一般要不像开始的介绍一样,直接写select语句,要不就如下用wrapper
if(StrUtil.isNotBlank(search)) { wrapper.like(Teacher::getName,search).or() .like(Teacher::getDepartment,search).or() .like(Teacher::getDirection,search).or() .like(Teacher::getDiscipline,search).or() .like(Teacher::getField,search).or(); }
如何把查询到的类放在一个分页里面 主要语句:
Page thesisPage = new Page<>(pageNum,pageSize)
thesisPage.setRecords(allthesis)
即先建立一个分页的对象,再把装了对象的List放进去
下面是一个完整的例子:
前端显示部分:
前端方法部分:
前端的方法和数据都是对应的
数据:currentPage、pageSize表示的是当前的页数和每页的数据的个数
需要在data里面写一下的,这里省略没有展示,pageNum、pageSize都是你点击之后的参数的情况,
方法:handleSizeChange、handleCurrentChange 这里可以实现对于页数的修改,并且重新调用load()方法后, 可以对页面重新进行加载,加载的时候因为会重新分页查询,因此就可以加载显示出分页改变之后的新加载出来的信息。
handleSizeChange(pageSize){ this.pageSize=pageSize this.load() }, handleCurrentChange(pageNum){ this.currentPage=pageNum this.load() },
后端:
@GetMapping("/getallthesis") public Result<?> getallthesis(@RequestParam(defaultValue = "1") Integer pageNum, @RequestParam(defaultValue = "10") Integer pageSize, @RequestParam(defaultValue = "") String search, @RequestParam(defaultValue = "138134") String username) { Page
created() // 到这个页面的时候就可以触发,需要写在method的外面load() // 普通的函数,但是我们一般都喜欢写成加载页面的时候,我们希望完成的查询,这样很生动形象mounted() // 重新加载的时候可以触发,需要写在method的外面
其他的方法就自己写啦~但是写了之后发送请求的语法
多个参数,多次请求:
loadTeacher(){ request.get("/teacher",{ params: { pageNum: this.currentPageTeacher, pageSize: this.pageSizeTeacher, search: this.searchTeacher } }).then(res=> { console.log(res) this.dtableData = res.data.records this.dtableData.number = 1; this.total = res.data.total }).then(res=>{ this.dtableData.number = 1; }) }
如何在表单里面限制只能选择固定个数的选项? 前端页面展现代码:
这里
前端方法:
handleSelectionChange(val) { this.multipleSelection = val; console.log("multipleSelection:",this.multipleSelection) }, select(selection, row) { console.log("selection.length:",selection.length,"this.form.reviewernum",this.form.reviewernum) if (selection.length > 3-this.form.reviewernum) { let del_row = selection.shift() this.$refs.multipleTable.toggleRowSelection(del_row, false) this.$message({ type: "error", message: "已选择超过三位评审专家!" })}},
一些小的语法StrUtil.isNotBlank(search) //判断过来的字符串是不是空的this.form=JSON.parse(JSON.stringify(row)); // 把表格中的一行当成字符串style="margin-bottom: 5px;margin-left: 10px" // 调整边距// 把一行作为一个对象传进去
这一次写完代码之后,对于类的理解更加深刻了
以前只知道类里面有属性和方法
现在会把类理解为属性和方法的集合,而之所以这样集合是因为集合里面的这些东西相关性更加的高,便于使用和操作。至于如果需要的话,完全可以做另外的集合(比如我们写的虚拟的VO,也只是为了把信息放在一个类里面,好在前端呈现这样,至于世界上存不存在VO代表的东西,我们其实完全没有关心)
其实我们整个在写的时候,都有用到服务器和浏览器的概念。我们前端就是浏览器,把相应的信息展现给我们看,后端就是服务器,对于浏览器发过来的请求做出相应的反馈,返回数据。你只在前端看,是完全不知道后端在干什么的,但是你只从后端看,又很难想到前端的设计是什么。因此,我认为最好的步骤是,先搭建前端,知道怎么展现,有哪些步骤;之后再就不怎么看前端了,主要看代码,前端写请求,专注在后端写方法返回数据。逻辑也很简单,我请求,你返回,我再请求,你再返回,就可以啦。最后让前端再展现数据,就很好。
慢慢的又相信了,所有的编程都不难,只要知道很基本的东西就好了。比如知道程序无非就是数据和指令,知道系统无非就是请求和响应,之后难的就是其他的更小的逻辑了,但是这个基础逻辑是很容易理解的。
关于一些逻辑 搜索逻辑搜索的逻辑其实是重新的查询了一遍,把search的值传进去了,然后让后端数据库去重新查询,重新返回数据
感觉编程多了之后,很好的更新了自己以前的认知和喜欢幻想的习惯,因为很多东西你以为是程序给你多加了一些什么,其实不是,是程序整个给你重新加载或者查询了一遍。(之前还写过一个美颜相机的项目也是这样的,每一次都需要重新画图片)
后端响应逻辑基本就是前端的请求发送给后端的controller,然后后端的controller开始干活,但是这个相当是一个能力很强的主管,因此这个controller并不会干一些最简单的活,比如和数据库有关的活,因此这个主管有很多小帮手,mapper们,就来帮忙进行数据库的查询。
前端编写逻辑前端的编写的顺序基本是先写页面上可以看到的,给变量起好名字和方法,想好做事情的顺序,之后在变量里面注册变量,在方法里面写好方法,就可以啦~