项目介绍
本篇主要实现PC端美食杰项目的登录、注册和退出登录,使用到了localStorage和element UI插件
代码过程
登录页面
<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">
//双向绑定data中的rulesForm下的name
<el-input type="text" v-model="rulesForm.name"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
//双向绑定data中的rulesForm下的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>
登录页面——JS
import {
login } from "@/service/api";
export default {
data() {
return {
rulesForm:{
name: "",
password: "",
},
rules:{
name:[
{
required:true,message:'请输入活动名称',trigger:'blur'},
{
min:2,max:5,message:'长度在3到5个字符',trigger:'blur'}
],
password:[
{
required