前端架构师的黄埔军校
+
```
#### 2.5.5 src\utils\request.ts
src\utils\request.ts
```diff
const request = extend({
errorHandler, // 默认错误处理
credentials: 'include', // 默认请求是否带上cookie
});
+const baseURL = 'http://localhost:4000';
+request.interceptors.request.use((url: any, options: any) => {
+ if (localStorage.getItem('token')) {
+ options.headers.Authorization = 'Bearer ' + localStorage.getItem('token')
+ }
+ if (url.startsWith('/server')) {
+ url = baseURL + url.slice(7);
+ }
+ console.log('url', url);
+ return { url, options };
+});
export default request;
```
## 3.后端
### 3.1 api.ts
```js
let express = require("express");
let path = require('path');
let bodyParser = require("body-parser");
let settings = require('./settings');
let jwt = require('jwt-simple');
let cors = require("cors");
let Models = require('./db');
let uuid = require('uuid');
let sendCode = require('./sms');
let session = require("express-session");
let MongoStore = require('connect-mongo')(session);
let app = express();
app.use(
cors({
origin: ["http://localhost:8000", "http://localhost:8001"],
credentials: true,
allowedHeaders: "Content-Type,Authorization",
methods: "GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS"
})
);
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(
session({
secret: settings.secret,
resave: false,
saveUninitialized: true,
store: new MongoStore({
url: settings.dbUrl,
mongoOptions: {
useNewUrlParser: true,
useUnifiedTopology: true
}
})
})
);
app.get('/api/login/captcha', async (req: any, res: any) => {
let mobile = req.query.mobile;
let captcha = rand();
req.session.captcha = captcha;
await sendCode(mobile, captcha);
res.json({ code: 0, data: `[仅限测试环境验证码]: ${captcha}` });
});
app.post('/api/register', async (req: any, res: any) => {
let user = req.body;
if (user.captcha != req.session.captcha) {
return res.json({ code: 1, error: '验证码不正确' });
}
let avatarValue = require('crypto').createHash('md5').update(user.mail).digest('hex');
user.avatar = `https://secure.gravatar.com/avatar/${avatarValue}?s=48`;
user = await Models.UserModel.create(user);
res.send({ status: 'ok', currentAuthority: 'user' });
});
app.post('/api/login/account', async (req: any, res: any) => {
let user = req.body;
let query: any = {};
if (user.type == 'account') {
query.mail = user.userName;
} else if (user.type == 'mobile') {
query.mobile = user.mobile;
if (user.captcha != req.session.captcha) {
return res.send({
status: 'error',
type: user.type,
currentAuthority: 'guest',
});
}
}
let dbUser = await Models.UserModel.findOne(query);
if (dbUser) {
dbUser.userid = dbUser._id;
dbUser.name = dbUser.mail;
let token = jwt.encode(dbUser, settings.secret);
res.send({ status: 'ok', token, type: user.type, currentAuthority: dbUser.currentAuthority });
} else {
return res.send({
status: 'error',
type: user.type,
currentAuthority: 'guest',
});
}
});
app.get('/api/currentUser', async (req: any, res: any) => {
let authorization = req.headers['authorization'];
if (authorization) {
try {
let user = jwt.decode(authorization.split(' ')[1], settings.secret);
user.userid = user._id;
user.name = user.mail;
res.json(user);
} catch (err) {
res.status(401).send({});
}
} else {
res.status(401).send({});
}
});
app.listen(4000, () => {
console.log('服务器在4000端口启动!');
});
function rand() {
let min: number = 1000, max: number = 9999;
return Math.floor(Math.random() * (max - min)) + min;
}
```
### 3.2 settings.ts
settings.ts
```js
module.exports = {
secret: 'zhufengcms',
dbUrl: "mongodb://127.0.0.1:27017/zhufengcms"
}
```
### 3.3 db.ts
db.ts
```js
const mongoose = require('mongoose');
const Schema = mongoose.Schema;
const ObjectId = Schema.Types.ObjectId;
const { dbUrl } = require('./settings');
const conn = mongoose.createConnection(dbUrl, { useNewUrlParser: true, useUnifiedTopology: true });
const UserModel = conn.model('User', new Schema({
userid: { type: String, required: true },//邮箱
name: { type: String, required: true },
mail: { type: String, required: true },//邮箱
password: { type: String, required: true },//密码
mobile: { type: String, required: true },//手机号
avatar: { type: String, required: true },//头像
currentAuthority: { type: String, required: true }//当前用户的权限
}));
module.exports = {
UserModel
}
```
### 3.4 sms.ts
sms.ts
```js
const axios = require('axios');
const smsConfig = require('./smsConfig');
//http://docs.ucpaas.com/doku.php?id=%E7%9F%AD%E4%BF%A1:sendsms
module.exports = async (mobile: any, captcha: any) => {
const url = 'https://open.ucpaas.com/ol/sms/sendsms';
let result = await axios({
method: 'POST',
url,
data: {
sid: smsConfig.sid,
token: smsConfig.token,
appid: smsConfig.appid,
templateid: smsConfig.templateid,
param: captcha,
mobile
},
headers: {
"Content-Type": "application/json;charset=utf-8",
"Accept": "application/json"
}
})
return result;
}
```
### 3.5 smsConfig.ts
smsConfig.ts
```js
module.exports = {
sid: '', //开发者账号id
token: '', //开发者token
appid: '', //应用id
templateid: '' //短信模板id
}
```
## 4.服务器布署
### 4.1 安装配置服务器
```js
#升级所有包同时也升级软件和系统内核
yum update -y
#只升级所有包，不升级软件和系统内核
yum upgrade
```
### 4.2 docker是什么?
- `Docker` 属于 Linux 容器的一种封装，提供简单易用的容器使用接口。
- `Docker` 将应用程序与该程序的依赖，打包在一个文件里面。运行这个文件，就会生成一个虚拟容器。程序在这个虚拟容器里运行，就好像在真实的物理机上运行一样
### 4.3 安装docker
```js
yum install -y yum-utils device-mapper-persistent-data lvm2
yum-config-manager \
--add-repo \
https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
yum install -y docker-ce docker-ce-cli containerd.io
```
### 4.4 阿里云加速
```js
mkdir -p /etc/docker
tee /etc/docker/daemon.json <<-'EOF'
{
"registry-mirrors": ["https://fwvjnv59.mirror.aliyuncs.com"]
}
EOF
# 重载所有修改过的配置文件
systemctl daemon-reload
systemctl restart docker
```
### 4.5 生成公钥并添加github
- https://github.com/settings/keys
```js
ssh-keygen -t rsa -b 4096 -C "zhufengnodejs@126.com"
cat /root/.ssh/id_rsa.pub
```
### 4.6 安装git
```js
yum install git -y
git clone git@github.com:zhufengnodejs/vue-front.git
git clone git@github.com:zhufengnodejs/vue-back.git
git clone git@github.com:zhufengnodejs/vue-webhook.git
```
~\.gitconfig
```js
[alias]
a = add -A
c = commit -m"msg"
p = push origin master
```
### 4.7 安装node和npm
- [nvm](https://github.com/nvm-sh/nvm)
```js
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash
source /root/.bashrc
nvm ls-remote
nvm install v12.13.1
npm i cnpm -g
```
### 4.8 创建docker网络
```js
docker network create --driver bridge antdesign
docker network connect antdesign antdesign-mongo
docker network inspect antdesign
```
### 4.9 启动mongodb
#### 4.9.1 启动mongo的docker容器
```js
docker pull mongo:latest
docker images
docker run -d --name antdesign-mongo -p 27017:27017 --net antdesign mongo
docker ps
docker exec -it antdesign-mongo bash
mongo
```
#### 4.9.2 本地安装mongodb
##### 4.9.2.1 配置MongoDB的yum源
```js
vim /etc/yum.repos.d/mongodb-org-4.0.repo
#添加以下内容：
[mongodb-org-4.0]
name=MongoDB Repository
baseurl=https://repo.mongodb.org/yum/redhat/$releasever/mongodb-org/4.0/x86_64/
gpgcheck=0
enabled=1
gpgkey=https://www.mongodb.org/static/pgp/server-4.0.asc
#这里可以修改 gpgcheck=0, 省去gpg验证
[root@localhost ~]# yum makecache
```
##### 4.9.2.2 安装MongoDB
```js
yum -y install mongodb-org
whereis mongod
vim /etc/mongod.conf
```
##### 4.9.2.3 启动MongoDB
```js
systemctl start mongod.service #启动
systemctl stop mongod.service #停止
systemctl status mongod.service #查看状态
```
##### 4.9.2.4 外网访问
```js
systemctl stop firewalld.service #停止firewall
systemctl disable firewalld.service #禁止firewall开机启动
```
### 4.10 启动后台服务器
```js
git clone https://gitee.com/zhufengpeixun/antdesign-server.git
cd antdesign-server
docker build -t antdesign-server .
docker image ls
docker run -d --name antdesign-server -p 4000:4000 --net antdesign antdesign-server
curl http://localhost:4000
```
### 4.11 启动前台服务
```js
git clone https://gitee.com/zhufengpeixun/antdesign-front.git
cd antdesign-front
cnpm install
cnpm run build
docker build -t antdesign-front .
docker run -d --name antdesign-front -p 80:80 --net antdesign antdesign-front
```
## 5.后端服务
### 5.1 api.js
api.js
```js
let express = require("express");
let bodyParser = require("body-parser");
let jwt = require('jwt-simple');
let cors = require("cors");
let Models = require('./db');
let sendCode = require('./sms');
let session = require("express-session");
let MongoStore = require('connect-mongo')(session);
let config = process.env.NODE_ENV == 'production' ? require('./config/config.prod') : require('./config/config.dev');
let app = express();
app.use(
cors({
origin: config.origin,
credentials: true,
allowedHeaders: "Content-Type,Authorization",
methods: "GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS"
})
);
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(
session({
secret: config.secret,
resave: false,
saveUninitialized: true,
store: new MongoStore({
url: config.dbUrl,
mongoOptions: {
useNewUrlParser: true,
useUnifiedTopology: true
}
})
})
);
app.get('/', async (req, res) => {
res.json({ code: 0, data: `hello` });
});
app.get('/api/login/captcha', async (req, res) => {
let mobile = req.query.mobile;
let captcha = rand();
req.session.captcha = captcha;
await sendCode(mobile, captcha);
res.json({ code: 0, data: `[仅限测试环境验证码]: ${captcha}` });
});
app.post('/api/register', async (req, res) => {
let user = req.body;
if (user.captcha != req.session.captcha) {
return res.json({ code: 1, error: '验证码不正确' });
}
let avatarValue = require('crypto').createHash('md5').update(user.mail).digest('hex');
user.avatar = `https://secure.gravatar.com/avatar/${avatarValue}?s=48`;
user = await Models.UserModel.create(user);
res.send({ status: 'ok', currentAuthority: 'user' });
});
app.post('/api/login/account', async (req, res) => {
let user = req.body;
let query = {};
if (user.type == 'account') {
query.mail = user.userName;
} else if (user.type == 'mobile') {
query.mobile = user.mobile;
if (user.captcha != req.session.captcha) {
return res.send({
status: 'error',
type: user.type,
currentAuthority: 'guest',
});
}
}
let dbUser = await Models.UserModel.findOne(query);
if (dbUser) {
dbUser.userid = dbUser._id;
dbUser.name = dbUser.mail;
let token = jwt.encode(dbUser, config.secret);
res.send({ status: 'ok', token, type: user.type, currentAuthority: dbUser.currentAuthority });
} else {
return res.send({
status: 'error',
type: user.type,
currentAuthority: 'guest',
});
}
});
app.get('/api/currentUser', async (req, res) => {
let authorization = req.headers['authorization'];
if (authorization) {
try {
let user = jwt.decode(authorization.split(' ')[1], config.secret);
user.userid = user._id;
user.name = user.mail;
res.json(user);
} catch (err) {
res.status(401).send({});
}
} else {
res.status(401).send({});
}
});
app.listen(4000, () => {
console.log('服务器在4000端口启动!');
});
function rand() {
let min = 1000, max = 9999;
return Math.floor(Math.random() * (max - min)) + min;
}
```
### 5.2 db.js
db.js
```js
const mongoose = require('mongoose');
const Schema = mongoose.Schema;
const ObjectId = Schema.Types.ObjectId;
const { dbUrl } = require('./config/config.prod');
const conn = mongoose.createConnection(dbUrl, { useNewUrlParser: true, useUnifiedTopology: true });
const UserModel = conn.model('User', new Schema({
userid: { type: String },//邮箱
name: { type: String },
mail: { type: String, required: true },//邮箱
password: { type: String, required: true },//密码
mobile: { type: String, required: true },//手机号
avatar: { type: String, required: true },//头像
currentAuthority: { type: String, required: true }//当前用户的权限
}));
module.exports = {
UserModel
}
```
### 5.3 sms.js
sms.js
```js
const axios = require('axios');
const smsConfig = require('./smsConfig');
//http://docs.ucpaas.com/doku.php?id=%E7%9F%AD%E4%BF%A1:sendsms
module.exports = async (mobile, captcha) => {
const url = 'https://open.ucpaas.com/ol/sms/sendsms';
let result = await axios({
method: 'POST',
url,
data: {
sid: smsConfig.sid,
token: smsConfig.token,
appid: smsConfig.appid,
templateid: smsConfig.templateid,
param: captcha,
mobile
},
headers: {
"Content-Type": "application/json;charset=utf-8",
"Accept": "application/json"
}
})
return result;
}
```
### 5.4 smsConfig.js
smsConfig.js
```js
module.exports = {
sid: '32548fb951ac0df279db0e6e9a515566', //开发者账号id
token: 'aa0309c08920ca38201de69eb3c745b6', //开发者token
appid: '16129d504b7c484c9e8f09b4ec929983', //应用id
templateid: '387675' //短信模板id
}
```
### 5.5 config\config.dev.js
config\config.dev.js
```js
module.exports = {
secret: 'zhufengcms',
dbUrl: "mongodb://localhost:27017/zhufengcms",
origin: ["http://localhost:8000"]
}
```
### 5.6 config\config.prod.js
config\config.prod.js
```js
module.exports = {
secret: 'zhufengcms',
dbUrl: "mongodb://antdesign-mongo:27017/zhufengcms",
origin: ["http://47.104.204.74", "http://47.104.204.74:8000"]
}
```
### 5.6 Dockerfile
Dockerfile
```js
FROM node
ENV NODE_ENV production
LABEL name="antdesign-server"
LABEL version="1.0"
COPY . /app
WORKDIR /app
RUN npm install
EXPOSE 4000
CMD npm start
```
### 5.7 .dockerignore
.dockerignore
```js
.git
node_modules
package-lock.json
Dockerfile
.dockerignore
```