十次方项目前端，用户注册登录（十四）

其他 2019-09-07 01:06:06 阅读次数: 0
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接： https://blog.csdn.net/Eknaij/article/details/97368725

一、页面构建

新建一个pages/login/index.vue页面
以下页面为最终完成的页面，如果你是从第一步开始，部分模块可能尚未添加，建议先浏览全文

<template>
<div>
  <header class="head-login"> 
   <div class="wrapper"> 
    <div class="sui-navbar"> 
     <div class="navbar-inner"> 
      <a href="~/assets/index-login.html" class="sui-brand"> <img src="~/assets/img/asset-logo-black.png" alt="社交" /> </a> 
      <span class="login-text">| 登录注册</span> 
     </div> 
    </div> 
   </div>
  </header> 
  <div class="wrapper loginsign"> 
   <div class="item signup"> 
    <div class="form"> 
     <h3 class="loginsign-title">注册新账号</h3> 
     <form class="sui-form"> 
      <div class="control-group"> 
       <label for="inputname" class="control-label">名字</label> 
			 <div class="control-group">
				<label for="inputname" class="control-label">登录名</label>
				<div class="controls">
				<input type="text" id="inputname" v-model="pojo.loginname" placeholder="登录名" class="input-xlarge" required/>
				</div>
			</div>
       <div class="controls"> 
        <input type="text" id="inputname" v-model="pojo.nickname" placeholder="真实姓名或常用昵称" class="input-xlarge" required /> 
       </div> 
      </div> 
      <div class="different"> 
       <div class="radio-content"> 
        <div id="a1" class="phone"> 
         <div class="control-group number"> 
          <input type="text" v-model="pojo.mobile" placeholder="仅支持大陆手机号" class="input-xlarge" data-rules="required|mobile"/> 
         </div> 
         <div class="control-group code"> 
          <div class="input-append"> 
           <input id="appendedInputButton" type="text" placeholder="短信验证" class="span2 input-large msg-input" v-model="code" required /> 
           <button type="button" class="sui-btn msg-btn" @click="sendsms">获取验证码</button> 
          </div> 
         </div> 
         <div class="control-group"> 
          <label for="inputpassword" class="control-label">密码</label> 
          <div class="controls"> 
           <input type="text" id="inputpassword" placeholder="请输入6-16位密码" class="input-xlarge" v-model="pojo.password" required/> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="control-group btn-signup"> 
       <label class="control-label"></label> 
       <div class="controls"> 
        <label> <input type="checkbox" v-model="checked"/><span class="type-text" style="font-size:12px;" required>同意协议并接受《服务条款》</span> </label> 
        <button type="button" class="sui-btn btn-danger btn-yes" @click="userRegister()" >注 册</button> 
       </div> 
      </div> 
     </form> 
    </div> 
   </div> 
   <div class="item"> 
    <div class="form"> 
     <h3 class="loginsign-title">用户登录</h3> 
     <form class="sui-form login-form"> 
      <div class="control-group"> 
       <label for="inputname" class="control-label" >手机号：</label> 
       <div class="controls"> 
        <input type="text" id="inputname" placeholder="11位手机号" class="input-xlarge" data-rules="required" v-model="mobile" /> 
       </div> 
      </div> 
      <div class="control-group"> 
       <label for="inputpassword" class="control-label">密码：</label> 
       <div class="controls"> 
        <input type="text" id="inputpassword" placeholder="输入登录密码" class="input-xlarge" v-model="password" /> 
       </div> 
      </div> 
      <div class="controls"> 
       <label> <input type="checkbox" name="remember-me" /><span class="type-text" style="font-size:12px;">记住登录状态</span> </label> 
       <button type="button" class="sui-btn btn-danger btn-yes" @click="userLogin()">登 录</button> 
      </div> 
      <div class="other-methods"> 
      </div> 
     </form> 
    </div> 
   </div> 
  </div>   
</div>
</template>

