中SSG静态站点生成及中高web应用实现方式，含前端后端详情

是

中

SSG静态站点生成

博客、官网、文档

是

低

ISR渐进式静态生成

海量内容平台

是

中高

web应用的实现方式

对于绝大多数网络应用程序而言，无论是单页应用（SPA）还是其他类型，均需通过前端与后端相结合的方式来完成各项功能。

前端

前端工程师主要负责页面的呈现、用户的交互操作以及与后端数据之间的交流等工作。他们通常采用HTML、CSS、JavaScript等技术，或者利用Vue.js、React、Angular等流行的前端框架来构建网页。

后端

后端主要负责处理业务逻辑、执行数据库操作以及进行数据处理等工作。在开发后端应用时，我们可以选择使用Node.js、Django、Flask、Java、Ruby on Rails等多种技术栈。

前端通过HTML和JavaScript技术实现了基础功能，而负责后端服务的则是用go语言编写的http服务器。

func main() {
    http.HandleFunc("/login", func在处理HTTP响应的writer对象和接收到的HTTP请求对象时，请确保按照规定的格式进行操作。 {
尝试对模板文件进行解析，获取模板对象和可能出现的错误。"../html/login.html")
if err != nil {
w应返回http.StatusInternalServerError状态码，并传递err的描述信息。
   return
  }

  tmpl.Execute(w, nil)
 })

    ...

fs := http.CreateFileServer(http.GetDirectoryPath("http.Dir"))，设置用于提供文件服务的HTTP服务器。"../html"))
 http.Handle("/static/", http.StripPrefix("/static/", fs))
 http.Handle("/", fs)

 http.ListenAndServe(":8082", nil)
}

当时对Web开发缺乏全面的理解，所以在开发过程中依赖AI技术迅速完成了任务。本以为Web开发只是如此简单，实则只是略作尝试，犹如井底之蛙，见识有限。

框架选型

采用框架设计，能够带来一系列通用功能，从而避免开发者重复开发相似功能；此外，众多框架还内置了多种安全防护机制（例如抵御跨站脚本攻击、跨站请求伪造等），显著减轻了开发者实现安全措施的负担。在当前，市面上存在众多卓越的前后端框架，诸如我们熟知的Node.js、Vue等，均已成为行业内的主流选择。

Node.js擅长搭建性能卓越的后端HTTP服务器，广泛用于开发RESTful以及GraphQL API，充当前后端交互的桥梁。尤其在处理众多并发请求和实现实时互动的场合，其效率尤为显著。

Vue.js的核心作用在于协助开发者打造功能丰富的用户界面，同时支持高效的数据绑定以及模块化编程，因而成为众多前端开发人员青睐的框架之一。

就管理后台而言，GitHub上存在众多卓越且稳定的框架，它们已经实现了大多数功能需求。

前端选用SoybeanAdmin：

后端采用rust开发的Axum：

SoybeanAdmin

SoybeanAdmin这款软件是采用vue3技术框架构建的，所以在使用之前，必须完成依赖环境的搭建，这其中包括安装nodejs以及visio studio等必备工具。

SoybeanAdmin与后端之间的接口定义现已完成，开发者需寻得该定义，随后依照其结构，在后端进行相应的返回设置。

路由管理

SoybeanAdmin支持静态路由和动态路由。

在配置静态路由的过程中，路由表的内容是固定不变的，其包含的页面在项目前端打包阶段就已经确定。对于设置为constant: true的页面，用户无需登录即可直接访问；而其他页面则要求用户登录后才能访问。

在动态路由的设置下，一旦前端页面启动，便会向后端发起对路由表的请求，随后根据用户的权限状况，有选择性地加载用户可访问的页面。后端将路由系统划分为两大类：一类是公共路由，另一类是权限路由。公共路由允许用户无需登录即可访问，例如访问登录页面或404页面，这些路由信息由后端通过fetchGetConstantRoutes接口提供；而需要登录验证的路由则被归入fetchGetUserRoutes接口中，用户登录成功后，系统会根据其角色动态生成相应的路由信息。

