0
dynamische HTML-Code in der Datenbank speichern ich Javascript-Code haben, die viel wie diese Geige funktioniert: http://jsfiddle.net/nj4N4/7/Wie für bestimmte Benutzer
Auf meiner Seite sieht es wie folgt aus: image. Wenn Sie auf die Schaltfläche "Jahr hinzufügen" klicken, erscheint eine Tabelle, die wie Jahr2 aussieht, höher als das vorherige Jahr.
Ich möchte jetzt, dass dies in der Datenbank gespeichert wird, also wenn Sie die Seite aktualisieren, hat der bestimmte Benutzer, der angemeldet ist, immer noch die gleiche Anzahl von Jahren wie zuvor aktualisiert die Seite (oder abgemeldet). Meine Frage ist, wie ich das machen könnte und wo ich anfangen soll. Ich benutze den mittleren Stapel (Mongodb, Node, Express, Angular).
Ich habe eine Datenbank namens Jahr erstellt und wenn Sie auf die Schaltfläche "ein Jahr hinzufügen" klicken, fügt sie ein neues Jahr in diese Datenbank ein, aber es hat nur eine ID für jetzt. Dies ist der Code:
HTML:
<div class="row">
<button class="btn btn-default addyear" ng-click="vm.addYear();" onclick="add_fields();">Add a year</button><br><br><br>
<div class="row" >
<div id="year6"></div>
<div id="year5"></div>
<div id="year4"></div>
<div id="year3"></div>
<div id="year2"></div>
<div class="panel panel-default" >
<div class="panel-heading "><B> YEAR 1</B>
<a href="#" class= "show" id="hide" >Show less</a>
</div>
<div class="panel-body hideyear1 " >
<div class="col-xs-6">
<table class="table table-striped">
<tr >
<td><b>Course code</b></td>
<td><b>Course name</b></td>
<td><b>Block</b></td>
<td><b>Level</b></td>
<td><b>HP</b></td>
</tr>
<tr>
<td>TDDD27</td>
<td>Webprog</td>
<td>1</td>
<td>A</td>
<td>6</td>
</tr>
<tr>
<td>TEIE06</td>
<td>IFP</td>
<td>4</td>
<td>A</td>
<td>6</td>
</tr>
</table>
</div>
<div class="col-xs-6">
<table class="table table-striped">
<tr>
<td><b>Course code</b></td>
<td><b>Course name</b></td>
<td><b>Block</b></td>
<td><b>Level</b></td>
<td><b>HP</b></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
JavaScript:
<script>
var year = 1;
var limit = 7;
function add_fields() {
year++;
if (year == limit) {
exit;
}
else {
var newdiv = document.createElement('div');
if(year==2) {
newdiv.innerHTML = '<div class="panel panel-default" ><div class="panel-heading "><B>YEAR ' +year+'</B> <a href="#" class= "show" id="hide">Show less</a> </div> <div class="panel-body hideyear1 "> <div class="col-xs-6"> <table class="table table-striped"> <tr > <td><b>Course code</b></td> <td><b>Course name</b></td> <td><b>Block</b></td> <td><b>Level</b></td> <td><b>HP</b></td> </tr> </table> </div> <div class="col-xs-6"> <table class="table table-striped"> <tr> <td><b>Course code</b></td> <td><b>Course name</b></td> <td><b>Block</b></td> <td><b>Level</b></td> <td><b>HP</b></td> </tr> </table> </div> </div> </div> </div> </div> ';;
document.getElementById('year2').appendChild(newdiv);
}
if(year==3) {
newdiv.innerHTML = '<div class="panel panel-default" ><div class="panel-heading "><B>YEAR ' +year+'</B> <a href="#" class= "show" id="hide" >Show less</a> </div> <div class="panel-body hideyear1 " > <div class="col-xs-6"> <table class="table table-striped"> <tr > <td><b>Course code</b></td> <td><b>Course name</b></td> <td><b>Block</b></td> <td><b>Level</b></td> <td><b>HP</b></td> </tr></table> </div> <div class="col-xs-6"> <table class="table table-striped"> <tr> <td><b>Course code</b></td> <td><b>Course name</b></td> <td><b>Block</b></td> <td><b>Level</b></td> <td><b>HP</b></td> </tr> </table> </div> </div> </div> </div> </div> ';;
document.getElementById('year3').appendChild(newdiv);
}
if(year==4) {
newdiv.innerHTML = '<div class="panel panel-default" ><div class="panel-heading "><B>YEAR ' +year+'</B> <a href="#" class= "show" id="hide" >Show less</a> </div> <div class="panel-body hideyear1 " > <div class="col-xs-6"> <table class="table table-striped"> <tr > <td><b>Course code</b></td> <td><b>Course name</b></td> <td><b>Block</b></td> <td><b>Level</b></td> <td><b>HP</b></td> </tr> </table> </div> <div class="col-xs-6"> <table class="table table-striped"> <tr> <td><b>Course code</b></td> <td><b>Course name</b></td> <td><b>Block</b></td> <td><b>Level</b></td> <td><b>HP</b></td> </tr> </table> </div> </div> </div> </div> </div> ';;
document.getElementById('year4').appendChild(newdiv);
}
if(year==5) {
newdiv.innerHTML = '<div class="panel panel-default" ><div class="panel-heading "><B>YEAR ' +year+'</B> <a href="#" class= "show" id="hide" >Show less</a> </div> <div class="panel-body hideyear1 " > <div class="col-xs-6"> <table class="table table-striped"> <tr > <td><b>Course code</b></td> <td><b>Course name</b></td> <td><b>Block</b></td> <td><b>Level</b></td> <td><b>HP</b></td> </tr> <tr> </table> </div> <div class="col-xs-6"> <table class="table table-striped"> <tr> <td><b>Course code</b></td> <td><b>Course name</b></td> <td><b>Block</b></td> <td><b>Level</b></td> <td><b>HP</b></td> </tr> </table> </div> </div> </div> </div> </div> ';;
document.getElementById('year5').appendChild(newdiv);
}
if(year==6) {
newdiv.innerHTML = '<div class="panel panel-default" ><div class="panel-heading "><B>YEAR ' +year+'</B> <a href="#" class= "show" id="hide" >Show less</a> </div> <div class="panel-body hideyear1 "> <div class="col-xs-6"> <table class="table table-striped"> <tr > <td><b>Course code</b></td> <td><b>Course name</b></td> <td><b>Block</b></td> <td><b>Level</b></td> <td><b>HP</b></td> </tr> <tr> </table> </div> <div class="col-xs-6"> <table class="table table-striped"> <tr> <td><b>Course code</b></td> <td><b>Course name</b></td> <td><b>Block</b></td> <td><b>Level</b></td> <td><b>HP</b></td> </tr> </table> </div> </div> </div> </div> </div> ';;
document.getElementById('year6').appendChild(newdiv);
$(".addyear").hide();
index.controller:
(function() {
'use strict';
angular
.module('app')
.controller('Home.IndexController', Controller);
function Controller(UserService, YearService, FlashService) {
var vm = this;
vm.user = null;
vm.addYear = addYear;
initController();
function initController() {
UserService.GetCurrent().then(function (user) {
vm.user = user;
});
}
function addYear() {
YearService.Create()
.then(function() {
FlashService.Success('Year saved!');
})
.catch(function (error) {
FlashService.Error(error);
});
}
}
})();
year.service.js
(function() {
'use strict';
angular
.module('app')
.factory('YearService', Service);
function Service($http, $q){
var service = {};
service.Create = Create;
return service;
function Create() {
return $http.post('/api/year').then(handleSuccess, handleError);
}
api/year.controller
var YearService = require('services/year.service');
router.post('/', createYear);
module.exports = router;
function createYear(req, res){
YearService.create(req.body)
.then(function(){
res.sendStatus(200);
})
.catch(function(err) {
res.status(400).send(err);
});
}
services/year.service
var db = mongo.db(connectionString, { native_parser: true });
db.bind('years');
var service = {};
service.create = create;
module.exports = service;
function create(yearParam) {
var deferred = Q.defer();
createYear();
function createYear() {
var year = yearParam;
db.years.insert(
year,
function (err, doc) {
if (err) deferred.reject(err);
deferred.resolve();
});
}
return deferred.promise;
}
Es tut mir leid, wenn dies zu viel Code, aber da ich nicht wissen, wo ich anfangen soll oder wie ich das mache, ich weiß auch nicht, welcher Code relevant ist.