vue项目的登陆注册如何写

1.首先看一下要实现的效果 上图：

 2.登录页代码：

<template>
  <div class="login-section">
    <!-- :rules="rules" -->
   
    <el-form
      label-position="top"
      label-width="100px" class="demo-ruleForm"
      :rules="rules"
      :model="rulesForm"
      status-icon
      ref="ruleForm"
    >
      <el-form-item label="用户名" prop="name">
        <el-input type="text" v-model="rulesForm.name"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="rulesForm.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {login} from '@/service/api';

export default {
  data() {
    return {
      // 存储数据对象
       rulesForm:{
         name:'',
         password:''
       },
       rules:{
         name: [
            { required: true, message: '请输入名字', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
         password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
       }
    };
  },
  methods: {
    submitForm(formName){
        this.$refs[formName].validate((valid)=>{
          console.log(valid);
          if(valid){
             login({
               name:this.rulesForm.name,
               password:this.rulesForm.password
             }).then((data)=>{
                console.log(data)
                if(data.code===0){
                  localStorage.setItem('token',data.data.token)
                  window.location.href='/'
                 
                }
                if(data.code===1){
                  this.$message.error (data.mes)
                }
             })
          }else{
            console.log('error submit')
            return false
          }
        })
    }
  }
}
</script>

<style lang="stylus">
.login-section
  padding 0px 20px
</style>

3.注册页代码：

<template>
  <div class="login-section">
    <!-- :rules="rules" -->
   
    <el-form
      label-position="top"
      label-width="100px" class="demo-ruleForm"
      :rules="rules"
      :model="rulesForm"
      status-icon
      ref="ruleForm"
    >
      <el-form-item label="用户名" prop="name">
        <el-input type="text" v-model="rulesForm.name"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="rulesForm.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {register} from '@/service/api';

export default {
  data() {
    return {
      // 存储数据对象
       rulesForm:{
         name:'',
         password:''
       },
       rules:{
         name: [
            { required: true, message: '请输入名字', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
         password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
       }
    };
  },
  methods: {
    submitForm(formName){
        this.$refs[formName].validate((valid)=>{
          console.log(valid)
          if(valid){
             register({
               name:this.rulesForm.name,
               password:this.rulesForm.password
             }).then((data)=>{
                console.log(data)
                if(data.code===0){
                  localStorage.setItem('token',data.data.token)
                  window.location.href='/'
                }
                if(data.code===1){
                  this.$message.error (data.mes)
                }
             })
          }else{
            console.log('error submit')
            return false
          }
        })
    }
  }
}
</script>

<style lang="stylus">
.login-section
  padding 0px 20px
</style>

 4.route路由代码：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

import { userInfo } from '@/service/api.js'

import Home from '@/views/home/Home.vue'
import space from "../views/user-space/space.vue"
import  Store  from '@/store'

const router = new Router({
    mode: "history",
    routes: [

        {
            path: '/',
            name: "Home",
            component: Home
        },
        {
            path: '/detail',
            name: "detail",
            component: () =>import ( /* webpackChunkName:"detail"*/ '../views/detail/detail.vue')
        },
        {
            path: '/space',
            name: "space",
            component: space
        },
        {
            path: '/login',
            name: "login",
            component: () =>import ( /* webpackChunkName:"login"*/ '@/views/user-login/index.vue'),
            meta: {  
                login: 'true'
            }
        }
    ]
});
router.beforeEach(async(to, from, next) => {
    // console.log(to)
   const token =localStorage.getItem('token')
   const isLogin = !!token;
   const data= await  userInfo() ;
   Store.commit('changeUserInfo',data.data);
   if(to.matched.some(item=>item.meta.login)){//判断是否登陆到login页
        console.log('需要登录')
        if(isLogin){
            if(data.error === 400){
                next({name:'login'})
                localStorage.removeItem('token')
                return
            }
            if(to.name==='login'){
                next({name:'home'})
            }else{
                next();
            }
             
             return
        }
        if(!isLogin && to.name === 'login'){
            next();
        }
        if(!isLogin && to.name !== 'login'){
            next({name:'login'});
        }
   }else{
       next()
   }

})





export default router;

5.封装好的axios

import axios from 'axios';

class HttpRequest {
  constructor(options){
    this.defaults = {
      baseUrl: ''
    }
    this.defaults = Object.assign(this.defaults, options);
  }
  setConfig(){

  }
  interceptors(install){
    install.interceptors.request.use(
      config => {
        let token = localStorage.getItem('token');
        if (token) {  // 判断是否存在token，如果存在的话，则每个http header都加上token
          config.headers.authorization = `token ${token}`;
        }
        return config;
      },
      err => {
        return Promise.reject(err);
      }
    );
    install.interceptors.response.use(
      res => {
        const { data, status } = res;
        return data;
      },
      err => {
        return Promise.reject(err);
      }
    );
  }
  request(options){
    options = Object.assign(this.defaults, options)
    const instance = axios.create(options)
    this.interceptors(instance);
    return instance
  }
}

const request = new HttpRequest({
  baseURL: '/api'
});

const http = request.request();

// 获取banner数据
export async function getBanner(){
  // console.log(await http.get('/banner'));
  return await http.get('/banner');
}

// 获取所有属性分类
export async function getProperty(){
  return await http.get('/menu/property');
}
// 获取所有菜谱分类
export async function getClassify(){
  return await http.get('/menu/classify');
}

/**
 * 发布菜谱
 * @export
 * @param {Object} params - 需要上传的数据，参考backData
 * @returns
 */
export async function publish(params){
  return await http.post('/menu/publish', params);
}

/**
 * 注册账号
 * @export
 * @param {Object} params - 
 * @param {Object} params.name - 用户名
 * @param {Object} params.password - 密码
 * @returns
 */
export async function register(params){
  return await http.post('/user/create', params);
}

/**
 * 账号登录
 * @export
 * @param {Object} params - 
 * @param {string} params.name - 用户名
 * @param {string} params.password - 密码
 * @returns
 */
export async function login(params){
  return  await http.post('/user/login', params);
}

// class : 类里面封装了axios请求相同的部分
//  http = 实例化对象.请求 
 
//  function(){
//   http.get
//  }
//  http.post 

/**
 * 账号登出
 */
export async function login_out(){
  return await http.post('/user/login_out');
}

/**
 * 获取用户信息
 * @export
 * @param {Object} params - 
 * @param {string} [params.userId] - 用户id
 * @returns
 */

export async function userInfo(params){
  return await http.post('/user/info', params);
}

/**
 * 拿到用户发布的菜谱，可做筛使用选
 * @export
 * @param {Object} [params] - 不填写，则获取所有的菜谱
 * @param {string} [params.userId] - 指定用户的菜单
 * @param {string} [params.classify] - 按照菜单分类，进行筛选
 * @param {string} [params.property] - 指定菜单属性进行筛选
 * @param {string} [params.property.craft] - 按工艺筛选
 * @param {string} [params.property.flavor] - 按口味筛选
 * @param {string} [params.property.hard] - 按难度筛选
 * @param {string} [params.property.people] - 按人数筛选
 * @param {string} [params.page] - 指定页码
 * @returns
 */
export async function getMenus(params){
  return await http.get('/menu/query', {params});
}

/**
 * 根据菜单id，拿到菜谱的详细信息
 * @export
 * @param {Object} [params] - 
 * @param {string} [params.menuId] - 指定菜单的id
 * @returns
 */
export async function menuInfo(params){
  return await http.get('/menu/menuInfo', {params});
}

/**
 * toggle 收藏。收藏的取消收藏；没收藏的，要收藏。
 * @export
 * @param {Object} [params] - 
 * @param {string} [params.menuId] - 指定要收藏的菜单的id
 * @returns
 */
export async function toggleCollection(params){
  return await http.post('/user/collection', params);
}
/**
 * toggle 关注。关注的取消关注；没关注的，要关注。
 * @export
 * @param {Object} [params] - 
 * @param {string} [params.followUserId] - 指定要关注的用户的id
 * @returns
 */
export async function toggleFollowing(params){
  return await http.post('/user/following', params);
}

/**
 * 获取指定用户的收藏的菜单
 * @export
 * @param {Object} [params] - 
 * @param {string} [params.userId] - 指定的用户id
 * @returns
 */
export async function collection(params){
  return await http.get('/user/collection', {params});
}

/**
 * 获取指定用户关注的人
 * @export
 * @param {Object} [params] - 
 * @param {string} [params.userId] - 指定的用户id
 * @returns
 */
export async function following(params){
  return await http.get('/user/following', {params});
}

/**
 * 获取指定用户的粉丝
 * @export
 * @param {Object} [params] - 
 * @param {string} [params.userId] - 指定的用户id
 * @returns
 */
export async function fans(params){
  return await http.get('/user/fans', {params});
}

/**
 * 上传图片
 * @export
 * @param {Object} [params] - 
 * @param {string} [params.type] - product user step
 * @returns
 */
export async function upload(params){
  return await http.post('/upload', {params});
}

/**
 * 修改用户信息
 * @export
 * @param {Object} [params] - 
 * @param {string} [params.name] - product user step
 * @param {string} [params.avatar] - product user step
 * @param {string} [params.sign] - product user step
 * @returns
 */
export async function userEdit(params){
  return await http.post('/user/edit', params);
}


/**
 * 获取菜谱评论信息
 * @export
 * @param {Object} [params] - 
 * @param {string} [params.menuId] - 指定菜谱的id
 * @returns
 */
export async function getComments(params){
  return await http.get('/menu/comment', {params});
}
/**
 * 提交菜谱评论信息
 * @export
 * @param {Object} [params] - 
 * @param {string} [params.menuId] - 指定评论的菜谱id
 * @param {string} [params.commentText] - 评论内容
 * @returns
 */
export async function postComment(params){
  return await http.post('/menu/comment', params);
}

最终效果图