完善登录逻辑, 完善项目/技能编辑以及分享功能(vue简历编辑器)

登录逻辑

当我们登录的时候, 才会有登出. 那么我们只有在用户登录的情况下才显示登出按钮. 检测状态用hasLogin()来确定, 当检测到用户id时标明用户登录, 没有检测到时表明没有用户登录:

class="button" @click="onLogout" v-show="hasLogin()">登出

注意, hasLogin是在app的methods中的, 这里我们省略:

hasLogin () {
  return !!this.currentUser.objectId
}

还有我们在登录/注册时要给用户反馈信息, 不然用户无法知道是登录成功? 失败?还是其他问题. 这也很简单. 只需将上一节中提到的相关函数做出相应的修改. 因为leanCloud的提供的API是含有promise对象, 所以在then方法中调取事件对象就可以了了. 以onLogin为例:

onLogin(e){
AV.User.logIn(this.login.email, this.login.password).then((user) => {
     user = user.toJSON()
     this.currentUser.objectId = user.objectId
     this.currentUser.email = user.email
     this.loginVisible = false
   }, (error) => {
     if (error.code === 211) {
       alert('邮箱不存在')
     } else if (error.code === 210) {
       alert('邮箱和密码不匹配')
     }
   })
 }

通过error事件对象,我们可以根据返回值做出提示.

项目/技能编辑

接下来我们编辑技能列表, 技能列表. 技能列表也需要一个对象用于存储. 我们在resume中定义它:

resume: {
//other codes...
   skills: [
     {name: '请填写技能名称', description: '请填写技能描述'},
     {name: '请填写技能名称', description: '请填写技能描述'},
     {name: '请填写技能名称', description: '请填写技能描述'},
     {name: '请填写技能名称', description: '请填写技能描述'},
   ]
 },

我们初始定义了四个技能. 在index.html页面中使用组件引入.

<ul>
  <li v-for="skill,index in resume.skills">
     <editable-span class="name" :value="skill.name" @edit="onEdit(`skills[${index}].name`, $event)">editable-span>
     <div class="description">
       <editable-span :value="skill.description" @edit="onEdit(`skills[${index}].description`, $event)">editable-span>
     div>
     
     <span class="remove" v-if="index>=4" @click="removeSkill(index)">删除span>
   li>
   <li v-if="mode === 'edit'">
     <span @click="addSkill">添加span>
   li>
 ul>

我们在技能中增加了添加和删除功能, 这样我们就可以对技能进行添加和删除了. addSkil和removeSkill都在methods中.

addSkill () {
 this.resume.skills.push({name: '请填写技能名称', description: '请填写技能描述'})
},
removeSkill (index) {
  this.resume.skills.splice(index, 1)
},

对于项目列表, 我们也可以使用类似的方法. 这里就不在阐述.

分享功能

当点击分享的时候, 我们可以使用一个弹出框, 框内的内容是我们简历的url, 我们可以使用这个url访问简历(此时隐藏侧边栏).

<button class="button" @click="shareVisible = true">分享button>
<div v-show="shareVisible" class="share" v-cloak>
  <h2>
    请将下面链接分享给面试官
  h2>
  <div>
    <textarea readonly>{{shareLink}}textarea>
  div>
  <div class="cancel" @click="shareVisible = false">取消div>
div>

这个url通过下面的代码获取:

// 获取预览用户的 id
let search = location.search
let regex = /user_id=([^&]+)/
let matches = search.match(regex)
let userId
if (matches) {
  userId = matches[1]
  app.mode = 'preview' //模式, 下面会讲到
  app.getResume({objectId: userId}).then(resume => {
    app.previewResume = resume
  })
}

我们的预览和当前用户是两个不同的主体, 因此要加以区分. 我们再次定义两个对象, 这两个对象表示的是预览的对象, 而不是当前用户.

previewUser: {
  objectId: undefined,
},
previewResume: {},

previewUser表示的是预览用户, previewResume表示预览用户的个人信息.
我们在定义一个模式, 根据其值区分是预览模式还是当前用户模式.

mode: 'edit' // 'preview'

当mode值为edit时, 表示当前用户模式, 当为preview时表示预览模式.
那么在页面如何区分显示用户信息呢, 我们使用模式区分.

computed: {
  displayResume () {
    return this.mode === 'preview' ? this.previewResume : this.resume
  }
},

<ul>

  <li v-for="skill,index in displayResume.skills">
  
     <editable-span :disabled="mode === 'preview'" class="name" :value="skill.name" @edit="onEdit(`skills[${index}].name`, $event)">editable-span>
     <div class="description">
       <editable-span :disabled="mode === 'preview'" :value="skill.description" @edit="onEdit(`skills[${index}].description`, $event)">editable-span>
     div>
     <span class="remove" v-if="index>=4 && mode==='edit'" @click="removeSkill(index)">删除span>
   li>
   <li v-if="mode === 'edit'">
     <span @click="addSkill">添加span>
   li>
 ul>

同时, 我们在editable-span标签中加入disable属性, 用来控制侧边栏的显示, 因为在预览模式下, 侧边栏是不需要显示的.