初步理解前后端

夜阳朔
20 阅读7分钟

前后端介绍

前言：

本文主要记录我对前后端的理解，以及使用过的后端库和前端框架，最后演示了如何启动前后端做完整业务逻辑

web框架与js框架

Web框架和JavaScript框架都是现代Web开发的重要组成部分，但它们有不同的关注点和用途。

Web框架

Web框架通常指的是后端框架，用于构建和运行在服务器上的应用程序。它们处理HTTP请求，数据库交互，应用程序逻辑等。Web框架的主要目的是简化Web开发过程，提供一套结构化的方法来创建、部署和维护Web应用程序。

特点：

  • 服务器端编程：大多数Web框架使用服务器端语言，如Python（Django, Flask）、Ruby（Ruby on Rails）、PHP（Laravel）、Java（Spring）等。

  • 数据库交互：提供与数据库交互的接口。

  • MVC架构：许多Web框架遵循MVC（模型-视图-控制器）架构，有助于分离数据、界面和业务逻辑。

  • 安全性：提供安全性措施，如防止SQL注入、XSS攻击等。

  • 模板引擎：用于将数据渲染到HTML。

JavaScript框架

JavaScript框架主要关注于客户端（浏览器端）的应用程序开发。它们提供了一套工具和库来创建动态、交互式的用户界面。

特点：

  • 客户端编程：JavaScript框架运行在浏览器中，如React, Vue, Angular等。

  • DOM操作：提供操作文档对象模型（DOM）的便捷方法。

  • 响应式和组件化：使开发者能够创建可重用的组件，并实现数据的响应式更新。

  • 单页应用（SPA）：适合构建单页应用程序，提供无缝的用户体验。

  • 虚拟DOM：大多数现代JavaScript框架使用虚拟DOM来优化性能。

对比

  • 职责不同：Web框架处理服务器端逻辑，而JavaScript框架处理客户端逻辑。

  • 技术栈：Web框架通常与服务器端语言相关，而JavaScript框架主要与JavaScript相关。

  • 使用场景：Web框架用于构建完整的Web应用程序，JavaScript框架用于构建应用程序的前端部分。 在实际开发中，Web框架和JavaScript框架经常一起使用，例如，使用Django作为后端框架，Vue.js作为前端框架，共同构建一个完整的Web应用程序。

Flask：

Flask 是一个轻量级的 Web 框架，由 Armin Ronacher 开发，使用 Python 语言。它被称为“微框架”（microframework），因为它简单、灵活，并且具有可扩展性。Flask 没有为数据库抽象层、表单验证或其他已有的第三方库提供内置支持，而是让开发者自己选择和集成这些工具。

Flask 的主要特点：

  1. 轻量级：Flask 本身只提供了 Web 开发的基本工具和库，如路由、模板引擎和请求处理。

  2. 易于扩展：Flask 的设计允许开发者轻松添加额外的功能，例如通过扩展来支持表单验证、数据库集成、上传处理等。

  3. 灵活性：由于其简单性和模块化设计，Flask 非常适合构建从小型到中型的 Web 应用程序。

  4. Werkzeug WSGI 工具箱：Flask 使用 Werkzeug 作为其 WSGI 工具箱和服务器。

  5. Jinja2 模板引擎：Flask 使用 Jinja2 作为其模板引擎，支持在 HTML 中嵌入 Python 代码。

Flask 的基本使用：

  1. 安装 Flask：通常使用 pip 安装 Flask。

    pip install Flask

  2. 创建一个 Flask 应用：

    from flask import Flask
app = Flask(__name__)
@app.route('/')
def hello_world():
    return 'Hello, World!'
if __name__ == '__main__':
    app.run()

    在这个例子中，我们创建了一个简单的 Flask 应用，它响应根 URL ('/') 并返回 "Hello, World!"。

  3. 运行 Flask 应用：通过在终端中运行上述脚本，Flask 内置的服务器会启动，通常在 http://127.0.0.1:5000/ 上运行。 Flask 非常适合快速开发，并且由于其高度的可定制性和灵活性，它被广泛应用于各种 Web 应用程序的开发中。

Vue：

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。它由尤雨溪（Evan You）创建，首次发布于 2014 年。Vue 的设计目的是易于上手，同时也能够强大到驱动复杂的单页应用（SPA）。Vue 的核心库只关注视图层，不仅易于学习，而且容易与其他库或现有项目集成。

