Skip to content
This repository has been archived by the owner on Nov 28, 2020. It is now read-only.

Commit

Permalink
readme
Browse files Browse the repository at this point in the history
  • Loading branch information
Innei committed Nov 22, 2019
1 parent 6b06880 commit 3dc1bdf
Show file tree
Hide file tree
Showing 3 changed files with 233 additions and 108 deletions.
156 changes: 156 additions & 0 deletions DEV.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
# 一瞬

一瞬 (Moment), 是我接下来要做的一个项目,目的显而易见,就是希望它能够记录下生活中的美好瞬间。

<del>这个项目是一个未成品,它仅仅是一个前端,所有的数据全部来自于 Mock.js 的接口模拟。但是它将作为一瞬的前端。</del>

后端开始开发。开发中..... <del>咕咕咕咕</del>

后端使用 Express + MongoDB 开发。存档地址: <https://github.com/Innei/Moment-server>

preview: (前端+后台)

![](https://raw.githubusercontent.com/Innei/img-bed/master/20191020211642.png)

![](https://raw.githubusercontent.com/Innei/img-bed/master/20191119152019.png)

![](https://raw.githubusercontent.com/Innei/img-bed/master/20191119152039.png)

![](https://raw.githubusercontent.com/Innei/img-bed/master/20191119152106.png)

![](https://raw.githubusercontent.com/Innei/img-bed/master/20191119152131.png)

![](https://raw.githubusercontent.com/Innei/img-bed/master/20191119153624.png)

Demo 地址: (Mock.js模拟,或页面已过期,请手动构建)

[Moment](https://preview.shizuri.net/moment)

## 快速开始

即刻构建此项目,你只需要

```bash
git clone https://github.com/Innei/moment.git
cd moment
yarn
yarn serve
```

打开访问 `http://localhost:8080`

要使用开发模式,请 clone 后端配合使用。

[Moment-server](https://github.com/Innei/Moment-server)

## 接口格式

所有接口格式位于 `mock` 目录中,更为详细的 `json` 位于 `@api`

<span style="color=red">接口格式可能有更新!!</span>

所有接口前缀统一为 `api`, 接口地址为 `api/` 加上 `baseUrl`



**以下接口在后端中已全部实现,更多接口正在开发**



### 获取主人信息

基本信息:

baseUrl: `/master`

```jsonc
// get /
{
"username": "Innei", // 主人名
"userId": "1", // id
"avatar": "http://q1.qlogo.cn/g?b=qq&nk=1003521738&s=640", // 头像地址
"nickname": "Moment", // 别名
"githubUrl": "https://github.com/Innei" // 可选 GitHub 地址
}
```

首页介绍:

```jsonc
// get /introduce
{
"ok": 1, // 状态
"userId": 1, // uid
"introduce": "我是一个练习时长两年半的个人练习生, xxx", // 介绍
"skill": { // 技能树 (0 - 100)
"Java": 70,
"JavaScript": 50,
"Vue": 90
}
}
```

### 获取瞬间列表

baseUrl: `/moments`

请求方式为 `GET`

携带参数可选 `size` `page`

```jsonc
{
"ok": 1, // 状态
"pageOptions": {
"size": 10, // 页大小
"currentPage": 1, // 当前页
"totalPage": 1, // 总页
"hasNextPage": false, // 是否有下一页
"hasPrevPage": false, // 是否有上一页
},
"data": [ // 数据
{
"_id": 1, // MongoDB objectID 或者 其他 ID
"createdTime": 1571299457065, // 13位时间截 创建时间
"modifiedTime": 1571299777065,
"type": "moment", // 类型 moment picture idea hitokoto 4选1, content 有所不同
"content": {
"title": "这是一条瞬间",
"body": "今天的天气真好",
"mood": "开心",
"weather": "Sunny"
}
},
{
"_id": 2,
"createdTime": 1571399457065,
"modifiedTime": 1571399777065,
"type": "hitokoto",
"content": {
"source": "yiny",
"body": "今天的天气真好"
}
},
{
"_id": 3,
"createdTime": 1571299457065,
"modifiedTime": 1571299777065,
"type": "idea",
"content": {
"body": "今天的天气真好"
}
},
{
"_id": 4,
"createdTime": 1571299457065,
"modifiedTime": 1571299777065,
"type": "picture",
"content": {
"src": "https://i.loli.net/2019/08/18/vGNB4oOepVA6lPQ.jpg"
}
}]
}

```

欢迎大佬们,能参与到一瞬的开发中去。
181 changes: 75 additions & 106 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
# 一瞬

一瞬 (Moment), 是我接下来要做的一个项目,目的显而易见,就是希望它能够记录下生活中的美好瞬间。
一瞬 (Moment),目的显而易见,就是希望它能够记录下生活中的美好瞬间。

<del>这个项目是一个未成品,它仅仅是一个前端,所有的数据全部来自于 Mock.js 的接口模拟。但是它将作为一瞬的前端。</del>
<del>后端正在测试和完善,咕咕咕咕</del>

后端开始开发。开发中..... <del>咕咕咕咕</del>
后端使用 Express + MongoDB 开发。

后端使用 Express + MongoDB 开发。存档地址<https://github.com/Innei/Moment-server>
后端仓库地址<https://github.com/Innei/Moment-server>

preview: (前端+后台)
preview:

![](https://raw.githubusercontent.com/Innei/img-bed/master/20191020211642.png)

Expand All @@ -22,135 +22,104 @@ preview: (前端+后台)

![](https://raw.githubusercontent.com/Innei/img-bed/master/20191119153624.png)

Demo 地址: (Mock.js模拟,或页面已过期,请手动构建)
## 快速构建

[Moment](https://preview.shizuri.net/moment)

## 快速开始

即刻构建此项目,你只需要
`yarn` 为例

```bash
cd
# 构建前端
git clone https://github.com/Innei/moment.git
cd moment
yarn
yarn serve

# 构建后端
# 注意 您已正确安装了 redis 和 MongoDB
cd
git clone http://github.com/Innei/moment-server.git
cd moment-server
yarn

```

打开访问 `http://localhost:8080`
经过以上的步骤,已经正确的搭建完了主要的环境。接下你可以配合 nginx 等把该项目托管到网站上。

要使用开发模式,请 clone 后端配合使用。
## 托管生产环境

[Moment-server](https://github.com/Innei/Moment-server)
接下来,我会以 nginx 为例,简要的说明如何构建。

## 接口格式
```bash
cd ~/moment
mkdir -p /home/wwwroot/www
yarn build --modern
cd ~/moment-server
yarn prod
```

所有接口格式位于 `mock` 目录中,更为详细的 `json` 位于 `@api`
通过以上的步骤已经把前端编译成静态页面,后端监听在本地 3000 端口上。使用 `yarn build --modern` 可以编译一个速度更快,体积更小的仅支持现代浏览器的版本,你也可以去掉 `--modern` 参数来编译一个兼容更多浏览器的版本。

<span style="color=red">接口格式可能有更新!!</span>
接下来我们使用 `nginx` 来启用反向代理,将 `/api` 反向代理到本地的 3000 端口。

所有接口前缀统一为 `api`, 接口地址为 `api/` 加上 `baseUrl`
```bash
sudo vim /etc/nginx/sites-enabled/moment.conf
```

在该文件中写入

```
**以下接口在后端中已全部实现,更多接口正在开发**
server {
server_name example.com; #在这里输入你绑定的域名
root /home/wwwroot/www;
### 获取主人信息
location / {
try_files $uri $uri/ /index.html;
}
基本信息:
# 反代
location /api {
proxy_pass http://127.0.0.1:3000;
}
baseUrl: `/master`
# gzip
gzip on;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_types text/plain text/css text/xml application/json application/javascript application/rss+xml application/atom+xml image/svg+xml;
```jsonc
// get /
{
"username": "Innei", // 主人名
"userId": "1", // id
"avatar": "http://q1.qlogo.cn/g?b=qq&nk=1003521738&s=640", // 头像地址
"nickname": "Moment", // 别名
"githubUrl": "https://github.com/Innei" // 可选 GitHub 地址
}
```

首页介绍:

```jsonc
// get /introduce
{
"ok": 1, // 状态
"userId": 1, // uid
"introduce": "我是一个练习时长两年半的个人练习生, xxx", // 介绍
"skill": { // 技能树 (0 - 100)
"Java": 70,
"JavaScript": 50,
"Vue": 90
}
}
```
nginx -s reload
```

### 获取瞬间列表

baseUrl: `/moments`

请求方式为 `GET`

携带参数可选 `size` `page`

```jsonc
{
"ok": 1, // 状态
"pageOptions": {
"size": 10, // 页大小
"currentPage": 1, // 当前页
"totalPage": 1, // 总页
"hasNextPage": false, // 是否有下一页
"hasPrevPage": false, // 是否有上一页
},
"data": [ // 数据
{
"_id": 1, // MongoDB objectID 或者 其他 ID
"createdTime": 1571299457065, // 13位时间截 创建时间
"modifiedTime": 1571299777065,
"type": "moment", // 类型 moment picture idea hitokoto 4选1, content 有所不同
"content": {
"title": "这是一条瞬间",
"body": "今天的天气真好",
"mood": "开心",
"weather": "Sunny"
}
},
{
"_id": 2,
"createdTime": 1571399457065,
"modifiedTime": 1571399777065,
"type": "hitokoto",
"content": {
"source": "yiny",
"body": "今天的天气真好"
}
},
{
"_id": 3,
"createdTime": 1571299457065,
"modifiedTime": 1571299777065,
"type": "idea",
"content": {
"body": "今天的天气真好"
}
},
{
"_id": 4,
"createdTime": 1571299457065,
"modifiedTime": 1571299777065,
"type": "picture",
"content": {
"src": "https://i.loli.net/2019/08/18/vGNB4oOepVA6lPQ.jpg"
}
}]
}
即刻访问你的绑定的网址,开始初始化。

## 浏览器兼容性

此项目使用 ES6 以及最新 CSS 规范编写,顾不支持旧版浏览器。

```
Chrome >= 76
Firefox >= 70
```

## 做出贡献

接下来,我们来构建开发环境。

```bash
cd ~/moment
yarn serve .
cd ~/moment-server
yarn start
```

## 环境变量


欢迎大佬们,能参与到一瞬的开发中去。
4 changes: 2 additions & 2 deletions vue.config.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
module.exports = {
publicPath: process.env.NODE_ENV == 'production' ? '/moment' : '/',
outputDir: __dirname + '/../preview/moment/',
publicPath: '/',
outputDir: '/home/wwwroot/www',
productionSourceMap: false
}

0 comments on commit 3dc1bdf

Please sign in to comment.