对于角色控制不太严格的功能，可以使用静态路由。

Axum

Axum 是一个基于 Rust 语言构建的框架，其主要功能是打造高性能的 Web 服务，即 API 服务器。该框架由 Tokio 团队负责开发与维护，而 Tokio 团队又是 Rust 社区中知名的异步运行时库 Tokio 的开发者。

关于Rust语言在内存安全与高并发方面的优势，我们完全能够撰写一篇独立文章，用以与C++进行详细的比较。

目录设置

cargo new aumx新建一个项目

添加依赖

构建目录，可以适当简化

src/
├── main.rs，作为启动文件，它是程序的入口点。
├── api/

├── health_check.rs  // 负责执行健康状态监测的路由文件

└── user.rs 文件，涉及与用户相关的所有接口定义。
├── handlers/
│   ├── mod.rs           // 负责程序的启动点处理

└── user_handler.rs 文件，负责执行与用户相关的各种操作逻辑处理。
├── models/


└── user.rs 文件，用于定义用户数据模型
├── database/
├── mod.rs              // 负责数据库的配置与连接池的设置及启动
│   ├── mysql.rs，该文件涵盖了针对MySQL数据库的操作（可选用）。
│   └── migrations.rs 文件，此为数据库迁移的脚本（可供选择使用）。
├── middlewares/

│   ├── auth.rs           // 是整个系统认证流程的关键环节。
│   └── 日志处理模块
└── config/
模块中包含了配置文件的读取与初始化过程。
app_config.rs文件中包含了与应用相关的配置信息，例如端口号和环境变量等设置。

代码编写

大多数简单的web后端主要职能是充当一个http服务器，它负责接收来自客户端的请求，然后对这些请求进行路由分配以及相应的逻辑处理。

大型web后端系统运作中，必须借助中间件来提供状态管理、会话控制功能，同时确保负载均衡、高可用性，以及高效处理高并发请求。

Axum 请求处理

#[tokio::main]
async fn main() {
    config::load_config();

    // 启动服务器，监听 8080 端口
    let创建了一个TCP监听器，并通过调用bind()方法将其绑定到指定地址。"127.0.0.1:3000")
    .await
    .unwrap();
    println!("listening on {}"调用listener的local_addr方法，获取本地地址，并确保结果无错误。
在axum框架中，通过调用serve函数，将listener和app作为参数传入，以启动服务。await.unwrap();
}

简简单单一句话，即可实现http服务器

当然还可以设置一些数据库连接，配置文件获取等

// 获取数据库连接 URL
let db_url = env::var("DATABASE_URL").expect("DATABASE_URL must be set");
println!("Database URL: {}", db_url);

// 初始化数据库连接池
let数据库实例db_url通过调用database::database_init函数进行初始化，得到pool对象。await;

// 将连接池包装成 Arc 以便共享
letshared_pool等于一个新的Arc结构体，该结构体被初始化为pool。

路由设置

创建路由：

// 创建路由并传入连接池
letapp等于通过api模块的create_routes函数创建的路由，这些路由是基于共享池生成的。

由于需要连接数据库，因此需要把数据库连接池绑定到路由对象

pub fn create_routes(pool: Arc) -> Router {
 Router::new()
 .route("/api/login", post(user::handle_login))
 .route("/api/home", get(user::handle_home))
}

路由的转发过程相对简便，只需按照顺序输入路由的地址信息，指定请求的类型，以及相应的处理策略。

数据处理

对于不同的请求类型，需采用各异的结构体进行数据传输，比如，在执行POST请求时，需提供JSON格式的结构体，而在进行GET请求时，则需提交Query结果体。

pub async fn handle_login( 
    State(config): State>,
    Json(payload): Json,
) -> Result>, StatusCode> {
 ...
}

总体而言，Axum非常适合初学者使用，笔者仅用两天时间便成功搭建了一个web后台服务，其中许多配置只需直接输入相关信息即可完成。

nginx

如果部署到云端，不要忘记最后设置nginx。

前端向后端服务或者数据库请求时，分为两种情况：