前端博站项目阶段总结

马上就要大四了，眼看就要面临毕业，即便我们再不想走出校园的温室，也必须面对即将进入社会的事实，回首大一到大三，貌似一切平平，没有奖学金，不是干部，奖也得的特别少，所以为了不让自己毕业就失业，大三的时候自学了web前端，最近准备找实习工作，努力想要写一份不错的简历吧，是真的不知道怎么写，所以就准备用一些时间写一个拿的出手的项目，也就是《前端博站》，还没有做完，只是进行一个阶段性的总结

项目中用到的技术：

HTML，CSS，JS，Vue(相关：vue-cli,vue-router,vuex)，axios ,借助json-server搭建的本地数据接口

实现的大致功能

1、登录、注册

注册实现：姓名，密码，确认密码，邮箱

登录实现：姓名，密码，验证码，记住

注册描述：

1. 都不能为空，为空的话会有重新输入提示
2. 密码必须是6-12位，如果不在这个范围内也会有错误提示
3. 确认密码必须和密码一样，如果不一样，会有错误提示
4. 邮箱格式要为正确的邮箱格式，如果不正确也会有错误提示 
5. 如果上面的条件有一个不正确，点击注册都会有错误提示，只有满足设定的条件，才能够成功注册

登录描述：

1. 姓名、密码、验证码不能为空，如果为空，会有错误提示
2. 姓名和密码必须是已经注册过的，才能登录成功，如果有一个错误，就会有错误提示，登录不成功

2、首页功能描述

首页有三个可以交互的地方：登录、博客总览、写博客

登录：如果点击登录按钮，可以跳转到登录界面，进行登录（没有注册过的要先注册） ，登录之后直接跳转到后台管理界面

博客总览：这个无需登录即可进入

写博客：必须登录之后，才能够进入到写博客的界面，如果没有登录，点击这个按钮，会自动跳转到登录界面，登录之后直接跳转到写博客界面

3、后台管理界面功能描述

面包屑导航 

后台管理页面有：博客总览、写博客、管理博客、社区留言、个人介绍

博客总览和个人介绍页面无需登录也可浏览，但写博客，博客管理和社区留言必须是登录后才可进入相应的页面，如果没有登录，点击对应的导航会自动那个切换到登录界面，登录成功后直接跳转到我们想要到达的页面

社区留言和个人介绍会为实现，其他三个除了样式没有那么美观，功能大部分实现

博客总览功能：搜索、点击进入单个博客页面

搜索：输入想要搜索的信息，符合条件的会展示在页面中，不符合的不展示在页面中

点击进入单个页面：如果没有登录，进入单页面后不能进行编辑和删除，只能查看，如果已经登录的话，可以执行编辑和删除操作 

写博客功能：这个很简单了，有标题、内容、类别、作者

博客管理功能： 按类别展示不同类别的博客，并计算博客条数，可以查看或删除博客

 （其他的还没实现，后续实现之后会再总结的）

到目前为止实现的大致功能就是这些，有些小的细节就不再赘述了

技术实现总结

简单技术总结

获取和发送数据：利用axios实现的

面包屑导航功能实现：使用了vue中的深度监控（watch）,检测导航变化

判断是否登录：使用vuex统一管理登录状态

搜索功能实现： 使用的是vue中的过滤器（filters）

彩虹标题的实现：借助vue中的自定义指令

注册验证：点击注册按钮的时候，怎么判断是否都符合标准？

• 在data中定义一个变量为对象，定义几个属性（根据需要而定），为false，在验证每一项的时候，验证成功的，让对应的属性变为true，在最后点击注册的时候，只有当几个属性值都为true时，才发送数据，否则就提示注册错误

登录验证：点击登录按钮的时候，验证是否有注册，怎么实现？

• 遍历所有的注册数据，如果有名字和登录的名字一样的，将其取出，然后再用登录输入的密码和取出的密码是否相同，只有都相同的时候，才算登录成功，否则登录失败

偏难点技术总结

 前端怎么说呐，说难不难，说简单也不简单，只要知识掌握的好，逻辑想清楚了，其实都还挺好实现的，那我就主要把我有点卡克的地方总结一下，避免下次范同样的错误（即便范了，看一下这篇博客也可以很容易想出来^o^）

1、有的页面不需要登录就可进入，而有的页面必须登录后才能进入，怎么实现？

• 为需要登录的页面的路由添加meta，标记一下
• 借助全局导航守卫
• 路由对象中有一个match，存储着我们将要到的页面的父路由和子路由信息，遍历它，找到我们添加的标记

核心代码如下：

router.beforeEach((to,from,next)=>{
  if(to.matched.some((item)=>item.meta.login)){
    let isLogin = store.state.isLogin
    if(isLogin){
      next()
    }else{
      router.push({
        path:"/login",
        query:{
          redirect:to.path.slice(1)
        }
      })
    }
  }else{
    next()
  }
})

2、登录成功后怎么知道要跳转到哪个页面？

这个其实可以和上面的问题合并到一起解决，就是在我们即将要进入一个页面的时候，如果需要登录而我们没有登录，就需要进入到登录页面，在进入登录页面之前，记录我们想要进入页面的路径，使用的方法就是在登录页面的路径后面添加一个查询字符串即可，看上面的代码

 

ok，就先总结到这里吧