您现在的位置是：首页 >技术交流 >登录界面到个人中心网站首页技术交流

登录页面：

1. 使用路由渲染登录组件

1. 在 /src/views 目录之下，创建 Login 文件夹，并在其下新建 Login.vue登录组件

2. 在 /src/router/index.js 路由模块中，导入需要通过路由渲染的 login.vue 登录组件

3. 在路由模块的 routes 数组中，声明登录组件的路由规则

4. 在 App.vue 根组件中声明路由占位符

 2.渲染登录组件的头部区域

    1.渲染登录组件的 header 头部区域

    2.为 <van-nav-bar> 组件添加 fixed 属性，实现顶部固定定位

3.根据接口要求绑定获取表单数据

   1.在登录页面组件的实例选项 data 中添加 user 数据字段

    2.使用 v-model 绑定对应数据

   3.创建 src/api/user.js 模块，封装登录请求方法

   4.给登录按钮注册点

 4.登录状态提示

 直接通过 this.$toast 调用。

 5.表单的验证：

验证规则对象：用正则验证

 6.验证手机号

1.给 Field 添加 name 属性用来验证单个表单项

2.监听发送按钮的点击

3.在 api/user.js 中添加封装发送短信的数据接口

 7.封装用户Token

使用本地储存保存token,登录成功以后将后端返回的 token 相关数据存储到容器中

个人页面

1.在 vuex 中请求用户的基本信息

1.在 /src/api/userAPI.js 模块中，定义请求用户基本信息的 API 方法

2.按需导入请求用户基本信息的 API

3.配置页面组件，创建首页、问答、视频、我的页面路由，页面使用vant 中的Tabbar标签栏，将 layout 组件配置到一级路由  

4.使用vant组件，导入标签组件，使用span标签来写入名字和日期  写入stley样式调整位置

5.用vant的宫格组件来写作品、收藏、历史模块，然后写入样式

6.封装 API接口