vue_admin

데모 : 온라인 데모 이 프로젝트는 대규모 프로젝트 개발에 적합하지 않습니다.

웹사이드 vue+서버사이드 익스프레스 프로젝트 개발

서버측 Koa 프레임워크 작성에 대해서는 다음을 참조하세요.

(1) (https://github.com/guodonglw/koa_demo) 이 프로젝트에는 시스템의 멀티 코어를 사용하여 여러 프로세스를 시작할 수 있는 클러스터 모듈 예제가 있습니다. (2) (https://github.com/guodonglw/ koa-practice) 이 프로젝트는 기본적으로 일반 페이지의 요구사항을 충족할 수 있으며, 프로젝트 키워드는 RESTful + koa + middleware + mysql + mongo 이며, 실제 개발 시 필요에 따라 미들웨어를 추가하고 수정할 수 있습니다.

데모 프로젝트는 web-demo 폴더의 코드에 해당하며, 실제 개발 제안 사항은 web 폴더의 코드를 참고하세요.

1. 운영환경

마디

2. 개발 환경 설정

 // 将项目拉到本地
git clone 项目地址

// cd到本地项目下
cd ../vueProject

// 安装项目运行需要的依赖包
npm install / cnpm install  (注：如需运行cnpm install，需先安运行npm install cnpm安装cnpm)

// 若在npm install后，提示需要执行npm audit fix则继续执行该命令
npm audit fix

// 在本地开发时，运行项目
npm run dev / cnpm run dev

개발 환경에서는 위 단계를 완료한 후 브라우저가 http://localhost:8082에 접속하여 해당 페이지로 점프할 수 있습니다(고급 크롬 브라우저).

3. 프로젝트 출시

개발 환경에서 프로젝트 개발을 완료한 후, 프로젝트를 서버(예: nginx 서버)에 게시하려면 먼저 요청 주소(서버의 인터페이스 주소)를 입력해야 하며, URL 주소를 큰따옴표로 묶어 작은따옴표로 묶어야 합니다. 문자열 경로를 직접 반환해야 하는 경우 작은따옴표를 사용하여 문자열 내용을 묶어야 하기 때문입니다(예: BASE_URL: "'http://192.168.1.111:4000/api'"). 포트 번호와 '/ url api' 다음에 나오는 이유는 F2FAdminServer 때문입니다. 터미널 인터페이스는 'url' + ':' + 'port number' + '/api' 형식을 일률적으로 사용합니다. 위의 수정을 완료한 후 다음 작업을 수행합니다.

 // 项目打包
npm run build / cnpm run build

// 查看是否生成了dist文件夹
在文件夹下包括index.html文件和static文件，如作了标题旁的图片，可能还有logo.ico

// cd到dist文件夹下
cd ./dist/

// 将dist文件夹下的static的文件夹与index.html文件直接放在nginx服务器根目录下

// 配置nginx，在nginx.conf文件中修改所要监听的端口

// chrome浏览器访问对应的域名，如http://xxx.xxx.com:123/
如部署到个人服务器，没有域名，访问地址为http:// + ip + ：端口号

로그인 페이지로 이동한 후 데이터베이스 해당 테이블(예: admin)에 해당 계정/비밀번호(예: lilei/123456)를 입력합니다. 홈 페이지로 이동하면 배포가 성공합니다. 문제가 발생하는 경우(F12를 눌러 콘솔을 불러와서 확인) 문제를 해결한 다음 위의 단계를 반복하세요.

서버측 익스프레스 프로젝트

1. 개요

서버 측 서버 배포는 node.js 서버와 MySQL 데이터베이스의 두 부분으로 나뉩니다.

2. node.js 서버 관련

1. Node.js 환경 설치

방법 1

 wget https://nodejs.org/dist/v4.4.4/node-v4.4.4-linux-x64.tar.xz
tar -xvf node-v4.4.4-linux-x64.tar

방법 2

 sudo apt-get node

2. 영원히 데몬 모듈

노드가 설치된 후에는 npm을 사용하여 Forever 데몬 모듈을 설치해야 합니다.

 // 全局安装
npm install -g forever

// 启动项目进程
forever start app.js

// 重启项目进程
forever restart app.js

//停止项目进程
forever stop app.js

3. MySQL 데이터베이스

자체 서버 데이터베이스를 사용하는 경우 MySQL을 설치해야 합니다.

 // 数据库初始化
mysql –uroot –p </root/xxx.sql

4. 서버 배포 및 시작 프로젝트

 // 安装项目依赖
npm install / cnpm install 

// 若在npm install后，提示需要执行git audit fix则继续执行该命令
npm audit fix

// 临时启动项目（检查项目是否有错误）
node app.js

// 后台守护进程启动项目
forever start app.js

https에 대한 구성 보충

1. 웹사이드 코드 수정

 // vue项目config/prod.env.js修改（改为https的请求协议）
BASE_URL:"'https://xxx.xxx.xxx:111/api'"

// 项目打包（如果之前已经build过，需先执行rm -r dist）
npm run build

// dist文件夹下index.html与static放到nginx下

2. 서버 측 코드 수정

 // 停止Server程序
forever stop app.js

// 将ssl的.crt，.key放到Server/cert目录下

// 安装必要模块
npm install http --save -d (加--save -d会将模块名写入package.json中，下次npm install即可安装该模块)
npm install https --save -d
npm install fs --save -d

// app.js开始部分添加代码
var http = require('http');
var https = require('https');
var fs = require('fs');

// Configuare https
const httpsOption = {
    key : fs.readFileSync("./cert/.key"),
    cert: fs.readFileSync("./cert/.crt")
}

// app.js末尾部分代码修改
http.createServer(app).listen(4001 ,function(){
    console.log("Listening on port:" + 1000);
});
https.createServer(httpsOption, app).listen(
    1001,function(){
    console.log("Listening on port:" + 1001);
});

// 至此，https已经配置完成