一个 Vue & Node 的全栈小项目

约学 - 能够寻找一块儿自习的小伙伴的Web APP

一个基于 Vue & Node 的移动端全栈小项目

在线演示（请使用移动端查看效果） 

源码地址： https://github.com/G-lory/yuexue

(感受要被玩坏了…我知道有不少bug…发现bug能够告诉我……谢谢dalao们……)

部分页面截图（不准吐槽我首页的背景图片！

      

技术栈

前端：Vue2 vue-router Webpack axios sass MintUI Iconfont

后端：NodeJS(v8.11.1) Koa2 Sqlite node-cache log4js

 

启动项目

我将先后端项目到同一个github repo了

# 克隆项目
git clone https://github.com/G-lory/yuexue.git

# 启动后端项目
# 到后端项目
cd yuexue-server
# 安装依赖
能够经过 npm install --registry=https://registry.npm.taobao.org 从新指定 registry 来解决 npm 安装速度慢的问题
npm install
# 运行后端项目 打开浏览器访问 http://localhost:3001
npm run start

# 启动前端项目
# 到前端目录
cd yuexue-frontend
# 安装依赖
npm install
# 热加载启动 打开浏览器访问 http://localhost:8080 （保证后端项目已启动
npm run dev
# 生产环境压缩打包
npm run build

 

实现功能

•  邮箱注册
•  邮箱密码登陆
•  查看我的信息
•  修改我的信息
•  上传头像
•  退出登陆
•  密码找回
•  首页信息展现
•  未读消息提示
•  发布邀约
•  删除已发布邀约
•  查看邀约
•  根据城市信息和关键字搜索邀约
•  接受邀约
•  密码加密存储
•  打印日志且保存到文件

未实现 & bug

•  邀约列表页在某些浏览器中 列表不能彻底加载
•  后端代码未加单元测试

项目结构

前端

后端

 

其余

写项目以前是不会 nodejs 的，由于有Java基础，因此目录结构在参考他人的基础上，就着Java的MVC结构写的。

单元测试实在不会（想）写了。

开始数据库使用的是Mysql，可是因为个人服务器内存过小了装不上，改为了sqlite…（所有写完又修改的……QAQ）

一样的是问题是保存验证码以前还想着用一下redis（能够伪装很厉害）后来使用了node-cache

遇到了不少不少问题，包括但不限于

• 移动端滑动穿透的问题
• 仿移动端页面切换效果，这两个问题可见（https://www.cnblogs.com/wenruo/p/9948348.html）
• sqlite 数据库操做问题 （后来发现是引用文件时要使用绝对路径）
• 某些设备 #加8位十六进制数字表示透明色不生效 改为 rgba 修复
• 开始使用HTML自带表单，经过 Ajax 提交，提交表单会致使刷新页面，使的用 iframe 修复，后面所有删除了表单
• 列表无限加载有些时候不生效（未修复，由于好像大部分都没问题
• 跨域问题，包括 cookie 跨域问题

没人可问的状况下查了不少资料，边查边尝试。有些生效了。有些是在没办法，就只能回避问题。最终实现的效果不算太好，不过至少把最初想的写完了（我想的就是一个很简陋的样子……

 

总结

仍是要动手写一写代码，否则你根本不知道你有多菜……

 

参考资料（虽然不少不记得了……

• koa入门

• Mint UI 使用文档

• node-sqlite3 学习笔记

• 先后端分离 Vue + NodeJS(Koa) + MongoDB，从产品到开发，全栈实践

• node.js 应答跨域请求实现 （以koa2-cors为例）

• 简单实现JS Loading功能