spring boot+iview 前后端分离架构之首页退出和修改密码的实现（二十三）

╰+攻爆jí腚メ 2021-12-14 13:49 355阅读 0赞

### spring boot 与 iview 前后端分离架构之首页退出和修改密码的实现（二十三） ###

*  公众号
 *  首页退出和修改密码的实现
 *   *  添加修改密码的mock数据
     *  修改密码的实现

# 公众号 #

![在这里插入图片描述][20191218155125364.jpg]  
大家可以直接微信扫描上面的二维码关注我的公众号，然后回复【bg23】 里面就会给到源代码的下载地址同时会附上相应的视频教程，并定期在我的公众号上给大家推送相应的技术文章，欢迎大家关注我的公众号。

# 首页退出和修改密码的实现 #

通过上一章节我们已经实现了动态加载菜单栏和，动态显示我们的面包屑导航了，但是我们的首页还缺少退出以及修改密码的选项，因此本章将为大家讲解如何实现退出和修改密码的实现。

## 添加修改密码的mock数据 ##

由于我们现在的前端一直都是使用的mock数据，因此我们需要添加修改密码的mock数据，在我们的以下目录底下新增一个user.changePassword.js文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]

{
      "code": 200,
      "msg": "密码更新成功",
      "obj": null
    }

接着在mock.js文件中引入修改密码的mock，新增代码如下：

import changePassword from './json/user/user.changePassword'
    Mock.mock('/user/changePassword', 'post', changePassword);

## 修改密码的实现 ##

接着我们在main目录底下创建一个changePassword.vue实现密码的修改，代码如下：

<template>
      <Modal v-model="show" title="修改密码" @on-ok="ok" :loading="loading" :mask-closable="false">
        <Form ref="changePasswordForm" :model="changePasswordForm" :rules="changePasswordFormRule">
          <FormItem label="当前密码" prop="oldPassword">
            <Input type="password" :maxlength=50 v-model="changePasswordForm.oldPassword" placeholder="请输入当前密码"/>
          </FormItem>
          <FormItem label="新密码" prop="newPassword">
            <Input type="password" :maxlength=50 v-model="changePasswordForm.newPassword" placeholder="请输入新密码"/>
          </FormItem>
          <FormItem label="新密码二次确认" prop="checkNewPassword">
            <Input type="password" :maxlength=50 v-model="changePasswordForm.checkNewPassword" placeholder="请再次输入上面的密码"/>
          </FormItem>
        </Form>
      </Modal>
    </template>
    <script>
    
      import {changePassword} from '../../api/sys/user/user.api'
    
      export default {
        name: "addDict",
        props: {
          value: {
            type: Boolean,
            default: false
          }
        },
        data() {
          return {
            show: this.value,
            loading: true,
            changePasswordForm: {
              oldPassword: '',
              newPassword: '',
              checkNewPassword: ''
            },
            changePasswordFormRule: {
              oldPassword: [
                {required: true, message: '请输入旧的密码', trigger: 'blur'},
                {type: 'string', max: 50, min: 6, message: '密码最小长度为6', trigger: 'blur'}
              ],
              newPassword: [
                {required: true, message: '请输入新密码', trigger: 'blur'},
                {type: 'string', max: 50, min: 6, message: '密码最小长度为6', trigger: 'blur'}
              ],
              checkNewPassword:[
                {required: true, message: '请再次输入密码', trigger: 'blur'},
                {type: 'string', max: 50, min: 6, message: '密码最小长度为6', trigger: 'blur'},
                {
                  validator:this.validatorPassword({
                    response: 'exist'
                  }), trigger: 'blur'
                }
              ]
            }
          }
        },
        methods: {
          ok() {
            this.$refs['changePasswordForm'].validate((valid) => {
              if (valid) {
                changePassword(this.changePasswordForm).then(res => {
                  if (res.code == 200) {
                    this.$Message.success(res.msg);
                    // 提交表单数据成功则关闭当前的modal框
                    this.closeModal(false);
                  } else {
                    this.$Message.error( res.msg);
                  }
                })
              }
              setTimeout(() => {
                this.loading = false;
                this.$nextTick(() => {
                  this.loading = true;
                });
              }, 1000);
            })
          },
          closeModal(val) {
            this.$emit('input', val);
          },
          validatorPassword(){
            let _this = this;
            return function (rule, value, callback) {
              let newPassword = _this.changePasswordForm.newPassword;
              let checkNewPassword = _this.changePasswordForm.checkNewPassword;
              if(newPassword!=''&&checkNewPassword!=''){
                  if(newPassword!=checkNewPassword){
                    callback(new Error("两次输入的密码不匹配"));
                  }else{
                    callback();
                  }
              }else{
                callback();
              }
            }
          }
        },
        watch: {
          value(val) {
            this.show = val;
          },
          show(val) {
            //当重新显示增加数据的时候重置整个form表单
            if (val) {
              this.$refs['changePasswordForm'].resetFields();
            } else {// 反之则关闭页面
              this.closeModal(val);
            }
          }
        }
      }
    </script>

接着我们改造我们的main.vue页面，改造完成以后的代码如下：

