vue实现简单的登入功能

html部分

<el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      status-icon
    >
      <el-form-item prop="no">
        <el-input v-model="dataForm.no" placeholder="帐号"></el-input>
      </el-form-item>

      <el-form-item prop="password">
        <el-input
          v-model="dataForm.password"
          type="password"
          placeholder="密码"
          show-password
        ></el-input>
      </el-form-item>

     

      <el-form-item>
        <el-button style="width:100%" type="primary" @click="submitForm('dataForm')"
          >安全登录</el-button
        >
        
      </el-form-item>

     
    </el-form>

vuex部分

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
    state: {
        // 从session中获取token，没有则为空
        Authorization: localStorage.getItem('Authorization') ? 	  localStorage.getItem('Authorization') : '',
     
    },
    mutations: {
        // 修改token(该消息来自登录页面）
        changeToken(state, token) {
            state.Authorization = token;
            localStorage.setItem('Authorization', token)
        } 
    }, 
})

封装跳出提示信息 (提示登录成功或者失败信息 )简单封装element-ui中的消息提示Message和弹框组件 MessageBox_ananzhangwei的博客-优快云博客_element message封装

axios的二次封装

创建http.js

import axios from 'axios'
import router from '../router/index'
function myAxios(config){
  //创建axios实例
    const service=axios.create({
        baseURL: 'http://10.128.193.156',//后端的域名
        withCredentials:false,
        // 配置请求头
        headers: {
            get: {
              'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
              // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
              
            },
            post: {
              'Content-Type': 'application/json;charset=utf-8'
              // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
            },
            
            
      }, 
    })

   
   
//     //请求拦截
    service.interceptors.request.use(config=>{
      
      
      //....后续根据实际情况去配置
  
      return config
    },err =>Promise.reject(err))


     service.interceptors.response.use(
       res =>{
       
           return res.data
         
       },
       ()=>{
        
       alert('请求错误，请重试')
       }
      
     )
     

    return service(config)
 }
export default myAxios;

请求接口的封装

创建api.js

import myAxios from "./http";

 //登入
export  function login(paramsList){
    return myAxios({
        url:'/user/login',
        method:'post',
        data:paramsList
    })
}

最后在script里面引用上面封装好的代码

<script>
//引入登入请求
import {login} from '../../.././request/api'
export default {
  data() {
    return {
      //数据
      dataForm: {
        no:"",
        password: "",
      },
      

     //datarule用于简单的表单验证
      dataRule: {
        no: [
          { required: true, message: "帐号不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
        ],
        captcha: [
          { required: true, message: "验证码不能为空", trigger: "blur" },
        ],
      },
     
    };
  },
  
  methods: {
    // 提交表单跳转首页
    submitForm(formName) {
      this.$refs[formName].validate((valid) =>{
        //表单验证通过发送请求
         if(valid){
             let data=this.dataForm
             login(data).then(res=>
             
             {    
             
            console.log(res);
        

            //  提示表单提交信息
            // 并且判断验证码是否正确不正确刷新验证码
                     this.$handAlent('登录成功')
                     //保存token到vuex
                       this.$store.commit('changeToken', res.object.Authorization)
                       //保存登入人的名字
                       sessionStorage.setItem('name',res.object.name)
                          
                     
                      //跳转首页并且
                       this.$router.push({name:'msg'});
                     
                
                     
             }
            
             
             
             )
         }   
         //表单验证不通过
         else{
              //弹出信息
         this.$handAlent('填写信息错误','error')
               // 清空表单
            this.resetForm(formName);

         }
      })
   
    },
    
   

    //重置表单
     resetForm(formName) {
        this.$refs[formName].resetFields();
        
      }
   
  },

  
};
</script>

前端小白一个 有可以改进的地方希望大佬们可以指出！！！