非常简单实用的前后端分离项目-仓库管理系统（Springboot+Vue）

本视频详细讲解了如何使用Springboot和Vue从零构建前后端分离的仓库管理系统，适合毕设学习。

UP主: 编程界小明哥 · 时长: 11h33m · 🔗 B站原视频

标签: Springboot · Vue · 全栈开发 · 仓库管理系统 · 项目实战

刚才讲了这个diment ui的一个导入支持啊然后这一节我们来聊一下这个搭建这个页面布局怎么去做嗯后台管理系统它的一个页面布局一般都长那样子的呃我们找了一个例子看看其实跟这个有点像啊然后你看左边是菜单对吧所以这里是一些主要的显示的一些内容在上面还有就是上面一个就是比方说这边有个什么登录退出啊图头像什么的类似这样的就在这里搜一下吧后台我的系统我们找挂了电动图我看看有图片吧你看这这随便都都差不多对吧不要这个让我们放大一点点现在左边是菜单对吧然后这边这边有一点啊这个可能还还不是我们要的反正其实都差不多都大概长这个样啊要周边菜单对吧看一下哪个图比较合适这个有点像是不是啊上面有个头左边一个菜单右边一个显示内容啊就打个涨幅这样我们就按这种这种来那个做啊其实啊这个东西面对疾风大浪呃刚才接了个电话我们来继续就是说还是按照这个大概这个样子啊左边菜单上面一点点啊一横叫头吧啊右边是一个主体的内容那其实的话这个id的ui它本身就有这个啊有这个可能的布局容器啊我们就按照这个来做就好就可以了我们找到这个肯定是那个布局准器不局容器啊它这有个介绍其实我们要找到这个就我们都是往下翻一翻啊大概就放到这里就有个实例啊实力你看他这个就基本上符合要求了左边菜单上面有hd啊这里是主体的内容比方说显示列表啊什么的或者相搭什么的就类似这样的所以我们就可以大概的把这个代码拿过来参参照一下是吧我们先打开显示代码我们把这个首先把上面那个给它复制一下复制一下然后我们在这里啊我们在这里先现在新建一个我们在这里新建一个新建一个view组件那如果说你这个id没有支持那个view组件的就是i d版本可能比较老的它默认可能是不支持这个的那你就自己去安装一下安装一下这个插件就好了啊我们叫它就叫index index好然后我们把这个刚才的那个代码放在tm net里面这是第一步然后还把其他的也拿过来然后这个样式是吧对的样式拿过来嗯嗯嗯放到这里还有就是这里面的数据这个数据给它拿过来数据放到这他这里有20行对吧我不要那么多搞十行左右吧好我们来把这个这个index给它加到我们这个a p p这里面来那我们这个128等于玩具就不要了我们就直接index 他这个应该index我们要在这个里面再加上来并且我们要引入它我们把它插这个导入进来啊好然后我们再来看看啊你看这个布局页面上来了但是他现在是有些问题的比如说你看上面这里对吧我们来看看这是什么导致的啊我们打开这个调色我们调试再来看一下首先这个看看啊他这里有个margin 60对吧在这个d i v a p p啊 d i d i v这个app这里我们看一下找到这个app 我们看这里是不是有什么设置啊你看就这个地方有个market吧对吧就跟他玩这这些我都不要了给它删掉好这个上去了对吧那我们看看还有为什么要调整的啊我看看这个表格什么的看起来好像你上面还离这个地方都有点宽对吧看看这个是不是确实是这样的吧你看这里这里宽高比较多对吧其实这里有有个这个20是吧 pd 20 我们到时候后面写很多代码的时候都可能会用到这个拍点阿拉丁啊这样的然后我们再设一个全局的怎么怎么个意思呢就是说我们在这里建一个全局的一个css 点击下一个样式表好我们就全去掉比方说我们让这个新形态的一个marg 然后肯定都是零啊就这么一个设置啊这个星大家知道是什么意思啊就是所有的这个元素啊用的marketing和pd都是零然后我们在这个嗯main js里面我把它打导入一下就跟这个一样就跟这个index一样的给他导入一下找到这个cs给它导入一下这样它就会导入进来了这是为了方便大家用啊但是我看这个好像也没有变化刚才这个是这个上面的倒是上去了对不对确实是有用啊但是这个地方好像没用啊这个地方可能刚刚才就是看错了这个padding他不是啊跟那个有关只是单独开的地方看看哪里啊这个这里有关这里有个l面对吧那那也简单啊我们觉得它不好看是吧我们就把这个样式给它覆盖一下我们找到这个样子再看这个里面对吧他这个有个head跟aside是吧他这个没没有对吧大致电它是默认的我们就不像那么多了他是20对吧我搞个五行不行我不要那么多啊他就说的小一点这样子就可以变得小一点啊但其实我们这里还有一些问题啊就是说比方说这个没有占到全部那么高对吧没有占满没有占满啊那我们需要怎么做呢我们把这个把这个一层一层都给它设置一下这个heat啊设置成百分之百从这个从这个a p p这个里面开始啊还有这个index里面然后我们找到这个你看这里有个container 这是可这也设置一下设置一下百分之百复制一下啊我们把这些地方都给它设置一下吧嗯你看这个地方还是要设置啊这个这个不设的话他也是也是不行的在这个这一层设置了然后还是这个main里面也要设置一下这样设置应该就没问题了因为他现在已经占满了那我把这个说起来对吧现在这边已经占满了已经占满了也就是说我们设置的时候尽量把这个每一层都给它设置一下那个in 2 min呐这个还这个肯定在里面的就是这样这个还得也可以设置一下对方完全是蛮神的到时候有空隙啊好吧就是这个管理系统的布局给他弄弄一下下一节的话我们需要把这个负面拆拆解啊为什么拆解的就是你这一块头还有左边的导航菜单以及右边的一个主要内容啊都给它拆解开了因为我们这个如果你放在一起就会显得很臃肿也不清晰所以我们到时候会把这个呃这个然后这个s 这可能里面的header啊还有这个main分别就是每一个都单独拎出来这样就更好的把这个代码给它分散开这样不管是后面修改起来已经就是我们看起来阅读起来都是比较舒服啊你看现在放成一团到时候陆陆续续的还会在家跟我说这个啊主页面到时候还会加不同的东西是吧这样就会看起来比较舒服啊所以到时候需要去把它分解开来那这一节我们就先聊到这里

