一、前言
通过上节学习，我们已经 ubuntu系统搭建了一个可以访问的nodejs系统，并做了nginx转发。本节原要做web端服务 及 mongodb的存取，但写着写着，web端就写了很长，有些啰嗦，本着不重要的讲一遍，重要写三遍的原则，本节主要是讲适合初学者的web端服务搭建。mongodb操作，明天下节再讲。
一、mongo
1、安装：
执行 sudo apt-get install mongodb
作用：安装mongodb，即安装成功，可以通过执行mongo，即可以看到mongo进入mongo的管理命令，并看到mongodb的版本号，mongo使用可参见
http://www.upopen.cn/article/info?id=559688a7f0e6e0665b000004
二、web服务
1、实现路由功能
在web目录下创建routes目录，并创建index.js文件
作用：创建路由文件夹，上一节我们在app.js添加了app.get(...)代码，实现将用户访问指向到index.ejs，我们单独创建一个文件夹来归类所有请求，后面有大量工作都是做功能模块、文件的细分，前期细化对后期项目扩展有益
在/web/routes/index.js添加
***************************************************************************
exports.all = function( app ){
app.get( '/', function( req, res ){
res.render( 'index.ejs' );
})
}
#############################################
在/web/app.js里引用routes文件，并把app.get换成 routes里指向，如下
**************************************************************************
var express = require( 'express' ),
http = require( 'http' ),
routes = require( './routes' ), //新增routes引用
path = require( 'path' );
...
app.use( '/', express.static( path.join( __dirname, 'assets' )));
routes.all( app ); //原app.get替换成 routes，所有的请求走routes.all里定义的函数
server.listen( app.get( 'port' ), function(){
console.log( 'root server listening on port ' + app.get( 'port' ));
} );
...
############################################
重新执行node.js，浏览器打开站点，功能可以同样使用。
2、模板功能。
页面 header / footer / menu 通常是共用的，我们用ejs的include实现
在views下创建common文件夹，存放页面的公用部分。
common下创建header.ejs文件，加入页头的公用部分，可以视情况到<body>为止
************************************************************
<!DOCTYPE html>
<html>
<head>
<title>我的nodejs项目</title>
<link href="/public/css/style.css" rel="stylesheet" >
</head>
<body>
#####################################
引用了style.css的样式文件，自行在static下增加下。
同样创建footer.ejs文件
**************************************************************
<script src="/core/js/jquery.min.js"></script>
</body>
</html>
#####################################
同样增加了jquery.min.js，在static下增加，这个js是放在core文件夹，与public区别开，用来放基本稳定的一些公用文件
在views下创建issue文件夹，把/views/index.ejs放到/views/issue里，归类存放站点不需要登录的资源
views --- common --- header.ejs
--- footer.ejs
--- issue --- index.ejs
index.ejs内include header.ejs/ footer.ejs
****************************************************************
<% include ../common/header.ejs %>
<h1>我的nodejs项目</h1>
<img src="/public/imgs/logo.png" />
<% include ../common/footer.ejs %>
######################################
这样我们即实现了模板功能，header.js及 footer.js自行丰富，通常css文件放在header里，js放footer里，对渲染效率有益。
注意： index.ejs的路径改了，路由指向index.ejs也要增加issue目录
3、新增注册页面：
复制/web/views/index.ejs，重命名为 register.ejs，增加form
****************************************************************
<% include ../common/header.ejs %>
<form>
<label>用户名: <input type="text" id="username" /></label>
<label>密码: <input type="text" id="password" /></label>
<label>邮件: <input type="text" id="email" /></label>
<button type="submit">注册</button>
</form>
<% include ../common/footer.ejs %>
######################################
在/web/routes文件夹下，复制index.js 为 issue.js，写入代码
****************************************************************
function register( req, res ){ //定义注册转向
res.render( 'issue/register.ejs' );
}
module.exports = { //对外公开register函数
register: register
}
######################################
修改routes/index.js
****************************************************************
var issue = require( './issue' ); //引入issue.js文件
exports.all = function( app ){
app.get( '/', function( req, res ){
res.render( '/issue/index.ejs' );
});
app.get( '/register', function( req, res ){
issue.register( req, res ) //将register请求转向issue内的函数
});
}
#######################################
重启nodejs，访问 http://www.mynodejs.com/register。
后面我们频繁改动web里的文件，都需要重启才生效，影响效率，nodejs提供了node-dev模块，可以监听项目文件修改自动重启
4、node-dev
执行：npm install -g node-dev
作用：将node-dev安装到全局模块
关闭原来启动的nodejs，重新执行 node-dev - - debug app.js 即可，后面再改服务端js，nodejs会自动重启
5、页面文件个性化引用 及 静态文件目录
前面我们引用 了模板功能，header.ejs放公共文件，方便调用。但每个页面总有些个性化的信息及自己的css / js，此处用到了ejs的命令功能。
首先，在root/static下创建 module文件夹放所有页面的静态文件，再针对每个页面创建对应的静态文件夹
如 register，目录结构为
static ---module ---issue ---register ---register.css
---register.js
---imgs
---index ---index.css
---index.js
---imgs
整体结构与ejs下一致
打开header.ejs文件，首先每个页面 的title是个性化的，也需要引用 针对本页面的定义css
修改如下
***************************************************************
...
<head>
<title><%= title %></title> <!--个性化定义title-->
<link href="<%= basePath %>/public/css/style.css" rel="stylesheet" >
<link href="<%= basePath %>/module<%= currentPage %>.css" type="text/css" rel="stylesheet" > <!--个性化定义引入文件-->
</head>
…
######################################
在root/web/下新建config文件夹，用来放站点一些配置信息，其下新建site.js，配置页面信息
***************************************************************
var siteTitle = '优品开源', //站点名称
pageTitle = { //各页面名称
'/': '首页',
'/index': '首页',
'/register': '注册'
},
basePath = 'http://www.mynodejs.com'; //设置页面根路径
module.exports = { //对外开放配置
setting: function( req, path, file ){
return {
title: pageTitle[ req.path ] + '-' + siteTitle, //组成当前页面标题
basePath: basePath,
currentPage: ( path || '' ) + ( file || req.path.replace(/(\/[a-z|A-Z]*)?$/,function($1){return $1 + $1}) ), //据当前访问路径生成静态文件路径
}
}
}
###########################################
修改web/routes/issue.js，把index.ejs的引入也放进来
**********************************************************************
var site = require( '../config/site' ); //引入site Config
function index( req, res ){
res.render( 'issue/index.ejs', site.setting( req, '/issue/index', '/index' ) );
} //首页没有页面路径，需要指定path及 filename
function register( req, res ){
res.render( 'issue/register.ejs', site.setting( req, '/issue' ) ); //配置信息，供ejs调用
}
module.exports = {
register: register,
index: index
}
##########################################
配置完成，项目是node-dev启动，无需重启，再访问下首页，可以看到title是“首页-优品开源”，也引用了其自己的index.css，register也一样
6、模块块管理 requireJs
js文件的调用，我们使用requireJs，使用参见...
/web/view/common/footer.ejs，修改如下
**********************************************************************
<script type="text/javascript" src="<%= basePath %>/core/jquery.min.js"></script>
<script type="text/javascript" data-main="<%= basePath %>/module<%= currentPage %>.js" src="<%= basePath %>/core/require.js"></script>
<!-- js的路径引用模式同css-->
</body>
</html>
###########################################
如jquery这种各页面都需要引用的js，建议不要通过模块引用，徒增计算。
7、发送接收ajax请求
在 static/module/issue/register/register.js内增加ajax代码
***********************************************************************
define( function(){
$( '#registerForm' ).on( 'submit', function(){
var data = {
username: $('#username').val(),
password: $('#password').val(),
email: $('#email').val()
};
$.ajax({
url: '/register',
type: 'post',
dataType: 'json',
data: data,
success: function( ret ){
console.log( ret );
}
});
return false;
})
});
########################################
/web/routes/index.js 新增请求接收
*******************************************************************
app.post('/register', function( req, res ){
issue.registerUser( req, res );
});
########################################
此处是app.post，对应ajax的type:'post'
/web/routes/issue.js 新增
******************************************************************
function registerUser( req, res ){
res.send( { code: 0, msg: 'register info access success',data: req.body } );
//这里原本是要处理数据库存储操作，这里先走通ajax通信，验证能成功获取数据
}
#######################################
注意后面的 module.exports里要增加 registerUser
通过 package.json 安装 body-parser 模块，安装方法见 0.1
/web/app.js，新增
*****************************************************************
var express = require( 'express' ),
...
bodyParser = require( 'body-parser' ), //新增模块引用
...
path = require( 'path' );
...
app.use( '/', express.static( path.join( __dirname, 'assets' ))); //静态文件路径
app.use( bodyParser.urlencoded({ extended: false }));
…
#######################################
打开register，提交表单，打开调试工具，可以看到 ajax数据已经发送成功，并成功返回registerUser 里定义的数据
OK，到现在为止，我们安装Mongo、实现的路由、公共模板 及 其内个性化数据的定义，使用node-dev，并成功在register页面通过ajax与WEB服务端通信，下一节，我们将WEB服务端接收到的数据insert到db，并能 find，站点就完成了初步的注册、登录中的数据交互
明天讲mongo数据操作，实现注册和登录状态的保存，并会把代码共享到git上
相关推荐
nodejs最新版node-v20.17.0-x64
官方离线安装包，测试可用。使用rpm -ivh [rpm完整包名] 进行安装
【标题】"uniApp+vue+nodejs+express+mysql电商项目"是一个综合性的Web开发实践，涵盖了前端、后端以及数据库等多个技术栈。在这个项目中，开发者将使用uniApp作为移动端应用框架，Vue.js作为前端框架，Node.js搭配...
官方离线安装包，测试可用。使用rpm -ivh [rpm完整包名] 进行安装
官方离线安装包，测试可用。使用rpm -ivh [rpm完整包名] 进行安装
NodeJS入门项目案例（Express+Mysql）是一个适合初学者的教程，旨在引导你进入Node.js服务端开发的世界。在这个项目中，我们将使用Express框架，一个简洁且强大的Web应用开发框架，以及Mysql，一个流行的开源关系型...
在这个“nodeJs+express+socket.io的即时通信web”项目中，开发者创建了一个简单的聊天室应用，实现了以下几个关键功能： 1. **在线统计**：利用Socket.IO的连接状态管理，可以实时追踪并更新当前在线用户数量。...
官方离线安装包，测试可用。使用rpm -ivh [rpm完整包名] 进行安装
官方离线安装包，测试可用。使用rpm -ivh [rpm完整包名] 进行安装
如果没有，你可以访问官方网站`https://nodejs.org/`下载并安装适合你系统的版本。安装完成后，通过命令行工具（如cmd或PowerShell）检查Node.js是否已正确安装，输入`node -v`查看版本号。 2. **初始化项目** ...
官方离线安装包，测试可用。使用rpm -ivh [rpm完整包名] 进行安装
本框架是基于nodejs express框架二次开发的，本框架包含数据库操作示例和注解。 适合nodejs入门学习或者nodejs开发人员开发中小型web项目。直接在命令窗口运行：npm start，就可启动程序！访问地址：...
debain安装nodejs和npm，nodejs12.18.2-npm6.14.5版本，二进制编译好的，直接可以使用
用于解决jenkins安装nodeJs插件后不能选择nodejs版本，将该文件上传到服务器，然后 docker cp ./hudson.plugins.nodejs.tools.NodeJSInstaller 容器ID:/var/jenkins_home/updates 然后重启Jenkins
该文件自己亲测实用，安装方便，只需一直下一步即可。
基于node js、vue、mongodb等技术构建的web系统，界面美观，功能齐全，适合用作毕业设计、课程设计作业等，项目均经过测试，可快速部署运行！ 基于node js、vue、mongodb等技术构建的web系统，界面美观，功能齐全，...
6. **性能优秀**：由于其非阻塞I/O和轻量级进程特性，NodeJS 在处理实时通信、实时数据流和高并发场景时表现出色。 7. **跨平台**：NodeJS 可以在多种操作系统上运行，包括 Windows、macOS 和 Linux，提供了良好的...
基于go-cqhttp和nodejs的qq机器人项目源码.zip
短袜 一个简单的用于nodejs的express.js和socket.io包装器为什么 ？ 因为使用express和socket.io构建应用可能是复杂且多余的，所以这是一个非常小的包装程序，可与最新版本的express.js和socket.io一起使用安装 yarn...
nodejs安装及环境配置：Node.js 安装及环境配置指南； nodejs安装及环境配置：Node.js 安装及环境配置指南； nodejs安装及环境配置：Node.js 安装及环境配置指南； nodejs安装及环境配置：Node.js 安装及环境配置...