作者：Dennis Muasya
本教程将教您使用Strapi API，HTML，CSS和Vanilla JavaScript建立学校网站的前端和后端。其中没有任何框架。考虑到目标人群，该设计将简单明了，整洁。我将在此博客文章中谈论我使用后端服务创建的学校网站。我以前曾使用过本地JSON数据，更新和删除材料是一项挑战。
Strapi is a free and open-source Headless CMS that allows for quick and easy API design and content management.您将学习如何使用香草JavaScript和Strapi CMS创建学校网站。
先决条件
确保您的计算机在开始之前已安装以下内容。
- node.js ：由于npm和strapi都是在nodejs上构建的事实，这是您需要的第一个工具。从此页面下载。所需的nodejs版本范围从14.19.1到16.x.x。
- npm ：这是节点的软件包管理器。 NODEJS二进制包含在其中。 npm> = 6.x是必要的版本。
- IDE ：集成的开发环境，例如Microsoft Visual Studio代码，Android Studio和Sublime Text。
- 对异步JavaScript的基本理解。
什么是REST API？
REST API（通常称为RESTFUL API）将交易分为几个微小的组件。每个模块都涉及交易的基本方面。尽管这种模块化为开发人员提供了很大的自由，但开发人员可能很难从头开始创建REST API。几家企业已经为开发人员提供了模型；最喜欢的模型是Strapi提供的模型。 RESTFUL API使用命令来访问资源。资源表示是在任何特定时间戳上资源的状态。
Strapi中的REST API可以通过API端点访问各种内容类型。当使用Strapi创建内容类型时，会自动创建API端点。在对API端点进行查询时，可以使用API参数来过滤结果。使用REST API时，默认情况下没有关系，媒体字段，组件或动态区域。使用填充参数填充特定字段。
如何阅读文档
当您熟悉要使用的工具时，官方文档是最好的起点。当与新事物一起工作时，会压抑直接跳入并阅读手册的冲动。作为开发人员的提高，您还将节省时间和精力。您可以通过阅读来了解许多不同的主题。通过了解软件开发的一个领域，您将能够更好地理解下一个主题。
努力遍历A 入门课程中的每个示例。继续前进之前，请确保您了解新语言或系统的基本思想。
最后，熟悉代码。仅阅读文档可能不足以了解该程序正在做什么。稍微浏览源代码可能会产生重大影响。通过复制，读取并确定它的作用来利用每一件代码。自己尝试代码以查看其工作原理。重新开始。打破它。然后选择一个分辨率。
如何使用Strapi CMS
使用this GitHub link克隆学校的网站。最后一步是添加常见的JavaScript文件，以访问Strapi的数据。要保存学校网站，请决定将其放在计算机上。
- 在您的终端上，输入以下命令：
git clone https://github.com/Dmuasya/SchoolWebsiteStrapi.git
- 克隆完成后，将目录更改为学校网站。
cd SchoolWebsiteStrapi
- 在终端中输入以下代码，以在后端文件夹中构建新的Strapi应用程序。
npx create-strapi-app backend --quickstart
这导致在后端文件夹中创建新的Strapi应用程序。 —quickstart标志指示Strapi使用SQLite作为其首选数据库。当给定使用其他数据库的选项时，请省略标志并选择该数据库。
完成安装所需的时间长度取决于您的网络的速度。
- 完成此操作后，运行下一个片段以在开发模式下启动Strapi。
strapi develop
您应该在http://localhost:1337/admin/auth/register上查看浏览器启动。如果没有，请手动启动您的首选浏览器。它将显示类似于下面的注册表格。
- 现在，以表格输入您的详细信息。此步骤对于后续登录到管理仪表板很重要。您的仪表板现在应该像这样：
在此页面上，您的API在左上角列出。它应该暂时仅包含用户API。
- 要构建等级端点，请从侧边栏中选择“内容类型构建器”。
- 被重定向后，选择“创建新的收藏类型”，然后将其显示为“等级”。尽管该术语是单数的事实，但Strapi默认情况下将其倍增。模态屏幕应该像这样：
添加新等级
可以在单击“继续”之后出现的新屏幕上选择此集合的字段。从列表中，选择“文本”字段，然后给它一个名称。
创建新等级时，通过选择“高级选项”并检查“必需的字段”框，确保此信息是强制性的。
您完成了创建等级端点的完成。
HTML结构有意义的类
html是一个强大的工具，如果您想利用它，可以为您的代码提供超级大国。 HTML中的内置行为使您可以减少需要使用的明确代码量。通过组织您的论文以使它们运转良好并看起来不错，您可以使更多人和软件可以访问您的内容。
该项目在指导您如何编写语义，有意义的html的同时，展示了基本的HTML标签和属性。它可以帮助您确保您的页面（包括导航之类的元素）进行了正确的布置和剖面，同时还向您展示了如何将语言的独特功能用于呈现报价，图形，日期和时间。
通过设计，HTML是一种宽容的语言，允许执行甚至SubPar代码。没有<！Doctype html>，，
和。如果没有这些辅助元素，某些浏览器将无法正确显示页面。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>School Website - Strapi CMS</title>
<link rel="stylesheet" href="css/minified/style.min.css">
<script
src="https://kit.fontawesome.com/fc31dedf63.js"
crossorigin="anonymous"
></script>
</head>
<body>
<!-- Modal on page load -->
<div class="modal" id="modal-one" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-header">
<h2>Namaste !</h2>
<a href="#modal-one" class="btn-close" aria-hidden="true">×</a>
</div>
<div class="modal-body">
<p>This is the Moi Forces Academy Website but it's <br />
通过遵循以下几个直接准则，我们可以维护我们组织良好的代码。
- 需要嵌套元素的凹痕。
- 对于元素，属性和值，小写是首选。
- 使用单引号或双引号标记，但请确保您都一致地使用它们。
- 建议忽略完整组织的布尔属性值。
当我们决定我们喜欢的技术时。它必须遵守严格地粘贴，到处涂抹并保持分开。
<!-- acheivements section -->
<section class="achieve">
<!-- achieve container -->
<div class="achieve__container">
<h1 class="achieve__h1"></h1>
<div class="achieve__section">
<div class="achieve__sectionList">
<img class="achieve__imgIcon" src="./img/ach1.png" alt="achieveIcon" />
<h3 class="achieve__h3"></h3>
<p class="achieve__p"></p>
</div>
<div class="achieve__sectionList">
<img class="achieve__imgIcon1" src="./img/ach2.png" alt="achieveIcon" />
<h3 class="achieve__h31"></h3>
<p class="achieve__p1"></p>
</div>
<div class="achieve__sectionList">
<img class="achieve__imgIcon" src="./img/ach3.png" alt="achieveIcon" />
<h3 class="achieve__h32"></h3>
<p class="achieve__p2"></p>
</div>
<div class="achieve__sectionList">
<img class="achieve__imgIcon" src="./img/ach4.png" alt="achieveIcon" />
<h3 class="achieve__h33"></h3>
<p class="achieve__p3"></p>
</div>
</div>
</div>
<!-- End achieve container -->
</section>
<!-- End acheivements section -->
最后但并非最不重要的一点，尽管首先是内联样式似乎更容易，但实际上需要更多的维护，并增加了代码线。如果我们使用外部样式表，我们可以选择重复使用代码。单个外部样式表也可以用来设计我们所有的所有页面。
DOM中的JS，ES6语法和ES6模块
文档对象模型（DOM）表示构成Web文档（DOM）作为数据的结构和内容的对象。它说明了如何使用API构建网站和Web应用程序以及在内存中表示HTML文档的方式。
好消息是，当代浏览器已开始在本地实施中提供模块能力。这只能是一件好事，因为它使浏览器能够比必须使用库并进行所有其他客户端处理和往返行程更快，有效地加载模块。
import { localhost } from "./../../adminUrl.js";
export const Blog = async () => {
try {
const url = `${localhost}/eventsblogs?_sort=id:DESC`;
const ftch = await fetch(url);
const data = await ftch.json();
const result = data;
//console.log(result[0].content);
for (let i in result) {
const container = document.querySelector(".blog__container");
const dv = document.createElement("div");
dv.classList = "blog__single";
const img = document.createElement("img");
img.classList = "blog__img"
img.src= `${result[i].thumbnailimg.url}`;
const heading = document.createElement("h1");
heading.classList = "blog__heading";
heading.textContent = `${result[i].title}`;
const desc = document.createElement("p");
desc.classList =" description";
desc.textContent = `${result[i].description}`;
const date = document.createElement("p");
date.classList ="date";
date.textContent = `${result[i].date}`;
const hrf = document.createElement("a");
hrf.classList = "below";
hrf.textContent = "Read More Below:";
const readmore = document.createElement("div");
readmore.classList = "readmore";
readmore.textContent = `${result[i].content}`;
const hr = document.createElement("hr");
dv.appendChild(img);
dv.appendChild(heading);
dv.appendChild(desc);
dv.appendChild(date);
dv.appendChild(hrf);
dv.appendChild(readmore);
dv.appendChild(hr);
container.appendChild(dv);
}
}
catch(error) {
console.log("failed", error);
}
}
进口声明对于使用本机JavaScript模块是必需的。想象一下自己在某种情况下必须重复使用一些JavaScript代码。 ES6的模块概念进行了营救。
每个模块对应于JavaScript代码的语料库。模块包含函数和变量。一个模块不过是在文件中编写的JavaScript代码段。默认情况下无法访问模块的内部变量和功能。通过从模块导出它们，可以从其他文件访问变量和函数。在ES6中，模块只能在严格的模式下运行。这意味着模块中定义的任何变量或函数都无法全局访问。
SASS（SCSS）和BEM大会的模块
sass是世界上最先进，最可靠和有效的CSS扩展语言。由于将内部SASS功能集成到模块系统中，我们现在可以完全控制全局名称空间。在使用之前，必须将内置模块，颜色，文本，列表，地图，选择器和元必须手动导入到文件中。
.blog {
margin-top: 7rem;
margin-left: 7rem;
margin-right: 7rem;
margin-bottom: 3rem;
}
.blog__h1 {
// text-align: center;
font-size: 2.3rem;
margin-bottom: 5rem;
}
.blog__img {
object-fit: cover;
width: 40%;
height: 230px;
border-radius: 21px;
margin-bottom: 2.5rem;
}
.blog__heading {
margin-bottom: 1rem;
}
.description {
max-width: 85ch;
margin-bottom: 0.5rem;
}
.date {
margin-bottom: 0.4rem;
font-size: 1.3rem;
color: blueviolet;
}
.below {
// margin-bottom: 0.6rem;
background-color: burlywood;
color: #fff;
padding: 0.2rem;
font-size: 1rem;
margin-top: 2rem;
}
.readmore {
margin-top: 2rem;
max-width: 97ch;
color: #3a3838;
word-spacing: 0.2rem;
letter-spacing: 0.1rem;
line-height: 1.7;
}
.blog__single {
margin-top: 4rem;
}
@media all and (max-width: 768px) {
.blog {
margin-left: 1rem;
margin-right: 1rem;
margin-bottom: 3rem;
}
.blog__img {
width: 100%;
}
}
在计算机科学中，只有两个困难的问题：无效的缓存和命名内容。众所周知，使用适当的样式指南可以加快开发，调试以及将新功能集成到旧版代码中。不幸的是，大多数CSS代码库有时是在没有组织或命名规则的情况下创建的。从长远来看，这会导致CSS代码库无法实现。
名称块元素修饰符缩写为BEM。它可以保证参与网站创建的每个人都使用相同的代码库和相同的语言。您可以通过使用正确的命名来准备更改网站的外观。
学校网站设计
下面是学校网站的设计。
结论
您下载了Strapi应用程序，并在本教程中创建了一个API。然后，您添加了样本等级以显示并制作了一些API的路线。最后但并非最不重要的一点是，您复制了一个基本的JavaScript学校网站，并添加了脚本以获取和显示Strapi应用程序中的数据。考虑在网站中列出等级，如果您想为应用程序提供额外的功能，则可以单击标签。我将通过在API中包含更多字段并打开后备选项，以挑战您将其进一步迈出一步，以便您可以在将新数据添加到后端时测试其功能。
。如果您想发布学校内容，则Strapi是一个绝佳的选择。除了支持丰富的文本外，它还在管理面板中提供了用户友好的构图接口。您的学校网站也可以通过完全自定义的API消费。在其网站上查看有关Strapi功能的摘要，以了解更多有关它还提供的内容的信息。最后，this application's source code is accessible on Github。