前后端分离串数组？ 前后端分离技术栈？

前端模板引擎之mustache手写实现

1、模板引擎是将数据按照特定方式转化为视图（HTML）的技术。以 Mustache 为例，它是一款轻逻辑的前端模板引擎，允许处理 HTML、配置文件和源代码。Mustache 的语法简洁，使用 {{ 和 }} 作为标记，仅包含占位符来表示动态数据，不包含如 if、else 和 for 循环等逻辑结构。

2、Mustache是一种轻量级但强大的模板引擎，专为高效地将数据融入文本输出而生。其主要特点和优势如下：设计理念简洁直观：Mustache的设计理念强调简洁与直观，使得开发者能够轻松地将数据与文本模板相结合。

3、前端模板引擎有很多种，其中一些比较流行的有：Handlebars、EJS、Pug、JinjaMustache等。这些模板引擎都有各自的特点和优缺点，你可以根据自己的需求选择适合自己的模板引擎。如果你想要一个轻量级的模板引擎，可以考虑使用Handlebars。Handlebars是一个JavaScript模板引擎，它可以让你在HTML中插入javaScript代码。

4、Mustache 是一种轻量级模板引擎，适用于多种编程语言，包括 JavaScript、Python、Ruby、Java 等。它的核心在于将变量插入到模板中，生成最终文本输出。模板语法使用双大括号{{}}包裹变量或表达式，表示变量的占位符。创建模板字符串，包含变量占位符。通过数据传递给引擎，引擎替换占位符，生成最终输出。

5、Handlebars 是一个基于 JavaScript 的高效模板引擎，它允许开发者轻松地编写语义化的模板，实现 web 前端视图与代码的分离。Handlebars 是 Mustache 模板引擎的扩展，其核心功能是将 UI 与业务逻辑代码分离，减少两者之间的耦合。使用 Handlebars，前端团队只需修改模板文件即可调整 HTML 结构与内容。

6、在mustache模板文件中，通过使用{{x-custom-property}}引用自定义属性。示例代码：{{#operations}} {{#x-custom-property}} // custom property： {{x-custom-property}} {{/x-custom-property}} {{/operations}} 此代码段展示了如何使用属性生成代码，mustache引擎会自动替换为实际定义的值。

课程开发的三个阶段

课程开发的阶段 组建校本课程开发队伍 校本课程开发队伍应包括学校内部人员与学校外部人员。情境和需要分析 只有对各种校内外的情境和需要进行科学、充分的了解和分析，才能开发出适合本学校的课程。拟定目标 应先明确学校的教育目标，这样才能为校本课程的建设与发展指明方向和提供依据。

课程研制是一个全面的过程，它涵盖了规划、执行和评估三个关键阶段，形成一个循环周期，不断推动课程的演变与改革。首先，进入课程规划阶段（planning）。在这个阶段，课程开发者，包括教师，负责制定教学决策，设计教学计划，包括制定课程计划（教学大纲）和教材编制，旨在明确教学目标和路径。

关于课程开发的四个环节如下：一，制定项目计划 根据教育机构选定课程，提出课程开发立项申请，其中包括课程开发目的及可行性分析。待确认后，制定项目计划，其中包括课程开发组织结构、开发阶段及进度安排等。培训是要来处理问题的，任何一堂课程都需占用培训师、管理者和员工非常多时间。

如何使用mockjs模拟后端数据

使用mockjs可以事先模拟数据，前提是和后端约定好了数据接口，怎样的数据。使用mock就可以生成你要的数据了，从而实现开发时前后端分离。其主要功能是：基于数据模板生成模拟数据。基于HTML模板生成模拟数据。拦截并模拟 Ajax 请求。

首先，确保在项目中设置好mock环境。在src目录下创建mock目录，内部分别有mock/index.js和mock/modules，其中modules下创建如user.js，负责处理特定接口的请求和数据返回，以实现模块化。index.js负责收集并导出这些模块，增强代码的解耦性。

在页面中测试请求时，我们需要在main中引用mock。在页面中引入axiOS并注册事件，发送请求。点击测试按钮后，发现仍然请求了接口。原来我们在前面少了一个步骤，需要在main中引用mock。再次尝试，成功后我们就可以在没有后端接口的情况下进行前端开发，通过mock.js生成模拟数据进行接口调试。

Mock.js在Vue中的使用步骤 定义接口路由，返回模拟数据。在vue.config.js中配置devServer并引入接口路由函数。在APP.vue中使用axios调用接口获取数据。如何控制Mock接口的开关 创建.env.development文件，定义环境变量MOCK。在index.js中根据MOCK环境变量的值决定是否使用mock。参考视频教程。

快速对接API：在产品经理制定需求后，前后端团队可通过 API 文档并行开发。利用 Mock 技术，在开发环境中内置 Mock，拦截请求并模拟真实API响应。若公司使用接口管理平台，可利用该平台生成 Mock API 以实现快速对接。提供测试数据：Mock 技术能够替代难以控制的真实数据，为测试提供准确、可控的数据集。

Mockjs：模拟数据生成器，通过随机数据，模拟各种场景。方便前端在没有后端接口的情况，开发环境也能进行接口数据对接。说明 前段时间，开源了一个React中后台项目arco-admin-template，其中使用到了Mockjs，看了很多案例都是介绍开发环境中的使用，关于生产环境中使用注意事项较少。所以决定将两个场景结合写一篇案例分享。

Webpack如何实现持久化缓存

1、hash 文件名是实现持久化缓存的第一步，目前 webpack 有两种计算 hash 的方式（[hash] 和 [chunkhash]）hash 代表每次 webpack 在编译的过程中会生成唯一的 hash 值，在项目中任何一个文件改动后就会被重新创建，然后 webpack 计算新的 hash 值。

2、前后端分离的思想要转变 不能老是按照传统WEB（ js/h5/css/ 后端代码放在一个工程）开发思维去看待前后端分离 沟通成本问题 以前传统 WEB 开发，开发人员从需求到设计到开发基本上是一个人。

3、在保证速度的前提下，考虑构建体积优化，优先保证构建时间，其次在不影响时间的情况下，尽可能的缩小构建缓存体积。避免使用进程守护，利用 docker 本身和基于 Docker 的编排程序提供崩溃重启和日志记录功能，无需使用额外应用实现。