vue_admin

demo : Online Demo โครงการนี้ไม่เหมาะสำหรับการพัฒนาโครงการขนาดใหญ่

การพัฒนาโปรเจ็กต์ด่วน vue+ฝั่งเซิร์ฟเวอร์บนเว็บ

สำหรับการเขียนเฟรมเวิร์ก koa ฝั่งเซิร์ฟเวอร์ โปรดดู:

(1) (https://github.com/guodonglw/koa_demo) โครงการนี้มีตัวอย่างโมดูลคลัสเตอร์ ซึ่งสามารถใช้มัลติคอร์ของระบบเพื่อเริ่มกระบวนการต่างๆ (2) (https://github.com/guodonglw/ koa-practice) โดยพื้นฐานแล้วโปรเจ็กต์นี้สามารถตอบสนองความต้องการของเพจทั่วไปได้ โดยคีย์เวิร์ดของโปรเจ็กต์คือ RESTful + koa + มิดเดิลแวร์ + mysql + mongo ในการพัฒนาจริง มิดเดิลแวร์สามารถเพิ่มและแก้ไขได้ตามต้องการ

โครงการสาธิตสอดคล้องกับรหัสในโฟลเดอร์ web-demo ข้อมูลถูกสร้างขึ้นโดยการเยาะเย้ย สำหรับคำแนะนำในการพัฒนาจริง โปรดดูรหัสในโฟลเดอร์เว็บ

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 และสามารถข้ามไปยังหน้าที่เกี่ยวข้อง (เบราว์เซอร์ Chrome ขั้นสูง)

3. การเปิดตัวโครงการ

หลังจากเสร็จสิ้นการพัฒนาโครงการในสภาพแวดล้อมการพัฒนา เพื่อเผยแพร่โครงการไปยังเซิร์ฟเวอร์ (เช่นเซิร์ฟเวอร์ nginx) ขั้นแรกให้กรอกที่อยู่คำขอ (ที่อยู่อินเทอร์เฟซของเซิร์ฟเวอร์ ซึ่งจะต้องตัดที่อยู่ URL ด้วยเครื่องหมายคำพูดเดี่ยวภายในเครื่องหมายคำพูดคู่ เนื่องจากเมื่อคุณต้องการส่งคืนเส้นทางสตริงโดยตรง คุณต้องใช้เครื่องหมายคำพูดเดี่ยวเพื่อล้อมรอบเนื้อหาสตริง เช่น BASE_URL: "'http://192.168.1.111:4000/api'") เพิ่มหมายเลขพอร์ตและ '/ หลังจาก url api' นี่เป็นเพราะ F2FAdminServer อินเทอร์เฟซเทอร์มินัลใช้รูปแบบของ 'url' + ':' + 'หมายเลขพอร์ต' + '/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 + ：端口号

หลังจากข้ามไปที่หน้าเข้าสู่ระบบ ให้ป้อนบัญชี/รหัสผ่านที่เกี่ยวข้อง (เช่น lilei/123456) ในตารางที่เกี่ยวข้องของฐานข้อมูล (เช่น ผู้ดูแลระบบ) หากข้ามไปที่หน้าแรก แสดงว่าการปรับใช้สำเร็จ ปัญหาที่เกิดขึ้น (กด F12 นำคอนโซลขึ้นมาเพื่อดู) แก้ไขปัญหาใด ๆ จากนั้นทำซ้ำขั้นตอนข้างต้น

โปรเจ็กต์ด่วนฝั่งเซิร์ฟเวอร์

1. ภาพรวม

การใช้งานเซิร์ฟเวอร์ฝั่งเซิร์ฟเวอร์แบ่งออกเป็นสองส่วน: เซิร์ฟเวอร์ node.js และฐานข้อมูล MySQL

2. เซิร์ฟเวอร์ node.js ที่เกี่ยวข้อง

1. การติดตั้งสภาพแวดล้อม Node.js

วิธีที่หนึ่ง

 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

วิธีที่สอง

 sudo apt-get node

2. โมดูลภูตตลอดไป

หลังจากติดตั้งโหนดแล้ว คุณต้องใช้ npm เพื่อติดตั้งโมดูลตลอดไป daemon

 // 全局安装
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已经配置完成