登录注册vue

本实例只有简单的两个模块：
登录和注册，主要演示如何用axios请求接口以及后期逻辑书写。各个功能如下所示：

登录模块
用户不存在，密码错误，登陆成功

注销登录

注册模块

项目功能梳理

在创建项目之前，我们先理一下整个项目的功能模块。
登录模块
1.用户输入用户名及密码，调用接口
  1.1用户名未找到，提示用户“用户名不存在”
  1.2用户名找到，但密码不匹配，提示用户“密码输入错误”
  1.3用户名和密码都匹配，登录成功并跳转到主页，同时将用户名存到localStorage
  localStorage.setItem(‘key’,value)
2.加载主页获取localStorage.getItem(“key”)
  2.1 localStorage不存在，跳转到登录页
  2.2 localStorage存在，显示用户名
  2.3 点击注销，删除localStorage并跳转到登录页
  localStorage.removeItem(‘key’) 删除对应key以及key中的内容
  localStorage.clear() 清空localStorage中所有的key;它会清空所有的本地存储数据
3.管理员登录
  3.1输入管理员用户名及密码，跳转到管理页
注册模块
1.用户输入用户名及密码，调用接口
  1.1注册成功直接跳转到登录页

Home.vue为用户登录成功之后的主页
Login.vue为登录注册页
Main.vue为后台管理页

用vue-cli创建一个新项目，创建好后，因为我们要用到接口请求，所以第一步先安装axios,打开cmd进入文件所在目录，输入npm install axios --save,安装完成后在入口文件main.js中引入

import axios from 'axios'
Vue.prototype.axios = axios

新建Login.vue页面

在src中新建pages/Login.vue

<template>
  <div>
    <div class="login-wrap" v-show="showLogin">
      <h3>登录</h3>
      <p v-show="showTishi">{
  {tishi}}</p>
      <input type="text" placeholder="请输入用户名" v-model="username">
      <input type="password" placeholder="请输入密码" v-model="password">
      <button v-on:click="login">登录</button>
      <span v-on:click="ToRegister">没有账号？马上注册</span>
    </div>

    <div class="register-wrap&