<template>
      <div class="layout">
        <Layout>
          
          <Header id="layout-header-scroll">
            <Menu mode="horizontal" theme="dark" active-name="1">
              <div class="layout-logo">
                [外链图片转存失败(img-RxJEOSUf-1562209731086)(https://mp.csdn.net/assets/logo.png)]
              </div>
              <div class="layout-nav">
                <Dropdown @on-click="userAction">
                  <a href="javascript:void(0)" style="color: white">
                    {
       {this.nickName}}
                  </a>
                  <DropdownMenu slot="list">
                    <DropdownItem name="regPass">修改密码</DropdownItem>
                    <DropdownItem name="loginOut" divided>退出登录</DropdownItem>
                  </DropdownMenu>
                </Dropdown>
              </div>
              <div class="layout-nav">
                <language @on-lang-change="setLanguage" style="margin-right: 10px;" :lang="local"/>
              </div>
              <div class="layout-nav">
                <template v-for="item in menuList">
                  <Submenu :name="item.meta.code" v-if="item.children.length>0">
                    <template slot="title">
                      <Icon :type="item.meta.icon"/>
                      {
       {item.meta.title}}
                    </template>
                    <template v-for="childrenItem in item.children">
                      <MenuItem :name=childrenItem.meta.code :to="item.path+'/'+childrenItem.path">
                        <Icon :type=childrenItem.meta.icon>
                        </Icon>
                        {
       {childrenItem.meta.title}}
                      </MenuItem>
                    </template>
                  </Submenu>
                  <MenuItem :name="item.meta.code" v-else>
                    <Icon :type="item.meta.icon"/>
                    {
       {item.meta.title}}
                  </MenuItem>
                </template>
              </div>
            </Menu>
          </Header>
          
          <Layout>
            <Sider hide-trigger :style="{background: '#fff'}">
              <Menu active-name="1-2" theme="light" width="auto" :open-names="['system-manage']">
                <template v-for="item in menuList">
                  <Submenu :name=item.meta.code>
                    <template slot="title">
                      <Icon :type=item.meta.icon></Icon>
                      {
       {item.meta.title}}
                    </template>
                    <template v-for="childrenItem in item.children">
                      <MenuItem :name=childrenItem.meta.code :to="item.path+'/'+childrenItem.path">
                        <Icon :type=childrenItem.meta.icon>
                        </Icon>
                        {
       {childrenItem.meta.title}}
                      </MenuItem>
                    </template>
                  </Submenu>
                </template>
              </Menu>
            </Sider>
            <Layout :style="{padding: '0 24px 24px'}">
              
              <Breadcrumb :style="{margin: '24px 0'}">
                <BreadcrumbItem>
                  <Icon type="ios-home-outline"></Icon>
                  首页
                </BreadcrumbItem>
                <BreadcrumbItem v-for="item in breadCrumbList" v-bind:key="item.name" v-if="item.meta && item.meta.title">
                  <Icon :type="item.icon"></Icon>
                  {
       {showBreadcrumbItem(item)}}
                </BreadcrumbItem>
              </Breadcrumb>
              
              <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
                <router-view/>
              </Content>
            </Layout>
          </Layout>
        </Layout>
        <changePassword v-model="showChangePassword"></changePassword>
      </div>
    </template>
    <script>
      import Language from '../../components/language';
      import {mapMutations, mapActions} from 'vuex';
      import changePassword from './changePassword';
    
      export default {
        components: {
          Language,
          changePassword
        },
        data() {
          return {
            local: localStorage.getItem("lang"),
            showChangePassword: false
          }
        },
        methods: {
          ...mapMutations([
            'setBreadCrumb'
          ]),
          ...mapActions([
            'handleLogOut'
          ]),
          /**
           * 顶部跟随着滚动条的变化而滚动
           */
          handleScroll() {
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            if (scrollTop >= 60) {
              document.querySelector('#layout-header-scroll').style.top = scrollTop + 'px';
            } else {
              document.querySelector('#layout-header-scroll').style.top = '0px';
            }
          },
          userAction(name) {
            // 实现退出登录
            if (name == 'loginOut') {
              this.handleLogOut();
              this.turnToView('login');
              // 实现修改密码
            } else if (name == 'regPass') {
              this.showChangePassword = true;
            }
          },
          setLanguage(lang) {
            this.local = lang
            localStorage.setItem('lang', lang)
          },
          showBreadcrumbItem(item) {
            return (item.meta && item.meta.title) || item.name
          },
          turnToView(name) {
            this.$router.push({
              name: name
            })
          }
        },
        watch: {
          '$route'(newRoute) {
            this.setBreadCrumb(newRoute.matched)
          }
        },
        computed: {
          breadCrumbList() {
            return this.$store.state.app.breadCrumbList
          },
          menuList() {
            return this.$store.getters.menuList;
          },
          nickName() {
            return this.$store.getters.nickName;
          }
        },
        mounted() {
          /**
           * 监听滚动条的滚动事件
           */
          window.addEventListener('scroll', this.handleScroll)
        }
      }
    </script>
    <style scoped>
      .layout-header {
        position: relative;
        z-index: 999;
        height: 60px;
      }
    
      .layout {
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
      }
    
      .layout-logo {
        width: 100px;
        height: 30px;
        border-radius: 10px;
        float: left;
        position: relative;
        left: 20px;
        top: 5px;
      }
    
      .layout-nav {
        width: auto;
        float: right;
        margin: 0 auto;
        margin-right: 20px;
      }
    </style>

最后我们运行我们的项目，大家会看到如下的页面则说明我们的集成以及成功了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]  
到此为止我们就完成了首页面包屑的实现了。  
上一篇文章地址：[spring boot+iview 前后端分离架构之首页菜单栏的实现（二十二）][spring boot_iview]  
下一篇文章地址：[spring boot+iview 前后端分离架构之后端鉴权体系的实现（二十四）][spring boot_iview 1]

[20191218155125364.jpg]: /images/20211214/02857d34620241e0a180ccc7601969d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]: /images/20211214/309cf293ca6241f9badef526c63fdcbf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]: /images/20211214/98aac830db974fc08cf67b9c6e0a3781.png
[spring boot_iview]: https://blog.csdn.net/linzhefeng89/article/details/94594534
[spring boot_iview 1]: https://blog.csdn.net/linzhefeng89/article/details/94661618