Node.js开发 ---- angular + markdown实现CRUD

nodejs

mongodb

angular *1


项目结构



安装中间件

npm install express
npm install mongoose
npm install morgan
npm install body-parser
npm install method-override
npm install markdown
npm install angular-mark


流程图:没有图只有字我太懒了

add----------- post(md格式)---------  服务器解析成html -------- 存入数据库(两个字段:[ text:html格式,mktext: md格式])  
detail--------- get( html格式) -------- angular解析成html
edit------------ get(md格式)---------   post(md格式)--------- 服务器解析成html -------- 存入数据库(两个字段:[ text:html格式,mktext: md格式])  


angular  将md格式转为html
$scope.a =$sce.trustAsHtml(a);

服务器端  将md格式转化为html
a = markdown.toHTML(a);



route/index.js

var Todo = require('./todo');
markdown = require('markdown').markdown;
var markdown = require( "markdown" ).markdown;

module.exports = function(app) {
	//查
	app.get('/api/todos', function(req, res) {	
	
		Todo.find(function(err, todos, txt) {
			if (err)
				res.send(err);
				res.json(todos); 					
		});
	});

	//增
	app.post('/api/todos', function(req, res) {
		//解析为html
		var mktext = markdown.toHTML(req.body.text);	
		
		Todo.create({
			title :req.body.title, //标题
			text : mktext,//html格式文本
			mktext:req.body.text//md格式文本
			
		}, function(err, todo) {		
			if (err)
				res.send(err);
			
			Todo.find(function(err, todos) {
				if (err)
					res.send(err);
				res.json(todos);
				
				 
			});
		});
		
		

	});

	//删
	app.delete('/api/todos/:todo_id', function(req, res) {
		
		Todo.remove({
			_id : req.params.todo_id;//获取参数
		}, function(err, todo) {
			if (err)
				res.send(err);

			Todo.find(function(err, todos) {
				if (err)
					res.send(err)
				res.json(todos);
			});
		});
	});
	
	//改
	app.post('/api/todos/:todo_id', function(req, res) {
		
		var id = req.params.todo_id;//获取参数
		var editmktext = markdown.toHTML(req.body.mktext);//解析文本	
		var updatestr = {'title':  req.body.title ,'text': editmktext ,'mktext': req.body.mktext};
		
		//mongoose更新
		Todo.findByIdAndUpdate(id, updatestr, function(err, todo) {
			if (err)
				res.send(err);

			Todo.find(function(err, todos) {
				if (err)
					res.send(err)
				res.json(todos);
			});
		});
	});
	


	app.get('*', function(req, res) {
		res.sendfile('./public/index.html');
	});
};



public/app.js

var app = angular.module('App', ['ngRoute']);

app.config(function($routeProvider) {
    $routeProvider
    	.when('/', {
    		templateUrl: 'list.html',
            controller: 'listController'
    	})
    	.when('/edit/:id/:_id', {
    		templateUrl: 'edit.html',
            controller: 'editController'
    	})
		.when('/add', {
    		templateUrl: 'add.html',
            controller: 'addController'
    	})
		.when('/detail/:id', {
    		templateUrl: 'detail.html',
            controller: 'detailController'
    	})		
});



app.controller('listController', function($scope, $routeParams) {			
	$scope.pageClass = 'page-list';	
});



app.controller('editController', function($scope, $routeParams ,$http){
	var index = $routeParams.id;
    var vm = this;
    vm.supplierList = {};

    $http.get("/api/todos") .success(function(data) {
         vm.supplierList = data;	 
		 $scope.db = data[index];
		
    });               
});



app.controller('addController', function($scope) {
    $scope.pageClass = 'page-add';
});



app.controller('detailController', ['$scope','$sce', '$routeParams','$http', function ngBindHtmlCtrl($scope, $sce , $routeParams ,$http) { 	
	var index = $routeParams.id;
    var vm = this;
    vm.supplierList = {};	
	
    $http.get("/api/todos") .success(function(data) {
		vm.supplierList = data;	 
		$scope.db = data[index];
		var htmltxt = data[index].text;
		$scope.myHTML =$sce.trustAsHtml(htmltxt);//转html就在这里
				
    });      
}]);





function mainController($scope,$routeParams, $http) {
	$scope.formData = {};
	//select
	$http.get('/api/todos')
		.success(function(data) {
			$scope.todos = data;
	
		})
		.error(function(data) {
			console.log('Error: ' + data);
		});
		

	//add
	$scope.createTodo = function() {
		$http.post('/api/todos', $scope.formData)
			.success(function(data) {
				$scope.formData = {}; 
				$scope.todos = data;
				console.log(data);
				setTimeout(function(){
                    window.location.href = '#/';
                },500);
			})
			.error(function(data) {
				console.log('Error: ' + data);
			});
	};

	// delete
	$scope.deleteTodo = function(id) {
		$http.delete('/api/todos/' + id)
			.success(function(data) {
				$scope.todos = data;
			})
			.error(function(data) {
				console.log('Error: ' + data);
			});
	};
	
	// update	
	$scope.updateTodo = function() {	 
		var id =  $routeParams._id;	
		console.log(id);
		
		$http.post('/api/todos/' + id, $scope.db)
			.success(function(data) {
				$scope.db = {}; 
				$scope.todos = data;
				console.log(data);
				
				setTimeout(function(){
                    window.location.href = '#/';
                },500);
				
			})
			.error(function(data) {
				console.log('Error: ' + data);
			});
	};
}





list.html


edit.html/add.html



detail.html



数据库




完整代码:https://github.com/mmmscheng/dbcrud.git


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值