<script>
import '~/assets/css/page-sj-person-loginsign.css'
import userApi from '@/api/user'
import { setUser } from '@/utils/auth'
export default {
	data(){
		return {
			pojo: {},
			code:'',
			mobile: '',
			password: '',
			checked: true
		}
	},
	methods: {
		sendsms(){
			if(this.pojo.mobile==null||this.pojo.mobile==""){
				this.$message({
						message: '请填写正确的手机号',
						type: 'error'
					})
			}else{
				userApi.sendsms( this.pojo.mobile ).then(res => {
				this.$message({
					message: res.data.message,
					type: (res.data.flag?'success':'error')
				})
			})
			}
		},
		userRegister() {
			if(this.code==null||this.code==""||this.pojo==null||this.pojo==""){
				this.$message({
						message: '登录名、昵称、手机号、验证码、密码不能为空',
						type: 'error'
					})
			}
			else if(this.checked){
				userApi.register(this.pojo,this.code).then( res =>{
					if(res.data.flag){
						this.$message({
							message: '注册成功',
							type: 'success'
						})
						this.pojo={}
					}else{
						this.$message({
							message: '注册出错',
							type: 'error'
						})
					}
				})
			}
			else{
				this.$message({
						message: '请同意服务条款',
						type: 'error'
					})
			}
		},
		userLogin(){
			if(this.mobile==null||this.password==null||this.mobile==""||this.password==""){
				this.$message({
						message: '请输入用户名和密码',
						type: 'error'
					})
			}else{
				userApi.login(this.mobile,this.password).then( res=> {
				if(res.data.flag){
					//保存用户信息
					setUser(res.data.data.token, res.data.data.name,res.data.data.avatar)
					location.href='/' //用户中心
				}else{
					this.$message( {
						message: res.data.message,
						type: "error"
					})
					this.mobile=''
					this.password=''
				}
			})
			}
		}
	}
} 
</script>

二、模拟数据与API

（1）将user.yml 导入easymock
（2）修改easy-mock 数据
url： /user/sendsms/{mobile}
method：put

{
	"code": 20000,
	"flag": true,
	"message": "验证码发送成功"
}

URL: /user/register/{code}
Method: post

{
	"flag": true,
	"code": 20000,
	'message': "执行成功"
}

url: /user/login
method: post

{
  "code": 20000,
  "flag": true,
  "data": {
    "token": "eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOiIxMTQxMTk1MTEwMDMwMTE4OTEyIiwic3ViIjoiZWtuYWlqIiwiaWF0IjoxNTY0MDcxMzU1LCJyb2xlcyI6InVzZXIiLCJleHAiOjE1NjQwNzE3MTV9.XGXSwyX0Kmog2dP9md05HM2KJlHp_4Yu80_zcLb6G2g",
    "name": "小白",
    "avatar": 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif'
  }
}

注：token是用postman模拟用户登录返回的token，请运行用户微服务生成token后替换
（3）编写API 创建api/user.js

export default {
  sendsms(mobile) {
    return request({
    url: `/user/sendsms/${mobile}`,
    method: 'put'
    })
  },
  login(mobile,password) {
    return request({
      url: `user/login`,
      method: 'post',
      data: {
        mobile,
        password
      }
    })
  },
  register(user,code) {
    return request({
      url: `/user/register/${code}`,
      method: 'post',
      data:user
    })
  }
}

三、用户信息存储

1.安装

（1）安装js-cookie
yarn add js-cookie
（2）创建utils/auth.js

import Cookies from 'js-cookie'
const TokenKey = 'User-Token'
const NameKey = 'User-Name'
const AvatarKey = 'User-Avatar'
export function setUser(token,name,avatar) {
    Cookies.set(NameKey, name)
    Cookies.set(AvatarKey, avatar)
    Cookies.set(TokenKey, token)
}
export function getUser() {
    return {
    token:Cookies.get(TokenKey),
    name:Cookies.get(NameKey),
    avatar:Cookies.get(AvatarKey)
    }
}
export function removeUser() {
    Cookies.remove(TokenKey)
    Cookies.remove(NameKey)
    Cookies.remove(AvatarKey)
    }

2.修改layouts/default.vue

（1）修改layouts/default.vue

 import {getUser,removeUser} from '@/utils/auth'
  import userApi from '@/api/user'
  export default {
    data() {
      return {
        user:{}
      }
    },
    created() {
      this.user= getUser()
    },
    methods:{
      logout(){
        removeUser()//清除登陆用户信息
        location.href='/'
      }
    }
  }

