In the second semester of sophomore year, the topic was to complete a voting system. Can realize the basic registration, login, voting, sorting results function. Registration and voting results are stored in localStorge, which is done in a hurry and a bit crudely.

Login screen

// Click login
    login(){
      console.log(this.userGroup)
      let flag=0;
      this.$refs.loginFormRef.validate(valid= >{
        if(! valid){this.$message({showClose:true.message:'Please enter the correct account password'.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: 'Successful landing'.type: 'success'});
          return; }}this.$message({showClose: true.message: 'Wrong account or password!! Please enter the correct account password '.type: 'error'});
      }
Copy the code

The sign-up page

onSubmit(){
      let flag=0;// Returns 1 if the prevalidation succeeds, and 0 if the prevalidation fails
            this.$refs.registerFormRef.validate( valid= >{
                if(! valid) {this.$message({showClose: true.message: 'Please enter the correct information'.type: 'error'
                    });
                    return false;
                }
                flag=1;// Prevalidation succeeded!
                })
            if(flag){
                if(!window.localStorage) return;
                // If anyone has registered before
                if(localStorage.userGroup ! =null) {this.userGroup.push(this.registerForm);
                   localStorage.userGroup=JSON.stringify(this.userGroup)
            
                }else{// If no one has registered before
                this.userGroup.push(this.registerForm);
                localStorage.userGroup=JSON.stringify(this.userGroup);
                }
                this.$router.push("/login");
                this.$message({showClose: true.message: 'Registration successful! '.type: 'success'});
            }else{
                this.$message({showClose: true.message: 'Registration failed! Please enter the registration information as required! '.type: 'error'});
            
            }
Copy the code

The main page

If you do not log in, you can only view the voting results, but cannot participate in the voting, and will be prompted to vote. In the app root component, a global navigation bar is made to switch between the voting page and the voting result page

    <div id="app"> <! -- Route placeholder --><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>User: {{loginUser. Username}}</el-dropdown-item>
                  <el-dropdown-item @click.native="logOut">exit</el-dropdown-item>
                </div>
                <div v-else>
                      <router-link to='/login'>
                        <el-dropdown-item>To log in</el-dropdown-item>
                      </router-link>                   
                </div>
              </el-dropdown-menu>
            </el-dropdown>
          </el-menu-item>
        </el-menu>
    </div>
    <router-view></router-view>
    </div>
Copy the code

Poll Results page

The sort method is used to sort the results

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

summary

This is the first time to write a VUE project independently, using the knowledge I learned in the school interest team. The code in github.com/280hhh/vote feel useful words can star oh!