登录注册前后端分离及Vuex使用

uniapp实现APP登录
第一步，进行必须环境的准备
首先需要安装uniapp的开发环境，在安装完成后可以创建一个uniapp项目。项目创建成功之后，就可以在创建的项目中写简单的CSS样式布局啦！因为做的是登录与注册功能，所以为了方便实现登录功能，还需要创建一个后端接口，用于接收登录验证和返回数据。

第二步，编写前端登录与注册页面的简单布局
创建一个登录的vue组件，并在该组件中编写登录所需的界面。例如，可以显示一个用户名和密码输入框，并添加一个登录按钮，用户点击后会将输入框中的用户名和密码发送给后端进行验证。

第三步，后端请求数据并调用接口来实现登录功能
在登录组件中，通过vue的axios插件发送POST请求到后端接口，将用户输入的用户名和密码传递给后端进行验证。如果用户名和密码验证通过（在数据库中与先前注册的账号与密码进行校验，校验通过后），则后端返回一个token，表示该用户已经成功登录。如果验证失败，则返回相应的错误信息（用户名错误，密码错误或用户不存在）。前端根据后端返回的结果进行相应的处理，如果token不为空，则代表用户已经登录成功，可以进行相关操作。

第四步，在前端已经渲染的登录注册页面中存储登录状态
当用户成功登录后，需要将该用户的登录状态保存下来，以便在其他页面或应用程序结束后也能识别该用户身份。在uniapp中，可以使用h5应用缓存或本地存储功能来保存用户的登录状态。例如，可以使用uni.setStorage()函数将token值保存到本地存储中，下次打开应用时通过uni.getStorage()函数取出token。

第五步：

在后端设置登录失效状态当用户登录时长超过后端设置的有效时长，登录就会失效并自动退出登录页面。用户可以返回重新登录。

第六步，实现退出登录
用户可以在任何时间退出登录。在实现退出登录时，需要将本地存储中保存的token清空，并跳转到登录页。

最后总结一下：
本文介绍了如何使用uniapp实现APP登录功能，通过该功能可以很方便地进行用户身份验证和自动登录。在实现登录功能时，需要注意安全性，避免产生数据泄露等意外情况。同时，也需要考虑用户体验，尽可能使登录过程简单便捷，让用户能够快速完成登录操作。
 

<template>
    <view class="login">
        <view class="title">
            <text class="list">hellow</text><br>
            <text class="list">welcome</text>
            <text class="list-buttom">welcome back you've been missed</text>
        </view>
        <!-- 基础表单校验 -->
        <!-- label-position=top 为对齐方式-->
        <uni-forms ref="valiForm" label-position="top" :rules="rules" :modelValue="valiFormData">
            <uni-forms-item label="Username" required name="username">
                <uni-easyinput v-model="valiFormData.username" placeholder="请输入用户名" />
            </uni-forms-item>
            <!-- v-model是双向数据绑定 -->
            <uni-forms-item label="Password" required name="password">
                <uni-easyinput v-model="valiFormData.password" placeholder="请输入密码" />
            </uni-forms-item>
        </uni-forms>
        <button type="primary" @click="submit('valiForm')">Login</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                // 校验表单数据