node.js+captchapng+jsonwebtoken を使用してログイン検証を完了する
この記事では主にログイン認証を実装するためのnode.js+captchapng+jsonwebtokenの例を紹介します。興味のある方はぜひ学んでください
ログイン認証に関して言えば、誰もが間違いなく12306を思い浮かべることができます。検証コード。 。 12306はチケット詐欺防止に多大な労力を費やしてきたが、認証コードの識別はますます困難になり、最終的には人間ですら識別できなくなる可能性がある。
今日は、エディターがノードにイメージ検証コードを実装し、トークンを使用してログインを検証する方法を説明します。この記事を学習すると、次のことがわかります:
1. captchapng を使用して画像検証コードを生成する
2. jsonwebtoken を使用してログイン検証を実装する
1. 画像検証コードの生成 (最後にすべてのコード)
まず最初に、プロセスを理解します。最初のステップは、サーバーが 4 つの数字のセットをランダムに生成することです。
2 番目のステップは、これら 4 つの数字をキャンバスに描画して画像を生成することです。
3 番目のステップは、ユーザーがデータを返すときに比較するためにこれら 4 桁を保存することです。
それではどこに保存するのでしょうか?明らかに、ユーザーを区別するには、ユーザーをセッションに保存するのが最も安全です。
最初のステップは、ログインページを作成することです。ここでは引き続き React を使用します。
login.tsx
import * as React from 'react'
import * as ReactDom from 'react-dom'
import {Link, browserHistory} from 'react-router';
import * as axios from 'axios';
export default class Login extends React.Component<any,any>{
constructor(props){
super(props)
this.state = {
userName : '',
password : '',
yzNoId : '',
hash : Math.random()
}
}
handleUserName(e) : any {
this.setState({
userName : e.target.value
})
}
handlePassword(e) : any {
this.setState({
password : e.target.value
})
}
handleYzId(e) : any {
this.setState({
yzNoId : e.target.value
})
}
render(){
const { userName, password, yzNoId } = this.state;
return(
<p>
<p className="nav-wrap">
<ul className="nav">
<li><Link to="/home">首页</Link></li>
<li><Link to="/imgLoad">上传</Link></li>
<li><Link to="/login">登陆</Link></li>
</ul>
</p>
<p className="content">
<p className="login-warp">
<p>
<input type="text" className="username" value={userName} onChange={this.handleUserName.bind(this)} placeholder="用户名"/>
</p>
<p>
<input type="text" className="password" value={password} onChange={this.handlePassword.bind(this)} placeholder="密码"/>
</p>
<p>
<input type="text" className="yz" value={yzNoId} onChange={this.handleYzId.bind(this)} placeholder="验证码"/>
<img src={"http://localhost:3000/captcha"} className="yz-img" />
</p>
<p>
<input type="button" className="submit" value="登陆" onClick={this.sbumit.bind(this,{userName:userName,password:password,captcha:yzNoId})} />
</p>
</p>
</p>
</p>
)
}
}ページは次のようになります
サーバーを介して確認画像を提供する必要があります。
router/index.js 以下のコードを追加します
var Login = require('./controller/login');
var login = new Login;
router.get('/captcha', login.captcha);
router.post('/login',login.loginer);
login是定义在控制器的一个类的实例，captcha，loginer是它的方法。分别是返回验证图片、登录验证。
controller/login.js
var rf = require('fs');
var captchapng = require('captchapng');
class Login {
constructor(){}
captcha(req, res, next) {
var str = parseInt(Math.random()*9000+1000); //随机生成数字
req.session.captcha = str; // 存入session
var p = new captchapng(80, 30, str); //生成图片
p.color(0, 0, 0, 0);
p.color(80, 80, 80, 255);
var img = p.getBase64();
var imgbase64 = new Buffer(img, 'base64');
res.writeHead(200, {
'Content-Type': 'image/png'
});
res.end(imgbase64);
}
loginer(req, res, next) {
let captcha = req.body.captcha;
let userName = req.body.userName;
let password = req.body.password;
if (captcha != req.session.captcha) {
res.status(400).send({
message: '验证码错误'
});
}else if(userName == "chenxuehui" && password == "123321"){
res.json({"code":100,"verson":true,"msg":"登陆成功","token":token});
}else{
res.json({"code":0,"verson":false,"msg":"密码错误"});
}
}
}
module.exports = Login キャプチャの方法は、4 桁の数字を含む画像を生成し、その画像をセッションに保存することです。
router/index.jsでこのメソッドを参照してください
router.get('/captcha', login.captcha);
つまり、localhost:3000/captchaにアクセスすると、画像が返されます。
この接続では、画像の src 属性を通じて画像を取得できますが、画像がクリックされると更新する必要があるため、画像にクリック更新イベントを追加する必要があります。以下のコードをlogin.tsxに挿入します
setHash() {
this.setState({
hash : Math.random()
})
}imgタグも
コードをコピー コードは以下の通りです:
現時点でのlogin.tsxのすべてのコード:
import * as React from 'react'
import * as ReactDom from 'react-dom'
import {Link, browserHistory} from 'react-router';
import * as axios from 'axios';
export default class Login extends React.Component<any,any>{
constructor(props){
super(props)
this.state = {
userName : '',
password : '',
yzNoId : '',
hash : Math.random()
}
}
public async sbumit(params : any) : Promise<any>{
let res = await axios.post('http://localhost:3000/login',params);
}
handleUserName(e) : any {
this.setState({
userName : e.target.value
})
}
handlePassword(e) : any {
this.setState({
password : e.target.value
})
}
handleYzId(e) : any {
this.setState({
yzNoId : e.target.value
})
}
setHash() {
this.setState({
hash : Math.random()
})
}
render(){
const { userName, password, yzNoId } = this.state;
return(
<p>
<p className="nav-wrap">
<ul className="nav">
<li><Link to="/home">首页</Link></li>
<li><Link to="/imgLoad">上传</Link></li>
<li><Link to="/login">登陆</Link></li>
</ul>
</p>
<p className="content">
<p className="login-warp">
<p>
<input type="text" className="username" value={userName} onChange={this.handleUserName.bind(this)} placeholder="用户名"/>
</p>
<p>
<input type="text" className="password" value={password} onChange={this.handlePassword.bind(this)} placeholder="密码"/>
</p>
<p>
<input type="text" className="yz" value={yzNoId} onChange={this.handleYzId.bind(this)} placeholder="验证码"/>
<img src={"http://localhost:3000/captcha?aaa="+this.state.hash} className="yz-img" onClick={this.setHash.bind(this)} />
</p>
<p>
<input type="button" className="submit" value="登陆" onClick={this.sbumit.bind(this,{userName:userName,password:password,captcha:yzNoId})} />
</p>
</p>
</p>
</p>
)
}
} このようにして、img をクリックしている限り、ハッシュがランダムに生成され、新しい画像が呼び出されます。
続いてログイン認証を進めます。
ログイン認証にはloginerメソッドが使用されます。
比較のためにユーザーのユーザー名情報、パスワード、確認コードを取得し、最後にログインが成功したかどうかに関するデータを返します。
ユーザーは一度ログインすると、次回からは再度ログインする必要はありません。ここではセッションまたはクッキーを使用します。フロントエンドとバックエンドの個別の開発を実装したため、単一のページを構築し、Ajax を使用してアプリケーションを構築する傾向が強くなっています。この開発モデルにはトークンが最適です。
トークンログイン検証
トークンは暗号化された文字列で、ログインに成功すると、ユーザーがインターフェイスをリクエストするときにこのトークンを返します。したがって、トークンを暗号化する必要があります。
Json Web Token は、この問題を解決するために特別に設計されており、その原理は詳細には説明しませんが、実際には、特定の方法で文字列を取得し、それを解析することです。
最初に行う必要があるステップは、
ユーザーがログインに成功したら、トークンを作成してユーザーに返すことです。
ステップ 2: ユーザーはトークンを取得した後、トークンをローカルに保存する必要があります。
ステップ 3: ユーザーがリクエストするたびに、ユーザーが保持するトークンが正しいかどうかを検証する必要があります。データは正しく返されますが、警告は誤って返されます。
ユーザーはデータをリクエストするたびにヘッダーにトークンを含める必要があります。
最初のステップ: 引き続きcontroller/login.js
var rf = require('fs');
var jwt = require('jsonwebtoken');
var captchapng = require('captchapng');
var Tokens = require('../middleware/token')
var t = new Tokens;
class Login {
constructor(){}
captcha(req, res, next) {
var str = parseInt(Math.random()*9000+1000); //随机生成数字
req.session.captcha = str; // 存入session
var p = new captchapng(80, 30, str); //生成图片
p.color(0, 0, 0, 0);
p.color(80, 80, 80, 255);
var img = p.getBase64();
var imgbase64 = new Buffer(img, 'base64');
res.writeHead(200, {
'Content-Type': 'image/png'
});
res.end(imgbase64);
}
loginer(req, res, next) {
let captcha = req.body.captcha;
let userName = req.body.userName;
let password = req.body.password;
if (captcha != req.session.captcha) {
res.status(400).send({
message: '验证码错误'
});
}else if(userName == "chenxuehui" && password == "123321"){
// 设置token
var datas = {userName:"chenxuehui"}
//调用../middleware/token 下方法设置
var token = t.setToken('cxh',300,datas)
res.json({"code":100,"verson":true,"msg":"登陆成功","token":token});
}else{
res.json({"code":0,"verson":false,"msg":"密码错误"});
}
}
}
module.exports = Login今回は、ログインメソッドに設定トークンを追加し、ユーザーに返します。 setTokenメソッドはトークンを設定するメソッドです。
ステップ 2: ユーザーが取得した後、保存します。
login.tsxでは次のようになります
import * as React from 'react'
import * as ReactDom from 'react-dom'
import {Link, browserHistory} from 'react-router';
import * as axios from 'axios';
export default class Login extends React.Component<any,any>{
constructor(props){
super(props)
this.state = {
userName : '',
password : '',
yzNoId : '',
hash : Math.random()
}
}
public async sbumit(params : any) : Promise<any>{
let res = await axios.post('http://localhost:3000/login',params);
if(res.data.verson){
sessionStorage.setItem('token',res.data.token);
browserHistory.push("/home")
}
}
handleUserName(e) : any {
this.setState({
userName : e.target.value
})
}
handlePassword(e) : any {
this.setState({
password : e.target.value
})
}
handleYzId(e) : any {
this.setState({
yzNoId : e.target.value
})
}
setHash() {
this.setState({
hash : Math.random()
})
}
render(){
const { userName, password, yzNoId } = this.state;
return(
<p>
<p className="nav-wrap">
<ul className="nav">
<li><Link to="/home">首页</Link></li>
<li><Link to="/imgLoad">上传</Link></li>
<li><Link to="/login">登陆</Link></li>
</ul>
</p>
<p className="content">
<p className="login-warp">
<p>
<input type="text" className="username" value={userName} onChange={this.handleUserName.bind(this)} placeholder="用户名"/>
</p>
<p>
<input type="text" className="password" value={password} onChange={this.handlePassword.bind(this)} placeholder="密码"/>
</p>
<p>
<input type="text" className="yz" value={yzNoId} onChange={this.handleYzId.bind(this)} placeholder="验证码"/>
<img src={"http://localhost:3000/captcha?aaa="+this.state.hash} className="yz-img" onClick={this.setHash.bind(this)} />
</p>
<p>
<input type="button" className="submit" value="登陆" onClick={this.sbumit.bind(this,{userName:userName,password:password,captcha:yzNoId})} />
</p>
</p>
</p>
</p>
)
}
} sbumitメソッドでトークンをsessonstorageに置きます。
ステップ 3: インターフェースがリクエストされるたびにトークンを検証するようにミドルウェアを設定します。解析が成功すると、リクエストヘッダーにトークンが追加されます。
./middleware/token.js
var jwt = require('jsonwebtoken');
class Tokens {
constructor(){}
testToken(req,res,next) {
var token = req.body.token || req.query.token || req.headers['x-access-token'];
if(token) {
//存在token，解析token
jwt.verify(token, 'cxh' , function(err,decoded) {
if(err) {
// 解析失败直接返回失败警告
return res.json({success:false,msg:'token错误'})
}else {
//解析成功加入请求信息，继续调用后面方法
req.userInfo = decoded;
next()
}
})
}else {
return res.status(403).send({success:false,msg:"没有token"})
}
}
setToken(name,time,data) {
var jwtSecret = name;
var token = jwt.sign(data, jwtSecret, {
expiresIn: time
})
return token;
}
}
module.exports = TokenstestTokenメソッドはトークンの検証、setTokenメソッドはトークンメソッドの設定です
ログイン要求がない場合はこうなります
在 router/index.js
var express = require('express');
var router = express.Router();
var rf = require('fs');
var Login = require('./controller/login');
var Tokens = require('./middleware/token')
var t = new Tokens;
var login = new Login;
//主页
router.get('/', function(req, res, next) {
res.render("wap/index")
});
//获取图片验证码
router.get('/captcha', login.captcha);
//登录验证
router.post('/login',login.loginer);
//请求数据时 t.testToken 验证token
router.post('/list',t.testToken,function(req, res, next){
res.json({
//在请求信息里面拿到数据
username : req.userInfo.userName,
success : true,
result : [
{
name:'1111111'
},
{
name :'22222'
}
]
})
})
module.exports = router;我们在另一个页面调用list接口试一下
import * as axios from 'axios';
import { transToken } from '../decorator/index'
class Home extends React.Component<any,any>{
constructor(props){
super(props)
this.state = {
data : ''
}
}
async getList(): Promise<any>{
let token = sessionStorage.getItem('token');
const config = {
// 请求头信息
headers: {'x-access-token': token}
}
let res = await axios.post('http://localhost:3000/list',{},config);
if(!res.data.success){
browserHistory.push('/login');
return;
}
this.setState({
data : res.data
})
}
render(){
const { data } = this.state;
return(
<p>
<p className="nav-wrap">
<ul className="nav">
<li><Link to="/home">首页</Link></li>
<li><Link to="/imgLoad">上传</Link></li>
<li><Link to="/login">登陆</Link></li>
</ul>
</p>
<p className="content">
Home
<span onClick={this.getList.bind(this)}>获取数据</span>
<p>{
data ? data.result.map( (val,k) => {
return <li key = {k}>{val.name}</li>
}) : null
}</p>
</p>
</p>
)
}
}
export default Home当调用getList时，如果此时没有登录res.data.success就会为false，则跳到登录页。
全部代码
node.js
app.js
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var session = require("express-session");
var ejs = require('ejs');
var index = require('./routes/index');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
// app.set('view engine', 'jade');
app.engine('html', ejs.__express);
app.set('view engine', 'html');
app.use(session({
secret:"dabao",
resave:false,
saveUninitialized:true,
cookie:{}
}));
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser({limit: 5000000}));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, '')));
app.use('/', index);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;index.js
var express = require('express');
var router = express.Router();
var rf = require('fs');
var Login = require('./controller/login');
var Tokens = require('./middleware/token')
var t = new Tokens;
var login = new Login;
/* GET home page. */
router.get('/', function(req, res, next) {
res.render("wap/index")
});
router.post('/upLoadImg',function(req,res,next){
let imgData = req.body.imgData;
console.log(imgData)
let base64Data = imgData.replace(/^data:image\/\w+;base64,/, "");
let dataBuffer = new Buffer(base64Data, 'base64');
let timer = Number( new Date() );
console.log(timer)
rf.writeFile("views/images/artCover"+timer+".png",dataBuffer, function(err) {
if(err) {
res.json({"code":400,"verson":false,"msg":err});
}else {
res.json({"code":100,"verson":true,"url":"views/src/common/images/artCover/"+timer+".png"});
}
});
})
router.get('/captcha', login.captcha);
router.post('/login',login.loginer);
router.post('/list',t.testToken,function(req, res, next){
// 先解析token
console.log(req.userInfo)
res.json({
username : req.userInfo.userName,
success : true,
result : [
{
name:'1111111'
},
{
name :'22222'
}
]
})
})
module.exports = router;controller/login.js
var rf = require('fs');
var jwt = require('jsonwebtoken');
var captchapng = require('captchapng');
var Tokens = require('../middleware/token')
var t = new Tokens;
class Login {
constructor(){}
captcha(req, res, next) {
var str = parseInt(Math.random()*9000+1000); //随机生成数字
req.session.captcha = str; // 存入session
var p = new captchapng(80, 30, str); //生成图片
p.color(0, 0, 0, 0);
p.color(80, 80, 80, 255);
var img = p.getBase64();
var imgbase64 = new Buffer(img, 'base64');
res.writeHead(200, {
'Content-Type': 'image/png'
});
res.end(imgbase64);
}
loginer(req, res, next) {
let captcha = req.body.captcha;
let userName = req.body.userName;
let password = req.body.password;
if (captcha != req.session.captcha) {
res.status(400).send({
message: '验证码错误'
});
}else if(userName == "chenxuehui" && password == "123321"){
// 设置token
var datas = {userName:"chenxuehui"}
var token = t.setToken('cxh',300,datas)
res.json({"code":100,"verson":true,"msg":"登陆成功","token":token});
}else{
res.json({"code":0,"verson":false,"msg":"密码错误"});
}
}
}
module.exports = Loginmiddleware/token.js
var jwt = require('jsonwebtoken');
class Tokens {
constructor(){}
testToken(req,res,next) {
var token = req.body.token || req.query.token || req.headers['x-access-token'];
if(token) {
jwt.verify(token, 'cxh' , function(err,decoded) {
if(err) {
return res.json({success:false,msg:'token错误'})
}else {
req.userInfo = decoded;
next()
}
})
}else {
return res.status(403).send({success:false,msg:"没有token"})
}
}
setToken(name,time,data) {
var jwtSecret = name;
var token = jwt.sign(data, jwtSecret, {
expiresIn: time
})
return token;
}
}
module.exports = Tokensreact部分
login.tsx
import * as React from 'react'
import * as ReactDom from 'react-dom'
import {Link, browserHistory} from 'react-router';
import * as axios from 'axios';
export default class Login extends React.Component<any,any>{
constructor(props){
super(props)
this.state = {
userName : '',
password : '',
yzNoId : '',
hash : Math.random()
}
}
public async sbumit(params : any) : Promise<any>{
let res = await axios.post('http://localhost:3000/login',params);
if(res.data.verson){
sessionStorage.setItem('token',res.data.token);
browserHistory.push("/home")
}
}
handleUserName(e) : any {
this.setState({
userName : e.target.value
})
}
handlePassword(e) : any {
this.setState({
password : e.target.value
})
}
handleYzId(e) : any {
this.setState({
yzNoId : e.target.value
})
}
setHash() {
this.setState({
hash : Math.random()
})
}
render(){
const { userName, password, yzNoId } = this.state;
return(
<p>
<p className="nav-wrap">
<ul className="nav">
<li><Link to="/home">首页</Link></li>
<li><Link to="/imgLoad">上传</Link></li>
<li><Link to="/login">登陆</Link></li>
</ul>
</p>
<p className="content">
<p className="login-warp">
<p>
<input type="text" className="username" value={userName} onChange={this.handleUserName.bind(this)} placeholder="用户名"/>
</p>
<p>
<input type="text" className="password" value={password} onChange={this.handlePassword.bind(this)} placeholder="密码"/>
</p>
<p>
<input type="text" className="yz" value={yzNoId} onChange={this.handleYzId.bind(this)} placeholder="验证码"/>
<img src={"http://localhost:3000/captcha?aaa="+this.state.hash} className="yz-img" onClick={this.setHash.bind(this)} />
</p>
<p>
<input type="button" className="submit" value="登陆" onClick={this.sbumit.bind(this,{userName:userName,password:password,captcha:yzNoId})} />
</p>
</p>
</p>
</p>
)
}
}home.js 获取列表信息
import * as React from 'react'
import * as ReactDom from 'react-dom'
import {Link, browserHistory} from 'react-router';
import * as axios from 'axios';
class Home extends React.Component<any,any>{
constructor(props){
super(props)
this.state = {
data : ''
}
}
async getList(): Promise<any>{
let token = sessionStorage.getItem('token');
const config = {
// 请求头信息
headers: {'x-access-token': token}
}
let res = await axios.post('http://localhost:3000/list',{},config);
if(!res.data.success){
browserHistory.push('/login');
return;
}
this.setState({
data : res.data
})
}
render(){
const { data } = this.state;
return(
<p>
<p className="nav-wrap">
<ul className="nav">
<li><Link to="/home">首页</Link></li>
<li><Link to="/imgLoad">上传</Link></li>
<li><Link to="/login">登陆</Link></li>
</ul>
</p>
<p className="content">
Home
<span onClick={this.getList.bind(this)}>获取数据</span>
<p>{
data ? data.result.map( (val,k) => {
return <li key = {k}>{val.name}</li>
}) : null
}</p>
</p>
</p>
)
}
}
export default Home以上がnode.js+captchapng+jsonwebtoken を使用してログイン検証を完了するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7529
15
1378
52
81
11
21
76
WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法
Dec 17, 2023 pm 02:54 PM
WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。
WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー
Dec 17, 2023 pm 05:30 PM
WebSocketとJavaScript：リアルタイム監視システムを実現するためのキーテクノロジー はじめに： インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー
JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法
Dec 17, 2023 pm 12:09 PM
JavaScript と WebSocket を使用してリアルタイム オンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき
WebSocketとJavaScriptを使ったオンライン予約システムの実装方法
Dec 17, 2023 am 09:39 AM
WebSocket と JavaScript を使用してオンライン予約システムを実装する方法 今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。
JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築
Dec 17, 2023 pm 05:13 PM
JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは
コックピット Web UI から管理アクセスを有効にする方法
Mar 20, 2024 pm 06:56 PM
Cockpit は、Linux サーバー用の Web ベースのグラフィカル インターフェイスです。これは主に、初心者/熟練ユーザーにとって Linux サーバーの管理を容易にすることを目的としています。この記事では、Cockpit アクセス モードと、CockpitWebUI から Cockpit への管理アクセスを切り替える方法について説明します。コンテンツ トピック: コックピット エントリ モード 現在のコックピット アクセス モードの確認 CockpitWebUI からコックピットへの管理アクセスを有効にする CockpitWebUI からコックピットへの管理アクセスを無効にする まとめ コックピット エントリ モード コックピットには 2 つのアクセス モードがあります。 制限付きアクセス: これは、コックピット アクセス モードのデフォルトです。このアクセス モードでは、コックピットから Web ユーザーにアクセスできません。
簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法
Jan 05, 2024 pm 06:08 PM
JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用
ウェブってどういう意味ですか
Jan 09, 2024 pm 04:50 PM
Web は、ワールド ワイド ウェブとしても知られるグローバル ワイド エリア ネットワークであり、インターネットのアプリケーション形式です。 Web はハイパーテキストとハイパーメディアに基づいた情報システムであり、ユーザーはハイパーリンクを通じて異なる Web ページ間を移動することにより、情報を閲覧したり入手したりすることができます。 Web の基礎はインターネットであり、統一および標準化されたプロトコルと言語を使用して、異なるコンピューター間でのデータ交換と情報共有を可能にします。
