背景
系统代码中存在有配置文件，针对于不同的客户，配置文件是不同的。针对这种情况，如果进行登录服务器再操作是麻烦的，因此希望开发出相应的工具，可以线上直接进行编辑保存的。
环境搭建
koa依赖安装
这里使用pnpm相对于npm它有更多的优势。
pnpm add koa koa-router
koa-router的基本使用
// router/index.js
const Router = require('koa-router')
const home = require('./home.js')
let router = new Router()
router.use('/', home.routes(), home.allowedMethods())
module.exports = router
// router/home.js
const Router = require('koa-router')
const router = new Router()
home.get('/',async ctx=>{
ctx.body = 'hello world'
})
// app.js
const app = require('Koa')()
const router = require('./src/router/index')
app.use(router.routes()).use(router.allowedMethods())
app.listen(3000,()=>{
console.log('app is starting at port 3000！')
})
<meta charset="utf-8">
hello.png
程序热更新
在开发代码时，如果进行了代码的修改，需要关闭并重新启动服务，才能看到效果，这个是很麻烦的。而在node中可以使用nodemon来进行文件的监听，并自动触发重启。
pnpm add nodemon -D
// package.json
{
"scripts": {
"serve": "nodemon main.js"
},
}
vscode中的断点调试
// .vscode/setting.json
{
"version": "0.2.0",
"configurations": [
{
"command": "npm run serve",
"name": "Run npm run serve",
"request": "launch",
"type": "node-terminal"
}
]
}
debugger.png
至此，基本的环境配置已经完成。
页面开发
这里使用koa推荐的模板引擎ejs，来进行服务端页面的开发。
如何在模板中写js？
直接写在script中
<h1>hello world</h1>
<script type="text/javascript">
console.log("hello world");
</script>
如何引入一个页面?
使用include语法
<%- include('./utils.ejs') %>
如何引用第三方插件ace editor?
因为在ejs中，并不像在工程化的项目中的，直接安装依赖并引入，便是可以直接使用的。而是需要通过script的方式引入，那首先便是需要找到插件的文件位置。
- 安装依赖
pnpm add ace-builds
-
打开依赖，找到package.json，并查看main的位置
ace.png
3.将整个文件夹拷贝出
静态资源路径设置
// 安装
pnpm add koa-static
// app.js中使用 设置 static为静态目录
const staticFiles = require('koa-static')
app.use(staticFiles(join(__dirname, './static/')))
需要注意的是访问时：
- 不要添加 static 不然报404
-
需要直接访问到文件才有效
ace-view.png
编辑器相关设置
主题设置
- 通过script引入主题：
<script src="/lib/ace/mode-javascript.js"></script>
-
找到主题名
theme.png
- 设置主题
editor.setTheme("ace/theme/twilight");
模式设置
editor.session.setMode("ace/mode/javascript");
mode.png
代码格式化
// 引入文件
<script src="/lib/ace/ext-beautify.js"></script>
// 导出定义
var beautify = ace.require("ace/ext/beautify");
// 使用
beautify.beautify(editor.session);
// 事件监听
editor.commands.addCommand({
name:"save",
bindKey:{win:"Ctrl-S",mac:"Command-S"},
exec(){
// 格式化 保存
}
})
接口开发
基本代码
const path = ...
home.post('getFile', async (ctx) => {
const back = fs.readFileSync(path, 'utf-8')
ctx.body = createRespose({
data: back
})
})
home.post('saveFile', async (ctx) => {
console.log(ctx.request.body.data)
fs.outputFile(path, ctx.request.body.data, (res) => {
console.log(res)
ctx.body = createRespose({
data: "保存成功"
})
})
}) // 这种写法不行的
ctx.body 是必须要放出来的，因为回调是异步的 此时整个外部的已经走完成了的 返回的时机错过了的。
接口调试
这里推荐使用一款chrome插件postwomen。
postwomen1.png
`
postwomen2.png
线上部署
linux环境下node安装，与软链接设置
// 下载 可以先从本地下载再上传的 公司测试服很慢
wget https://nodejs.org/dist/v14.16.1/node-v14.16.1-linux-x64.tar.xz
// 解压
tar xf node-v14.16.1-linux-x64.tar.xz
// 设置软链接
ln -s /home/soft/node-v14.16.1-linux-x64/bin/node /bin/node
ln -s /home/soft/node-v14.16.1-linux-x64/bin/npm /bin/npm
ln -s /home/soft/node-v14.16.1-linux-x64/bin/pm2 /bin/pm2
ln -s /home/soft/node-v14.16.1-linux-x64/bin/pnpm /bin/pnpm
node使用pm2进程管理
pm2 start app.js # 启动app.js应用程序
pm2 start app.js -4 # cluster mode 模式启动会启动4个app.js 4个应用程序会自动负载均衡
pm2 start app.js --watch # 当文件变化时会自动重新启动应用
pm2 logs # 显示出所有应用程序的日志
pm2 logs [app-name] # 显示出指定应用程序的日志
pm2 stop all # 停止所有的应用程序
pm2 delete 0 # 删除指定应用 id 0
也可以通过 pm2 --help查看。
pm2.png
意外情况的处理
我使用pm2 start app.js --watch -i 2启动应用后，利用pm2 stop app.js,发现服务并没有关闭，还是可以正常访问到的，再次利用pm2 stop all,甚至是使用pm2 kill all，依旧没有解决问题。
通过lsof -i:port来查看端口占用情况，然后找到pid利用kill port结束，通过这样的方式，才将应用最终关闭。
image.png
但是之后，再次启动，并利用
pm2 stop all还有pm2 delete all这种方式来关闭，是可以成功关闭的。
最后
通过这样的一个小的工具，尽管还是很简单，但是可以做到不用分发服务器端密码，而开发人员可以修改配置的目的。
image.png
网友评论