前端博站项目阶段总结

小灰灰 2022-05-15 05:50 195阅读 0赞

马上就要大四了，眼看就要面临毕业，即便我们再不想走出校园的温室，也必须面对即将进入社会的事实，回首大一到大三，貌似一切平平，没有奖学金，不是干部，奖也得的特别少，所以为了不让自己毕业就失业，大三的时候自学了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，就先总结到这里吧