yu106761 / node

node+mongdb搭建博客

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

node+mongdb搭建博客

这是一个开源的个人博客系统。

个人纯碎为了练习nodejs而做出来的一个博客,从项目搭建开始我会用Express 应用程序生成器来搭建

技术选型:

  • 前端使用:  ejs模板
  • 后端使用: node.js
  • 数据库选择使用:  MongoDB

功能

  • 登入,注册功能
  • 用户管理功能
    • 用户列表
  • 分类管理功能
    • 分类列表
      • 修改分类
      • 删除分类
    • 添加分类
  • 内容管理功能
    • 内容列表
      • 修改内容
      • 删除内容
    • 添加内容
  • 评论功能

目录结构

  • data——————数据库文件夹
  • models——————封装了对数据库的接口
    • Category----封装了对分类操作的接口
    • Centent----封装了对内容操作的接口
    • User----封装了对用户操作的接口
  • node_modules——————项目依赖包
  • public——————静态资源目录
    • css
    • js
    • image
  • routers——————路由目录
    • admin.js----后台逻辑
    • api.js----登入注册逻辑
    • main.js----前台逻辑
  • schemas——————封装了对数据库的表结构
    • Category----封装了对分类表结构
    • Centent----封装了对内容表结构
    • User----封装了对用户表结构
  • views——————模板目录
    • admin----后台模板
    • main----前台模板
  • app.js——————入口文件
  • package.json——————文件依赖包
  • package-lock.json——————文件依赖包

用Express搭建项目

1.安装node.js
		去nodejs官网下载最新版本就行,网址:http://nodejs.cn/download/ ,点击自己适用的系统,自动下载跟电脑操作系统位数符合的安装包,下载下来安装包之后一路next就行,nodejs安装路径不一定要使用默认的
		node -v 查看是否安装成功
		
2.安装npm
		npm install npm -g
		npm -v 查看是否安装成功
		
项目初始化---Express 应用程序生成器(这次我用Express)
		初始化项目
		npm init
		命令创建了一个名称为 myapp 的 Express 应用。此应用将在当前目录下的 myapp 目录中创建,并且设置为使用 ejs 模板引擎
		express --view=ejs myapp
		然后安装所有依赖包:
		cd myapp
		npm install
		通过如下命令启动此应用
		npm start
		然后在浏览器中打开 http://localhost:3000/ 网址就可以看到这个应用了。
		通过 Express 应用生成器创建应用只是众多方法中的一种。你可以不使用它,也可以修改它让它符合你的需求
		
			├── app.js
			├── bin
			│   └── www
			├── package.json
			├── public
			│   ├── images
			│   ├── javascripts
			│   └── stylesheets
			│       └── style.css
			├── routes
			│   ├── index.js
			│   └── users.js
			└── views
    			├── error.ejs
    			├── index.ejs
    			└── layout.ejs
		
设置index.ejs模板为index.html还有设置public
			app.set('views', path.join(__dirname, 'views'));
			// app.set('view engine', 'ejs');
			var ejs = require('ejs');  //引入的ejs插件
			app.engine('html', ejs.__express);//设置html引擎
			app.set('view engine', 'html');//设置视图引擎
			app.use('/public', express.static(__dirname + '/public')); //静态文件
		
安装mongoose
			npm install mongoose
		
安装mongoose之后引入数据库,以及启动

以下代码在app.js输入

		var mongoose = require('mongoose'); 
		mongoose.connect('mongodb://localhost:27018/blog', {
    			useNewUrlParser: true
			}, function (err) {
	    			if (err) {
        				console.log('数据库连接失败!!!');
    				} else {
       	 				console.log('数据库连接成功!!!');
        				app.listen(3000);
    				}
			})
		

在命令行里输入 mongod --dbpath=""(数据库存放的地方,我这里是F:\node\node_blog\myapp\db) --port="1314"(端口号)

可视化工具 Robo 3T 地址 https://robomongo.org/

注册

安装body-parser,作用:解析中间件解析 post get 请求---body-parser设置(app.js)
				npm install body-parser
				app.use(bodyParser.urlencoded({extended: true}));
			
在models文件夹下创建user.js---封装接口
				var mongoose = require('mongoose');
				var userSchema = require('../schemas/user');
				module.exports=mongoose.model('user',userSchema);
			

在schemas文件夹下创建user.js---定义用户表结构

				var mongoose = require('mongoose');
				//用户表结构
				module.exports =  new  mongoose.Schema({
    					//用户名
    					username:String,
    					//密码
    					password:String,
    					//是否为管理员用户
    					isAdmin:{
        					type:Boolean,
        					default:false
    						}
				})
			

在api.js里写注册逻辑(api.js记得引入保存用户的数据库)

Ajax请求
			$('#registered').on('click', function () {
        			$.ajax({
            				type: 'post',
            				url: '/api/user/register',
            				data: {
                				username: $(".register-wrap").find("[name='username']").val(),
                				password: $(".register-wrap").find("[name='password']").val(),
                				repassword: $(".register-wrap").find("[name='repassword']").val(),
            				},
            				dataType: 'json',
            				success: function (result) {
                				$(".register-wrap").find('.colWarning').html(result.message); //注册确定信息
                				// if (!result.code) {} 
            					}
        				})
    				})
			
登陆
				//引入cookies
					npm install cookies
				//app.js 设置
					var cookies = require('cookies');
					app.use(function (req, res, next) {
						  req.cookies = new cookies(req, res);
						  req.userInfo = {};
						  if (req.cookies.get('userInfo')) {
						    try {
						      req.userInfo = JSON.parse(req.cookies.get('userInfo'));
						      //获取当前用户是否为管理员
						      User.findById(req.userInfo._id).then(function (userInfo) {
							req.userInfo.isAdmin = Boolean(userInfo.isAdmin);
							next();
						      })
						    } catch (e) {
						      next();
						    }
						  } else {
						    next();
						  }
						})
				// 登陆ajax请求
					$("#login").on("click", function () {
					    $.ajax({
						type: 'post',
						url: '/api/user/login',
						data: {
						    username: $(".login-wrap").find("[name='username']").val(),
						    password: $(".login-wrap").find("[name='password']").val(),
						},
						dataType: 'json',
						success: function (result) {
						    $(".login-wrap").find('.colWarning').html(result.message); //登入确定信息
						    if (!result.code) {
							$(".login-wrap").hide();
							$(".login-success").show();
							setTimeout(function () {
							    window.location.reload(); //刷新页面
							}, 1000);
						    }
						}
					    })
					})
				//登陆逻辑在api.js里
				
退出
					//退出
					//ajaxget请求
					$('.login_del').on('click', function () {
					    $.ajax({
						url: 'api/user/logout',
						success: function (result) {
						    if (!result.code) {
							window.location.reload(); //刷新页面
						    }   
						}
					    })
					});
					//api.js退出逻辑
					router.get("/user/logout", function (req, res, next) {
					    req.cookies.set('userInfo', null);
					    res.json(responseData);
					})
					//
					//页面显示已登陆还是未登陆可以用ejs模板语句if判断来设定
					//if(!userInfo._id)判断当前是否有用户id来显示
					//
				

About

node+mongdb搭建博客


Languages

Language:JavaScript 45.8%Language:HTML 42.0%Language:CSS 12.2%