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

来源：互联网发布：做淘宝美工工资高吗编辑：程序博客网时间：2024/05/22 12:54

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) {//解析为htmlvar 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