前端----如何制作门生管理体系
概要技术主要是elementui以及vue2，而且门生管理体系是我们老师一步步带着我们画的，本节内容是课程的第二部门：画首页框架+门生管理界面。
第一步：画整体框架
https://i-blog.csdnimg.cn/blog_migrate/7c2f6ce4bc637bd1afa6dedc8450ffe4.png
这个图片布局就是: “头部”+“内容区（包罗目次）”
去elementui组件库---找到对应的布局---然后复制黏贴：
https://i-blog.csdnimg.cn/blog_migrate/489fc9958ae94873b809dd3732b9fa1c.png
效果如下：
https://i-blog.csdnimg.cn/blog_migrate/9da8c0c48a18e98ece6c3edd53c091f6.png
发现没有占满整个屏幕----设置这个容器高度为100vh即可
https://i-blog.csdnimg.cn/blog_migrate/d9685592cf04e8ebd87f743770126209.png
效果图【颜色本身吸色】：
https://i-blog.csdnimg.cn/blog_migrate/8e27388e1353c890d1e56d0833825392.png
第二步：美满头部
https://i-blog.csdnimg.cn/blog_migrate/a2ddcecc5e7756ce6ee268daacd5165e.png
可以：flex布局+space-between去实现
https://i-blog.csdnimg.cn/blog_migrate/a7c773f98df93bd632ef86f182b45316.png
效果图
https://i-blog.csdnimg.cn/blog_migrate/ae69fa27516993fcdd1524058e3db41b.png
第三步：侧边栏
https://i-blog.csdnimg.cn/blog_migrate/b7356269575a534c65881149108331a5.png
复制这一份
https://i-blog.csdnimg.cn/blog_migrate/f253d441da89c80ff32df0b0383323ad.png
然后删除多余部门，只剩下如图
https://i-blog.csdnimg.cn/blog_migrate/95b3b66c73cbc5b45208707059372449.png
效果图
https://i-blog.csdnimg.cn/blog_migrate/b0288c17235a1546fa5deab8ed1a147d.png
美满代码：
https://i-blog.csdnimg.cn/blog_migrate/6bc41570330834b1e2eecc87387b7a86.png
效果图
https://i-blog.csdnimg.cn/blog_migrate/4a5b97d12751f02a0fa13f0d9b9ed740.png
有个标题就是----点击菜单后---激活样式没有任何配景颜色更改，解决办法：
https://i-blog.csdnimg.cn/blog_migrate/df3ed0dc3de96cf17856f6185737fcf6.png
https://i-blog.csdnimg.cn/blog_migrate/691a7c353cabd6c16b973f5712f7bf66.png
效果图：
https://i-blog.csdnimg.cn/blog_migrate/ebf0f8e4ca1867acc2291b5348ff0fc5.png
发现有个瑕疵！！！
https://i-blog.csdnimg.cn/blog_migrate/fb2564558a8c629a515869876ed2ee58.png
解决办法：
https://i-blog.csdnimg.cn/blog_migrate/bb9e89116d72b97df67b48c3c5d5866a.png
所以
https://i-blog.csdnimg.cn/blog_migrate/17ef9f69e09aa84947c1d0f2b0b4033f.png
效果图
https://i-blog.csdnimg.cn/blog_migrate/8d04f74914b3a0d86bac5bfcc11ffb92.png
好啦，大抵界面框架就完成了，现在开始画局部内容！！
第四步：侧边栏实现---点击跳转到对应的页面
elementui的导航菜单---有提供路由功能---借助它实现咱们想要的效果
https://i-blog.csdnimg.cn/blog_migrate/b86a5319eb291ab9214b1c50c45f9baa.png
使用方法
https://i-blog.csdnimg.cn/blog_migrate/dfffb0b5170e89559df11d21d5afb59a.png
构思--将“首页”，“班级管理”，“门生管理”的页面-----单独作为子路由
https://i-blog.csdnimg.cn/blog_migrate/9a361c0b3cd5580888934aadf21e2597.png首先配置router：
https://i-blog.csdnimg.cn/blog_migrate/26a1c9ef99c543bd4e76eea3d675a36f.png补充this.$route可以看到局部路由信息，当前在哪个路径就是打印当前的路径https://i-blog.csdnimg.cn/blog_migrate/f275419a7f7795c1ee69d7f0fd4c48d6.png
所以
https://i-blog.csdnimg.cn/blog_migrate/d2d92f5594c8002f7b8d37e5edb58a6c.png
图中的default-active="$route.path"：它的作用是将当前路由的路径与菜单项的路径进行匹配---
直观地就是--假如不配置default-active="$route.path"--当你刷新页面后，你的菜单之前选的就会消散掉！！----配置了----就不怕刷新后，你所选择的那个导航菜单的内容又刷新没了！！！
效果图：https://i-blog.csdnimg.cn/blog_migrate/ca0b8381903683c6b2d785865880d190.png
第五步：添加路由保卫
路由保卫是个啥？
没有登录的状态下---用户只能进入登录页和注册页----用户想通过链接进入主页，也只能跳转到登录页或注册页
第一步：引入所需库https://i-blog.csdnimg.cn/blog_migrate/04308d42d488251867b9d9c39c478d78.png
第二步
https://i-blog.csdnimg.cn/blog_migrate/5035049ac9f366e220cd37c0df573b20.png
在登录和注册路由这边加个判定【局部路由】：是否登录---是的话直接进入首页，否则进行无登录提示操纵
https://i-blog.csdnimg.cn/blog_migrate/04738753161a9cdd59a3010490d60d3a.png
第六步：画门生管理界面
首先这个布局分为左右，用<el-col>的span占比来实现宽度比
https://i-blog.csdnimg.cn/blog_migrate/f5106eb8c2d5b359ef26be517259d50f.png所以这么写
https://i-blog.csdnimg.cn/blog_migrate/d4ec077008fdc86c15344695ddada5c6.png
效果
https://i-blog.csdnimg.cn/blog_migrate/c17a17e76ab8eead3309aaa3648cdc8d.png
咱们加个间隔offset
https://i-blog.csdnimg.cn/blog_migrate/0a9b265912b041af6aed22e2f8c330b6.png
效果
https://i-blog.csdnimg.cn/blog_migrate/ad6539de46337cfc3d08d9d2ee460883.png
第六步：画左边班级列表
https://i-blog.csdnimg.cn/blog_migrate/7fba1679a4bd8102a27aa0c127b14ba5.png
开始制作左边的班级列表，可以接纳eelementui的树形控件，顺便把data数据给copy过去进行二次修改
https://i-blog.csdnimg.cn/blog_migrate/ff39961f8cd76dc16ddc8127ced06dd3.png
https://i-blog.csdnimg.cn/blog_migrate/7ca2d35e66e27affafccc5c142f13806.png
修改后代码https://i-blog.csdnimg.cn/blog_migrate/c65f055dc9360b4855ed8eaa42fe027b.png
效果：
https://i-blog.csdnimg.cn/blog_migrate/f9ec145ea1b987a09f366154eff29aaf.png
第七步：画右边头部搜刮框
https://i-blog.csdnimg.cn/blog_migrate/119ed11563015200c6babc63ebe89403.png
去复制这个代码样式
https://i-blog.csdnimg.cn/blog_migrate/366a7605eb72e95a50d7ff9f190504b6.png
https://i-blog.csdnimg.cn/blog_migrate/b4318063d97211120b016d1670063a6c.png
修改代码后如下
https://i-blog.csdnimg.cn/blog_migrate/50b14db40da192807f3ea93e28c45e98.png
效果如下：
https://i-blog.csdnimg.cn/blog_migrate/c1c4aee3d4e225cfbbc2d4977f78368c.png
我们想让他们并排：更改inline为true
https://i-blog.csdnimg.cn/blog_migrate/f40953fce3f33bf9157d00fc67944843.png
效果https://i-blog.csdnimg.cn/blog_migrate/027a1db335af8d28ab9b056a8d3c6d18.png
加入添加按钮，很简单啦
https://i-blog.csdnimg.cn/blog_migrate/843de78769ed40ac7babbf4b9eedc498.png
https://i-blog.csdnimg.cn/blog_migrate/3655463c527110fe4d222bf723494553.png
效果
https://i-blog.csdnimg.cn/blog_migrate/5b87aadc940883f8741bf3e06bc0d146.png
第八步：画表格
https://i-blog.csdnimg.cn/blog_migrate/2c0bb910abfc4a72a6aebb6a7a90984d.png
老样子copy样式和数据
https://i-blog.csdnimg.cn/blog_migrate/2f093d40d2485af1f0a113ece7e542c3.png
https://i-blog.csdnimg.cn/blog_migrate/45164ee30dd269000ff0670ef9d7ae3e.png
https://i-blog.csdnimg.cn/blog_migrate/3d310db9048909a332257f3966edd818.png
序号效果
https://i-blog.csdnimg.cn/blog_migrate/3ee1d20212c88ee5c4daf9d9822b6455.png
代码美满
https://i-blog.csdnimg.cn/blog_migrate/3ad407ad5e028b19843c24b6ab72e811.png
效果https://i-blog.csdnimg.cn/blog_migrate/8eef6b7f76d09a6ef5ea128c6c764ccd.png
分页效果很简单，直接copy
https://i-blog.csdnimg.cn/blog_migrate/ef0a19ee37c1e08c783bfb9ce1554360.png
copy
https://i-blog.csdnimg.cn/blog_migrate/4c318e9b504e65c4c7cec428231fa83e.png
代码
https://i-blog.csdnimg.cn/blog_migrate/2ad30c6d14d95f1b648fb46ec58d6d25.png
效果
https://i-blog.csdnimg.cn/blog_migrate/61e54f5c12510b31884018ca149790a2.png
整体页面效果
https://i-blog.csdnimg.cn/blog_migrate/2e583eb0bff73a7fc4e264736a77ee2c.png
第九步：获取班级列表【添加哀求拦截】
配置好接口
https://i-blog.csdnimg.cn/blog_migrate/aec239ed7d4485d97da32228b1ed2aa7.png
调用该接口
https://i-blog.csdnimg.cn/blog_migrate/3fe03088e5490294c3b3f65b940f8e17.png
报错啦！！！
https://i-blog.csdnimg.cn/blog_migrate/c6049d28f16f8c80a96fe2a1a768fb7e.png
原因：接口加上“authorization”才会让你去访问
为什么呢？：比方你没有登录，你想调用该接口，该接口不会给你返回数据--保证安全
解决办法：哀求拦截
在request.js文件中
https://i-blog.csdnimg.cn/blog_migrate/e3a58698afc9026d23a965f8a9e27525.png
查看config是个啥
https://i-blog.csdnimg.cn/blog_migrate/c27e34383deec7c3854ae3c2aa97eda1.png
https://i-blog.csdnimg.cn/blog_migrate/264f31061355b098e058de995ee4c48e.png
到底如何做？？逻辑思维：判定是否带token，假如带有就放行发送哀求。
1：人为添加判定
https://i-blog.csdnimg.cn/blog_migrate/ff1a50e209e1af31a26da1be67223828.png
可以看到哀求拦截中获取到了isToken
https://i-blog.csdnimg.cn/blog_migrate/942bca32da62b4765a2fd21d3479206a.png
代码
https://i-blog.csdnimg.cn/blog_migrate/758c3dc767a24265930f5909c0ec74d0.png
然后判定完添加完咱们给她返回出去
https://i-blog.csdnimg.cn/blog_migrate/6c5db97347fc904efc2a8229b399bc5a.png
效果
https://i-blog.csdnimg.cn/blog_migrate/d6d847af617270246d1b182883d22ee7.png
优化哀求拦截
你要是有很多个登录完的一些接口，每个接口你都必要加上isToken=“true”,如许就很麻烦！！
咱们如何优化？给登录和注册接口添加isToken=false，其余接口哀求直接在拦截上面主动加上isToken=“true”,
首先去掉班级信息接口的Token
https://i-blog.csdnimg.cn/blog_migrate/74f8ee8e99e9e6e50032a62d56d29f27.png
登录接口
https://i-blog.csdnimg.cn/blog_migrate/e2a78f925a5efd440a99a993f870faf6.png
注册接口
https://i-blog.csdnimg.cn/blog_migrate/1c3ee15841a58dc4048457075d4ba598.png
代码优化
https://i-blog.csdnimg.cn/blog_migrate/6a52c2993219579424c4849f8e7cf3d1.png
效果
https://i-blog.csdnimg.cn/blog_migrate/1328fcf2f37bdb40762496bf4ff7cb1b.png
补充
非登录注册页会有这个
https://i-blog.csdnimg.cn/blog_migrate/e6838691dfc36351cea6b297c58f127e.png
登录注册页就没有
https://i-blog.csdnimg.cn/blog_migrate/b731857098c38b5a2134eb73b32f344b.png
调用接口获取数据并渲染https://i-blog.csdnimg.cn/blog_migrate/bc7cf15f5cad0d82d0eb216c1e4f9230.png
因为接口中班级的名字是这个
https://i-blog.csdnimg.cn/blog_migrate/7d9a93b2654cf3ac5539c0d8373a2185.png
所以label绑定的名字记得同步
https://i-blog.csdnimg.cn/blog_migrate/0d0461deb592222af079703d4db9c364.png
效果
https://i-blog.csdnimg.cn/blog_migrate/d4117efb6f3a72f2f24ac32db431ce01.png
第十步：获取门生列表
这个门生列表接口必须的参数
https://i-blog.csdnimg.cn/blog_migrate/9801fc0c4c866260784764b552eb1561.png
接口
https://i-blog.csdnimg.cn/blog_migrate/f1273c3917e763772b0cfe5eecf55694.png
模拟接口数据传值看看
https://i-blog.csdnimg.cn/blog_migrate/300dd09c7bf9702a53f0f5b49103f651.png
效果
https://i-blog.csdnimg.cn/blog_migrate/b5b2e71d45e6f3a215d6a0941fba4e47.png
第十一步：如何页面一进入就会显示前端37班的班级数据？？
https://i-blog.csdnimg.cn/blog_migrate/ed57d384363a7984e8b3dc0f0998df73.png
如何获取树形控件【elementui里面的树形控件】的数据信息？？？
1.https://i-blog.csdnimg.cn/blog_migrate/9e4b09706dad07d41b8a4ab837f06b3c.png
是这个点击事故函数
https://i-blog.csdnimg.cn/blog_migrate/113fde3ffa23c472a5990fef0828dc2a.png
点击事故函数触发后-----可以拿到对应节点的data！！
https://i-blog.csdnimg.cn/blog_migrate/9c5f820b2e7d69adb4dc99d50befc052.png
也就是这些
https://i-blog.csdnimg.cn/blog_migrate/cf7e5cd9facb7004bd47146a46c1e6fc.png
https://i-blog.csdnimg.cn/blog_migrate/968e376ba75e8c6f8b5f90d7fa31a812.png
node节点的一些属性
https://i-blog.csdnimg.cn/blog_migrate/f6045d2abe7080bd0949d9d3dc0e2b49.png
组件本身
https://i-blog.csdnimg.cn/blog_migrate/82c742773075b97ac2c950452cc4b938.png
而且发现data数据来源于node
https://i-blog.csdnimg.cn/blog_migrate/7f7ebe7783b07d54d383e3646d053809.png
所以首先：定义curClass-----点击“前端37班”按钮后---将该按钮的data传给curClass
https://i-blog.csdnimg.cn/blog_migrate/eab2bccfdd19f282dea9f5d7750273ba.png
我们从vue这边看
https://i-blog.csdnimg.cn/blog_migrate/690c30c94a80fba6e80feff2311555fd.png
然后
https://i-blog.csdnimg.cn/blog_migrate/1d40f55db2f2d3c1dbad2fac243b7cf2.png
效果图
https://i-blog.csdnimg.cn/blog_migrate/202afd95f4b92c4cb7f53430d09d33f3.png
美满表格里面没有显示的数据
咱们发现专业没有显示！！！
先看获取的数据的专业名称藏在啥地方
https://i-blog.csdnimg.cn/blog_migrate/d892d88399ebd235ff2d6bb1d101585e.png
https://i-blog.csdnimg.cn/blog_migrate/d0a457dddc253655a725b6589398e6e6.png
原来他是个对象，我们可以用插槽方式---获取当前行的数据---给他渲染
https://i-blog.csdnimg.cn/blog_migrate/e91d035f5e37c8a16ac991e65236535a.png
https://i-blog.csdnimg.cn/blog_migrate/8056593d9f696e8e48b1cf207fd51ab4.png
优化该代码
https://i-blog.csdnimg.cn/blog_migrate/f40e16b488a82bcda4098b2df26d7136.png
别的一种获取专业名称的方法
https://i-blog.csdnimg.cn/blog_migrate/7a20761cc8c7f53899fc7cb0d07618b3.png
效果
https://i-blog.csdnimg.cn/blog_migrate/32df3a394de03a2fc0a1babb0a898175.png
我们发现性别只返回了0大概1，因此我们必要在盘算属性上面写个方法！！！
写个判定男女的方法！
首先接口是字典值【输入关键词---给你搜刮出对应的库：输入性别库----返回性别0和1对应的男女】
https://i-blog.csdnimg.cn/blog_migrate/a0a2efce85afdc153f38c12b07f2f28b.png
传入我想要的字典值：sys_user_sex
https://i-blog.csdnimg.cn/blog_migrate/64a97b5673c7923aad99bb4226e3dce5.png
写盘算属性
https://i-blog.csdnimg.cn/blog_migrate/34d7bd03f2aa0129da8f7ed7ce171197.png
然后调用
https://i-blog.csdnimg.cn/blog_migrate/a507411fdbc5927dedeed1d395c7995a.png
效果
https://i-blog.csdnimg.cn/blog_migrate/ab78ac26577fd7cac899c0c4e5d0b398.png
第十二步：实现分页
首先了解一个情况--表格显示有几页以及每一页的数据的多少---是跟接口返回的数据有关-----门生列表获取接口中-----传入每一页的数量pageSize显示以及当前页码pageMum，那么就会给你返回当前的数据！！！
https://i-blog.csdnimg.cn/blog_migrate/0abea5228853c67dcc7bd4c44c5652c9.png
写好分页里面的数据pageSize和pageNum
https://i-blog.csdnimg.cn/blog_migrate/b801034b0c06bb4ca6b47b7b274afa99.png
至于总人数---就是门生列表接口里面有个count人数，直接复制给total就好啦
https://i-blog.csdnimg.cn/blog_migrate/e9f8d8f134c79a89628110be369a1083.png
https://i-blog.csdnimg.cn/blog_migrate/f54624c77e046a71aea66008dbedb42a.png
分页代码
https://i-blog.csdnimg.cn/blog_migrate/149780f0350747911ab0e74da7e1f9d7.png
https://i-blog.csdnimg.cn/blog_migrate/c8bb0301bc8d7c957ab3077b09c7023b.png
https://i-blog.csdnimg.cn/blog_migrate/2eba7e8f0f66fdc8c282678a3b4b4f57.png
https://i-blog.csdnimg.cn/blog_migrate/1f974b64d13fe0f94662b53ab7ffd47d.png
https://i-blog.csdnimg.cn/blog_migrate/5cad43c97d086f9e4754215c59dd8afe.png
还有个标题----点击其他页面的时候，数据也必要刷新到其他页面----思路就是：【点击其他页面数字，数字复制到当前页pageNum，然后再重新调用获取门生列表！！】
https://i-blog.csdnimg.cn/blog_migrate/ea9444001434d75b1928f3d78118c87b.png
https://i-blog.csdnimg.cn/blog_migrate/ba490140fc32afacaa5f2f6b4092a3be.png
效果
https://i-blog.csdnimg.cn/blog_migrate/5b23b8369d9088d0dfe3b999f54468a8.png
https://i-blog.csdnimg.cn/blog_migrate/e5bf66d0e9b310887ed3131a2b06df04.png
现在又有一个标题：刷新页面的后----我们要求显示的数据是“前端37班”--怎么做呢？
首先肯定是先去班级接口拿到第一个classID--然后再次调用门生列表的接口！
https://i-blog.csdnimg.cn/blog_migrate/a5bcd3e6432441e991438d15e83e4839.png
但是还有个标题
https://i-blog.csdnimg.cn/blog_migrate/775d2dd526e369d3633c18afbe2c1328.png
解决办法：
https://i-blog.csdnimg.cn/blog_migrate/be6fd29c956b6660b3f97f1ad8a47574.png
如许就不会出现先是总数据然后再是37班数据的连跳啦！！！
https://i-blog.csdnimg.cn/blog_migrate/4c5e3ee8f509859330e0c13a0e930620.png
还有个标题，我们刷新页面后---“前端37班”那一栏应该处于选中状态
https://i-blog.csdnimg.cn/blog_migrate/2df08fd207883e9352bbbb32277574ac.png
做法：
https://i-blog.csdnimg.cn/blog_migrate/06901789c3c1ad5b25bf812b850483f6.png
https://i-blog.csdnimg.cn/blog_migrate/0193a3b374288bc68496c3f6392b42b9.png
https://i-blog.csdnimg.cn/blog_migrate/3cee4c4ad717fdcbf36f72024b253b4a.png
https://i-blog.csdnimg.cn/blog_migrate/25fc27e60f40e10ce5596ccc76e145b8.png
第十三步：搜刮查询门生功能
我们可以看到门生接口就有个查询功能，所以门生列表接口是共用的！！https://i-blog.csdnimg.cn/blog_migrate/fa755a2b44a8872ae3b6bdd2a30d7d89.png
所以我们传入搜刮框的内容---点击搜刮---就会调用门生列表接口
https://i-blog.csdnimg.cn/blog_migrate/afd6e3693ace55031094a5a15a7a0dcb.png
https://i-blog.csdnimg.cn/blog_migrate/cad36ee166ebe4016a6137fc418ff047.png
假如没有输入就点击查询，我们应该给出提示！！而且不让他进行下一步门生列表查询【用return】
https://i-blog.csdnimg.cn/blog_migrate/5014746da23e2ccd8621783f29388ae5.png
查询后我们应该必要清空查询搜刮栏而且重新调用门生列表
https://i-blog.csdnimg.cn/blog_migrate/31ef5dd4d3e8d01e6a3ebda49fd7d988.png
效果
https://i-blog.csdnimg.cn/blog_migrate/f2b3bf3e86e2d7227ce7763eeac9751d.png
https://i-blog.csdnimg.cn/blog_migrate/80728477e8e3a26c1b51b51e43796c0e.png
第十三步：添加功能
我们要实现如许的画面
https://i-blog.csdnimg.cn/blog_migrate/5f26a3d576100d2a4ba9964df6a68e6a.png
先去elementui拿对话框
https://i-blog.csdnimg.cn/blog_migrate/18e372e13d6a712eb16c5e31721134e3.png
https://i-blog.csdnimg.cn/blog_migrate/39ee83540855cd3040ae54d170b6095d.png
在对话框画入表单---而且渲染数据-------以及数据绑定
https://i-blog.csdnimg.cn/blog_migrate/5c1c83589389525a916d528b1c7eda5d.png
效果
https://i-blog.csdnimg.cn/blog_migrate/7be42216e480b33a6714e7ac16add966.png
但是有个标题
https://i-blog.csdnimg.cn/blog_migrate/a6ce0cc8888df62701479adf118aa192.png
https://i-blog.csdnimg.cn/blog_migrate/667e37c5cf4e570373c6b7579cbaf15b.png
做法：初始化的时候拿到前端37班classId值------传入到下拉框中
点击菜单栏的时候获取该节点的classId值---传入下拉框
https://i-blog.csdnimg.cn/blog_migrate/80b61d13f86021e6502951dce6573808.png
给她加上disabled
https://i-blog.csdnimg.cn/blog_migrate/49310c3f3972653fcbdeedbb98c713ca.png
效果
https://i-blog.csdnimg.cn/blog_migrate/fa7050ae3902c21539453c4b5c02116e.png
男女性别操纵类似
https://i-blog.csdnimg.cn/blog_migrate/e726c3829aaa18a13d1dbf2bc51e26a7.png
效果
https://i-blog.csdnimg.cn/blog_migrate/e90b15825491e2a1da4bbe128be697c1.png
还有个专业没有美满
https://i-blog.csdnimg.cn/blog_migrate/ad265a04889590cc8d8825fdf66a8830.png
如何实现如许的效果呢？？
首先写个获取专业的接口
https://i-blog.csdnimg.cn/blog_migrate/d129e2bbeb88f30f83fa953b5cf18616.png
然后将专业数据复制给majorList
https://i-blog.csdnimg.cn/blog_migrate/cea67f9d6a373019cfcb0ec052bf8a74.png
然后画出来https://i-blog.csdnimg.cn/blog_migrate/8e4aa5b3548293cace8a3c0fa008f8c4.png
效果
https://i-blog.csdnimg.cn/blog_migrate/fe4ce876fe29f6754dc3bda3cfce90c6.png
实现真正添加
先接好门生添加接口
https://i-blog.csdnimg.cn/blog_migrate/91b45ed3540219fc16f9b2cbe124e370.png
给添加按钮加一个绑定事故
https://i-blog.csdnimg.cn/blog_migrate/d5c320e687cf8de2694cd94d0df19572.png
这个是弹窗显隐visible
https://i-blog.csdnimg.cn/blog_migrate/1b4c5dfed596515184fd650784065234.png
https://i-blog.csdnimg.cn/blog_migrate/bb27e8794e2f99100d2b4a4f054e120d.png
点击添加按钮----然后往表单里输入数据
https://i-blog.csdnimg.cn/blog_migrate/fcf02149f947d140ebfef0576376ea33.png
这些数据会存放到这form里面去
https://i-blog.csdnimg.cn/blog_migrate/c1bc20813f231eeae66194f1bd89fbd7.png
然后点击确认按钮---添加乐成
https://i-blog.csdnimg.cn/blog_migrate/83f2125f6436d78a5e70c2054989633f.png
如何实现这个效果呢
我们必要再确认按钮绑定一个事故
https://i-blog.csdnimg.cn/blog_migrate/df18ec956e66db5ab575c2728742d63b.png
https://i-blog.csdnimg.cn/blog_migrate/0dbb438f61e4a97f82aa14c660b6b48d.png
发现创建乐成啦！！
https://i-blog.csdnimg.cn/blog_migrate/4c656a99be7c05932929e0eece95f4fa.png
优化弹窗共享
思考：点击添加大概编辑---弹出来的都是同一样式的弹窗--那么就共用同一份弹窗----写个mode变量，点击添加就赋值添加，点击编辑就赋值编辑，通过mode判定用户点击的是添加还是编辑
https://i-blog.csdnimg.cn/blog_migrate/56618b090a169fd98704fac036b46ea2.png
https://i-blog.csdnimg.cn/blog_migrate/ff8870b5e6babe2ecaf876ab90d0daf9.png
看下面图片实现效果，首先表单头部名称必要判定
https://i-blog.csdnimg.cn/blog_migrate/1e90fd63c7f00bc625e0aa6de1205c9f.png
利用插槽中的title，给他插入头部而且判定
https://i-blog.csdnimg.cn/blog_migrate/ecedfcf9a19edbc60327afcb141669b4.png
效果图
https://i-blog.csdnimg.cn/blog_migrate/cca3a871994ea0899466989d8d0c7241.png
点击编辑如何拿到当前行的数据??
https://i-blog.csdnimg.cn/blog_migrate/ab453bee1eb15b0beba9f738243d8a8e.png
插槽中可以拿到当前行的数据
https://i-blog.csdnimg.cn/blog_migrate/54956a8756391b101e83fe2fdabee198.png
数据
https://i-blog.csdnimg.cn/blog_migrate/6dc08f64fc1f0c1f8ceb3ac057dd614d.png
https://i-blog.csdnimg.cn/blog_migrate/76bb966986d612b3ddd09ae12980fa98.png
编辑效果图
https://i-blog.csdnimg.cn/blog_migrate/cccaee579f7f52ef5836a2e82ea6ba13.png
点击编辑--获取当前行数据----复制给stuDialog---弹窗表单数据显示---但是当你再次点击添加按钮的时候---发现之前当前行的数据还在显示------所以我们要进行扫除
https://i-blog.csdnimg.cn/blog_migrate/9b69b87b5b7bb3e65e8c8eab725bbfc7.png
然后就清空啦，效果图
https://i-blog.csdnimg.cn/blog_migrate/33419c7948c57148561a8170aa3f279b.png
第十四步：编辑接口实现
https://i-blog.csdnimg.cn/blog_migrate/386120677cd6500665e3a7d4d9b93f80.png
接口如下
https://i-blog.csdnimg.cn/blog_migrate/7e7e550d40a4af62a9941583fb9ea94f.png
传参
https://i-blog.csdnimg.cn/blog_migrate/25483235f41a0c5d7fcf23d042c05747.png
由于代码重复---我们接下来优化代码
https://i-blog.csdnimg.cn/blog_migrate/f67511de79ca253fdc2108db0ca28f60.png
但是并不是所有的情况都适用await噢！现在又有个标题
标题：点击编辑后点击添加，发现数据还在
https://i-blog.csdnimg.cn/blog_migrate/14c7711be8a45bc482f69d1bc7d58edd.png
https://i-blog.csdnimg.cn/blog_migrate/346e9c928005839a1e21ebd8d225b976.png
那我们在弹窗上边的“叉”和“取消”上面写---用resetFields()方法清空表单内容即可
https://i-blog.csdnimg.cn/blog_migrate/4276cb72a551a67e2b10a9bf54b1d142.png
https://i-blog.csdnimg.cn/blog_migrate/01f478d0b1e146f8893ed2752e454b33.png
但是还是会出现刚才情况：点击编辑--叉掉--点击添加---编辑数据还是会存在，这是为啥呢？？
https://i-blog.csdnimg.cn/blog_migrate/d1ab13fc6b4ee6d0b209842e9683a6d2.png
点击编辑的时候：弹窗未打开-----深拷贝数据渲染了----弹窗打开了---看见了数据
mountd钩子函数之前 数据就已经渲染了---那么深拷贝的数据就会作为初始值！！！
表单清空本质就是恢复到初始状态------故清空表单就是恢复到初始值！
故过程：弹窗未打开---数据深拷贝作为初始值---打开弹窗---显示数据----点击叉叉----关闭弹窗而且执行清空esetFields()，数据恢复到初始值！
https://i-blog.csdnimg.cn/blog_migrate/5fbb6b54084bfa6d779ff709c909da12.png
https://i-blog.csdnimg.cn/blog_migrate/e77059f76620809f34f3f691a2e66ef7.png
第十五步：删除接口实现
https://i-blog.csdnimg.cn/blog_migrate/0d1bcd326972120b54e1b5630d398186.png
https://i-blog.csdnimg.cn/blog_migrate/1114fa3a5cdcce5a4a2511c8f177fc5e.png
第十五步：个人信息页面功能实现
这个如何画呢？
https://i-blog.csdnimg.cn/blog_migrate/6bf73bce0d72da27058012c84d9c8efb.png
去elementui找这个
https://i-blog.csdnimg.cn/blog_migrate/8e689a7609f6b033751be8155c529b5e.png
popover中有这个插槽，触摸它就会显示如图效果
https://i-blog.csdnimg.cn/blog_migrate/46c9b30749ed4b1188961b21e811f796.png
https://i-blog.csdnimg.cn/blog_migrate/319ce7e85a0df5f37ee28866698332e1.png
咱们给他居中一下
https://i-blog.csdnimg.cn/blog_migrate/ee346f285dce6122293912881555825f.png
效果
https://i-blog.csdnimg.cn/blog_migrate/801237b981ab1ed450b99e1d31fba16f.png
1：点击个人信息--跳转到USerinfo页面
先简单创建页面
https://i-blog.csdnimg.cn/blog_migrate/43f24f6cd21124c7bd9accdec4c14cb1.png
再路由注册
https://i-blog.csdnimg.cn/blog_migrate/738c0043fcc2d0d7cfb16123b90a9150.png
给个人信息加上router-link标签--实现可以点击跳转
https://i-blog.csdnimg.cn/blog_migrate/79a16e80fe2af0ea8bd23bcdc7d3c87a.png
效果
https://i-blog.csdnimg.cn/blog_migrate/a3ef25f4c54b01c03c7f1daaa20831e1.png
接用户信息接口
https://i-blog.csdnimg.cn/blog_migrate/ec0796521675160e9d5c63f21a9e3366.png
思考：
https://i-blog.csdnimg.cn/blog_migrate/f1d0dae2115131f2599fdd85533da578.png
因此这么写
https://i-blog.csdnimg.cn/blog_migrate/e010124b906c02882430c78b8947d970.png
vuex中代码如下
https://i-blog.csdnimg.cn/blog_migrate/c298359497d401e9847b8e8360b418c8.png
效果：其中头像是avatar
https://i-blog.csdnimg.cn/blog_migrate/4a3424d72441e9cfdae7d32124e82aac.png
数据渲染：单词写错了哈是avatar【在头像那里】
https://i-blog.csdnimg.cn/blog_migrate/78d1763aa58f550cec1318851af48df4.png
效果：发现头像没有显示出来
https://i-blog.csdnimg.cn/blog_migrate/3030bb4ce27a6b6f5aad327c5ed07c6d.pnghttps://i-blog.csdnimg.cn/blog_migrate/8d1514981ac19a54c4f7e719790cf074.png
报错
https://i-blog.csdnimg.cn/blog_migrate/f383e5a878e2df635bd946bea77632e4.png
因为我们之前用的ajax哀求，这个是图片哀求，404表现没有找到
主要是图片哀求没有student/v3！！
https://i-blog.csdnimg.cn/blog_migrate/cb213544d1b3f6b3b8394e522773cb31.png
所以我们主动拼接上
https://i-blog.csdnimg.cn/blog_migrate/44a9d80f9f9748e351d9e58e30477307.png
效果
https://i-blog.csdnimg.cn/blog_migrate/f5a9868986f81f25422c921f81590f72.png
但是这么写有个弊端，el-avatar标签有时候不灵--图片不会去显示，我们不保举直接在这个标签里面直接绑定src
所以这么写：
https://i-blog.csdnimg.cn/blog_migrate/f83fbfe427f13d1c08ccef715dd2ccdd.png
2.个人信息页面
https://i-blog.csdnimg.cn/blog_migrate/3c6285b55a62488811127e1413122d2f.png
去elementui
https://i-blog.csdnimg.cn/blog_migrate/534ac303748cb569e50a8f1bcaa7a83e.png
代码
https://i-blog.csdnimg.cn/blog_migrate/1e851f51554d4410d274fb050effdddb.png
效果
https://i-blog.csdnimg.cn/blog_migrate/f75bab178fcbb7c0d4d76d1957b400af.png
这个页面页面效果
https://i-blog.csdnimg.cn/blog_migrate/7787afaea70c4ba7ca3857f0461ca208.png
代码如下：https://i-blog.csdnimg.cn/blog_migrate/b8fe0f5674b3269212e37d7beff85811.png
我们观察到页面的数据是绑定显示的
https://i-blog.csdnimg.cn/blog_migrate/b057845ffdbf8ec3a04dcb2f343e568c.png
因此我们要拿到store的数据进行渲染---但不能直接拿然后用v-model---因为vuex是单向数据流！！！
故代码如下：
https://i-blog.csdnimg.cn/blog_migrate/90a74db8cb70a2b012579deaf9c00ae6.png
因为账号无法更改--所有直接用value绑定--然后disabled
https://i-blog.csdnimg.cn/blog_migrate/e63c6bec64a8d4bb220e80b9122da424.png
代码如下
https://i-blog.csdnimg.cn/blog_migrate/3f89457a940caa0b816a9b233a92a987.png
头像上传
https://i-blog.csdnimg.cn/blog_migrate/39bcc3aef2eac1586a030998fd9188a6.png
首先先写成如许https://i-blog.csdnimg.cn/blog_migrate/d4d5739aac6914e943b040fbbe91a2a8.png
点击头像就会跳出文件管理
https://i-blog.csdnimg.cn/blog_migrate/bd0043b5f97d10b2cca7a18c1da81a85.png
但是点击打开会报错
https://i-blog.csdnimg.cn/blog_migrate/5e95e64f818d1eb99477a988444602a9.png
因此：https://i-blog.csdnimg.cn/blog_migrate/dc85acbba44588824bd3a1b23fe30c70.png
还有个标题：点击打开----组件upload会主动帮我们上传
准确逻辑应该是：点击提交才会上传，
https://i-blog.csdnimg.cn/blog_migrate/bddd7ffc7326328220dc094457eaea58.png
https://i-blog.csdnimg.cn/blog_migrate/1584c3b4c73dcb15a4aafbfecb1be784.png
因此代码如许写！！！
https://i-blog.csdnimg.cn/blog_migrate/0d10ecdd46bce8f907bcb8b174bb8b43.png
其次我们接好用户修改接口
https://i-blog.csdnimg.cn/blog_migrate/f91ebb90bebd3d56b27af5fae2ffce7c.png
提交有两种情况：有头像修改的提交和没有头像修改的提交
我们先看第二种：那么如何获取上传的头像路径
有个属性file-list
https://i-blog.csdnimg.cn/blog_migrate/af219efa19272f332cdb5bf07cdcd876.png
https://i-blog.csdnimg.cn/blog_migrate/b71124a86e2c377e762ae60ab4016440.png
但是还有个标题，我们看
https://i-blog.csdnimg.cn/blog_migrate/da2a0bef37d59edf15ad96dafdc4e077.png
如何手动添加：这个on-change中上传图片失败大概乐成都会触发这个事故！！
https://i-blog.csdnimg.cn/blog_migrate/4933720fa2023328dd44c53cb8c3902d.png
调用打印看看
https://i-blog.csdnimg.cn/blog_migrate/877df3546f631d7161e35c8650fc4409.png
https://i-blog.csdnimg.cn/blog_migrate/f905012987ef7ef36c2ed663f89f3c81.png
https://i-blog.csdnimg.cn/blog_migrate/3df119f0fca13d15062becc065fa1932.png
https://i-blog.csdnimg.cn/blog_migrate/f09cda4aaf773abc87b20c667385ea8d.png
根据以上方法
当图片上传处于ready状态时-----因为头像图片只能一次上传一张，所以先拿到最新上传的图片，然后赋值给图片列表
https://i-blog.csdnimg.cn/blog_migrate/d20ed5325f0ce8551f83794119c8aa30.png
https://i-blog.csdnimg.cn/blog_migrate/ea3c6abadb0ea0f3bf76b0824f0caf0e.png
然后直接点击提交！！
https://i-blog.csdnimg.cn/blog_migrate/ab127a47a2f9086b0d889973057674bd.png
而且fileList多了个文件
https://i-blog.csdnimg.cn/blog_migrate/dba383fc3a62fbb282df45a08c8de669.png
https://i-blog.csdnimg.cn/blog_migrate/d83213335c40821079abd7dcf1e1eb40.png
我们在file的response中拿到code和data---将数据中的图片数据赋值给表单
https://i-blog.csdnimg.cn/blog_migrate/639265b9980b464d6f78b5091d83bd1e.png
然后再次提交：整体逻辑就是
https://i-blog.csdnimg.cn/blog_migrate/a625f0f4f97aafed86f7f59830bbd503.png
看看效果
https://i-blog.csdnimg.cn/blog_migrate/59acea3e308acdba9614cec0a2ee74c7.png
有个标题
我们想让这个图片路径隐藏看不见
https://i-blog.csdnimg.cn/blog_migrate/e401bdb26d510086b1bde0791ca13031.png
直接这么做就可以啦
https://i-blog.csdnimg.cn/blog_migrate/e12b366052347bbc8e5a85643fccf90c.png
文件预览功能怎么做
https://i-blog.csdnimg.cn/blog_migrate/fb9c303abbac51cca7affc4b4c254b47.pnghttps://i-blog.csdnimg.cn/blog_migrate/a9d538eeb9ca051fd992c686e3a6be2a.png
效果
https://i-blog.csdnimg.cn/blog_migrate/437ab5dff5236cfcb911a7412cbcc2c2.png
https://i-blog.csdnimg.cn/blog_migrate/2b265a020e91cd7bad736c047405bc00.png
末了：点击上传修改------重新调用一次获取用户信息！！！
https://i-blog.csdnimg.cn/blog_migrate/1f42eba21ea37f20ef003444d8139647.png
效果
https://i-blog.csdnimg.cn/blog_migrate/12b0e26ba72e60a86852c7260a1d83ad.png
https://i-blog.csdnimg.cn/blog_migrate/22932c307c054ece9192bfccacc2d3bb.png
优化
在home页面以及userInfo页面都必要获取用户信息，每次调用接口都很麻烦
因此我们直接在store的action中去调用！！
https://i-blog.csdnimg.cn/blog_migrate/c303c227bf8367a7ca7e50c3fc315519.png
https://i-blog.csdnimg.cn/blog_migrate/bf150ce674913ff3561e5d6d22519149.png
如许就完美啦！！！【也就是更新vueX】
其余本身美满，有啥不完整大概可以优化的地方，接待大佬指正！
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]