（2）页面部分
判断在当前已经登陆的情况下显示当前登录用户名称和头像

 <div class="sui-nav pull-right info" v-if="user.name!==undefined">
              <li><a href="~/assets/other-notice.html" class="notice">{{user.name}}</a></li>
              <li><a href="#" class="homego"><img :src="user.avatar" width="50px" height="50px" :alt="user.name"></a></li>
              <li><a @click="logout" class="notice">退出登录</a></li>
            </div>

未登录状态显示登陆链接

<div class="sui-nav pull-right info" v-if="user.name===undefined">
              <router-link to="/login">登陆</router-link>
            </div>

四、用户中心嵌套布局.

1.子布局页

（1）创建pages/manager.vue ,这个是用户中心的布局页

<template>
<div>
    <div class="myhome-personinfo" style="background-image:url('~/assets/img/widget-homebg.png');">
        <div class="wrapper">
            <div class="person-baseinfo">
                <!--头像信息-->
                <div class="photo">
                    <img src="~/assets/img/widget-myphoto.jpg" alt="" class="person" />
                    <div class="share">
                        <span><img src="~/assets/img/asset-QQ.png" alt="" width="34"height="28" /></span>
                        <span><img src="~/assets/img/asset-weixin.png" alt="" width="28"height="28" /></span>
                        <span><img src="~/assets/img/asset-weibo.png" alt="" width="28"height="28" /></span>
                    </div>
                </div>
                <!--文字信息-->
                <div class="info">
                    <h1>Web爱好者<span class="allinfo"><a href="~/assets/person-myfile.html" target="_blank">查看完整档案</a></span></h1>
                    <ul class="fill">
                        <li> <i class="fa fa-map-marker" aria-hidden="true"></i> <span class="edit-item"> 填写现居城市</span>
                            <form action="" class="sui-form form-inline">
                            <input type="text" placeholder="现居城市" />
                            <button class="sui-btn btn-danger save-btn">保存</button>
                            </form>
                        </li>
                        <li> <i class="fa fa-graduation-cap" aria-hidden="true"></i> <span
                            class="edit-item"> 填写毕业院校</span>
                            <form action="" class="sui-form form-inline">
                            <input type="text" placeholder="院校名称" />
                            <input type="text" placeholder="所学专业" />
                            <button class="sui-btn btn-danger save-btn">保存</button>
                            </form>
                        </li>
                        <li> <i class="fa fa-shopping-bag" aria-hidden="true"></i> <span class="edit-item"> 填写所在公司/组织</span>
                            <form action="" class="sui-form form-inline">
                            <input type="text" placeholder="公司/组织名称" /><input type="text" placeholder="职位头衔" />
                            <button class="sui-btn btn-danger save-btn">保存</button>
                            </form>
                        </li>
                        <li> <i class="fa fa-link" aria-hidden="true"></i> <span class="edit-item"> 填写个人网站</span>
                            <form action="" class="sui-form form-inline">
                            <input type="text" placeholder="个人网站" />
                            <button class="sui-btn btn-danger save-btn">保存</button>
                            </form>
                        </li>
                    </ul>
                </div>
            </div>
            <!--右侧编辑-->
            <div class="edit-info">
                <h4>个人简介<span class="addedit"><img src="~/assets/img/widget-edit.png" width="12" height="12" />编辑</span></h4>
            <div class="info-box">
            <div class="edit-intro">
            暂时没有个人简介
            </div>
            </div>
            </div>
            <div class="clearfix"></div>
            </div>
            </div>
            <!--两列布局-->
            <div class="wrapper myhome">
            <div class="left-list">
            <div class="myhome-list">
                <ul class="home-list">
                    <router-link to="/manager" active-class="active" tag="li" exact ><a>我的主页</a></router-link>
                    <router-link to="/manager/myanswer" active-class="active" tag="li" exact ><a>我的回答</a></router-link>
                    <router-link to="/manager/myquestion" active-class="active" tag="li" exact ><a>我的提问</a></router-link>
                    <router-link to="/manager/myshare" active-class="active" tag="li"  exact ><a>我的分享</a></router-link>
                </ul>
                <ul class="home-list bottom">
                    <router-link to="/manager/dynamic" active-class="active" tag="li" exact ><a>个人动态</a></router-link>
                    <router-link to="/manager/myfocus" active-class="active" tag="li" exact ><a>我的关注</a></router-link>
                    <router-link to="/manager/mycollect" active-class="active" tag="li" exact ><a>我的收藏</a></router-link>
                    <router-link to="/manager/myreaded" active-class="active" tag="li"  exact ><a>浏览记录</a></router-link>
                    <router-link to="/manager/account" active-class="active" tag="li"  exact ><a>账户设置</a></router-link>
                </ul>
            </div>
        </div>
        <div class="right-content">
    <nuxt-child/>
    </div>
    <div class="clearfix"></div>
    </div>
