![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
智慧实验室管理系统项目vue3+springboot
文章平均质量分 72
栗穎呀
嘴馋丫头的努力学习成小废物之路
展开
-
27.upload组件以及更新系统平面图
实现学校的二维平面图的上传管理,要有这个功能才能够根据我们不同的学校进行定制化的一个需求处理。我们虽然整个项目是spring boot也能够进行上传,我们得写好上传的一个接口。原创 2023-10-07 20:33:03 · 253 阅读 · 0 评论 -
21.审核列表组件
前端复制粘贴修改预约列表中的代码我们这里只返回要审核的数据,所以在前端发给后端的请求的时候,会跟后端说明我们要的只是那个book_state是需要审核的那个值。我们创建一个过期的日期看看会不会被显示在审核列表中这里没有10月4号的预约。原创 2023-10-07 16:07:49 · 222 阅读 · 0 评论 -
26.loading与nprogress
加了axios拦截器之后我们再添加一个用户体验,我们数据请求发出去之前要弹出来一个loading框,告诉用户我们正在拼命的跟后端交涉要数据。如果数据回来我们的loading框就消失,如果数据回不来我们就给他弹出一个警告,或者告诉他一下为什么。我们在拦截器请求发出去之前显示loading框,再在请求成功之后隐藏loading框,失败的话也隐藏,再加个处理比如弹出一个错误原因。我们可以把网速调慢测试一下。原创 2023-10-07 12:26:38 · 213 阅读 · 0 评论 -
25.前端axios拦截器
一刷新前端报错了,以前我们登录成功了也不需要校验,要数据后端就给我们,现在不行了,必须传入token,那现在我们哪有token值,因为我们要请求一些数据,所以直接请求的话就报401错误,也就是我们在后端自己写的,现在我们后端改好了,前端还没开始。从前端发起的所有axios请求都应该携带上我们的token,而这个token是在我们登入成功之后就应该拿到的。后端使用了拦截器,我们前端也有类似于发请求的拦截器,那就是使用第三方的库axios。axios的好处就是它的封装性、使用便利。原创 2023-10-07 11:06:26 · 390 阅读 · 0 评论 -
24.后端token拦截器
接下来就是处理token。我们应该是获取前端的token并调用getTokenClaims方法,怎么获取凭证,看看能不能获取成功,没有获取成功怎么办,获取成功了怎么办。原创 2023-10-06 21:23:10 · 359 阅读 · 0 评论 -
23.JWT配置
因为这个token里面它就存着我们的有效的载荷信息负载信息都在这个前端的token中,其实流程就是我们登录成功之后后端给我们生成一个token,这个token里面包含了我们的用户个人的信息存到前端的localstorage中,等前端再发请求的时候自己携带的这个token给我们的后端,后端只需要解析这个token拿到里面的有效信息能看到解析成功没有过期这样的话就允许给它返回数据。的一个问题,所以说用户量再增大的话我们的这个成本就会变的越来越高,这也是Cookie Session的一个小弊端问题。原创 2023-10-06 16:08:10 · 300 阅读 · 0 评论 -
22.实验室首页大数据
首页大数据来给用户宏观的展现我们整个地图的这些实验室被预约和正在审核中的一个预约状态。原创 2023-10-06 10:18:53 · 113 阅读 · 0 评论 -
20、预约列表
查询当前登录用户的预约信息。原创 2023-10-05 20:47:14 · 101 阅读 · 0 评论 -
19.预约实验室
预约实验室是教师所拥有的权限。所以我们应该用教师角色进行登录了。原创 2023-10-05 17:09:32 · 134 阅读 · 0 评论 -
18.实验室列表
完善剩下的内容实验室类型也是如上方法实现。原创 2023-10-03 18:38:23 · 94 阅读 · 0 评论 -
17、实验室接口开发以及添加实验室
创建数据库表我们先插入一条数据方便后面的接口测试。原创 2023-10-03 11:24:44 · 110 阅读 · 0 评论 -
16.地理空间可视化
我们重新刷新一下页面之后就看到了我们这个AntVL7的一个地理空间可视化的一个使用,这地图还可以自己放大缩写,放大之后会发现还能交互,我们在这里没有写相应的事件处理它的交互是不好用的,高德地图和腾讯地图、百度地图它们确实是开放了,但是你对应到自己申请自己的token,我们现在所使用的是别人的,所以它会提示说是一个“测试token,生产环境务必自行注册 Token 确保服务稳定”。接下来要做的就是点任何位置都支持交互,弹出来一个 Pop,这个 Pop层里面有个小按钮让你选择此位置就是这样的一个效果。原创 2023-10-02 20:39:52 · 217 阅读 · 0 评论 -
15.用户列表添加、更新及删除功能的实现
注意:发完了post请求,后端添加数据成功之后还要重新再获取一遍我们这个getList方法,让我们的列表重新的再获取一遍最新的,这样的当前页面才会发生改变,也就是不用自己手动的刷新页面就能获取最新数据。确定按钮绑定事件,注意:要进行强行校验,要不然会是这样的一个效果就是我们一点击添加用户之后我们也不输入内容就直接点击确定,我们默认失去焦点这一块的校验不会触发。这也正常,我们不能一更新就可以看到用户的密码,所以我们就直接输入新的密码就可以了。为防止上一次填写的信息还在,我们再进行个赋空。原创 2023-10-02 17:00:09 · 174 阅读 · 0 评论 -
13.用户列表接口开发
is_default字段是临时加的,因为我希望某个用户是不能被删除的不能被更新的,就是我们默认的一个账号,通过这个字段我们可以在用户列表中,像管理员是我们的测试账号,不能随便删了,删了我们登录不进来了,我们又得重新创建一遍。后面两条是插入的假数据。以上就是把查询接口给封装好了,我们部署完了之后,我们将来在前端中可以通过我们post的/adinapi/users/login进行我们的登录查询工作了,而在我们的用户管理中的用户列表中我们可以直接get请求获取我们的用户列表来进行我们的table的一个布局。原创 2023-10-01 16:58:45 · 184 阅读 · 0 评论 -
12.角色列表的删除功能
还是一如既往的操作3.测试在页面中删除成功。原创 2023-10-01 12:42:53 · 101 阅读 · 0 评论 -
11.角色列表更新
复制粘贴之前在权限列表中的对话框再进行修改。原创 2023-10-01 12:30:54 · 110 阅读 · 0 评论 -
10.角色列表组件
我们鼠标移入的时候,我们应该拿到当前这一行是管理员身份就拿到当前这一行的rights数组进行判断。当我鼠标移到教师上就拿到当亲教师这个身份那个rights数组进行判断,到底该不该设置上红色的背景。原创 2023-09-30 21:07:29 · 120 阅读 · 0 评论 -
9.角色列表接口开发
开发role相关的接口,流程跟right是一样的。原创 2023-09-30 17:51:33 · 109 阅读 · 0 评论 -
8.后端ResultOBJ封装以及权限列表的删除功能实现
我们现在返回的在将来更新成功还是删除成功略微粗糙,因为你直接就是返回了一个,包括将来我们在登录成功之后其实我们返回的信息应该是一个多元化的信息并不是一个字符串包含所有,因为将来如果只有字符串的前端的话如何判定这次更新是不是成功或者是不是失败,所以在这里的话我们可以把由我们后端写的所有的接口的我们做一个封装。这样的话我们就可以做一个设定,比如说返回了整个字段中的话,有。原创 2023-09-30 01:52:28 · 256 阅读 · 0 评论 -
7.Rightlist.vue权限列表组件
然后我们再去实现方法,直接去RightServiceImpl中让它自动去补全代码就行了。定义handleUpdate方法拿到当前点击的这一项item,获取这一项里面的全部信息。原创 2023-09-29 01:06:03 · 95 阅读 · 0 评论 -
6.权限列表接口开发
小辣椒插件可以给我们自动生成geting、setting等等相关的一些方法。原创 2023-09-27 10:41:06 · 190 阅读 · 1 评论 -
5.SpringBoot搭建
基于mybatis去操作数据库,因为mybatis可以很方便的去通过这种对象关系映射的方式去操作我们的数据库,比传统的JDBC可以提高效率,减少很多重复的一些代码。首先我们要配置好数据库源,就要先找到在resources文件夹中的application.properties文件,我们使用yaml风格的,所以要修改文件的扩展名。通过数据源的一个配置,就能连接到我们的数据库上了,然后我们在基于mybatis的这种对象映射进行去写我们的操作数据库中的各种语句。然后在Path属性上再加上我们maven的路径。原创 2023-09-25 10:18:53 · 132 阅读 · 1 评论 -
4.MainBox组件之导航栏
public是vite创建了这一个静态的资源文件夹,所以我们通过“/”直接访问到这个图片的一个地址,这样也更方便。编译也不用担心编译不了,因为在最后编译之后它也会把我们的这个文件放在你最后的编译的那个包的根目录下,所以public的下面,东西都会放在根目录下,到时候你放在你后端的资源文件夹下的话一样的能通过“/”就能访问到了。头像这里我们可以把它换成我们自己的图片,因为这是人家服务器上的一张图片,万一将来这个服务器崩掉了的话我们就拿不到这张照片了,我们这就可能会出问题。src下面有一个原则:万物皆模块。原创 2023-09-23 23:30:36 · 156 阅读 · 1 评论 -
3.MainBox组件之布局及侧边栏创建
该页面三个结构:侧边栏、导航栏、后台系统。原创 2023-09-23 21:19:48 · 366 阅读 · 1 评论 -
2.登录模块—表单和粒子效果
加上scoped了就不行,因为这个时候的样式它是要唯一属性选择器,就我们这个用的别人的组件而且别人的组件内部那些标签是加不上我们外面这个属性的,那这该怎么办呢?那没有了这个唯一属性,我们所写的样式就影响不了这个标签了,这就造成了scoped不好用的一个原因了。我们把options里面的东西拿出来,因为太多了,在那里放这一堆太难看了,我们就弄一个单独的一个叫粒子配置文件,我们在src文件夹下创建一个util文件夹,里面放工具代码工具逻辑的工具文件夹,再在里面创建config.js。我们换自己的背景图片。原创 2023-09-22 22:24:43 · 182 阅读 · 0 评论 -
1.vue路由
1.约定大于配置2.路由拦截在 Vue 中,可以通过进行权限控制和登录拦截。路由守卫是在Vue.js中用于控制的功能。它是一个函数,当路由变化时会触发该函数,可以在该函数中进行一些操作,如检查用户是否登录、检查用户的权限等。原创 2023-09-22 15:08:31 · 90 阅读 · 0 评论 -
14.用户列表组件
之前我们用的是假数据放在这里,现在要换成真的数据查询了。你会发现前后端如果当初按照约定的接口的话将会非常平滑和顺利,但是如果前后端出现的问题我当时让你传回来的是role这个字段,你给我传回来的是一个A字段,那这样的话我们就得改很多地方,因为我们在存储数据还在查询的时候不都是依靠这些东西吗,所以前后端连体是一个大活。所以说前后端两个人的话一定是合作,一定是相互协作才能够把项目快速的完成。原创 2023-10-02 12:25:18 · 154 阅读 · 1 评论