管理信息系统课设（spring boot + vue）开发日志（一）

最新推荐文章于 2025-03-01 22:02:04 发布

洗发水很好用

最新推荐文章于 2025-03-01 22:02:04 发布

阅读量527

点赞数 1

文章标签： vue.js springboot

本文链接：https://blog.csdn.net/a983677218/article/details/130952371

版权

临近大三期末，突然发现还有管理信息系统的课设要写。决定爆肝几天，记录一下开发遇到的问题。避免后面再次踩坑。目前打算，前端用 vue-admin-template 框架进行二次开发。后端用springboot+mybatisplus快速开发项目，后续有用到的技术会继续补上。

我的gitee地址，放了后端spring boot的代码。看诊信息管理系统开发中....: 看诊管理系统开发中（后端管理端）spring boot....一个期末课设作业....

下面简单介绍一下从github上拉来的vue-admin-template框架,一开始拉来的项目，一共有两个页面一个是登录页面，第二个是管理后台页面。所有视图层的页面都在src/view中写。

首先是登录这一块

首先登录页面，前端的接口在项目的src/api/user.js页面下，api文件夹也是我们写所有前端接口的地方，这部分决定了我们调用后端那个接口，很重要。在我们没连接后端时，默认是从mock中拿假数据登录。

相信很多人和我一样刚刚开始看这里的时候，我还在想上个页面中user.js中的axios在哪里=.=。其实就是在原项目的src/request.js里对axios进行了二次封装。这个页面中对请求request和响应response都做了拦截处理，

对request请求这里可以设置请求头，因为这个项目中登录是分为两个请求，一个是从后端拿到登录令牌token，二是通过登录令牌从后端拿到用户信息，只有拿到用户信息后再能继续登录系统。对于第一次拿到的token，一般会把token放到后续每一次请求的请求头中（上图中X-token就是请求头属性名），作为身份认证。后端如果使用JWT来创建token，那么一般会设置JWT的拦截器或者过滤器从每一次请求的请求头中获取token进行身份认证。

对于response响应拦截器，因为现在都是前后端分离的项目。所以后端统一返回实体类R中要设置返回成功的状态码（前后端状态码一定要统一不然全给你拦了，你都不懂哪里出问题），一般是200，这里默认是20000，记得修改。如果有其他需求，可以对其他response的状态码进行判断处理，图中对登陆令牌失效后端返回的几种状态码进行了统一处理。

还有就是所有登录api的调用，原项目都在src/store/modules/user.js中，在view中写的vue页面中都是调用user.js里的方法。相当于又封装了一遍....。如果对登录返回的信息有其他的处理可以自行进行修改。

重点来了管理后台这块

登录完毕后，路由会跳转到这个主页。这个空空如也的页面，就需要我们慢慢往里面丢东西了。简单说一下，左边这块菜单，也是我们的路由表在下图中可以自行去修改

在这个src/router/index.vue页面中，每个菜单的名字对应下图中的meta中的title属性，而每一个chidren对应一个菜单的下级（可以无限套娃，多级菜单就是这样实现）。最重要的就是component属性，这个import中对应的路径就是你想要展示出来的那个页面。

看起来后台很麻烦，其实就是一个页面中，点击菜单中的选项，然后再通过路由表显示出我们想要的页面。对于view文件下的东西就是我们接下来敲HTML，CSS，JS的时间了。因为是vue.js框架项目中已经帮我们引入了element UI库，大大减少了我们敲html和css那部分的时间（但是前端设计的东西还是很折磨人），具体的跳转官方网站学习如何使用。组件 | Elementhttps://element.eleme.cn/#/zh-CN/component/select

因为是使用Vue开发前端页面，最好还是组件化开发，使用父子组件的方法，父组件作为视图层给子组件传递参数，子组件实现具体的页面功能。这样一个vue页面中的代码会异常简洁，后续方便修改。

*小坑，MD用父子组件，在子组件中用this.$emit和this.$parent调用父组件都失效。官方文档没说具体原因，我琢磨了半天发现你要在调用子组件的标签内，手动绑定父类方法，例如<suncomponet @sun="parent" /> 这样在子组件中才能使用this.$emit（‘sun’,param）,这里sun就是父类的parent方法，把我恶心坏了。但官方文档不需要@sun="parent" 这一步，不知道是不是版本问题。

*小小坑，然后就是在子组件中调用父类方法时，如果父类会对传到子类的参数进行修改时候，控制台会报错。建议如果需要修改，则在子组件中定义data对应传进来的参数，并通过watch监听传进来的参数改变data值，这样就不会报错。