</div>
</template>
<script>
import '~/assets/css/page-sj-person-homepage.css'
export default{

}
</script>

注意：我们使用 <nuxt‐child/> 标签

2.在pages下创建manager文件夹，manager文件夹下创建index.vue（用户中心的默认首页）

<template>
  <div class="home-content">
    <ul class="sui-nav nav-tabs nav-large">
      <li class="active"><a href="#one" data-toggle="tab">我的提问</a></li>
      <li><a href="#two" data-toggle="tab">我的回答</a></li>
    </ul>
    <div class="tab-content tab-wraped">
      <div id="one" class="tab-pane active">
      <ul class="question-list">
        <li> <span class="fl good"><span class="num">12</span> 有用</span>
          <span class="title"><a href="#">有关PHP初级进阶的问题</a></span> <span class="fr date">4月6日</span> <span class="clearfix"></span> </li>
        <li> <span class="fl good"><span class="num">12</span> 有用</span>
          <span class="title"><a href="#">有关JAVA初级进阶的问题</a></span> <span class="fr date">4月6日</span> <span class="clearfix"></span> </li>
        <li> <span class="fl good"><span class="num">12</span> 有用</span>
          <span class="title"><a href="#">有关HTML5初级进阶的问题</a></span> <span class="fr date">4月6日</span> <span class="clearfix"></span> </li>
        <li> <span class="fl good"><span class="num">12</span> 有用</span>
          <span class="title"><a href="#">有关C++初级进阶的问题</a></span> <span class="fr date">4月6日</span> <span class="clearfix"></span> </li>
        <li> <span class="fl good"><span class="num">12</span> 有用</span>
          <span class="title"><a href="#">有关python初级进阶的问题</a></span> <span class="fr date">4月6日</span> <span class="clearfix"></span> </li>
      </ul>
      </div>
      <div id="two" class="tab-pane">
        <ul class="question-list">
          <li>
            <span class="fl good"> <span class="num">8</span> 有用</span>
            <span class="title"><a href="#">有关PHP初级进阶的问题</a></span> <span  class="fr date">2017-07-05 15:08</span> <span class="clearfix"></span>
          </li>
          <li>
            <span class="fl good"> <span class="num">7</span> 有用</span>
            <span class="title"><a href="#">有关JAVA初级进阶的问题</a></span> <span  class="fr date">2017-07-05 15:08</span> <span class="clearfix"></span>
          </li>
          <li>
            <span class="fl good"> <span class="num">6</span> 有用</span>
            <span class="title"><a href="#">有关HTML5初级进阶的问题</a></span> <span  class="fr date">2017-07-05 15:08</span> <span class="clearfix"></span>
          </li>
          <li>
            <span class="fl good"> <span class="num">12</span> 有用</span> <span class="title"><a href="#">有关C++初级进阶的问题</a></span>
            <span class="fr date">2017-07-05 15:08</span> <span class="clearfix"></span>
          </li>
          <li>
            <span class="fl good"> <span class="num">12</span> 有用</span> <span class="title"><a href="#">有关python初级进阶的问题</a>
            </span> <span class="fr date">2017-07-05 15:08</span> <span class="clearfix"></span>
          </li>
        </ul>
      </div>
    </div>
    <div class="activities">
      <h4 class="tit"><span>我的动态</span></h4>
      <ul class="activities-content">
        <li>
          <div class="index-title">
            <span class="author">本杰明</span>
            <span class="operate">关注了标签</span> &middot;
            <span class="time">3小时前</span>
          </div>
          <div class="guanzhuname">
            <span class="tag">php</span>
            <span class="tagnum">100</span> 关注
          </div>
          <div class="intro">
            PHP，是英文超文本预处理语言 Hypertext Preprocessor 的缩写。PHP 是一
            种开源的通用计算机脚本语言，尤其适用于网络开发并可嵌入HTML中使用。PHP 的语法借鉴
            吸收C语言、Java和Perl等流行计算机语言的特点，易于一般程序员学习。
          </div>
        </li>
        <li>
          <div class="index-title">
            <span class="author">本杰明</span>
            <span class="operate">回答了问题</span> &middot;
            <span class="time">3小时前</span>
          </div>
            <div class="question">
            <p class="title">网页链接如何直接打开微信，并进入公众号关注页面</p>
            <p class="content">现在针对这个微信是屏蔽的，你可以选择通过连接到一个其他的公众号文章中进行关注。</p>
          </div>
          <div class="qa-num">
            <span>关注<i>1</i></span>
            <span>回答<i>2</i></span>
          </div>
        </li>
        <li>
          <div class="index-title">
            <span class="author">本杰明</span>
            <span class="operate">收藏了文章</span> &middot;
            <span class="time">3小时前</span>
          </div>
          <div class="question">
            <p class="title">网页链接如何直接打开微信，并进入公众号关注页面</p>
          </div>
          <div class="qa-num">
            <span><a href="#">http://baidu.com</a></span>
          </div>
        </li>
        <li>
          <div class="index-title">
            <span class="author">本杰明</span>
            <span class="operate">收藏了文章</span> &middot;
            <span class="time">3小时前</span>
          </div>
          <div class="question">
            <p class="title">网页链接如何直接打开微信，并进入公众号关注页面</p>
          </div>
          <div class="qa-num">
            <span><a href="#">http://baidu.com</a></span>
          </div>
        </li>
        <li>
          <div class="index-title">
            <span class="author">本杰明</span>
            <span class="operate">回答了问题</span> &middot;
            <span class="time">3小时前</span>
          </div>
          <div class="question">
            <p class="title">网页链接如何直接打开微信，并进入公众号关注页面</p>
            <p class="content">现在针对这个微信是屏蔽的，你可以选择通过连接到一个
            其他的公众号文章中进行关注。</p>
          </div>
          <div class="qa-num">
            <span>关注<i>1</i></span>
            <span>回答<i>2</i></span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

