目录

自学WEB后端02-基于Express框架完成一个交互留言板

自学WEB后端02-基于Express框架完成一个交互留言板!

提示: 浏览器V8是JavaScript的前端运行环境 Node.js 是JavaScript 的后端运行环境 Node.js 中无法调用 DOM 和 BOM等浏览器内置 API 这个作业案例包含2部分内容, 第一部分是前端 前端完成界面内容+CSS框架 第二部分是后端 完成用户留言存储,并返回

1.创建好文件夹目录

我这里为了方便放在了后端myapp目录里,创建了新文件夹放前端文件 https://i-blog.csdnimg.cn/blog_migrate/b9a0c4d7f80b2ae9ea982e5eedfb8bc3.png 通常情况下,前端文件(包括HTML、CSS和前端JavaScript)和后端文件(包括后端JavaScript、服务器配置等)应该放在不同的文件夹中,以便进行区分和管理。 可以按照以下方式组织文件夹结构:

- 网站项目文件夹 -
 -backend 
    server.js 
    myapp.js
- frontend 
  index.html
  style.css
  script.js - 

以上是一种常见的文件夹结构示例,其中 backend 文件夹用于存放后端文件(如 server.js ),而 frontend 文件夹则用于存放前端文件(如 index.htmlstyle.cssscript.js 等)。 请注意,这只是一种示例文件夹结构,你可以根据自己的需求和项目规模进行调整和扩展。

2.开始写前端代码

HTML 里面代码会通过路径调用对应CSS代码。如果没有CSS代码,也可以不用!

创建一个index.html

这次我们用py打开项目方便看到代码提示 https://i-blog.csdnimg.cn/blog_migrate/47fa0d9bd38e2dbc305477fa1d4955d3.png




留言板


# 留言板

发送

3.后端代码

创建一个新的 XXXX .js 文件,并将以下代码复制到其中:

https://i-blog.csdnimg.cn/blog_migrate/7e167b452eb32a96a4dc2d82d5381bc7.png 这个脚本是后端的脚本!由JavaScript编写




留言板


# 留言板

发送

然后在py中右键运行这个后端js脚本( 如果你没有用py打开)那么就需要用命令窗口(CMDhttps://i-blog.csdnimg.cn/blog_migrate/06c6ebcddaef6079bac3baec42b3b928.png 一个非常丑的留言板网站就出现了! https://i-blog.csdnimg.cn/blog_migrate/2dbb1d639b96ad432edf4fbc3443a7cb.png如果你没有用py打开)那么就需要用命令窗口(CMDhttps://i-blog.csdnimg.cn/blog_migrate/fd0e7eaccea7fd1c319bec9a2c1fa44a.png

恭喜,第一次感受到前端和后端协调工作的结果!