nodejs+express+layui搭建简单的工具网站
原始网站：https://blog.csdn.net/t163361/article/details/80204887
一直以来想将一些琐碎的操作能够脚本化，网页化。
后端服务器提前配置好脚本的位置，然后通过点击网页上的按钮触发相关操作。
最近有点时间，使用nodejs+express+layui搭建了一个简单的工具框架。
后端逻辑
代码比较简单
var express = require('express');
var app = express();
var bodyParse = require('body-parser')
var path = require('path');
app.use(bodyParse.urlencoded({extended:false})) ;
app.use(express.static(path.join(__dirname, 'public')));
// 处理根目录的get请求
app.get('/',function(req,res){
res.sendfile('public/main.html') ;
console.log('main page is required ');
}) ;
// 处理/Server的post请求
app.post('/buildserver',function(req,res){
console.log(req.body);
servername=req.body.servername ;
//这里写逻辑处理代码
console.log(servername) ;
res.json({"status":"success"});
});
// 监听3000端口
var server=app.listen(3000) ;服务器监听3000端口。
获得到get请求后，返回public文件夹的main.html给前端
同时开放一个post接口，接受前端发过来的post请求，可以根据不同的json信息，触发不同的逻辑。
前端逻辑
前端使用layui中共享的后台代码
具体网址如下
http://www.layui.com/doc/element/layout.html#admin
下面是修改后的代码
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>内部集成工具 - guofwtitle>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="../layui/css/layui.css" media="all">
head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">内部集成工具div>
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item"><a href="">预留a>li>
<li class="layui-nav-item"><a href="">预留a>li>
<li class="layui-nav-item"><a href="">预留a>li>
<li class="layui-nav-item">
<a href="javascript:;">预留a>
<dl class="layui-nav-child">
<dd><a href="">预留a>dd>
<dd><a href="">预留a>dd>
<dd><a href="">预留a>dd>
dl>
li>
ul>
div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">所有服务器a>
<dl class="layui-nav-child ">
<dd><a href="javascript:;" id="project1" class="layui-this">项目1a>dd>
<dd><a href="javascript:;" id="project2">项目2a>dd>
<dd><a href="javascript:;" id="project3">项目3a>dd>
dl>
li>
<li class="layui-nav-item">
<a href="javascript:;">预留a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">预留一a>dd>
<dd><a href="javascript:;">预留二a>dd>
<dd><a href="">预留三a>dd>
dl>
li>
<li class="layui-nav-item"><a href="">预留a>li>
<li class="layui-nav-item"><a href="">预留a>li>
ul>
div>
div>
<div class="layui-body">
<div style="padding: 15px;">
<button class="layui-btn layui-btn-normal" lay-submit="" id="GameServer">编译游戏服务器代码button>
<button class="layui-btn layui-btn-normal" lay-submit="" id="LoginServer">编译登录服务器代码button>
<button class="layui-btn layui-btn-normal" lay-submit="" id="WorldServer">编译世界服务器代码button>
<button class="layui-btn layui-btn-normal" lay-submit="" id="MapServer">编译地图服务器代码button>
<button class="layui-btn layui-btn-normal" lay-submit="" id="ChatServer">编译聊天服务器代码button>
div>
div>
<div class="layui-footer">
©guofw 底部固定区域
div>
div>
<script src="layui/layui.js">script>
<script>
//JavaScript代码区域
layui.use(['element', 'layer'], function(){
var element = layui.element,
layer = layui.layer,
$= layui.jquery;
var serverType = 'project1'
//监听提交
/ 发送编译请求 /
//游戏服务器
$('#GameServer').on('click', function() {
$.post("/buildserver",{servername:'GameServer',servertype:serverType},function(result){
if(result.status == "success"){
layer.msg('开始编译');
}
else{
layer.msg("错误信息:"+result.status);
}
});
//这句话的意思不会刷新当前页面。避免清空内容
return false;
});
//登录服务器
$('#LoginServer').on('click', function() {
$.post("/buildserver",{servername:'LoginServer',servertype:serverType},function(result){
if(result.status == "success"){
layer.msg('开始编译');
}
else{
layer.msg("错误信息:"+result.status);
}
});
//这句话的意思不会刷新当前页面。避免清空内容
return false;
});
//世界服务器
$('#WorldServer').on('click', function() {
$.post("/buildserver",{servername:'WorldServer',servertype:serverType},function(result){
if(result.status == "success"){
layer.msg('开始编译');
}
else{
layer.msg("错误信息:"+result.status);
}
});
//这句话的意思不会刷新当前页面。避免清空内容
return false;
});
//地图服务器
$('#MapServer').on('click', function() {
$.post("/buildserver",{servername:'MapServer',servertype:serverType},function(result){
if(result.status == "success"){
layer.msg('开始编译');
}
else{
layer.msg("错误信息:"+result.status);
}
});
//这句话的意思不会刷新当前页面。避免清空内容
return false;
});
//聊天服务器
$('#ChatServer').on('click', function() {
$.post("/buildserver",{servername:'ChatServer',servertype:serverType},function(result){
if(result.status == "success"){
layer.msg('开始编译');
}
else{
layer.msg("错误信息:"+result.status);
}
});
//这句话的意思不会刷新当前页面。避免清空内容
return false;
});
/ 设置项目 /
$('#project1').on('click',function(){
serverType='project1';
});
$('#project2').on('click',function(){
serverType='project2';
});
$('#project3').on('click',function(){
serverType='project3';
});
});
script>
body>
html>页面的脚本部分，引入了layui.jquery。
接收到玩家的点击事件后
使用jquery的post方法发送不同的请求给服务器。
大概的模块截图如下
通过这个项目，解决了一直以来的一个困惑，就是前端中的各种jquery，layui等工具或框架是怎么用的，如下代码
app.use(express.static(path.join(__dirname, 'public')));通过这句话，可以将一个工具类的js脚本放到public文件夹中
前端的页面中使用
rel="stylesheet" href="../layui/css/layui.css" 就会自动查找引入进来的工具类脚本。
整套代码比较简单，很多代码其实都可以动态生成，后面有时间继续完善。
具体的github地址如下：
https://github.com/t1633361/ServerTools.git