• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > 从零学习node.js之利用express搭建简易论坛(七)

从零学习node.js之利用express搭建简易论坛(七)

作者:Wenzi 字体:[增加 减小] 来源:互联网 时间:2017-05-11

Wenzi通过本文主要向大家介绍了从零学习node.js之利用express搭建简易论坛(七)等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

一、应用生成器

使用上节学习到express的知识,我们也可以从0开始,一步步把系统搭建起来。不过express中还有一个应用生成器,使用这个应用生成器可以快速的创建一个应用的框架,然后我们再在这个框架中完善我们需要的内容。
首先安装应用生成器:

$npm install -g express-generator 
</div>

运行express --version若能正常输出版本号,则安装成功。

我们的论坛名称可以为node_express_forum,然后使用express创建一个框架:

$express node_express_forum
</div>

运行后,生成器会在这个目录下生成几个目录和文件:

 create : node_express_forum  
 create : node_express_forum/package.json 
 create : node_express_forum/app.js  
 create : node_express_forum/public  
 create : node_express_forum/public/javascri
 create : node_express_forum/public/images 
 create : node_express_forum/public/styleshe
 create : node_express_forum/public/styleshe
 create : node_express_forum/routes  
 create : node_express_forum/routes/index.js
 create : node_express_forum/routes/users.js
 create : node_express_forum/views  
 create : node_express_forum/views/index.jad
 create : node_express_forum/views/layout.ja
 create : node_express_forum/views/error.jad
 create : node_express_forum/bin  
 create : node_express_forum/bin/www 
      
 install dependencies:   
 $ cd node_express_forum && npm install 
      
 run the app:    
 $ DEBUG=node-express-form:* npm start 
</div>

已经生成成功。进入到这个目录:

$cd node_express_forum
</div>

我们来看下生成的这个框架,方便知道后面怎么进行填充。

.
├── app.js 
├── package.json // 依赖的模块
├── bin
│ └── www
├── public // 静态文件目录
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes // 路由,相当于控制器
│ ├── index.js
│ └── users.js
└── views // 视图
 ├── error.jade
 ├── index.jade
 └── layout.jade
</div>

打开package.json后,我们看到还需要再安装几个模块才能运行:

$npm install --save-dev
</div>

好了,到现在框架已搭建完毕,我们来运行一下:

$npm start
</div>

然后在浏览器中输入127.0.0.1:3000,就可以看到了:Express Welcome to Express。

二、准备工作

基本框架已经创建好了,现在开始我们论坛的准备工作。这里我们的准备工作有3个:模板引擎,模型,数据库,路由。

2.1 模板引擎

express里默认使用的模板引擎是jade,不过我们也可以选择其他的模板引擎,我这里选择了ejs,因为感觉ejs更像是个html文件,方便维护,当然,每个人都有自己的喜好。

$npm install ejs --save-dev 
</div>

然后在app.js中修改模板引擎:

app.set('view engine', 'ejs'); // 原为jade,现改为ejs
</div>

这里我会将views目录中的.jade文件清空,后续使用.ejs编写模板。

2.2 模型

这里我们说的模型是指MVC中的M,主要是进行数据库的连接和操作。创建models目录用来存放文件。

2.3 数据库

我们使用mysql数据库来存放数据,数据库名称可以叫做forum。里面有3张表:user, list, reply。

  1. user表(用户)的字段有: id, username, password, regtime
  2. list表(主题)的字段有: id, uid(用户id), title, content, createtime
  3. reply表(回复)的字段有: id, pid(主题id), uid(用户id), content, createtime

2.4 路由

上节我们是使用app.use()或app.get()等方式来实现路由,同时,express还提供了express.Router类来创建模块化。可挂载的路由。Router 实例是一个完整的中间件和路由系统,因此常称其为一个 “mini-app”。

在routes/user.js中(这里我将其users.js改为了user.js):

var express = require('express');
var router = express.Router(); // 实例化router

