用vue+element ui实现简单的投票系统

大二下学期前端期末实训，题目是完成一个投票系统。能实现基本的注册，登录，投票，结果排序功能。注册和投票结果存储在localStorge中，时间仓促，做的有些粗糙。

登录界面

// 点击登录
    login(){
      console.log(this.userGroup)
      let flag=0;
      this.$refs.loginFormRef.validate(valid=>{
        if(!valid){
          this.$message({showClose:true,message:'请输入正确的账号密码',type:'error'})
          return;
        }
        flag=1;
      })
      if(flag){
        for(var item in this.userGroup){
          if(this.loginForm.username==this.userGroup[item].username&&this.loginForm.password==this.userGroup[item].password){
          localStorage.loginUser=JSON.stringify(this.userGroup[item]);
          localStorage.userGroup=JSON.stringify(this.userGroup);
          this.$router.push({ path:'/home' });
          location.reload();
          this.$message({showClose: true,message: '登陆成功',type: 'success'});
          return ;
        }
      }
      this.$message({showClose: true,message: '账号或密码错误！！！请输入正确的账号密码',type: 'error'});
      }

注册页面

onSubmit(){
      let flag=0;//若预验证成功则返回1，若失败返回0
            this.$refs.registerFormRef.validate( valid =>{
                if(!valid) {
                    this.$message({showClose: true,message: '请输入正确的信息',type: 'error'
                    });
                    return false;
                }
                flag=1;//预验证成功！
                })
            if(flag){
                if(!window.localStorage) return;
                //如果之前有任何人注册过的话
                if(localStorage.userGroup != null){
                   this.userGroup.push(this.registerForm);
                   localStorage.userGroup=JSON.stringify(this.userGroup)
            
                }else{//如果之前没有任何人注册过的话
                this.userGroup.push(this.registerForm);
                localStorage.userGroup=JSON.stringify(this.userGroup);
                }
                this.$router.push("/login");
                this.$message({showClose: true,message: '注册成功！',type: 'success'});
            }else{
                this.$message({showClose: true,message: '注册失败！请输入按要求填写注册信息！',type: 'error'});
            
            }

主页面

未登录时，只能查看投票结果，不能参与投票，且会提示投票。在app根组件里，做了一个全局的导航栏，便于切换投票页面和投票结果页面

    <div id="app">
        <!-- 路由占位符 -->
        <div id="nav" v-if="$route.meta.keepAlive">
        <el-menu :default-active="this.$route.path" router class="el-menu-demo" mode="horizontal">
          <el-menu-item v-for="(item,i) in nvaList" :key="i" :index="item.name">
            <template slot="title">
             <span> {{ item.navItem }}</span>
           </template>
          </el-menu-item>
          <el-menu-item>
            <el-dropdown>
              <el-button icon="el-icon-user-solid" round size="small"></el-button>
              <el-dropdown-menu slot="dropdown">
                <div v-if="loginUser.username!=''">
                  <el-dropdown-item>用户:{{loginUser.username}}</el-dropdown-item>
                  <el-dropdown-item @click.native="logOut">退出</el-dropdown-item>
                </div>
                <div v-else>
                      <router-link to='/login'>
                        <el-dropdown-item>去登陆</el-dropdown-item>
                      </router-link>                   
                </div>
              </el-dropdown-menu>
            </el-dropdown>
          </el-menu-item>
        </el-menu>
    </div>
    <router-view></router-view>
    </div>

投票结果页面

使用了sort方法对结果进行排序

sortBy(props) {
    return function(a,b) {
        return   b[props] - a[props];
    }}

小结

这是第一次独立写一个vue项目，用上了之前在学校兴趣团队学到的知识。 代码放在了github.com/280hhh/vote 觉得有用的话可以star哦！