一, 前言
通过上节学习, 我们已经 Ubuntu 系统搭建了一个可以访问的 Node.JS 系统, 并做了 nginx 转发. 本节原要做 web 端服务 及 MongoDB 的存取, 但写着写着, Web 端就写了很长, 有些啰嗦, 本着不重要的讲一遍, 重要写三遍的原则, 本节主要是讲适合初学者的 Web 端服务搭建. MongoDB 下节再讲.
二, mongo
1, 安装:
执行 sudo apt-get install MongoDB
作用: 安装 MongoDB, 即安装成功, 可以通过执行 mongo, 即可以看到 mongo 进入 mongo 的管理命令, 并看到 MongoDB 的版本号, mongo 使用可参见
*
二, 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 文件, 加入页头的公用部分, 可以视情况到为止
引用了 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 > 我的 Node.JS 项目 </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 内的函数
- });
- }
重启 Node.JS, 访问 http://www.mynodejs.com/register. http://www.mynodejs.com/register。
后面我们频繁改动 Web 里的文件, 都需要重启才生效, 影响效率, Node.JS 提供了 node-dev 模块, 可以监听项目文件修改自动重启
4,node-dev
执行: NPM install -g node-dev
作用: 将 node-dev 安装到全局模块
关闭原来启动的 Node.JS, 重新执行 node-dev - - debug App.JS 即可, 后面再改服务端 JS,Node.JS 会自动重启
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, 也需要引用 针对本页面的定义 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
- }
配置完成, 项目是 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, 站点就完成了初步的注册, 登录中的数据交互
来源: https://www.w3ctech.com/topic/1427