黑马头条登录到个人中心页面

使用vue脚手架创建项目的基本框架，对框架进行修改，将不需要的内容删除。

创建style文件夹，然后在里面创建base.less文件，用于存放全局样式。

创建utils文件夹，用于存放一些项目需要的工具；

在main.js文件夹里引入vant组件库；

在postcssrc.js文件里引入rem适配；

在App.vue中设置路由出口；

完成上面部分后就正式开始做项目了：

登录页面：

在views文件夹中创建login页面（登录页面），然后在router里面配置登录页面的路由；

从vant组件库引入导航栏组件，根据项目的需求对导航栏的颜色及文字样式进行修改；

从vant组件库引入表单组件，将原先的username和password修改为mobile（手机号）和code（验证码），并在data里用创建info保存这两个数据，然后书写手机号和验证码的正则表达式；然后是修改表单里的登录按钮，修改按钮里的onSubmit事件；

在utils文件夹里创建request.js文件，里面写项目请求的基地址，然后创建api文件夹，在里面再创建user.js文件，里面写关于用户请求的请求地址，这里导入用户登录的地址；

在onSubmit事件里所有异步请求的方式导入api文件夹里的user.js文件里的登录请求地址，将登录的请求参数mobile（手机号）和code（验证码）传入请求地址，当请求成功后就得到用户的登录信息（token）；

在utils文件夹里创建token.js文件，对token进行本地存储，删除，获取的方法；

登录成功后调用token.js里的setoken方法将token保存到本地存储里，然后对登录按钮进行一些调整，加入登录状态loading，以及登录成功或者失败时的轻提示；

个人中心页面：

在创建个人中心页面时先创建layout文件夹，在layout文件里引入tabbar标签栏组件，修改组件为首页，视频，问答，我的四个标签，并设置路由出口，将跳转方式改为路由跳转，在router配置layout的路由，并将四个标签配置为它的子路由；

在我的标签栏路由为my页面，在这里写个人中心页面，首先将页面分为上中三个部分，上面写登录头像，名字，生日信息，中间部分写我的作品，我的收藏，阅读历史，下部分写编辑资料，小智同学，系统设置，退出登录；

上部分引入image图片组件，并且分为左右两部分，左边放头像，右边放名字和生日；

中间部分引入Grid宫格组件，并且修改宫格里的图标和文字，图标为引入的icon组件；

下部分引入cell单元格，修改文字并加入图标和箭头；

完成后回到登录页面，在onSubmit事件中登录成功后跳转为个人中心页面

黑马头条登录到个人中心页面相关推荐

uniapp获取用户信息（登录及个人中心页面的实现）
因为在微信小程序中wx.getuserInfo已经失效,所以我们在uniapp中也应该使用wx.getUserProfile来获取用户信息页面的逻辑一上来加载个人中心页,当用户点击未登录三个字时跳 ...
前端基础第四天项目社交媒体黑马头条项目-登录注册和个人中心
一.项目初始化目标能使用 Vue CLI 创建项目了解 Vant 组件库的导入方式掌握制作使用字体图标的方式掌握如何在 Vue 项目中处理 REM 适配理解 axios 请求模块的封装使 ...
Vue.js-Day09【项目实战(附带完整项目源码)-day04：用户个人中心页面、用户登录页面、将项目打包部署到服务器上、项目汇报、实训心得】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 实战项目源码[链接:https://pan.baidu.com/s/1r0Mje3Xnh8x4F1HyG4aQTA 提 ...
android仿今日头条个人中心页面
android仿今日头条个人中心页面效果图实现步骤: 自定义ScrollView,添加一个反弹的动画代码: package com.example.administrator.gerenzhon ...
后台管理系统2——登录、退出、注册功能、个人中心页面
登录功能的实现 1.登录功能 1.1 页面内容的修改 1.2 路由的实现 1.3 登录页面的设计 1.4 登录逻辑实现 1.5 后台的实现 1.6 登录功能的修改 2 退出系统 3 注册功能 3.1 ...
小程序的登录页面与个人中心页面的交互
表单的验证前端验证 // 手机表单数据 let {phone, password} = this.data // 验证密码为空 if(!phone) { wx.showToast({ title: ...
java 黑马头条 day4 自媒体文章发布自媒体文章列表查询频道列表展示自媒体文章-发布、修改、保存草稿自媒体文章-根据id查询自媒体文章-删除
1 自媒体文章列表查询 1.1 需求分析 1.2 表结构和实体类 wm_news 自媒体文章表需求: 如果有文章标题,按照文章标题模糊查询如果有频道信息,按照频道ID查询如果有文章状态,按照状态 ...
《黑马头条》 ElectricSearch 分词器联想词 MangoDB day08-平台管理[实战]作业
07 app端文章搜索 1) 今日内容介绍 1.1)App端搜索-效果图 1.2)今日内容 2) 搭建ElasticSearch环境 2.1) 拉取镜像 docker pull elasticsear ...
《黑马头条》SpringBoot+SpringCloud+ Nacos等企业级微服务架构项目
01环境搭建.SpringCloud微服务(注册发现.服务调用.网关) 1)课程对比 2)项目概述 2.1)能让你收获什么 2.2)项目课程大纲 2.3)项目概述随着智能手机的普及,人们更加习惯于通 ...

黑马头条登录到个人中心页面

黑马头条登录到个人中心页面相关推荐

最新文章

热门文章