この記事は、node.js ブログプロジェクト開発に関連する手順と知識ポイントをまとめたもので、興味のある友人は参照してください。
インストールが必要なモジュール
body-parser 投稿リクエストの解析
cookie cookieの読み書き
express サーバーの構築
markdown マークダウン構文発電機
mongoose操作 Mongodbデータベース
swigテンプレート解析エンジン
ディレクトリ構造
dbデータベース格納ディレクトリ
modelsデータベース モデルファイルディレクトリ
public パブリックファイルディレクトリ (css) 、js、img)
ルーター ルーティング ファイル ディレクトリ
スキーマ データベース構造ファイル
ビュー テンプレート ビュー ファイル ディレクトリ
app.js 起動ファイル
package.json
app.js ファイル
1. アプリケーションとリスニング ポートを作成します
2. アプリケーション テンプレートを設定します
4.開発プロセス中にテンプレートのキャッシュ制限を解除するために必要です
const app = express();
app.get('/',(req,res,next) => {
res.send("Hello World !");
});
app.listen(3000,(req,res,next) => {
console.log("app is running at port 3000");
});5. 静的ファイルホスティングを設定します
/**
* 读取views目录下的指定文件，解析并返回给客户端
* 参数1：模板文件
* 参数2：给模板传递的参数
*/
res.render('index',{
title:'首页 ',
content: 'hello swig'
});モジュールを分割します
フロントエンドモジュール
戻るエンドモジュール
APIモジュール
swig.setDefaults({
cache: false
});
app.set('view cache', false);管理者用モジュール admin.js
// 当用户访问的是/public路径下的文件，那么直接返回 app.use('/public',express.static(__dirname + '/public'));
メインモジュール
/ホームページ/コンテンツ ページを表示
/ログインユーザーログイン/コメントコメント取得/コメント/コメントサブミッションバックエンド（管理者）ルーティング +テンプレート
homepage
/バックエンドホームページ
/user ユーザーリスト
/category カテゴリリスト
/category/add カテゴリ追加/category/edit カテゴリ変更
/category/delete カテゴリ削除
記事内容管理
/article nei content list
/article/edit コンテンツ変更
/article/delete コンテンツ削除
コメント内容管理
/comment コメント一覧
/comment/削除 コメント削除
関数開発シーケンス
機能モジュール開発シーケンス
ユーザー
コラム
コンテンツ
サービスを開始し、データベースのストレージアドレスとポートを設定します
// 根据不同的功能划分模块 app.use('/',require('./routers/main')); app.use('/admin',require('./routers/admin')); app.use('/api',require('./routers/api'));
スキーマフォルダー下のユーザーデータテーブル(users.js)の場合:
var express = require('express');
var router = express.Router();
// 比如访问 /admin/user
router.get('/user',function(req,res,next) {
res.send('User');
});
module.exports = router;models ディレクトリに user.js モデル クラスを作成します
var mongoose = require('mongoose');
// 数据库链接
mongoose.connect("mongodb://localhost:27017/blog",(err) => {
if(err){
console.log("数据库连接失败");
}else{
console.log("数据库连接成功");
// 启动服务器，监听端口
app.listen(3000,(req,res,next) => {
console.log("app is running at port 3000");
});
}
});ユーザー登録の処理
フロントエンドは、ajax を通じてユーザー名とパスワードを送信します
url: /api/register フロントエンド提出のバックエンドデータ分析（POST） 変数 {{ name }}2. 属性
3. if 判定
{ % if name === 'Guo Jing' % }
こんにちは Jing 兄弟
{ % endif % }
4.forloop
// arr = [1, 2, 3]
{ { key } } -- { { val } }
{ % endfor % }5.set コマンド{% include 'page.html' %} // にテンプレートを含めます現在の場所
{% block main %} xxx {% endblock %} // あるブロックを書き換える
あるpでバックエンドが生成したHTMLコードを表示したいとき、テンプレートがレンダリングされるときに自動的にエンコードされ、
文字列の形式で表示されます。これは次の方法で回避できます:
var mongoose = require('mongoose');
module.exports = new mongoose.Schema({
// 用户名
username:String,
// 密码
password:String
});ユーザー管理とページネーション
CRUD用户数据
const User = require('../models/user');
// 查询所有的用户数据
User.find().then(function(users){
});
// 根据某一字段查询数据
User.findOne({
username:username
}).then(function(result){
});
// 根据用户ID查询数据
User.findById(id).then(function(user){
});
// 根据ID删除数据
User.remove({
_id: id
}).then(function(){
});
// 修改数据
User.update({
_id: id
},{
username: name
}).then(function(){
});数据分页管理
两个重要方法
limit(Number): 限制获取的数据条数
skip(Number): 忽略数据的条数 前number条
忽略条数：（当前页 - 1） * 每页显示的条数
// 接收传过来的page
let query_page = Number(req.query.page) || 1;
query_page = Math.max(query_page, 1); // 限制最小为1
query_page = Math.min(Math.ceil(count / limit), query_page); // 限制最大值 count/limit向上取整
var cur_page = query_page; // 当前页
var limit = 10; // 每页显示的条数
var skip = (cur_page - 1) * limit; //忽略的条数
User.find().limit(limit).skip(skip).then(function(users){
...
// 将当前页 page 传给页面
// 将最大页码 maxPage 传给页面
});文章的表结构
// 对于content.js
var mongoose = require('mongoose');
var contentSch = require('../schemas/contentSch');
module.exports = mongoose.model('Content',contentSch);
// contentSch.js
module.exports = new mongoose.Schema({
// 关联字段 - 分类的id
category:{
// 类型
type:mongoose.Schema.Types.ObjectId,
// 引用
ref:'Category'
},
// 内容标题
title: String,
// 简介
description:{
type: String,
default: ''
},
// 内容
content:{
type:String,
default:''
}
});
// 文章查询时关联category字段
Content.find().populate('category').then(contents => {
// 那么通过这样的方式，我们就可以找到Content表中的
// 关联信息 content.category.category_name
});MarkDown语法高亮
在HTML中直接使用
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script src="https://cdn.bootcss.com/marked/0.3.17/marked.min.js"></script>
// marked相关配置
marked.setOptions({
renderer: new marked.Renderer(),
gfm: true,
tables: true,
breaks: false,
pedantic: false,
sanitize: true,
smartLists: true,
smartypants: false,
highlight: function (code) {
return hljs.highlightAuto(code).value;
}
});
// MarkDown语法解析内容预览
$('#bjw-content').on('keyup blur', function () {
$('#bjw-previous').html(marked($('#bjw-content').val()));
});node环境中使用
// 在模板页面引入默认样式
<!--语法高亮-->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
const marked = require('marked');
const hljs = require('highlight.js');
// marked相关配置
marked.setOptions({
renderer: new marked.Renderer(),
gfm: true,
tables: true,
breaks: false,
pedantic: false,
sanitize: true,
smartLists: true,
smartypants: false,
highlight: function (code) {
return hljs.highlightAuto(code).value;
}
});
// 对内容进行markdown语法转换
data.article_content_html = marked(article.content);使文本域支持Tab缩进
$('#bjw-content').on('keydown',function(e){
if(e.keyCode === 9){ // Tab键
var position = this.selectionStart + 2; // Tab === 俩空格
this.value = this.value.substr(0,this.selectionStart) + " " + this.value.substr(this.selectionStart);
this.selectionStart = position;
this.selectionEnd = position;
this.focus();
e.preventDefault();
}
});layer 弹框
// 显示弹框
function showDialog(text, icon, callback) {
layer.open({
time: 1500,
anim: 4,
offset: 't',
icon: icon,
content: text,
btn: false,
title: false,
closeBtn: 0,
end: function () {
callback && callback();
}
});
});随机用户头像生成
// 引入对应的库 const crypto = require('crypto'); const identicon = require('identicon.js'); // 当用户注册时，根据用户的用户名生成随机头像 let hash = crypto.createHash('md5'); hash.update(username); let imgData = new identicon(hash.digest('hex').toString()); let imgUrl = 'data:/image/png;base64,'+imgData;
orm表单提交的小问题
当使用form表单提交一些代码的时候，会出现浏览器拦截的现象，原因是：浏览器误以为客户进行xss攻击。所以呢解决这个问题也很简单，就是对提交的内容进行base64或者其他形式的编码，在服务器端进行解码，即可解决。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
以上がNode.js ブログ プロジェクト開発ノートの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
