zoukankan      html  css  js  c++  java
  • 一个 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 跨域问题

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

    总结

    还是要动手写一写代码,不然你根本不知道你有多菜……

    参考资料(虽然很多不记得了……

  • 相关阅读:
    Jenkins知识地图
    PageObject&PageFactory
    robot framework-databaselibaray库使用(python)
    robot framework环境搭建
    使用instantclient_11_2 和PL/SQL Developer工具包连接oracle 11g远程数据库(转)
    (转)pip和easy_install使用方式
    图解:如何在LINUX中安装VM-Tools
    ANT简明教程[转载]
    Linux常用命令
    oracle数据分组
  • 原文地址:https://www.cnblogs.com/wenruo/p/10064998.html
Copyright © 2011-2022 走看看