Node.js实战项目--简单的项目发布系统

Node.js实战项目–简单的项目发布系统

本章项目是使用express+mongodb制作一个简单的项目发布系统。

项目前准备

  • 安装node.js
  • 安装express
  • 安装mongoDB
  • 安装studio 3T

项目结构初始化

  • 第一步:首先新建express站点,express publish-system -e -c less,这些我们新建的项目名称是publish-system,选择ejs模板,使用less进行预编译,如果小伙伴们不知道express的这些指令,可以通过express –help查看(插一句,在这之前确保已经安装了 express)
  • 第二步:进入到这个项目目录 cd publish-system
  • 第三步:安装依赖 npm install
  • 第四步:启动这个项目 SET DEBUG=publish-system:* & npm start,这里如果你安装了pm2,也可以使用pm2启动
  • 第五步:命令行会提示在哪个端口监听,如果想改默认端口号,在bin文件夹下面的www文件进行修改
  • 第六步:打开浏览器进行查看 localhost:3000(默认)

注册页面+功能实现

【1】配置注册页面的路由
关于系统中和用户的相关路由配置都写的routes文件夹下面的users.js中
var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});

//注册
router.get('/register',function(req,res,next){
  res.render('user/register');
});
//注册的最好选用post方法,此处先用get做演示用

module.exports = router;

注意:
app.js文件中引入了routes中的users.js,var usersRouter = require(‘./routes/users’);并且使用app.use()将应用挂载到app应用上app.use(‘/users’, usersRouter);所以在访问register这个路径时就要变成/users/register

【2】完成注册页面
页面很多,所以我们在views下面新建user文件夹,将和用户相关的页面都放在user中
然后在views/user下面新建register.ejs书写注册的页面,页面采用的bootstrap

register.ejs页面中的代码


<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
  <meta name="description" content="register">
  <meta name="author" content="pangtong">
  <title>注册</title>
  <!-- Bootstrap core CSS -->
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <!-- Custom styles for this template -->
  <link href="/stylesheets/user/register.css" rel="stylesheet">
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
  <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

<body>
<div class="container">
  <form class="form-signin">
    <h2 class="form-signin-heading">请注册</h2>
    <label for="username" class="sr-only">用户名</label>
    <input type="text" name="username" id="username" class="form-control"    
    placeholder="请输入用户名" required autofocus>
    <label for="pwd" class="sr-only">密码</label>
    <input type="password" name="pwd" id="pwd" class="form-control"   
    placeholder="请输入密码" required>
    <button class="btn btn-lg btn-primary btn-block" type="submit">注册</button>
  </form>
</div>
</body>
</html>

样式、图片和js都放在public文件夹下面,register对应的css内容如下,有需要可以自行修改

/*注册页面样式*/
body{
    background:#e5e5e5;
}
.container{
    width:400px;
    margin:300px auto;
    background:#fff;
    border-radius:10px;
    -webkit-border-radius:10px;
    -o-border-radius:10px;
    -moz-border-radius:10px;
    -ms-border-radius:10px;
    box-shadow:3px 3px 10px #000000;
    text-align:center;
}
.form-signin .form-signin-heading{
    margin:20px auto;
    font-weight:bold;
}
.form-signin .form-control {
    display:block;
    width:350px;
    margin:20px auto;
    height:auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing:border-box;
    padding:10px;
    font-size:16px;
}
.form-signin .form-control:focus {
    z-index:2;
}
.form-signin input[type="txt"] {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.form-signin .btn-block{
    display:block;
    width:350px !important;
    margin:30px auto;
}

现在通过在自己电脑输入http://localhost:3000/users/register可查看到注册页面

注册页面

【3】注册页面功能的实现
首先获取到注册中请求的用户名和密码

register.ejs中的form表单要指定提交方法和提交到哪个页面
register

routes文件夹下users.js下面输入注册的路由

var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});

//注册
router.get('/register',function(req,res,next){
  res.render('user/register');
});
router.post('/register',function(req,res,next){
  //获取请求到的用户名和密码
    console.log(req.body.username);
    console.log(req.body.pwd);
    res.send("注册成功");
});

module.exports = router;

测试效果,在localhost:3000/users/register的注册页面中输入用户名xiaolaofu,密码123456,点击注册,可以在命令行看到打印出来的用户名和密码
这里写图片描述
这里写图片描述
这里写图片描述

下面问题来了,如果能将注册的数据保存在数据库中呢?

首先,express是一个MVC类型的框架,V可以理解为views视图层,C可以理解为routes,至于M,我们在项目文件下新建一个model文件夹来绑定数据

在model文件夹下面新建User.js

//首先引入mongoose
var mongoose = require('mongoose');
//连接本地数据库
mongoose.connect('mongodb://localhost/user');  //链接本地的user数据库
mongoose.Promise = global.Promise;

//定义一个schema
var userSchema = mongoose.Schema({
    name:String,
    pwd:Number
})

//创建一个model
//把schema转换为一个model,使用mongoose.model(modelName, schema) 函数
var User = mongoose.model('User',userSchema);

module.exports = Student;
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值