从登录页到个人中心页的大致流程

此项目通过vs code编译，使用vant2基本框架实现一些基本的骨架样式.并在小窗口下安装并引入vant2和flexible，已经进行一些必要的配置

 

       注：这里使用的是按需导入配置，所以这里的vant.js就是存放这些的地方

 

 首先是登录页面

1、创建 src/views/login/index.vue 并写入以下内容

     

<template>
  <div class="login-container">登录页面</div>
</template>

<script>
export default {
 
}
</script>

<style scoped lang="less"></style>

2、然后在 src/router/index.js 中配置登录页的路由表

  

布局结构

这里主要使用到三个 Vant 组件：

• NavBar 导航栏
• Form 表单
  • Field 输入框
  • Button 按钮

 3.然后将一些公共样式存放在

 其中，src/views/login/index.vue

<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar title="登陆" />

    <van-form @submit="onSubmit">
      <van-field
        v-model="info.mobile"
        label="手机号"
        placeholder="请输入手机号"
        :rules="rules.mobile"
      />
      <van-field
        v-model="info.code"
        label="验证码"
        placeholder="请输入验证码"
        :rules="rules.code"
      />
      <div style="margin: 16px">
        <van-button v-bind:loading="isLoading" loading-text="加载中.." round block type="info" native-type="submit"
          >登陆</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { loginAPI } from "@/api";

export default {
  data() {
    return {
      isLoading:false,
      info: {
        mobile: "13911111111",
        code: "246810",
      },
      rules: {
        // 手机号
        mobile: [
          // required：表示是否必填
          // message：错误提示信息
          { required: true, message: "请输入手机号" },
          { pattern: /^1[2-9]\d{9}$/, message: "手机号不合法" },
        ],
        // 验证码
        code: [
          { required: true, message: "请输入验证码" },
          { pattern: /^\d{6}$/, message: "验证码不合法" },
        ],
      },
    };
  },
  methods: {
    async onSubmit(values) {
      this.isLoading = true
      try {
        console.log("成功提交");
        let res = await loginAPI({
          mobile: this.info.mobile,
          code: this.info.code,
        });
        console.log(res);

        // 修改vuex中的token
        this.$store.commit('changeToken',res.data.data)

        // 存放数据在本地存储里
        // setToken(res.data.data)
        
        this.$toast.success('成功文案');
      } catch {
        
        this.$toast.fail('失败文案');
      }
      this.isLoading = false
    },
  },
};
</script>

<style>
</style>

4、创建 src/api/user.js 封装请求方法

 

 二：个人中心页面

1.提前在views里面建立好一些页面如：

 

 

 注：在使用组件之前需要引入相应的组件

 

在mine页面中

<template>
  <div>
    <!-- 顶部 -->
      <div class="box">
        <van-image
        round

       width="100px"
       height="100px"
       fit="cover"
       src="https://img01.yzcdn.cn/vant/cat.jpeg"/>
      
      <!-- 顶部信息栏 -->
      <div class="info">
          <h4>xxx</h4>
          <span>2009-08-07</span>
      </div>
    </div>

     <!-- 中间信息 -->
     <van-row>
        <van-col span="8">
            <van-icon name="newspaper-o" color="blue"/>
          <div>我的作品</div>
        </van-col>
        <van-col span="8">
            <van-icon name="star-o" color="red"/>
          <div>我的收藏</div>
        </van-col>
        <van-col span="8">
            <van-icon name="sign" color="orange"/>
          <div>阅读历史</div>
        </van-col>
     </van-row>


     <!-- 底部栏 -->
     <van-cell title="编辑资料" is-link />
     <van-cell title="小智同学" is-link  />
     <van-cell title="系统设置" is-link  />
     <van-cell title="退出登录" is-link arrow-direction="down"  />
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less"  scoped>
   .box{
      background-color: #3298fa;
      height: 140px;
      display: flex;
      align-items: center;
   }
   .van-image{
    width: 90px;
    height: 90px;
    margin-left: 20px;
    margin-right: 10px;
   }
   .info {
    h4 {
        color: #fff;
        font-size:20px
    }
    span {
        background-color: #fff;
        // color: @color;
    }
   }
   .van-row{
    .van-col {
        text-align: center;
        padding: 20px 0;
    }
    .van-icon{
        font-size: 30px;
        // color: @color
    }
   }
</style>