Nodejs 一個簡單的後臺例項

阿新 • • 發佈：2019-02-11

學了兩天的nodejs，寫了一個簡單的後臺例項，還有配套的與後臺進行互動的簡單網頁。
頁面端使用了jQuery進行控制，
後臺使用nodejs作為操控語言，使用express執行網路操作

整個工程結構如下：

根目錄--------------
    |-package.json
    |-test.js
    |-public
        |-main.html
        |-add.html

Nodejs端，名字為test.js

// file name :test.js
var express             = require('express');
var 
 app                 = express();
var bodyParse           = require('body-parser')
var cookieParser        = require('cookie-parser') ;
app.use(cookieParser()) ;
app.use(bodyParse.urlencoded({extended:false})) ;

// 處理根目錄的get請求
app.get('/',function(req,res){
    res.sendfile('public/main.html') ;
    console.log('main page is required ' 
);
}) ;

// 處理/login的get請求
app.get('/add', function (req,res) {
    res.sendfile('public/add.html') ;
    console.log('add page is required ') ;
}) ;

// 處理/login的post請求
app.post('/login',function(req,res){
    name=req.body.name ;
    pwd=req.body.pwd   ;
    console.log(name+'--'+pwd) ;
    res.status(200).send(name+'--' 
+pwd) ;
});

// 監聽3000埠
var server=app.listen(3000) ;

main.html的程式碼如下

<html>

    <link rel="stylesheet" type="text/css" href="http://fonts.useso.com/css?family=Tangerine|Inconsolata|Droid+Sans">

    <style>
        div#test{
            font-family: 'Tangerine',serif;
            font-size: 48px;
        }
        p#link1{
            font-family: 'Tangerine',serif;
        }

    </style>

    <script src="//cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>

</head>
<body>

<div id="test">
    <h1>Main Page</h1>
</div>
<p>Register & Login</p>
<form action="test.jsp" method="post">
    賬號 :
    <input type="text" id="name" />
    <br/><br/>
    密碼 :
    <input type="text" id="pwd" />
    <br/><br/>
    &nbsp&nbsp&nbsp&nbsp&nbsp
    <div><a href="/add" id="add">EXTRA</a></div>
    <input type="button" value="Submit" id="x">
</form>

</body>

    <script type="text/javascript">

        var after_login=function(data,status){
            if (status=='success'){
                alert(data+'--'+status) ;
            }
            else alert('login refused') ;

        }

        $(document).ready(function(){
            $("#x").click(function(){
                var name    =   $("#name").val() ;
                var pwd     =   $("#pwd").val() ;
                $.post('http://127.0.0.1:3000/login',
                {
                    name    :   name ,
                    pwd     :   pwd
                },
//                        function(data,status){
//                            alert(data+'--'+status) ;
//                        }
                        after_login
                );
//                $.get('add',function(data,status){
//                    document.write(data) ;
//                }) ;
            });
        });
    </script>

</html>

add.html的程式碼如下

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>嘿</title>
</head>
<body>
<h1>This is an additional web page</h1>
<p>just for test</p>
</body>
</html>

啟動專案：
cd 到專案目錄，輸入 node test.js，執行伺服器
開啟瀏覽器，輸入127.0.0.1:3000，可得到如下頁面
這裡寫圖片描述

輸入賬號和密碼，能得到彈出視窗，裡面是伺服器的返回值
這裡寫圖片描述

點選EXTRA頁面，能得到二級頁面
這裡寫圖片描述

Nodejs 一個簡單的後臺例項

學了兩天的nodejs，寫了一個簡單的後臺例項，還有配套的與後臺進行互動的簡單網頁。頁面端使用了jQuery進行控制，後臺使用nodejs作為操控語言，使用express執行網路操作整個工程結構如下：根目錄--------------

一個簡單的例項Loan類的實現和測試

