node02
1、使用已有的知識實現一個簡單的登錄和注冊的界面
請求有請求接口有請求頁面的，我們需要加以區分
以下是客戶端代碼
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head> <script src="./ajax.js"></script><body>用戶名：<input type="text" name="" id="user"><br />密碼：<input type="passsword" name="" id="pwd"><input type="button" value="注冊" id="register"><input type="button" value="登錄" id="login"></body> <script>window.onload = function () {let user = document.getElementById('user')let pwd = document.getElementById('pwd')let reg = document.getElementById('register')let log = document.getElementById('login')reg.onclick = function () {ajax({url: '/user',data: { act: 'reg', user: user.value, pwd: pwd.value },type: 'get',success(str) {let json = eval('(' + str + ')')if (json.ok) {alert('注冊成功')} else {alert('注冊失敗' + json.msg)}},error() {alert('sth is wrong')}})}log.onclick = function () {ajax({url: '/user',data: { act: 'reg', user: user.value, pwd: pwd.value },type: 'get',success(str) {let json = eval('(' + str + ')')if (json.ok) {alert('登錄成功')} else {alert('登錄失敗' + json.msg)}},error() {alert('sth is wrong')}})}}</script></html>以下是服務端代碼
const http = require('http'); const fs = require('fs'); const querystring = require('querystring'); const urlLib = require('url');var users = {}; //{"blue": "123456", "zhangsan": "123456", "lisi": "321321"}var server = http.createServer(function (req, res) {//解析數據var str = '';req.on('data', function (data) {str += data;});req.on('end', function () {var obj = urlLib.parse(req.url, true);const url = obj.pathname;const GET = obj.query;const POST = querystring.parse(str);//區分——接口、文件if (url == '/user') { //接口switch (GET.act) {case 'reg'://1.檢查用戶名是否已經有了if (users[GET.user]) {res.write('{"ok": false, "msg": "此用戶已存在"}');} else {//2.插入usersusers[GET.user] = GET.pass;res.write('{"ok": true, "msg": "注冊成功"}');}break;case 'login'://1.檢查用戶是否存在if (users[GET.user] == null) {res.write('{"ok": false, "msg": "此用戶不存在"}');//2.檢查用戶密碼} else if (users[GET.user] != GET.pass) {res.write('{"ok": false, "msg": "用戶名或密碼有誤"}');} else {res.write('{"ok": true, "msg": "登錄成功"}');}break;default:res.write('{"ok": false, "msg": "未知的act"}');}res.end();} else { //文件//讀取文件var file_name = './www' + url;fs.readFile(file_name, function (err, data) {if (err) {res.write('404');} else {console.log(file_name)res.write(data);}res.end();});}}); });server.listen(8080);?
3、模塊化
1)系統模塊：
Assert：斷言
Buffer:
cluster:進程群
crypto:加密
DNS
Errors
Events(重點)用于模擬事件
Path 路徑功能
2）使用模塊導出功能：
//當前目錄必須使用./ let a = 28 exports.a = a //使用時 const mod = require('./mod.js') console.log(mod.a)3）node中不存在全局變量，聲明的變量僅在模塊內有效
module.exports=exports
可用于批量輸出一個對象
module.exports={a:12,b:58}
引入時.js可以省略
?
4）npm nodejs包管理器
統一下載途徑
自動下載依賴
提交自定義模塊
?
npm uninstall xx 卸載
在node_modules文件夾內的依賴引入可以不用加./
因為系統會自動到node_modules深度遍歷模塊
先查找系統模塊，再查找node_modules
?
5)上傳自己的模塊
npm login //進行登錄
npm init -y //簡單地初始化
npm publish //進行發布，不能發布同一版本號的
npm --force unpulish 對已發布的包進行強制刪除
?
4、express框架
1）安裝
使用npm安裝即可
2）使用express構造服務器
const express = require('express')let server = express() server.use('/a.html', function (req, res) {//已經不是原生的req,res對象了，經過了express封裝res.send('這是A網頁')//發送響應res.end() })//兩個參數，請求路徑及回調 server.use('/b.html', function (req, res) {res.send('這是B網頁')res.end() })//兩個參數，路徑及回調 server.listen(8080, () => console.log('server is running'))send與write的區別：
send可以發送一個json 對象，write只能發送一個字符串或Buffer對象
express保留了原生的功能，添加了一些新特性
?
3）3種接收用戶請求的新方法
use是get/post都可以接收
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head> <body><form action="http://localhost:8080" method="post">user: <input type="text" name="user"><input type="submit" value="submit"></form> </body> </html>//server.js const express = require('express')
let server = express() server.get('/',function(req,res){ console.log('get!!!!!!!!!!!') }) server.post('/',function(req,res){ console.log('post!!!!!!!!!!!') })
server.listen(8080, () => console.log('server is running'))
?
4)用express來改寫登錄與注冊
//express-static中間件的使用const express = require('express') const es=require('express-static')let server = express()//請求a.html,借助express的插件express-static來完成 //它將幫助我們讀取靜態文件 server.use(es('./www'))//參數是一個函數,函數內的參數是一個路徑，它將根據 //請求參數中的文件名自動地返回相應的文件 server.listen(8080, () => console.log('server is running')) const express = require('express') const es=require('express-static')let server = express()//假數據 let users={"cc":"123","ee":"456" }server.get('/login',function(req,res){ //提取參數內容 req.query即可 let user=req.query['user'] let pwd=req.query['pwd']//登錄功能 if(!users[user]){res.send({"ok":false,msg:"user not found"}) }else if(users[user]!==pwd){res.send({"ok":false,msg:"incorrect pwd"}) }else{res.send({"ok":true,msg:"success login"}) } })server.use(es('./www'))server.listen(8080, () => console.log('server is running'))<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head> <script src="./ajax.js"></script><body>用戶名：<input type="text" name="" id="user"><br />密碼：<input type="passsword" name="" id="pwd"><input type="button" value="注冊" id="register"><input type="button" value="登錄" id="login"></body> <script>window.onload = function () {let user = document.getElementById('user')let pwd = document.getElementById('pwd')let reg = document.getElementById('register')let log = document.getElementById('login')log.onclick = function () {ajax({url: '/login',data: { user: user.value, pwd: pwd.value },type: 'get',success(str) {let json = eval('(' + str + ')')if (json.ok) {alert('登錄成功')} else {alert('登錄失敗' + json.msg)}},error() {alert('sth is wrong')}})}}</script></html>
?
轉載于:https://www.cnblogs.com/Tanqurey/p/10773668.html
總結
- 上一篇： 阿里云亮相2019联通合作伙伴大会，边缘
- 下一篇： WebApi数据验证——编写自定义数据注