背景

出于学习和锻炼自己的实践和综合能力，参考github上的开源项目，自己动手构建了一个基于JavaScript的WEB项目。

简介

基于移动端的婚恋交友网站。 具体项目地址:github

章节

最初设计网站的功能点如下

• 登陆注册功能（分支：01-login）：
  • 前后端注册和登陆功能的实现
  • 注册和登陆后的路由跳转
  • 权限校验
  • cookie保持登陆状态
• 完善信息页面
  • 男士和女士完善头像、年龄等信息
• 男女列表页面
  • 增加导航栏和底部tab栏（列表、聊天信息，个人中心）
• 个人中心
  • 个人信息展示
  • 完善登陆注册
• 聊天功能
• 代码优化
  • eslint代码规范
  • 前端react的优化
  • 服务器SSR渲染

每个大的功能点都会有独立的分支，比如登陆注册功能的分支是01-logins。每次完成一个功能点以后，会合到master上。每章会有自己的技术点说明。

技术栈

项目是一个融合了前端和后端代码的工程。 用到的技术栈如下

• 前端：

  • react和redux全家桶
  • ant-design的UI框架
  • webpack和babel插件

• 后端：

  • express
  • MongoDB

如何启动

• cd 到项目根目录下，执行npm install
• cd 到项目的 server 目录下，执行node index 或者 nodemon index
• 前端页面查看方式：在地址栏输入http://localhost:3000/register或者http://localhost:3000/login
• 后端接口查看方式：在地址栏输入http://localhost:9090/user/list可以查看数据库中有多少注册用户的信息

注意事项

• 涉及到前后端联调：前端服务在3000端口，后端服务器在9090端口，如果直接访问，浏览器会有跨域拦截。所以需要在package.json中配置"proxy": "http://localhost:9090"

未完待续

当前还在实现第一个功能点上。当前正好处于休假状态，每天会抽出时间完成代码，预计在一个月内可以实现所有功能。

博客都会先发布在github上。 如果有错误或者不严谨的地方，请务必给予指正，十分感谢。 如果喜欢或者有所帮助，欢迎star，github。新手需要鼓励，希望大家不要吝啬自己的赞哦，赠人玫瑰，手有余香。