이 글은 node.js 블로그 프로젝트 개발과 관련된 단계와 지식 포인트를 요약한 것입니다. 관심 있는 친구들이 참고할 수 있습니다.
설치해야 하는 모듈
body-parser 게시물 요청 구문 분석
cookies 쿠키 읽기 및 쓰기
express 서버 구축
markdown 마크다운 구문 분석 생성기
mongoose 작업 Mongodb 데이터베이스
swig 템플릿 구문 분석 엔진
디렉터리 구조
db 데이터베이스 저장 디렉터리
models 데이터베이스 모델 파일 디렉터리
public 공용 파일 디렉터리(css , js, img)
라우터 라우팅 파일 디렉터리
스키마 데이터베이스 구조 파일
뷰 템플릿 보기 파일 디렉터리
app.js 시작 파일
package.json
app.js 파일
1. 애플리케이션 및 수신 포트 생성
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");
});2. 애플리케이션 템플릿 구성
app.engine('html',swig.renderFile) 매개변수 1을 정의합니다. 템플릿 엔진 이름은 템플릿 파일의 접미사 매개변수이기도 합니다. 2: 템플릿 콘텐츠를 구문 분석하고 처리하는 데 사용되는 방법을 나타냅니다
템플릿 파일이 저장된 디렉터리를 설정합니다. app.set('views','./ views')
등록 사무실 app.set('viewengine','html')
3 템플릿 엔진을 사용하여 파일을 구문 분석합니다
/**
* 读取views目录下的指定文件，解析并返回给客户端
* 参数1：模板文件
* 参数2：给模板传递的参数
*/
res.render('index',{
title:'首页 ',
content: 'hello swig'
});4. 개발 프로세스 중에 템플릿 캐시 제한을 취소해야합니다
API 모듈
swig.setDefaults({
cache: false
});
app.set('view cache', false);For Admins Module admin.js
// 当用户访问的是/public路径下的文件，那么直接返回 app.use('/public',express.static(__dirname + '/public'));
/view 콘텐츠 페이지
api 모듈
/Homepage
/register user 등록/login 사용자 로그인
/comment 댓글 획득/comment/post 댓글 제출
백엔드(관리자) 라우팅 + 템플릿
/백엔드 홈페이지
사용자 관리
/user 사용자 목록
카테고리 관리
/category 카테고리 목록
/category/edit 카테고리 수정/category/delete 카테고리 삭제
글 콘텐츠 관리
/article nei 콘텐츠 목록
/article/add 콘텐츠 추가
/article/delete 콘텐츠 삭제
댓글 콘텐츠 관리
/comment 댓글 목록
/comment/ delete 댓글 삭제
함수 개발 순서
함수 모듈 개발 순서
User
column
content
comments
서비스를 시작하고 데이터베이스의 저장 주소와 포트를 설정합니다.
// 根据不同的功能划分模块 app.use('/',require('./routers/main')); app.use('/admin',require('./routers/admin')); app.use('/api',require('./routers/api'));
var express = require('express');
var router = express.Router();
// 比如访问 /admin/user
router.get('/user',function(req,res,next) {
res.send('User');
});
module.exports = router;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
var mongoose = require('mongoose');
module.exports = new mongoose.Schema({
// 用户名
username:String,
// 密码
password:String
});
변수
{{ 이름 }}
2. 속성
4.for loop
// arr = [1, 2, 3]
{ % for key, val in arr % }
{ { key } } -- { { val } }
{ % endfor % }
이 사용됩니다. 변수를 설정하고 현재 컨텍스트에서 재사용합니다
{% set foo = [ 0, 1, 2, 3, 4, 5] %}
백엔드에서 생성한 HTML 코드를 특정 p에 표시하고 싶을 때, 템플릿이 렌더링될 때 자동으로 인코딩되어
문자열 형식으로 표시됩니다. 다음을 통해 이를 피할 수 있습니다:var mongoose = require('mongoose'); var userSchema = require('../schemas/users'); module.exports = mongoose.model('User',userSchema);
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