页面布局的拆分

[无字幕]

编写头部页面

[无字幕]

导航菜单页面的编写

[无字幕]

导航菜单的伸缩

[无字幕]

安装axios与跨域处理

[无字幕]

列表的基本展示

[无字幕]

分页查询

[无字幕]

传参查询功能

嗯小伙伴大家好把这个分页处理的啊给大家一起做完了这次我们来做这个查询啊查询的话就是说我们在这个上面做的查询的功能啊因为我们这个页面的话肯定要有查询相关的东西呃我们采取比较常见的这种东西啊就是呃输入框对吧就我们要查询一进行一些比方说摩擦有没有按名称来名字来查询什么的还有一种就是下拉框啊下拉框就是说呃我有固定的这些选择条件比如像这里啊可能选男女或者说呃这这种管理员啊用户啊通用管理这种啊我们可以用下的框来啊比较方便还有一种比较常用的就是时间啊时间当然我这里没有去写啊因为我目前的这个这个地方还用不到时间啊所以我这里就不讲了等后面那个呃有用到时间的时候啊具体功能的时候我们再来讲这个时间的采取功能啊这就和大家一起把这个啊比较常见的一个输入框和下拉框做一下然后我们先看看这个啊布局啊我们先把这个查询的布局来做一下那个查询的布局其实就这很简单啊首先前面有个比方说有个啊前面区域有一个输入框或者下拉框后面有个查询清空或者说重置按钮啊我们就要重置按钮吧嗯一般就是这样啊那我们先先把这个页面上稍微改造一下你们先找找出这个页面啊我们在这个table上面给他来一下啊我先给大家来个div吧嗯比较清晰啊在这个div里面就写首先我们有个叫input 这个叫输入对我们先来一个输入框啊然后我们给他来个站位啊我要请请输入名字名称或者名字啊就这样吧啊它就出来了是吧首先我们看看这个太长了是不是太长了我们把它缩小一点然后给它来个样式带我们给他来一个嗯 200px好吧看一下啊就没那么长啊还有就是我们感整体感觉这个整体的一个样子也不是特别好看啊感觉这一颗颗质量有点高是不是还有这个很高是吧其实我们可以设一个统一的风格风格啊我们在这个main js里面我们可以可以设置一下比方说我们以前是这样引入的是吧我们可以这样优势一下给他来个对象对象里面有个size啊然后来个small 啊我们这样改一下你看我明显看到了这个页面刷新了一下它有这个缩小了一点啊稍微好看一点啊同时这个这上面那个框啊与下面这个地方是不是离得太近了是吧我们来给它修改一下比方说我们在这里我们给这个div啊我们让这个整个这个div应该有个jack style 我们来个marin button on 我们来个5p x调整一下那这样稍微有点距离啊距离产生美嘛好然后我们在后面加两个按钮加两个按钮我们是用1l8 第一个叫查询然后第二个叫重置是吧我们给它上点颜色啊第一个我们就用这个第二个我们就用用success 然后再按就出来了我们在这里给他来点样式是吧靠的太近了我们让这个第一个啊我们也给他来个margin left 我也来个5p x好吧这样子稍微有点距离哈看起来然后同时我们再给这个啊给大家一个后后缀的一个图片啊我们在这个element的这个官网啊 element官网可以看到这个东西的我们找到这个input啊再上面一点再form在这个有个input啊这个input我们跟我下翻翻对啊我们看到这个属性水啊在这地方输入尾部框尾部按钮啊我们可以用这个我们在尾部加一个输入框尾部输在输入框的尾部啊我们给他来个图标按e l里面的i我们有没有四驱好我们加上试试我看这里是不是多了个搜索的图标啊这样看起来挺舒服更舒服一点然后我们现在要做的是什么呢我们点这个查询的时候我们查询的列表并且把这个数据给他传到后端去是吧好那我们现在要做的第一项我们给它添一个click 可以看我们要做的是什么事情也是一个漏的load pose对吧我们要对应的就是这个load pose 但是我们这个load pose呢这里我还需要传一个这个name过去吗就上次和大家一起封装的那个啊我这个我要p a r m 这是代表我需要传的参数啊是吧大家不知道这次下来也没印象啊我的那个讲后端的时候有有有一起封装的啊就这个因为我们需要三个参数一个是配置size 配置number 还有这个problem啊这个参数啊这个problem的话我们就传一个对象对吧这个对象里面有什么属性你自己可以定义你想穿什么就穿什么像我这里的话我现在就穿一个内幕好吧 name哈然后我这个内容从哪里拿默默认是这样的是吧那我的肯定要从这个从这个输入框里面来呀我输入框里在这里呢是吧那我这个输入框我要来个v缸model 因为我要我要随时去监控它是吧比方说我觉得就有内幕啊啊这个内容我们在这里定义一下啊定义好了以后呢那我去查询的时候我是不是从这个name里面去拿历史点内容啊当然这个内容跟这个内容跟这个类似于内部是不是同一个东西对吧我这只是参数名啊是吧所以这个对象的属性属性名啊然后我从这个历史上的name 觉得是他他他他学的就是这个是吧就是输入框的内容那我们这样传到后台去我们先看看这个参数有没有去传啊好吧我先把这个控制台打开一下让我先输给我们首先从这个view里面去看好我们看看好首先这里是是是确实是有的对吧这已经改了那我们点查询点查询啊他有没有查到后台去我们总在network里面我看还有传到后端去了是吧他现在没有东西是不是这样的我猜的这个我就要这个好吧好超级管理好吧不要那么多查询一下对吧他就能查出来因为为什么他能这样直接查呢因为我们开始定义的这个方法 lost page c啊我们从这里面看这里我们就是把这个name已经设写好了like 所以他能直接查如果你没有写好那肯定谈不了我们这个内部是确实从这里去的对吧待我们做那个呃性别这个搜索的话我们就得另外自己填代码了好吧这里是刚好我们已经填过了所以这里就肯定能填啊这是啊第一个这个名字的一个查询查询完这个呃这个名字的话我们还要把这个下拉框给他弄一下啊同时啊我们先把这个输入框做完吧我们这个输入框是不是还要加一个这个事件还有个回车事件啊现在因为我们比较常用可能我这输完以后我直接敲回车对吧现在敲回车没反应是不是我敲了回车没反应那我们就需要用到这个事件了啊我们就可以在这input里面再加个四件那它也等于等于这个啊跟我们那个这里的点击用调用的同一个为什么这么写呢这个kiss kick up应该知道我敲完键盘以后放掉他就会触发对吧然后enter就表示我回车是不是回车键啊那这个nt为什么要讲因为这个input的它是默认长默认是没有这个事件的没有时间的啊你加上nt才会生效啊你不加nt v它不会生效的好然后我们现在再来试一下是吧你看我敲了回车它就能敲的是回车啊我并没有点查询对不对我并没有点查询当然我点查询也是一样的会动是吧我不敲回车五点查询也是一样的好这是讲好了这个啊回车事件啊然后我们再来把这个下拉框的给它做一下那下拉框啊我们可以从这里找一下这个下拉框的对吧我一般啊我个人比较喜欢这种可搜索的这种啊其实很多都可以用那我就把它拿出来那无非就是在后面添一个嘛是吧然后这里还是请选择我们就说性别的那个性别然后这个many我们用sex 然后它的这个数组我们就然后我们在这一个定义两个东西第一个是这个啊我们监控这个赛事然后还有还有就是我们那个呃下了框的值的一个数字的具体内容好吧所以第一个是sex 第二个是这个然后它呢是一个数组是吧它数字内容我们可以从这里去看它的输出内容是这样的是吧它是这样的然后数组里面有对象对象里面就这样我们只需要两个对吧所以我们就把这个一个是lab 一个value啊它只有两个属性是好我们拿过来我玩61的是男嗯是零的我就是嗯对吧啊它是这样的好那我们来就这样来把它显示了你看这样我们就能显示出来了是吧那但是呢我们现在呃这个两个之间隔得太近了是吧我们可以稍微的也给它加个样式是不是跟这是不是一样的让他有个5p x好这样就好了是吧这样稍微有点距离距离产生美是吧好现在我们再来看看啊啊如果说我选择这个难查询看他的数据先看一下他的这个东西没啥没有啥是不是我们没有这个赛事给他传到后代所以我需要在这个参数这里是不是很简单那你会不会呢这是不是很简单了啊我刚才内幕是怎么传的我现在就是不是一样的对吧因为我在这sex历史点sex在这里啊但是已经定义了对吧那这个是对应的model是哪个呢对应的v model是不是他对吧也就是这个下拉框的内容是不是跟这个name vivo model是不是一样好我们这样就能把数据传到后台去能表达我现现在选择难对吧我搜一下我有点查询啊这找到最下面这个看这个sex是传到后台了对吧但是现在没有效果是不是那个女的跟男的没有区分开来为什么因为我的sans在后端没写的是吧所以我们要找到后端这个单位那就写一下也就是说你这里现在我这个啊这个先聊的不要了现在你就只取了个name 我现在这个sex是不是也有好我起到这个性别然后我同跟他一样的是吧我再来个判断当然我觉得这个这个东西我也可以不要啊不太喜欢他好这个sex对吧然后他就不是get name呢它的get sex好这样子like它不是like了啊因为我们是表里的数据也是零和一所以一口啊好我们来给后台的代码要重启一下重启下午我们再查那我们再谈好看这是男的对不对啊我们切换成女的对吧这是确实是生效的吧是不是如果我再多说一点是不是啊这个栏里面就没有对吧啊这个说明现在的常用条件这个是可以的啊现在我还差一个啊就这个重置啊重置的话无非啊无非就是说我们要把这个给他回归到原始的状态啊我们有两种啊第一种就是我们如果我们就直接这样写的我们就直接把它对应的model给它设置设置成原始的就行是吧还有一种就是如果我们用到l form嘛我们就可以用调form的方法去重新的一个比赛对吧这里啊这里我们这里也没有用到那个e放到那个新增啊修改的时候会用e form 到时候再用e l f啊这里我们就直接从事啊也其实也很简单对吧我们在这里加一个click 我们叫reset好set 参与条件 said holy 或者我好吧这样是不是可以那我们需要的干嘛我们需要就补位就把两个重置下的数据是吧那我们就在这个找个地方那我们接下来我们就在这写好吧那我们要做的是不是非常简单 or lease stand name 等于这样子是不是然后再把那个呃四点sex 那两个是重置一下好啊不然我现在选了它我重置它就是没了对啊我输了输了啊控制也没有是不是好像我这样子啊我33抽不到对吧我从这下来查他就有了比方说我这个啊我选难的对吧啊我充值我再查他全部能查出来是吧这样就完了我把这个基本就把这个差点能不能给他讲完了啊这样我不知道我这样的一个想法大家能不能说听得明白啊我觉得还是比较清晰的应该来说呃能够听得明白而且是一步一步的对吧啊比较详细的给大家去讲然后下一集的话我是打算搞这个在这里搞个按钮叫新增的啊把这个新增的功能给大家讲讲一下新增的话会涉及到这个啊 form要放嘛还有那个debug 就是弹出的弹出框是啊这一节就先到这里哈那希望大家能够给我来个三连什么的支持我一下啊感谢大家