前端学习（2426）：数据存到本地存储

最新推荐文章于 2024-03-19 11:24:05 发布

前端小歌谣

最新推荐文章于 2024-03-19 11:24:05 发布

阅读量288

点赞数

分类专栏： # 歌谣--前端学习--总进程

本文链接：https://blog.csdn.net/weixin_43392489/article/details/108961138

版权

本文介绍了如何在前端应用中将数据保存到本地存储，涉及app.vue、index.vue、main.js、index.js、user.js等关键文件的使用，通过示例展示了具体的实现过程和运行效果。

摘要由CSDN通过智能技术生成

app.vue

<template>
  <div id="app">

    <router-view/>
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>
<style lang="less">

</style>

index.vue

<template>
  <div class="login-container">
    <!--必须用el-form进行包裹-->
    <div class="login-head"></div>
    <!--配置表单验证
    //必须为表单提供验证对象
    2添加prop属性
    3通过el-form组件库里面的rules-->

    <el-form class="login-form" ref="login-form" :model="user" :rules="formRules">
      <el-form-item prop="mobile">
        <el-input v-model="user.mobile" placeholder="请输入手机号"></el-input>
      </el-form-item>

        <el-form-item prop="code">
          <el-input v-model="user.code" placeholder="请输入验证码"></el-input>
        </el-form-item>
      <el-form-item prop="agree">
        <el-checkbox v-model="checked">我已阅读并同意用户协议和隐私条款</el-checkbox>

      </el-form-item>
      <el-form-item>
        <el-button class="login-btn" type="primary" :loading="loginLoading" @click="onLogin">登录</el-button>

      </el-form-item>
    </el-form>
  </div>
</template>

<script>

import { login } from '@/api/user'
export default {
  name: 'LoginIndex',
  components: {
  },
  props: {},
  data () {
    return {
      user: {
        mobile: '', // 手机号
        code: '', // 验证码
        agree: false// 是否同意协议
      },

      loginLoading: false, // 登录的loding状态
      /*  checked: false, // 是否同意协议 */
      formRules: {
        mobile: [{
          required: true,
          message: '手机号不能为空',
          trigger: 'change'
        },
        { pattern: /^1[3|5|7|9]\d{9}$/, message: '请输入正确的号码格式', trigger: 'change' }
        ],
        code: