VC code 注册登录

首先创建API建表 一个用户表三个字段写API的控制器json返回

创建项目

进行配置

终端输入 ：npm i axios -S

安装axios

进行配置

 

 

 

编辑登录页面进行vue编写

template>
 <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="账号" prop="UserName">
    <el-input type="text" v-model="ruleForm.UserName" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="UserPwd">
    <el-input type="text" v-model="ruleForm.UserPwd" autocomplete="off"></el-input>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
    <el-button @click="resetForm">注册</el-button>
  </el-form-item>
</el-form>
</template>
<script>
  export default {
    data() {
      
      

      return {
          //属性
        ruleForm: {
          UserName: '',
          UserPwd: ''
        },
        rules: {
        UserName: [
          { required: true, message: "请输入账号", trigger: "blur" },
        ],
        UserPwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
        ],
      }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
              this.$axios.post('http://localhost:51254/api/API/Show?Name='+this.ruleForm.UserName+'&Pwd='+this.ruleForm.UserPwd+'').then(res=>{

                  if(res.data>0)
                  {
                      alert("登录成功");
                    
                  }
                  else{

                       alert("登录失败");
                  }
              })
           
          } else {
            console.log('验证失败');
            return false;
          }
        });
        
      },

      resetForm() {
        this.$router.push('/Register');
      }
    }
  }
</script>

　　验证是否是空的，账号密码不正确等等

 

点击注册跳入注册页面

<template>
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="账号" prop="UserName">
    <el-input type="text" v-model="ruleForm.UserName" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="UserPwd">
    <el-input type="text" v-model="ruleForm.UserPwd" autocomplete="off"></el-input>
  </el-form-item>

  <el-form-item>
   
    <el-button @click="resetForm('ruleForm')">注册</el-button>
  </el-form-item>
</el-form>
</template>

<script>
 export default {
    data() {
      
      
      return {
     //属性
        ruleForm: {
          UserName: '',
          UserPwd: ''
        },

        //非空验证
        rules: {
        UserName: [
          { required: true, message: "请输入账号", trigger: "blur" },
        ],
        UserPwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
        ],
      }
      };

    },
    methods: {

        
      resetForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
             this.$axios.post('http://localhost:51254/api/API/UAdd',this.ruleForm).then(res=>{

                if(res.data>0)
                {
                    alert("注册成功");
                    this.$router.push('/');
                }
                else{

                    alert("注册失败");
                }
              })
           
          } else {
            console.log('验证失败');
            return false;
          }
        });
        
      },

    
     
    }
  }
</script>

注册成功跳回登录页面

配置路由把登录写入主界面

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Login.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/Register',
    name: 'Register',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/Register.vue')
  }
  
]

const router = new VueRouter({
  routes
})

export default router