Express足場プロジェクト
14155 ワード
bフォルダを新規作成し、コマンドウィンドウexpress -e Pro(プロジェクトの名前)足場の構築 ----------->cd pro ---------- npm iインストール依存.
その後npm startはプロジェクトを開始できます.(ここでは、デバイスにexpressとnodeがインストールされているグローバル環境が前提ですよ)
次に、主に足場プロジェクトで生成されたファイルを分析します.
Package.json依存解釈
body-parser httpリクエスト体の解析
cookie-parser クッキーを解析する
debug デバグ情報の出力
ejs javascrip tテンプレートエンジン
morgan コンソールにrequest url情報を表示する
serve-favicon デフォルトリクエストfavicon.icoの問題の解決
binフォルダ
wwwのテキストファイルがあり、主にapp.jsモジュールの受信であり、nodeによってブラウザnegativeにapp.jsモジュールを解析させることができる.
app.js
このファイルには多くのアイテムが使用されている依存が受信され、bin下のwwwに露出しています.最も主要な役割は、ルーティングの受信と使用であり、ページビューと静的ファイルリソースパスの構成もあります.
routers
このフォルダは主にルーティングを書くために使用され、index.jsは主にビューの表示部分のレンダリングページに使用され、user.jsは主にデータ論理処理に使用されます.最終的にapp.jsファイルに露出します.
view
viewフォルダの下にはhtmlページに相当するビューファイルが置かれていますが、expressはejsテンプレートエンジンを使用しています.
コメント:
EJSは簡単で効率的なテンプレート言語で、データとテンプレートを通じてHTMLタグテキストを生成することができます.EJSはJavaScriptライブラリであり、EJSはクライアントとサーバ側で同時に実行でき、クライアントインストールは直接ファイルを導入すればよい、サーバ側はnpmパッケージでインストールejsの特徴(1)クイックコンパイルとレンダリング(2)簡単なテンプレートラベル(3)カスタムタグ区切り記号(4)サポートテキスト含む(5)ブラウザ側とサーバ側(6)テンプレート静的キャッシュ(7)expressビューシステムサポートejs共通タグ(1)フロー制御タグ(2)出力コンテンツタグ(原文出力HTMLタグ)(3)出力タグ(HTMLはブラウザで解析される)(4)コメントタグ(5)%タグをエスケープ(6)導入 pathはあなたが他のテンプレートに導入したパスEgを表します:public
このフォルダの下に置かれているのは静的リソースファイルで、jsファイル、ピクチャ、cssファイルはすべてこのディレクトリの下に置きたいと思っています.app.jsはそのパスに関連して配置されているので、ejsファイルの中で呼び出すと、ルートディレクトリの下のパスを直接書けばいいのです../public/stylesheetなどの書き込みを使わずに、直接/stylesheetの下のファイルでいいです.
以下、この足場を利用して簡単なログイン登録機能を実現します.
まず、viewページでlogin.jsとregister.jsファイルを作成しなければなりません.ここではデータ提出機能も奉納し、ajaxはデータをルーティングに伝え、ルーティング処理をさせます.
この2つのファイルはいずれも悪くなく、機能の実現も悪くない.しかし、この2つのページにジャンプするには、トップページで実行する必要があります.次はindex.ejsのコードです.
usersルーティングにコミットし、/liuyanというミドルウェアにデータの格納をしました.
データベースからデータを取り出し、フロントエンドページに表示し、index.jsルーティングで行い、index.jsフロントエンドルーティングでデータベースに存在するデータを取り出して対応処理し、フロントエンドページに転送する必要があります.フロントエンドページから渡されたデータの表示は、liuyan.ejsが処理し、正常に表示できます.
その後npm startはプロジェクトを開始できます.(ここでは、デバイスにexpressとnodeがインストールされているグローバル環境が前提ですよ)
次に、主に足場プロジェクトで生成されたファイルを分析します.
Package.json依存解釈
body-parser httpリクエスト体の解析
cookie-parser クッキーを解析する
debug デバグ情報の出力
ejs javascrip tテンプレートエンジン
morgan コンソールにrequest url情報を表示する
serve-favicon デフォルトリクエストfavicon.icoの問題の解決
binフォルダ
wwwのテキストファイルがあり、主にapp.jsモジュールの受信であり、nodeによってブラウザnegativeにapp.jsモジュールを解析させることができる.
app.js
このファイルには多くのアイテムが使用されている依存が受信され、bin下のwwwに露出しています.最も主要な役割は、ルーティングの受信と使用であり、ページビューと静的ファイルリソースパスの構成もあります.
routers
このフォルダは主にルーティングを書くために使用され、index.jsは主にビューの表示部分のレンダリングページに使用され、user.jsは主にデータ論理処理に使用されます.最終的にapp.jsファイルに露出します.
view
viewフォルダの下にはhtmlページに相当するビューファイルが置かれていますが、expressはejsテンプレートエンジンを使用しています.
コメント:
EJSは簡単で効率的なテンプレート言語で、データとテンプレートを通じてHTMLタグテキストを生成することができます.EJSはJavaScriptライブラリであり、EJSはクライアントとサーバ側で同時に実行でき、クライアントインストールは直接ファイルを導入すればよい、サーバ側はnpmパッケージでインストールejsの特徴(1)クイックコンパイルとレンダリング(2)簡単なテンプレートラベル(3)カスタムタグ区切り記号(4)サポートテキスト含む(5)ブラウザ側とサーバ側(6)テンプレート静的キャッシュ(7)expressビューシステムサポートejs共通タグ(1)フロー制御タグ(2)出力コンテンツタグ(原文出力HTMLタグ)(3)出力タグ(HTMLはブラウザで解析される)(4)コメントタグ(5)%タグをエスケープ(6)導入 pathはあなたが他のテンプレートに導入したパスEgを表します:public
このフォルダの下に置かれているのは静的リソースファイルで、jsファイル、ピクチャ、cssファイルはすべてこのディレクトリの下に置きたいと思っています.app.jsはそのパスに関連して配置されているので、ejsファイルの中で呼び出すと、ルートディレクトリの下のパスを直接書けばいいのです../public/stylesheetなどの書き込みを使わずに、直接/stylesheetの下のファイルでいいです.
以下、この足場を利用して簡単なログイン登録機能を実現します.
まず、viewページでlogin.jsとregister.jsファイルを作成しなければなりません.ここではデータ提出機能も奉納し、ajaxはデータをルーティングに伝え、ルーティング処理をさせます.
$("#login").click(function(){
$.ajax({
type:"post",
url:"/users/login",
data:{name:$("#user").val(),pass:$("#password").val()},
success:function(data){
if(data==1){
alert(" ");
location.href="/"
}else{
alert(" ")
location.href="/register"
}
}
});
})
$("#register").click(function(){
$.ajax({
type:"post",
url:"/users/register",
data:{name:$("#user").val(),pass:$("#password").val()},
success:function(data){
if(data!=1){
alert(" ");
location.href="/login"
}else{
alert(" ， ")
}
}
});
})
この2つのファイルはいずれも悪くなく、機能の実現も悪くない.しかし、この2つのページにジャンプするには、トップページで実行する必要があります.次はindex.ejsのコードです.
<link rel="stylesheet" type="text/css" href="/stylesheets/style.css"/>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css"/>
<button type="button" class="btn btn-info" onclick="location.href='/login'"> </button>
<button type="button" class="btn btn-danger" onclick="location.href='/register'"> </button>
</code></pre>
<p style="margin-left:0in;"> head.ejs， 。 。 ， location.href ， index.js ， 。head.ejs （ ， ）：</p>
<pre><code>
<title/>
<style type="text/css">
.tit{
height: 40px;
width: 100%;
line-height: 40px;
text-align: center;
background: orange;
font-size: 20px;
}
</style>
<h1 class="tit"> </h1>
</code></pre>
<p style="margin-left:0in;"> ， ， ， mongodb （npm i mongodb@2 -D）. </p>
<pre><code>//users.js
var express = require('express');
var router = express.Router();
//var bodyParser = require("body-parser")
var mongodb = require('mongodb').MongoClient;
var db_str = 'mongodb://localhost:27017/html5';
/* GET users listing. */
router.get('/', function(req, res, next) {
res.send('respond with a resource');
});
//
router.post("/login",(req,res)=>{
// console.log(req.body)
mongodb.connect(db_str,(err,database)=>{
database.collection("user",(err,coll)=>{
coll.find(req.body).toArray((err,data)=>{
// console.log(data)
if(data.length>0){
res.send("1");
// res.end() //express ，
database.close();
}else{
res.send("2");
database.close();
}
})
})
})
})
//
router.post("/register",(req,res)=>{
// console.log(req.body)
mongodb.connect(db_str,(err,database)=>{
database.collection("user",(err,coll)=>{
// coll.find(req.body).toArray((err,data)=>{ // ，
//find ， ， toArray ，
coll.find({name:req.body.name}).toArray((err,data)=>{
if(data.length>0){
//
res.send("1");
database.close();
}else{
coll.insert(req.body,()=>{
res.send("2");
database.close();
})
}
})
})
})
})
module.exports = router;
</code></pre>
<p>users.js post 。 ， ， 1 ； 2 ， 。 ， ， ， 。</p>
<p> ， index.js ， 。 routers index.js ， ， get ， ， get 。</p>
<pre><code>//index.js
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
router.get('/login', function(req, res){
res.render('login', {});
});
router.get('/register', function(req, res){
res.render('register', {});
});
module.exports = router;
</code></pre>
<p> {} ， 。 express 。</p>
<p> ：</p>
<p> ， ， ， 。 session。 ， ， session。 session 。 session ， （npm i express-session -g） (npm i express-session -D)， app.js----- express-session ， 。 app.js ， ：</p>
<pre><code>var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
//
var session = require('express-session');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
// ，
app.use(session({
secret: 'recommend 128 bytes random string',
cookie: { maxAge: 20 * 60 * 1000 },
resave: true,
saveUnintialized: true
}))
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use(function(req, res, next) {
next(createError(404));
});
app.use(function(err, req, res, next) {
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
</code></pre>
<p> ， ， （users.js） ， req.session.name 。</p>
<pre><code>//users.js
//
router.post("/login",(req,res)=>{
mongodb.connect(db_str,(err,database)=>{
database.collection("user",(err,coll)=>{
coll.find(req.body).toArray((err,data)=>{
if(data.length>0){
// session
req.session.name = data[0].name;
res.send("1");
database.close();
}else{
res.send("2");
database.close();
}
})
})
})
})
</code></pre>
<p> index.js req.session.name ， 。</p>
<pre><code>router.get('/', function(req, res, next) {
res.render('index', {title:'Express',name:req.session.name});
});</code></pre>
<p> name， 。 ( session)， ， ， ， ， ， 。</p>
<pre><code> //index.ejs
<h1> ：</h1>
<button type="button" class="btn btn-danger" onclick="location.href='/relogin'"> </button>
<button type="button" class="btn btn-primary" onclick="location.href='/liuyan'"> </button>
<button type="button" class="btn btn-info" onclick="location.href='/login'"> </button>
<button type="button" class="btn btn-danger" onclick="location.href='/register'"> </button>
</code></pre>
<p> ， ， session</p>
<pre><code>//index.js
router.get('/relogin', function(req, res){
req.session.destroy((err,data)=>{
if(err){
console.log(err)
}else{
res.redirect("/")
}
})
});</code></pre>
<p> session ， <span>req.session.username = undefined; ， req.session.destroy(function(err){ if(err){ console.log(err) }else{ res.redirect("/") } ， 。 ， res.redirect("/") 。</span></p>
<p><span> ， liuyan.ejs view ， ， table 。</span></p>
<pre><code>//liuyan.ejs
<title>
$("#liuyan").click(function(){
$.ajax({
type:"post",
url:"/users/liuyan",
data:{title:$("#title").val(),con:$("#con").val()},
success:function(data){
if(data==1){
alert(" ");
location.href = "/liuyan"
}else{
alert(" ")
}
}
});
})
usersルーティングにコミットし、/liuyanというミドルウェアにデータの格納をしました.
//users.js
//
router.post("/liuyan",(req,res)=>{
// console.log(req.body)
mongodb.connect(db_str,(err,database)=>{
database.collection("liuyan",(err,coll)=>{
coll.insert(req.body,(err,data)=>{
res.send("1");
database.close();
})
})
})
})データベースからデータを取り出し、フロントエンドページに表示し、index.jsルーティングで行い、index.jsフロントエンドルーティングでデータベースに存在するデータを取り出して対応処理し、フロントエンドページに転送する必要があります.フロントエンドページから渡されたデータの表示は、liuyan.ejsが処理し、正常に表示できます.
//index.js
//
var mongodb = require("mongodb").MongoClient;
var db_str = "mongodb://localhost:27017/html5";
router.get("/liuyan",(req,res)=>{
mongodb.connect(db_str,(err,database)=>{
database.collection("liuyan",(err,coll)=>{
//
coll.find({}).sort({_id:-1}).toArray((err,data)=>{
//
res.render("liuyan",{list:data})
})
})
})
})