本实例只有简单的两个模块:
登录和注册,主要演示如何用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&