# 图片分享网站

**Repository Path**: sparkyuan/PicsShow

## Basic Information

- **Project Name**: 图片分享网站
- **Description**: 学习练手的项目，一个可共享观看的图片分享网站，包含随机抽取图片、放大图片、下载图片等交互功能，以及基本的用户管理模块。前端采用Vue2+elementUI，（简易）后端NodeJS+MySQL
- **Primary Language**: JavaScript
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 10
- **Forks**: 1
- **Created**: 2022-07-25
- **Last Updated**: 2024-01-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 图片分享网站



## 简介

该网站为个人开发的练手项目，诸多细节不甚完善。

**功能模块**：图片轮播、鼠标跟随放大、随机图片抽取（制作了类似抽卡的简易动画）、背景图切换、图片锁定（指在下次抽图时会保留当前图片）、图片上传下载等，部分功能的参数可以通过设置修改。

**用户管理**：基本的用户登录登出、注册注销、修改用户名、密码，忘记密码，上传头像，好友列表（可通过添加好友来共享彼此的私有图片库），用户注册使用邮箱验证绑定，忘记密码时也使用邮箱验证。

**主要技术**：前端部分采用Vue2+elementUI，使用了Vuex，但页面不多所以没有使用router；后端部分采用nodeJS+Express+Mysql搭建，有简易的操作日志记载功能，用户自动登录和接口验证使用jwt实现，密码传输使用rsa密钥，数据库内存储使用哈希加密。



## 流程

### 准备工作

下载NodeJS、Vue等基本框架环境，根据package.json文件的内容安装依赖

```
npm install [plugins in package.json]
```



### 配置端口

在font/src/store/index.js中，修改state中的serverUrl属性

本地测试时，设置为localhost:[端口号]（服务器端口默认为8001）或本机内网IP地址

部署服务器时，设置为服务器IP或域名



### 打包前端

```bash
cd font
npm run build
```

部署到服务器上时，可以把前端生成的dist整合到server目录下



### 配置密钥

使用ssl工具生成rsa公钥密钥对，存放到server/keys目录下

在server/routers/router_handlers/getPubKey.js中设置公钥地址

在server/routers/router_handlers/decrypt.js中设置私钥地址



### 配置数据库

在server/database/index.js中，设置自己的数据库信息

```JavaScript
const db = mysql.createPool({
    host: '127.0.0.1',  
    user: 'root',
    password: 'yourPassWord',
    database: 'dataBaseName'
})
```



### 开启服务

```bash
node server/server.js

// 调试期间自动更新
nodemon sever/server.js
```



### HTTPS

默认情况下使用http协议，如果有可用域名，也可以使用https

将域名的pfx文件放在工程目录中

取消server/server.js中的HTTP部分注释，并注释掉app.listen部分

```JavaScript
// app.listen("8001", ()=>{
//     console.log("服务器已开启，请通过以下网址访问：")
//     console.log(getIPv4()+':8001')
// })

const server = https.createServer({
    pfx: fs.readFileSync(path.join(__dirname, 'keys','...pfx')),
    passphrase: ''
}, app)

server.listen(443, () => {
    console.log("服务器已开启，请通过以下网址访问：")
    // console.log('https://......')
})
```