javascript - 如何在数据库中为特定用户保存动态 html 代码

标签 javascript jquery html angularjs mongodb

我有 javascript 代码，其工作方式与这个 fiddle 非常相似:http://jsfiddle.net/nj4N4/7/

在我的页面上它看起来像这样:image 。 当您单击“添加年份”按钮时，会在上一年上方弹出一个看起来像“year2”的表格。

我现在希望将其保存在数据库中，以便当您更新页面时，登录的特定用户仍然具有与他/她更新网站(或注销)之前相同的年数。我的问题是如何做到这一点以及从哪里开始。我正在使用平均堆栈(mongodb、node、express、Angular)。

我创建了一个名为年份的数据库，当您单击“添加年份”按钮时，它会在该数据库中添加一个新的年份，但目前它只有一个 ID。这是代码:

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);
        });
}

服务/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;

}

如果代码太多，我很抱歉，但由于我不知道从哪里开始或如何执行此操作，我也不知道哪些代码相关。

最佳答案

好吧，你需要以 Angular 的方式分离关注点。
看来您只利用了 Angular 的 $http 资源请求，您可以轻松生成整个表格。

您应该拥有的目标是构建一个嵌套数组对象(我们称之为模型)，该对象将保存每年的数据，这些数据可以轻松转换为 JSON 或返回为 javascript 对象。

可以容纳您需要的所有信息的结构。有了这样的模型，您就可以开始构建视觉元素了。基于这个模型。要再添加一年，您只需将变量数组推送到该模型上，您的表格和视觉元素就会通过 ng-repeat 和 ng-model 指令自动更新。

由于操作模型要容易得多，您可以专注于视觉元素和样式，而不是试图记住是否复制了所有表格元素或者是否缺少会破坏页面的标签。

最后，可以在 $http 资源请求中直接使用这样的模型，无需进行任何转换即可更新数据库。 JSON 转换会自动发生。

您不需要 YearService、year.service、createyear 延迟回调或大量 javascript add_fields 函数。

您可以将整个应用程序简化为两个文件:index.html 和 app.js。 将获取数据保存在主应用程序 Controller 中作为 $scope 函数，可以直接从页面上的按钮调用。

摆脱服务和工厂，只需编写一个函数 saveModel()；和 getModel();并添加年份 addYear() 来操作模型。

最后，在您的 html 正文中，您只需要一张包含一行标题的表格，并且这些行是从 ng-repeat 生成的。用一个代表年份的 div 包裹此表，您还可以在年份顶级数组上重复重复该年份。

你的数组看起来像这样:

[ "2000" : [{ course : "code", coursename : "webprog", block : "1"},
            { course : "code1", coursename : "webprog1", block : "2"}],
"2001" : [{ course : "code", coursename : "webprog", block : "1"},
            { course : "code1", coursename : "webprog1", block : "2"}]
]

关于javascript - 如何在数据库中为特定用户保存动态 html 代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37301316/

上一篇：javascript - AngularJS ng-switch 或类似的工具来处理动态值

下一篇：javascript - 如何使用密码检测网络中的连接状态？

相关文章：

javascript - 使用 Highcharts 修正图 TableView

javascript - 在 php 循环中写入 javascript 数组时如何将新行转换为实际\n

javascript - innerWidth 在手机上没有得到正确的宽度

jquery - 将商品添加到购物车 jquery 函数

javascript - 滚动动画结合 snap.js

javascript - 如何在单击下一步按钮时一一显示数组的元素？

javascript - 如何获取 PHP 脚本来删除 JSON 文件中的对象？

javascript - JQuery DataTables 和 ColVis 插件错误 "Cannot read property ' sWidth' of undefined"

php - 当用户单击链接时，我想解压缩文件然后打开它

javascript - 用javascript计算订单上的数量和总数

©2024 IT工具网  联系我们