用户登录

<template>
  <div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="用户名" prop="userName">
        <el-input v-model="ruleForm.userName"></el-input>
      </el-form-item>
     <el-form-item label="密码" prop="password">
       <el-input v-model="ruleForm.password" type="password"></el-input>
     </el-form-item>



      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>



  </div>
</template>

<script>
  export default {
    data() {
      return {
        ruleForm: {
          userName: '',//用户名
          password: ''//密码
        },
        rules: {
          userName: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 2, max: 64, message: '长度在 2 到 64 个字符', trigger: 'blur' }
          ],
          password: [
             { required: true, message: '请输入密码', trigger: 'blur' },
             { min: 2, max: 64, message: '长度在 2 到 64 个字符', trigger: 'blur' }
           ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {//如果验证通过
           // alert('submit!');
             alert(this.ruleForm.userName);
              alert(this.ruleForm.password);
            //把数据提交到后台 json方式
            this.$axios.post("http://localhost:8080/user/login",this.ruleForm)
            .then(response=>{
              //做响应的后处理
              let res=response.data;
              //@todo
              //首选判断响应码
              //1、响应吗如果==0
              if(res.code==0){
                let user=res.list[0];
                //把用户信息缓存到前端
                sessionStorage.setItem("flag", "isLogin");
                sessionStorage.setItem("userName",user.userName);
                sessionStorage.setItem("useType",user.useType);
                //进到首页
                this.$router.push({path:"/index"})
              }else{
                //alert(res.msg);
                //2、响应码不是0
                //读取错误信息并显示
                this.$message(res.msg);
              }
            })
            .catch(error=>{
              console.log(error);
            })

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

@RequestMapping("/login")
public ResponseBean login(@RequestBody Map<String, Object> userMap) {
    //{userName:wang.qj,password:123456}
    String userName=(String) userMap.get("userName");
    String password=(String) userMap.get("password");
    ResponseBean response=new ResponseBean();
    //后台：1、根据用户名进行查询，返回一个用户对象
    User db_user=service.findUserByName(userName);
    //2、如果没查询到直接提示用户名错误（返回错误码和错误描述） 
    if(db_user==null){
        //提示用户名错误
        response.setCode("1000");
        response.setMsg("用户名错误");
    }else{//3、如果查询到了
        //再比对数据库里查询到的对象的密码与前台传过来的密码是否一致 
        if(db_user.getPassword().equals(password)){
            //5、如果一致，就返回成功(携带用户完整信息)，正常登录
            response.setCode("0");
            List<User> userList=new ArrayList();
            userList.add(db_user);
            response.setList(userList);
            //todo session
        }else{
            //4、如果不一致，直接提示密码错误 （返回错误码和错误描述） 
            response.setCode("1001");
            response.setMsg("密码错误");
        }
    }
    return response;
}

登录后首页

Index.vue

<template>
    <div id="aaa" >
    <el-container>
        <el-header>Header</el-header>
        <el-container>
            <el-aside>
              <leftMenu></leftMenu>
            </el-aside>
            <el-main>
              <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
    </div>
</template>

<script>
 //组件引用step 1 import
 import leftMenu from '@/components/common/Menu'

export default{
  data(){
    return{

    }
  },
  //第二步，加入到组件列表中
  components:{
    leftMenu
  }
}
</script>

<style>

    #aaa{
        height: 100%;
    }
    .el-header,.el-footer{
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 100px;
    }
    .el-aside {
        height: 100%;
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }
    .el-main {
        height: 100%;
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        /* line-height: 160px; */
    }
    html,body{
        height: 100%;
     margin:0;
    }
    #app{
        height: 100%;
    }
    .el-container{
        height: 100%;
    }
</style>

Menu.vue

<template>
  <el-menu
  class="el-menu-vertical-demo"
  background-color="#D3DCE6"
   active-text-color="#ffd04b"

  @open="handleOpen"
  @close="handleClose"
  :default-active="$router.path"
        router
  >
    <el-submenu index="1">
      <template slot="title">
        <i class="el-icon-setting"></i>
        <span>系统管理</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/sys/constantTypeAdd">常数项分类管理</el-menu-item>
        <el-menu-item index="/sys/constantItemAdd">常数项管理</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  
  </el-menu>


</template>

<script>
  export default {
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

<style>
</style>

嵌套路由

{
path: '/index',
name: 'index',
component: Index,
children:[{
path: '/sys/constantTypeAdd',
name: 'constantTypeAdd',
component: ConstantTypeAdd
},
{
path: '/sys/constantItemAdd',
name: 'constantItemAdd',
component: ConstantItemAdd
}
]
}