Git Product home page Git Product logo

romantic's Introduction

Romantic

A full stack web project, all by using LeanCloud, as a LeanEngine demo.

简介

本项目是一个完全基于 LeanCloud 实现的 Web App,产品逻辑不算复杂。使用者可以分享自己的照片到微信朋友圈中,如果有人喜欢 Ta,那么可以点击喜欢按钮,并且可以生成自己的页面。如果彼此喜欢,就可以给双方发送一条短信。

可以扫描二维码体验

image

特别鸣谢

非常感谢吴力扬参与产品讨论,并负责界面设计,我个人觉得这个产品界面设计地非常优美,很喜欢。

产品图标

image

产品主界面效果图

image

技术简介

服务端完全使用 LeanCloud,托管于 LeanEngine(LeanCloud 的服务端环境)。Web App 是通过自定义的 API,纯前端调用的方式实现。服务端技术栈主要是 Nodejs + Express,前端技术栈主要是 Vuejs。代码全部采用 ES6 的语法编写,服务端使用 async/await 来处理异步(前端需考虑兼容性)。

目录结构

.
├── public                  // 打包后部署的前端代码(自动生成)
├── server                  // 服务端代码模块
├── web                     // 前端开发期的代码
├── server.js               // 服务端的前置启动逻辑
├── package.json            // 服务端的 Nodejs 配置
└── ...                     // 其他非关键代码

安装步骤

如果想本地调试,需先按照如下过程安装依赖

前置安装

// 安装 LeanCloud 命令行工具
$ npm install -g leancloud-cli

// 安装 bower
$ npm install -g bower

// 安装 gulp
$ npm install -g gulp

服务端依赖安装

// 本地服务端环境安装,在根目录下执行
$ npm install

前端依赖安装

// 进入到 web 目录中,分别执行
$ npm install
$ bower install

本地调试

本地需要同时开启服务端环境和前端调试环境

启动本地服务端环境

// 首先根据 LeanCloud 的云引擎文档,配置好本地应用信息,没有应用需创建
$ lean app add your_app <your app 的应用 id>

// 启动服务端
$ lean up

启动前端调试环境

// 在服务端启动的情况下,新打开一个终端窗口,启动前端调试
$ gulp serve

数据库结构

UserInfo

存储所有用户的信息(因为产品设计上不需用户登录,所以没有使用 AV.User)

字段 描述 类型
uid 用户 id String
name 用户名 String
photo 照片的 url String
phone 手机号码 String
likes 喜欢的人的 uid 列表 Array
unlikes 不喜欢的人的 uid 列表 Array
likedCount 被喜欢的次数 Number
unlikedCount 不被喜欢的次数 Number

接口

提交用户信息

  • POST
  • /api/users

上传头像照片

  • POST
  • /api/users/uploadPhoto

获取用户信息

  • GET
  • /api/users/:uid

某人喜欢某人

  • POST
  • /api/users/:uid/like

某人不喜欢某人

  • POST
  • /api/users/:uid/unlike

部署

按照如下步骤部署

前端打包

// 进入 web 目录,执行打包程序
$ gulp build

部署到 LeanCloud

// 将所有代码部署到 LeanEngine
$ lean deploy

romantic's People

Contributors

wangxiao avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

romantic's Issues

微信获取ticket感觉会出问题

我发现在7200s前获取accesstoken是会替换之前的accesstoken的 但是即使是不同的accesstoken 获取到的ticket值都是一样的,也就是说如果这样判断timestampForTicket + 3600 * 1000 < now, 就有可能会通过这个时间校验,但是ticket是过期的可能?

Error: Cannot find module 'depd'

D:\otherWork\七夕交友>lean up
提示:键入 rs 命令并回车来强制重启本进程
提示:使用 http://localhost:3001 测试 Cloud 函数

[email protected] start D:\otherWork\七夕交友
node server.js

module.js:327
throw err;
^

Error: Cannot find module 'depd'
at Function.Module._resolveFilename (module.js:325:15)
at Function.Module._load (module.js:276:25)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Object. (D:\otherWork\七夕交友\node_modules\leanengine\node_modules\body-parser\index.js:11:17)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)

npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "start"
npm ERR! node v4.4.1
npm ERR! npm v2.14.20
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: node server.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'node server.js'.
npm ERR! This is most likely a problem with the node-js-getting-started package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node server.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs node-js-getting-started
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!
npm ERR! npm owner ls node-js-getting-started
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! D:\otherWork\七夕交友\npm-debug.log

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.