3. 用户中心各子页面

（1）创建pages/manager/myanswer.vue（我的问答）
（2）创建pages/manager/myquestion.vue（我的提问）
（3）创建pages/manager/myshare.vue（我的分享）
（4）创建pages/manager/dynamic.vue（个人动态）
（5）创建pages/manager/myfocus.vue（我的关注）
（6）创建pages/manager/mycollect.vue（我的收藏）
（7）创建pages/manager/myreaded.vue （浏览记录）
（8）创建pages/manager/account.vue(账户设置)

4.用户中心鉴权

修改pages/manager.vue代码部分

<script>
import '~/assets/css/page-sj-person-homepage.css'
import {getUser} from '@/utils/auth'
export default {
    created(){
        if(getUser().name===undefined){
            this.$router.push('/login')
        }
    }
}
</script>

测试：在未登录的情况下在地址栏输入http://localhost:3000/manager 会自动跳转到登录页
修改layouts/default.vue的用户名与头像，修改链接到用户中心

            <div class="sui-nav pull-right info" v-if="user.name!==undefined">
              <li><a href="/manager" class="notice">{{user.name}}</a></li>
              <li><a href="/manager" class="homego"><img :src="user.avatar" width="50px" height="50px" :alt="user.name"></a></li>
              <li><a @click="logout" class="notice">退出登录</a></li>
            </div>

猜你喜欢

转载自blog.csdn.net/Eknaij/article/details/97368725
今日推荐
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
周排行
static方法和非static方法的区别（java）
如何查找计算机专业paper
java.lang.ClassFormatError: Incompatible magic value 0 in class file com/sitecha
跳跃游戏II
stm32_之【建立工程】
TeaWeb v0.0.9 发布，统计底层优化、主机监控功能改进
事件分发 -----控制字体大小
JavaScript DOM练习（动态表格添加） December 25，2019
JSF Scope & CDI
实现从零搭建一个登录注册页面（附源代码）
每日归档
更多
2024-05-19(0)
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022