import java.util.Scanner; public class TestLoanClass { public static void main(String[] args) { // TODO 自動生

一個簡單後臺系統的開發

大概花了4,5天時間，做了一個對資料庫幾張表的維護的系統，採用的是MVC4+easyui構建，先附上幾張截圖讓大家瞭解下：功能無非就是，增，刪，改，查，分頁顯示，功能很簡單，但是，主要是講下碰到的幾個問題: 一，大家都知道，通過點選左邊的選單，會在右邊產生tab頁面，一個頁面沒什麼，

建立一個簡單spring例項，spring單例與多例，初始化與銷燬

（1）在配置完spring提示框架後（上一遍文章有介紹），首先建立一個專案，匯入sprig所需的jar包然後書寫主配置檔案applicationContext.<?xml version="1.0" encoding="UTF-8"?> <beans xml

Java子執行緒和主執行緒交替輸出（一個簡單的例項）

實現主執行緒和子執行緒的交替輸出列印，首先建立一個實現執行緒方法的Service public class Service { private volatile boolean flag = false; //這是一個控制sub和mian的開關，加關鍵字volatil

freemark一個簡單的例項

學習網址:http://www.freemarker.org/docs/index.html //官方網站線上文件http://www.sunjava.cn/FreeMarker.htm //其它資料以下附件是一個freemark與struts1的一個簡單案例子,

從一個簡單的例項來了解PE檔案

文中RegisterMe及原視訊下載地址：http://pan.baidu.com/s/1bnqOgnt開啟這個RegisterMe.exe程式，會出現如下煩人的訊息框引入目標：去掉煩人的訊息框工具：Ollydbg 轉載原文：http://www.freebuf

一個簡單的例項來聊聊什麼是Restful介面

Restful介面的簡介通過學習本文件後能夠掌握到的知識點 1.Restful的基本概念 2.Restful原則條件 3.Restful分層系統子曰：“學而不思則罔，思而不學則殆。” 1. 使用Restful的原因 2018元月第一份

一個簡單Dubbo例項

作為一個分散式框架Dubbo在專案中使用逐步越來越多，通過該框架很容易實現分散式，之前已經寫了一個大致步驟，今天有時間就整理一下，寫一個完整的例項作為記錄一下過程，在專案進行之前，首先下載並搭建maven服務，建立maven本地倉庫，然後在eclipse中配置maven，步驟

一個簡單的後臺管理系統入門例項

採用EasyUI 1.4.x 版本，預設default風格，非同步載入頁面，多Tab頁展示，使用JSON檔案模擬從後臺動態獲取資料。系統截圖：注意事項：因為file協議不支援Ajax獲取

寫一個簡單的form表單，當光標離開表單的時候表單的值發送給後臺

bsp name clas blog var tex txt rip () 1 <body> 2 <form action="index.php"> 3 <input type="text" name="txt" id="txt

vue2.0+element+node+webpack搭建的一個簡單的後臺管理界面

mage strong 解決 orm userinfo html中 down product param 1.檢查本地是否安裝node：node -v 如果沒有安裝從node官網上下載相應的node，安裝成功

Layui 寫一個簡單的後臺頁面

觸發 scale item href method pts iframe 都是 rem 參考如下： 1、layui 官方文檔 http://www.layui.com/doc/ 2、https://blog.csdn.net/huyanliang/article/detai

一個簡單的nodejs api開發小結

fin 均衡 serve 分布分布式 follow ngs 成熟 tee 上周接了一個nodejs的小活，寫16個api，有登錄註冊，和對設備，產品，票據的增改刪查。采用了nodejs+express+mysql，其中express第一次使用，作為簡單的路由。之前都是自己

簡單知識點例項之三：Bootstrap-Table和後臺進行百分百互動的簡單例項

這是一個針對前後臺互動的例子，可以直接套進專案中通暢執行。第二頁之所以資料不對，是因為例子畢竟沒有真正的後臺，所以資料不對。但是可以套入專案中，就正常了。重點：其中bootstrap-table有一個search:truse搜尋框的引數我沒有使用，而是自己寫了一個搜尋框，

一個簡單的酒店專案【前臺和使用者和後臺】以及微信對接

這兩月我用了這麼久的時間寫的專案，無償分享給大家。首先，先申明這裡面程式碼非常多bug，還有很多功能沒有完成，緊靠一個學生實在太難了。那麼我先講講專案的bug，以及未完成的功能，避免大家找到又說壞話。還有專案有部分個人隱私，大家看到就當沒看到吧，反正我的資訊又不值幾個錢。哈哈~~~

一、一個簡單的socket通訊例項（TCP）

1.服務端程式碼 import java.io.*; import java.net.ServerSocket; import java.net.Socket; /** * 類功能描述：先啟動伺服器端，再啟動客戶端 * * @author：*** * @creat

關於Java中timer的一個簡單例項應用

效果展示核心程式碼： Timer timer = new Timer();//新增定時器 timer.schedule( new TimerTask(){//重寫定時任務 public void run(){ button2.setText("取消"+S

GUI使用者介面的一個簡單例項

這篇部落格寫得比較趕，就不贅述了。內含有設定框架，面板，按鈕怎麼嵌在一起，插入圖片，設定字型和顏色，前景色背景色，位置等。重點在實現功能，介面並不美觀。私以為，這麼多個東西怎麼看呢？就應該把一些行註釋掉就知道怎麼看了。 image是在src下面的資料夾 package gui; im

繼承與多型的一個簡單例項

程式結構：父為Person類,Person類個子類Student和Employee，Employee類又有兩個子類，Staff和Faculty。繼承即子類可以繼承父類的資料域和方法： Student類和Employee類繼承了Person類的資料域name，address pho

Nodejs 一個簡單的後臺例項

相關推薦