标签：上线 const request response thinkjs 服务器 antd options 服务端
感谢内容提供者：金牛区吴迪软件开发工作室
文章目录
thinkjs + antd项目部署上线准备工作：前端与服务端配置开发环境生产环境访问目录
前端：
统一处理请求地址
/**
* request 网络请求工具
* 更详细的 api 文档: https://github.com/umijs/umi-request
*/
import { extend } from 'umi-request';
import moment from "moment";
import { notification } from 'antd';
import { getToken } from '@/utils/utils';
const codeMessage = {
200: '服务器成功返回请求的数据。',
201: '新建或修改数据成功。',
202: '一个请求已经进入后台排队（异步任务）。',
204: '删除数据成功。',
400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
401: '用户没有权限（令牌、用户名、密码错误）。',
403: '用户得到授权，但是访问是被禁止的。',
404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
406: '请求的格式不可得。',
410: '请求的资源被永久删除，且不会再得到的。',
422: '当创建一个对象时，发生一个验证错误。',
500: '服务器发生错误，请检查服务器。',
502: '网关错误。',
503: '服务不可用，服务器暂时过载或维护。',
504: '网关超时。',
};
const isDev = process.env.NODE_ENV === 'development';
// 配置根路径
const baseUrl = isDev ? 'http://127.0.0.1:8360' : 'http://服务器ip地址:8360';
/**
* 异常处理程序
*/
const errorHandler = (error) => {
const { response } = error;
if (response && response.status) {
const errorText = codeMessage[response.status] || response.statusText;
const { status, url } = response;
notification.error({
message: `请求错误 ${status}: ${url}`,
description: errorText,
});
} else if (!response) {
notification.error({
description: '您的网络发生异常，无法连接服务器',
message: '网络异常',
});
}
return response;
};
/**
* 配置request请求时的默认参数
*/
const request = extend({
errorHandler, // 默认错误处理
});
// request请求拦截器
request.interceptors.request.use((url, options = {}) => {
options.headers = {
...options.headers,
...(
getToken() ? { 'token': getToken() } : null
),
'redirect_url': window.location.href
};
if (['post', 'put'].includes(options.method)) {
options.body = {
...options.body,
modified_user_id: 1, // 改成当前登录人账号
modified_time: moment(new Date()).format('YYYY-MM-DD hh:mm:ss'),
};
options.body = JSON.stringify(options.body);
options.headers = {
'Content-Type': 'application/json; charset=utf-8',
...options.headers
};
}
return (
{
url: `${baseUrl}/api/v1${url}`,
options,
}
);
});
// request响应拦截器
request.interceptors.response.use(async (response, options) => {
const data = await response.clone().json();
if (data?.code !== '0') { // 界面报错处理
if ([401].includes(data?.code)) { // 没权限
window.location.href = data.data.loginUrl || `${window.location.href}#/`;
} else if (data?.errmsg) {
notification.error({ message: data.errmsg });
}
}
return response;
});
export default request;
服务端：
- 配置连接数据库的地址：
src -> config -> adapter.js
示例代码：
// 判断是不是开发环境
const isDev = think.env === 'development';
/**
* model adapter config
* @type {Object}
*/
exports.model = {
type: 'mysql',
common: {
logConnect: isDev,
logSql: isDev,
logger: msg => think.logger.info(msg)
},
mysql: {
handle: mysql,
database: '数据库名字，如果你远端和本地的名字不同需要根据isDev进行判断',
// prefix: 'think_',
encoding: 'utf8',
host: isDev ? '127.0.0.1' : '服务器ip地址',
port: '3306',
user: 'root',
password: isDev ? '本地数据库密码' : '服务器上数据库密码',
acquireWaitTimeout: 0,
dateStrings: true,
reuseDB: true
}
};
- 配置服务端代码根目录的nginx.conf
server {
listen 8360;
server_name 114.215.127.148; // 服务器ip地址
root /home/www/management-system; // 服务端代码在服务器的地址
set $node_port 8360;
index authValidate.js index.html index.htm;
if ( -f $request_filename/index.html ){
rewrite (.*) $1/index.html break;
}
if ( !-f $request_filename ){
rewrite (.*) /authValidate.js;
}
location = /authValidate.js {
proxy_http_version 1.1;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_pass http://服务器ip地址:$node_port$request_uri;
proxy_redirect off;
}
location ~ /static/ {
etag on;
expires max;
}
}
第一步:将代码提交到远程仓库，而后服务端进行拉取代码
提交代码和拉取代码部分不做过多描述。不会可以百度一波或者实在不行下方评论亦或者私聊博主。
第二步：将服务端代码和前端代码进行打包
一般的情况打包命令如下，具体请查看自己项目的package.json
thinkjs打包：
$ npm run compile
antd-pro打包：
npm run build
第三步：启动服务和前端项目
// 进入到thinkjs目录下，启动pm2.json
cd /home/www/thinkjs // 你的thinkjs项目放到哪里了就进入到哪里，
pm2 startOrReload pm2.json
示例：pm2.json
{
"apps": [
{
"name": "server",
"script": "production.js", // 要执行的脚本或文件
"cwd": "/home/www/thinkjs", // 服务端代码在服务器上的地址
"exec_mode": "fork",
"max_memory_restart": "1G",
"autorestart": true,
"node_args": [],
"args": [],
"env": {}
},
{
"name": "front",
"script": "http-server -c10", // 要执行的脚本或文件
"cwd": "/home/www/front_code", // 前端代码在服务器上的地址
"exec_mode": "fork",
"max_memory_restart": "1G",
"autorestart": true,
"node_args": [],
"args": [],
"env": {
"NODE_ENV": "production" // 配置线上环境参数
}
}
]
}
标签：上线,const,request,response,thinkjs,服务器,antd,options,服务端 来源： https://blog.51cto.com/u_15275953/2924469
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。