vue-cli+vuex+element-ui+mint-ui后台管理系统总结

最新推荐文章于 2025-05-09 16:06:34 发布

凉红茶

最新推荐文章于 2025-05-09 16:06:34 发布

阅读量2.8k

点赞数

分类专栏： elemen-ui

本文链接：https://blog.youkuaiyun.com/weixin_40682842/article/details/82914110

版权

这篇博客总结了使用vue-cli、vuex、element-ui和mint-ui构建后台管理系统的常见功能，包括验证码倒计时、自动登录、导航菜单、页面刷新处理、正则校验、富文本显示、文件上传限制，以及PDF预览等。在实现过程中，遇到了如多账号登录信息混淆、Mac上.xls文件类型识别问题等挑战。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.验证码倒计时

用户点击“发送验证码”的按钮以后，在60s内不可以再次点击，并开启60s倒计时功能

<template>
  <el-button @click="postPhoneCode" v-if="phoneCodeStatus">发送验证码</el-button>
  <el-button v-else-if="!phoneCodeStatus" disabled>{
  {count}}s</el-button>
</template>
<script>
   export default {
     data(){
        return {
              phone:"",
              phoneCodeStatus: true
         }
      },
      methods:{
               postPhoneCode() {
                const data = {
                    phone: this.phone//用户填写
                }
                postPhoneCode(data).then(res => {
                    if (res.data.code === 101) { //请求成功状态
                        const TIME_COUNT = 60;//倒计时60s
                        this.count = TIME_COUNT;//赋值，以便判断时间
                        this.phoneCodeStatus = false//切换按钮状态，按钮不可点击
                        this.timer = setInterval(() => {
                            if (this.count > 0 && this.count <= TIME_COUNT) {
                                this.count--;
                            } else {
                                this.phoneCodeStatus = true
                                clearInterval(this.timer);
                                this.timer = null;
                            }
                        }, 1000)//时间每减一秒，计时器 -1
                        this.$message({
                            message: '发送验证码成功',
                            type: 'success'
                        });
                    } else {
                        this.$message.error('发送失败！');
                    }
                }).catch(err => {
                    console.log('发送手机失败', err)
                    this.$message.error('发送验证码失败！');
                })
            },

     }
  }
</script>

2.自动登录功能

点击“自动登录”的单选框以后，在本地存储里保存用户的数据，下次登录的时候，查询本地存储，有记录的话，填充form的数据；当再次点击时，销毁本地存储的相应数据

<template>
   <el-checkbox v-model="is_checked" @change="check">自动登录</el-checkbox>
</template>
<script>
   export default {
        data(){
             return {
                 is_checked: false
             }
        },
        mounted(){
        //如果本地存储的数据里有phone的记录，“自动登录”的单选框就为true
            if (window.localStorage.getItem('phone')) {
                this.is_checked = true
            }
        },
        methods:{
           check(val){//val有两个值true false
                if (val) {
                    window.localStorage.setItem('phone', this.phone)//在本地存储里保存phone数据
                } else {
                    window.localStorage.removeItem('phone')//在