前后端不分离项目

后端操作数据渲染网页

express 是nodejs核心框架。

express的功能介绍?
。express_generator自动构建开发工具
。express有一个本地端口localhost:3000静态网页
。联合前端网页的源代码,通过ejs模块可以实现前后端联合项目
。ejs可以识别HTML标签,还能解析js,运行在express上。

express的主要功能?

可以创建web服务器(localhost:3000),
还能创建API服务器(接口)

创建api接口,需要的准备工作?

  1. api服务器 需要测试工具 insomnia,不能用浏览器
  2. 创建ejs文件 (静态调用,输出响应内容)
  3. 创建js文件 (编写路由接收方式)
  4. 创建app文件 (引入模块,使用中间件)

**

开发前后端不分离项目的步骤:

1.在开发项目根目录,打开命令行,安装express

命令:$ npx express -e  docName
安装后自动生成工具架构,文件夹docName,里面包含多个开发所需要的基本的代码框架

2.找到docName文件夹下的子文件夹public,放入前端写好的HTML,css,以及img文件
3.回到docName文件夹目录下,输入命令 :

$ npm i      可生成node-modul安装包和package-lock.json文件

4.项目启动:

$ npm start

5.在routes文件夹下,编写js文件,编写模块,导出模块。
6.在views文件夹下,编写前后端渲染代码,输出后台数据
7.在app.js文件下,引入模块,编写中间件,编写路由中间件,使用中间件

安装跨域模块cors:$ npm i cors -D

在npm官网查找cors复制跨域代码:

app.use( cors({
  "origin": "*",
  "methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
  "preflightContinue": false,
  "optionsSuccessStatus": 200
}));
  • 2
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Spring Boot 是一个开源的 JavaEE 框架,可以快速构建 Web 应用程序和微服务。在 Spring Boot 中,前后分离项目通常是使用模板引擎来渲染页面,后将数据传递给模板引擎,然后模板引擎将数据填充到 HTML 页面中。 在 Spring Boot 中,常见的模板引擎包括 Thymeleaf、Freemarker、JSP 等。使用模板引擎,可以方便地将数据填充到 HTML 页面中,并实现动态页面的渲染。 下面是一个使用 Thymeleaf 模板引擎的 Spring Boot 示例: 1. 添加 Thymeleaf 依赖: ```xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> ``` 2. 创建一个简单的控制器类: ```java @Controller public class HelloController { @GetMapping("/hello") public String hello(Model model) { model.addAttribute("name", "World"); return "hello"; } } ``` 3. 创建一个名为 hello.html 的模板文件: ```html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Hello</title> </head> <body> <h1 th:text="'Hello, ' + ${name} + '!'"></h1> </body> </html> ``` 4. 运行程序,访问 http://localhost:8080/hello,即可看到页面上显示了“Hello, World!”。 通过使用模板引擎,可以很方便地将数据填充到 HTML 页面中,实现动态页面的渲染。但是,使用模板引擎的前后分离项目开发效率低下,难以实现前后分离、复用和可维护性。因此,在实际开发中,建议使用前后分离的架构。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值