// 定义主页的路由
router.get('/', function(req, res, next) {
 res.render('index', { title: 'user' }); // 加载index.ejs模板并传递数据给模板
});

router.get('/reg', function(req, res, next) {
 res.render('index', { title: 'reg' });
});

module.exports = router; 
</div>

然后在app.js中加载路由模块:

var user = require('./routes/user');
//...
app.use('/user', user);
</div>

这样就可以访问/user和/user/reg页面了。如果需要增加其他的路由,则依照此方式创建添加即可。

三、注册与登录

我们论坛的功能:注册、登录、发布主题和回复主题。这4个功能的实现都需要连接数据库。

3.1 数据库连接

引入mysql模块,然后使用mysql.createPool()创建连接:

$npm install mysql --save-dev
</div>

在models目录下创建db.js,其他需要操作数据库的,首先引入db.js:

var mysql = require('mysql');

var pool = mysql.createPool({
 host : '127.0.0.1',
 user : 'root',
 password : '123',
 database : 'forum'
});

module.exports = pool; 
</div>

3.2 注册功能

注册功能的流程我们非常熟悉了:

  1. 加载注册页面;
  2. 用户输入数据后提交;
  3. 处理表单数据然后进行数据库操作

我们在routes/user.js中创建一个reg的get方式的路由用来加载注册页面:

// routes/user.js

// get方式
router.get('/reg', function(req, res, next) {
 res.render('reg', { errmsg:'' }); // 加载reg.ejs模板
});
</div>

在views目录下创建reg.ejs:

<!DOCTYPE html>
<html>
 <head>
 <title>注册</title>
 <link rel='stylesheet' href='/stylesheets/style.css' />
 <style type="text/css">
 .tip{color: #f00;}
 </style>
 </head>
 <body>
 <div class="container">
 <p><a href="/" rel="external nofollow" rel="external nofollow" rel="external nofollow" >回到首页</a></p>
 <h1>注册</h1>
 <form action="/user/reg/" method="post">
 <% if(errmsg){ %>
 <p class="tip">*<%= errmsg %></p>
 <% } %>
 <p>用  户  名: <input type="text" name="username" required="required"></p>
 <p>密  码: <input type="password" name="password" required="required"></p>
 <p>重复密码: <input type="password" name="password2" required="required"></p>
 <p><input type="submit" name="submit" value="submit"></p>
 </form>
 <p>已有帐号? <a href="/user/login" rel="external nofollow" >点击登录</a></p>
 </div>
 </body>
</html>
</div>

运行程序,并用浏览器访问127.0.0.1:3000/user/reg,注册页面就出来了。

然后再在routes/user.js中创建一个reg的post方式的路由用来处理提交过来的数据,post方式过来的数据并不能使用req.query变量获取,而应

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

相关文章

  • 2017-05-11ES6中Math对象的部分扩展
  • 2017-05-11jQuery鼠标悬停内容动画切换效果
  • 2017-05-11JS实现加载和读取XML文件的方法详解
  • 2017-05-11jQuery密码强度验证控件使用详解
  • 2017-07-23ES6--字符串、正则、数值、数组的扩展
  • 2017-05-11JS 组件系统之 bootstrap treegrid 组件封装过程
  • 2017-05-11从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
  • 2017-08-31div 跟着鼠标移动
  • 2017-05-11jquery表单验证实例仿Toast提示效果
  • 2017-05-11vue2滚动条加载更多数据实现代码

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • js实现用户输入的小写字母自动转大写字母的方法
    • Node.js websocket使用socket.io库实现实时聊天室
    • 深入理解js中的加载事件
    • 详解javascript中对数据格式化的思考
    • Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
    • 学习使用jQuery表单验证插件和日历插件
    • Node.js中.pfx后缀文件的处理方法
    • Angular.Js之Scope作用域的学习教程
    • node.js发送邮件email的方法详解
    • JS异步加载的三种实现方式

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有