Git Product home page Git Product logo

web's Introduction

项目名

web三人考核 - 仿知乎

参与成员

  • 前端 - 程跃洋 吴坤淼
  • 后端 - 汪泽人

[后端Github仓库地址]

技术栈😳

  1. html5

  2. css

  3. javascript

实现功能

基础功能(全部实现)😁

  1. 用户注册
  2. 用户登录(手机号/邮箱登录以及验证码登录)
  3. 发布问题
  4. 回答问题
  5. 发布文章
  6. 评论回答和评论文章
  7. 我的个人信息栏
  8. 用户信息更改(头像,密码,用户名,性别,个人简介)
  9. 我的收藏(增加,删除,查询)

亮点(~ ̄▽ ̄)~

保持登录状态

通过本地存储token保持,如果token过期则返回登录界面

还原知乎导航栏动态效果

下拉上滑会展示不一样的导航栏

回到顶部按钮

下拉一定距离会出现回到顶部按钮,点击即可回到顶部

搜索功能

搜索时,会出现下拉框,包含关键词联想内容;搜索结果关键词高亮;在前端保存搜索历史记录。

问题和文章的点赞功能

将后端写的点赞功能部署页面

回答用户显示头像,用户可更改头像

回答的用户会显示头像

问题、文章、收藏夹界面可通过更改网址#后面的数字跳转不同问题、文章、收藏夹
对头部和底部模块以及编辑器模块单独写css和js,方便复用

难点😣

搜索框失去焦点事件导致搜索结果的点击事件没有触发

对搜索框添加定时器,延后触发

实时获取搜索框内容并显示搜索结果

通过定时器轮询的方式发送请求,拥有一定延迟,当搜索框无内容时不会开启定时器或已开启的定时器失效

搜索结果关键词高亮

依次比对关键词和搜索结果并添加span标签

给渲染后的元素添加事件

没有选择事件委托,而是行内添加事件并通过函数调用的方式

获取用户头像和点赞数时遇到异步问题

当渲染回答时,出现头像和点赞数请求获取速度比渲染速度慢导致未能把头像和点赞数渲染上而出现undefined的情况,通过异步处理解决

设置multipart/form-data请求头发送formdata数据请求失败

通过查找资料,不设置该请求头由浏览器自动优化即可

优化用户上传头像处理

通过点击头像触发隐藏的file表单,并对文件大小和样式进行了限制

导航栏overflow隐藏和显示的设置

导航栏外元素较多,当点击搜索框或提问或头像时,需要隐藏不相关元素并且点击提问按钮时需要禁止滑动。

不足┭┮﹏┭┮

搜索功能有延迟且不美观
头部导航栏不是不同页面下拉不同样式
文本编辑器未手动封装,没有实现上传图片功能
对复用性较高的代码没有进行封装
命名不规范,代码可读性较差
用户点击部分事件后如果需要重新渲染需要刷新页面不能实时更改
没有使用Typescript进行开发
没有实现页面下滑懒加载
文本编辑器没有自己封装

web's People

Contributors

lf200 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.