NodeJS博客实战06_前端注册页面

傷城~ 2022-05-27 23:15 207阅读 0赞

app.js文件为：

//应用程序的启动入口文件
    
    //加载模块
    var express = require('express'); //加载express模块
    var swig = require('swig'); //加载模板处理模块
    var app = express(); //创建app应用,相当于nodeJS的http.createService()
    var mongoose = require('mongoose'); //加载数据库模块
    
    
    //配置模板引擎
    app.engine('html',swig.renderFile); //定义当前模板引擎，第一个参数：模板引擎名称，也是模板文件后缀；第二个参数：处理模板的方法
    app.set('views','./views'); //设置模板文件存放的目录,第一个参数必须是views，第二个参数是目录
    app.set('view engine','html'); //注册模板
    swig.setDefaults({cache:false});//取消模板缓存
    app.use('/public',express.static(__dirname + '/public'));//当用户请求的路径ulr以/public开头时，以第二个参数的方式进行处理（直接返回__dirname + '/public'目录下文件） 
    //根据不同的功能划分模块
    app.use('/admin',require('./routers/admin'));
    app.use('/api',require('./routers/api'));
    app.use('/',require('./routers/main'));
    
    mongoose.connect('mongodb://localhost:27017/blog',function(err){
    	if(err){
    		console.log("数据库连接失败");
    	}else{
    		console.log("数据库连接成功");
    		app.listen(8081); //监听http请求
    	}
    });

修改在routers文件夹下的main.js代码，作为前端注册页面的路由

var express = require('express');
    var router = express.Router();
    
    router.get('/',function(req,res,next){
    	res.render('main/index.html');
    })
    
    module.exports = router;

前端注册页面位于views文件夹中的main/index.html文件，另外前端注册文件还要引入css和js静态文件，均位于public文件夹下：

![20180326090416830][]

下载写好的静态模板https://pan.baidu.com/s/1vVeOvJ1mI-fJseKp2KzeCw

分别将其复制到对应位置

打开页面呈现是这样

![20180326090607648][]

输入注册信息点击注册按钮打开浏览器调试可以查看请求的数据：

![20180326090911244][]

[20180326090416830]: /images/20220528/28d7275f58364d97aaa37175a394d257.png
[20180326090607648]: /images/20220528/a83c81b6000046289a1af456be716a1a.png
[20180326090911244]: /images/20220528/02388a5defd44aa0a3edc45a005642ec.png