基于node.js的简单服务器搭建(实现简单的登录注册)

搭建服务器

搭建服务器运行环境

  • 因为讲的是nodejs搭建的服务器，所以电脑中必须安装node，我本人使用的是window系统，所以以下的方法都是基于window的系统，大家可以到这个网址找到自己电脑对应的系统直接下载安装 下载地址，不在赘述。
  • 安装node才是万里长城的第一步，仅仅是给我们创建的服务端js文件提供了一个运行的环境，接下来是安装搭建服务器所需要的模块和创建服务器需要的目录结构。
  • node安装的时候也安装了npm模块，我们可以基于这个插件安装我们所需的模块

  • 初始化package.json文件,并创建我们服务器文件的目录，我创建的是server，然后在server文件夹下在命令行工具中进行安装模块（Git比window自带的命令行工具好用，最好去用Git，我在用window自带命令行工具的时候出现了很多莫名其妙的BUG）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    npm init                                        //(回车执行)会在目录下初始化一个package.json文件，包含了我们服务器所依赖的模块信息还有一些配置信息都在里面，生成的时候我们也可以去修改
    name: (server)                               //这是搭建服务器的名字，可以自己定义，但是name值不能有大写
    version: (1.0.0)                                //版本 可以自己指定
    description:
    entry point: (index.js)                         //含有服务器代码的文件
    test command:
    git repository:
    keywords:
    author:
    license: (ISC)
    About to write to H:\server\package.json:       //package.json文件的路径
    {
    "name": "bolgexerc",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC"
    }

    基本配置这几项就已经可以了，这时大家可以发现我们的server目录下已经有了一个package.json的文件，这个文件就是我们刚才npm init生成的文件

  • 安装express模块：这个模块已经封装了创建服务器的方法，我们可以直接基于这个模块去创建服务器，不用我们再去写很多繁琐的代码，直接引入这个模块就可以

    1
    npm install express --save

  • 执行上面这些简单的命令，我们已经具备了搭建服务器的条件，现在就就要创建我们的服务器代码，在服务器文件夹下创建index.js文件：

    1
    2
    3
    4
    5
    6
    7
    8
    //server/index.js
       const express = require('express');                 //引入模块
       const app     = express();                              //执行模块的方法
       app.lisetn('3000',()=>                              //监听3000端口
       {
           console.log('server running at 3000');          //3000端口有请求控制台输出文字
       })
    我们可以在浏览器中输入:127.0.0.1:3000     如果命令行成功输出文字说明我们的服务器已经搭建成功

配置服务器实现注册

  • 我们的服务器是需要打开页面的，所以现在我们就给服务器配置一个可以打开的静态页面，我们可以在server文件夹下再创建一个www文件夹，文件夹名字自己定义，
    配置的时候保持统一即可，在www文件下创建index.html文件,并写在页面中写简单的内容，方便我们观察效果

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!--server/www/index.html-->
        <!DOCTYPE html>
        <html lang="zh-CN">
        <head>
            <meta charset="UTF-8">
            <title>登录</title>
        </head>
        <body>
            <p>服务器已经打开了静态页面。。。。</p>
        </body>
        </html>
    1
    2
    3
    4
    5
    6
    7
    8
    //server/index.js
    const express = require('express');                 //引入模块
    const app     = express();   
    app.use(express.static('www')) 
    app.lisetn('3000',()=>                              //监听3000端口
    {
        console.log('server running at 3000');          //3000端口有请求控制台输出文字
    })

    现在我们在命令行输出node index.js 然后在浏览器输入127.0.0.1:3000我们可以现服务器已经打开了我们配置的index.html文件，接下来就是我们通过一些模块实现简单的登录注册
    代码我会在稍后的介绍中，给大家发我的阿里云和github链接，大家可以直接下载

  • 页面已经显示了，现在就要实现一下注册页面的简单的样式，修改我们www/index.html文件的内容

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="author" content="">
        <title>注册页面</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="styles/all.css">
    </head>
    <body>
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="row">
                    <div class="navbar-title">
                        <span id="goBack" class="glyphicon glyphicon-chevron-left pull-left"></span> 注册
                        <span class="glyphicon glyphicon-user pull-right"></span>
                    </div>
                </div>
            </div>
        </nav>
        <div class="container">
            <form action="/user/register" method="POST">
                <div class="form-group">
                    <input type="text" class="form-control" name="petname" placeholder="请填写昵称">
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" name="password" placeholder="请填写密码">
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" name="password" placeholder="请再次填写密码">
                </div>
                <div class="checkbox">
                    <label for="">
                        <input type="radio" value="true" name = "ismale" id="male" checked>
                        先生
                    </label>
                </div>
                <div class="checkbox">
                    <label for="">
                        <input type="radio" value="false" name = "ismale" id="famale">
                    </label> 女士
                </div>
                <div class="form-grop">
                    <input type="email" class="form-control" name="email" placeholder="请输入电子邮箱">
                </div>
                <div class="form-group">
                    <select name="course" id="" class="form-control">
                        <option value="HTML5">HTML5</option>
                        <option value="JavaScript">JavaScript</option>
                        <option value="PHP">PHP</option>
                    </select>
                </div>
                <input type="submit" class="btn btn-success form-control" value="注册">
            </form>
        </div>
        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="scripts/register.js"></script>
    </body>
    </html>

    为了方便页面的内容都是用的是bootstrap插件，只是为了实现效果，至于bootstrap怎么用的，大家可以参考官网

    待续。。。。。。。
前端小武

Hexo

null