• 2.2-1 文章模块开发 【入口脚本及模板的创建】


    文章模块的开发目录为: ~/blog/user/art/1.0.0

    文章管理主要有3个页面: 文章列表/添加文章/编辑文章

    1.模板

    atm规定,模板文件统一放在版本号下面的views文件夹下面

    因此:

      1.在~/blog/user/art/1.0.0下面创建views文件夹

      2.在views文件夹下创建 list.ejs / add.ejs / edit.ejs 三个文件 

    2.入口文件

    针对这三个模板,我们设定三个入口文件 分别为list.js / add.js / edit.js

    这三个入口文件是将来与研发进行协同工作的一个入口文件,因此atm规定,后台需要用到的入口文件需要放在版本下面的exports文件夹下

    因此:

      1.在~/blog/user/art/1.0.0下面创建exports文件夹

      2.在exports文件夹下创建 list.js / add.js / edit.js 三个文件

    3.查看入口文件构建后的id

    首先我们先对1.0.0模块进行build

    cd ~/blog/user/art/1.0.0

    执行命令  atm build

    然后访问 http://127.0.0.1:1234

    出现

    点击左侧剪头所指位置,

    右侧会出现模板列表和id列表(中括号内为文件id)

    在模板列表下是三个模板的链接

    ps(本地的node环境界面暂时比较丑,后续会继续优化)

    4.在模板中调用入口文件

    以添加文章(add.ejs) (http://127.0.0.1:1234/dev/user/art/1.0.0/views/add) 为例, 代码为

    <% atmjs.use('user/art:1.0.0/add'); %>
    <!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>添加文章页面</title>
        <%- atmjs.loadCss(); %> <!--渲染入口文件依赖的css-->
    </head>
    <body>
    
    <form id="submit-add" action="./datas/submit-add">
        <ul>
            <li><input type="text" id="title" name="title"/></li>
            <li><textarea name="content" id="content" cols="30" rows="10"></textarea></li>
            <li><input type="submit" value="添加文章"/></li>
        </ul>
    </form>
    
    <%- atmjs.loadJs(); %> <!--渲染入口文件依赖的JS相关代码-->
    </body>
    </html>

    那么问题来了,如果过段时间我版本升级了,或者art名称改了,或者user名称改了,那岂不是每个模板里面的入口文件都得改?

    因此,我们这里提供了三个变量占位符($family,$module,$version),注意看add.ejs的访问地址结构/dev/user/art/1.0.0/views/add

    dev是本地的一个构建目标,后面的文档会提到,暂时先不管

    $family会替换成user

    $module会替换成art

    $version会替换成1.0.0

    因此我们可以这样调用入口文件

    <% atmjs.use('$family/$module:$version/add'); %>
    
  • 相关阅读:
    Win10 VMware虚拟机无法打开内核设备“\.Globalvmx86“
    搜索算法总结
    经典排序算法
    Markdown Test
    PAT L2-020 功夫传人【BFS】
    PAT l2-018 多项式A除以多项式B 【多项式+模拟】
    PAT l2-010 排座位 【并查集】
    二叉树的前中后序遍历关系 【非原创】
    PAT L2-005. 集合相似度 【stl set】
    PAT L2-004. 这是二叉搜索树吗?【前序遍历转化为后序遍历】
  • 原文地址:https://www.cnblogs.com/ipliu/p/4648787.html
Copyright © 2020-2023  润新知