pc或移动端登录

登录带验证页面

我用的是我用的是线上接口

<template>
  <div class="bian">
      <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"></el-input>
  </el-form-item>
  <el-form-item>
  <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
  </el-form-item>
  </el-form>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
         ruleForm: {
             username:"",
             password:"",
         },
          rules: {
              username:[{ required: true, message: '请输入用户名', trigger: 'blur' }],
              password:[{ required: true, message: '请输入密码', trigger: 'blur' }],
          },
    };
  },
  mounted() { },
  methods: {
       submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
           this.$axios.post('https://www.liulongbin.top:8888/api/private/v1/login',this.ruleForm).then(res=>{
               console.log(res);
               if(res.meta.status==200){
                   sessionStorage.setItem('liu_token',res.data.token)
                   this.$store.commit("add",this.ruleForm.username)
                   this.$router.push('/shoye')
                   this.$message.success(res.meta.msg);
               }else{
                   this.$message.error(res.meta.msg);
               }
           })
          } else {
           this.$message.error('错了哦，这是一条错误消息');
            return false;
          }
        });
      },
  },
  computed: {},
  watch: {},
};
</script>

<style scoped>
.bian{
  width: 400px;
  border: 1px solid;
  padding: 20px;
  margin: 10% auto;
}
</style>
```
图1
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210116161502200.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpdUJvXzE5OTk=,size_16,color_FFFFFF,t_70)
图3
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210116161502346.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpdUJvXzE5OTk=,size_16,color_FFFFFF,t_70)
图2
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210116161502308.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpdUJvXzE5OTk=,size_16,color_FFFFFF,t_70)