东莞市盛裕绒艺玩具有限公司

东莞市盛裕绒艺玩具有限公司

优德88登录

15380497142
联系方式
全国服务热线: 15380497142

咨询热线:18580786066
联系人:郭佳宏
地址:周市镇新镇路698号

一个 Vue & Node 的全栈小项目

来源:优德88登录   发布时间:2019-12-02   点击量:461

约学 - 可以寻找一起自习的小伙伴的Web APP

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

在线演示(请使用移动端查看效果) 

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

 

部分页面截图(不许吐槽我首页的背景图片!

      

技术栈

前端: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:3001npm 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功能

相关产品

COPYRIGHTS©2017 优德88登录 ALL RIGHTS RESERVED 备案号:461