Vue.js 的主要特点：

  1. 响应式数据绑定：Vue 能使数据和 DOM 保持同步，一旦数据发生变化，与之相关的 DOM 会自动更新。

  2. 组件化：Vue 采用组件化的思想，有助于代码的模块化和重用。

  3. 指令：Vue 使用带有 v- 前缀的特殊属性（如 v-bind, v-model）来绑定数据和执行操作。

  4. 虚拟 DOM：Vue 通过虚拟 DOM 来提高渲染效率，减少直接操作实际 DOM 的次数。

  5. 易于集成：Vue 可以轻松集成到其他项目中，也可以与其他流行的库或框架（如 Vuex, Vue Router）一起使用。

  6. 生态系统：Vue 拥有一个丰富的生态系统，包括用于状态管理的 Vuex，用于路由的 Vue Router，以及用于构建界面的 Vue CLI。

Vue.js 的基本使用：

  1. 安装 Vue：可以通过 CDN 或使用 npm/yarn 进行安装。

    • 通过 CDN：

      <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

    • 通过 npm：

      npm install vue

  2. 创建一个 Vue 实例：

    new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

    在这个例子中，我们创建了一个 Vue 实例，并将其绑定到一个具有 id="app" 的 DOM 元素上。

  3. 在 HTML 中使用 Vue：

    <div id="app">
  {{ message }}
</div>

    在这个 HTML 结构中，{{ message }} 是一个双花括号语法，用于数据绑定，它将显示 Vue 实例中的 message 数据。 Vue.js 非常适合快速开发前端应用程序，并且由于其灵活性和高效性，在 Web 开发社区中非常受欢迎。

结合

将 Flask 与 Vue.js 结合使用是构建现代 Web 应用程序的一种流行方法。Flask 负责后端逻辑，如数据存储、业务逻辑和API的创建，而 Vue.js 负责前端用户界面，提供响应式和组件化的开发体验。下面是一个简单的例子，展示如何结合使用 Flask 和 Vue.js。

环境准备

  1. 安装 Flask 和 Vue CLI。

    pip install Flask
npm install -g @vue/cli

  2. 创建 Flask 应用。

    mkdir flask-vue-app
cd flask-vue-app
flask init-db  # 创建数据库（如果需要）

  3. 创建 Vue 应用。

    vue create frontend

    创建完成后，你将有两个目录：flask-vue-app（Flask 后端）和 flask-vue-app/frontend（Vue 前端）。

Flask 后端

在 flask-vue-app 目录中创建一个简单的 Flask 应用。

# app.py
from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/api/data')
def get_data():
    # 这里是从数据库或其他源获取数据的示例
    data = {'message': 'Hello from Flask!'}
    return jsonify(data)
if __name__ == '__main__':
    app.run(debug=True)

Vue 前端

在 flask-vue-app/frontend 目录中，你可以创建一个简单的 Vue 组件来显示从 Flask 获取的数据。

// frontend/src/App.vue
<template>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      message: ''
    }
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      fetch('/api/data')
        .then(response => response.json())
        .then(data => {
          this.message = data.message;
        });
    }
  }
}
</script>

运行应用

  1. 在 flask-vue-app 目录中，运行 Flask 应用：

    python app.py

  2. 在 flask-vue-app/frontend 目录中，运行 Vue 应用：

    npm run serve

    Vue 应用通常会运行在 http://localhost:8080。

  3. 打开浏览器，访问 Vue 应用的地址，你将看到从 Flask 后端获取的消息显示在页面上。 这个例子展示了如何将 Flask 和 Vue.js 结合起来，创建一个简单的全栈应用程序。在实际应用中，你可以根据需要添加更多功能和复杂性。

前端：去api的家中

methods: 
{
	fetchdata()
    	{
           	fetch("/api/data")					#调用api接口，通过路径找到api的家
            .then(response=>response.json())	 #将数据转化为json格式
            .then(data=>{this.message = data.message;});	#读取转化后的数据
        }
		
}

后端：api的家

@app.route('/api/data')								#定义去api家的路径
def get_data():										#定义去api的家中能做些什么
    data = {'message': 'Hello from Flask!'}
    return jsonify(data)
avatar
文章
阅读
粉丝