寫文章

首頁手記前后端主流框架技術入門教程

前后端主流框架技術入門教程

標簽：

Node.js React.JS Vue.js

概述

本文全面介绍了前后端主流框架技术，包括前端的HTML/CSS、JavaScript、Vue.js、React.js和Angular.js，以及后端的Node.js、Spring Boot、Django和Flask，详细讲解了它们的基础用法和实践示例。文章还提供了项目需求分析、技术栈选型和框架优缺点比较，帮助读者根据项目需求选择合适的框架。此外，文中详细介绍了开发环境搭建和项目结构搭建的具体步骤，以及前后端框架项目实战中的基本功能实现、数据交互、进阶知识等。

前端主流框架技术介绍

HTML/CSS基础入门

HTML基础

HTML（HyperText Markup Language）是用于创建和设计网页的标准标记语言。其基本元素包括文档结构、文本、链接、图像和表格等。

文档结构

HTML文档的基本结构如下：

<!DOCTYPE html>
<html>
<head>
    <title>网页标题</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
</body>
</html>

<!DOCTYPE> 声明文档类型。
<html> 标签表示一个 HTML 文档。
<head> 包含文档的元数据。
<body> 包含文档的主体内容。

常见元素

<h1> 至 <h6> 表示标题，其中 <h1> 是最大的标题。
<p> 表示段落。
<a> 标签定义一个链接。
<img> 标签用于插入图像。
<ul> 和 <ol> 分别表示无序列表和有序列表。
<li> 标签用于定义列表中的一个项目。

CSS基础

CSS（Cascading Style Sheets）用于控制网页的布局、颜色和字体等。CSS可以通过添加样式来改变网页的外观。

CSS基础选择器

普通选择器：

p {
    color: blue;
    font-size: 16px;
}

类选择器：

<!-- HTML -->
<p class="highlight">这是一个段落。</p>

<style>
    .highlight {
        background-color: yellow;
        font-weight: bold;
    }
</style>

ID选择器：

<!-- HTML -->
<div id="main-header">
    <h1>这是一个标题</h1>
</div>

<style>
    #main-header {
        background-color: lightgray;
        padding: 10px;
    }
</style>

属性选择器：

input[type="text"] {
    width: 200px;
    height: 30px;
}

伪类选择器：

a:hover {
    color: red;
}

a:visited {
    color: purple;
}

实践示例

下面是一个简单的HTML和CSS结合的示例：

<!DOCTYPE html>
<html>
<head>
    <title>示例页面</title>
    <style>
        body {
            background-color: lightblue;
        }
        .header {
            background-color: red;
            color: white;
            padding: 10px;
        }
        .content {
            padding: 20px;
            background-color: white;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>这是一个标题</h1>
    </div>
    <div class="content">
        <p>这是一个段落。</p>
    </div>
</body>
</html>

JavaScript简介

JavaScript 是一种广泛使用的编程语言，常用于为网页添加交互功能。JavaScript 通常与 HTML 和 CSS 结合使用，以创建动态且响应式的网页。

JavaScript 基础

变量与类型：

// 定义变量
let name = 'Alice';
let age = 25;
let isMarried = false;

// 字符串
let greeting = 'Hello, ';

// 数组
let numbers = [1, 2, 3, 4];

// 对象
let user = {
    name: 'Bob',
    age: 30
};

// 函数
function sayHello(name) {
    return `Hello, ${name}`;
}

控制语句：

if (age >= 18) {
    console.log('成年');
} else {
    console.log('未成年');
}

for (let i = 0; i < 5; i++) {
    console.log(i);
}

// 循环
let count = 0;
while (count < 5) {
    console.log(count);
    count++;
}

DOM 操作：

// 获取元素
let element = document.getElementById('myElement');

// 修改元素内容
element.textContent = '新的内容';

// 添加元素
let newElement = document.createElement('p');
newElement.textContent = '这是一个新段落';
document.body.appendChild(newElement);

线程和事件处理：

// 线程
setTimeout(() => {
    console.log('延迟执行');
}, 1000);

// 事件处理
document.getElementById('myButton').addEventListener('click', () => {
    console.log('按钮被点击了');
});

实践示例

下面是一个简单的JavaScript示例，包含变量定义、函数调用、DOM操作和事件处理：

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript 示例</title>
    <style>
        body {
            background-color: lightblue;
        }
        .header {
            background-color: red;
            color: white;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="header" id="myElement">
        <h1>这是一个标题</h1>
    </div>
    <button id="myButton">点击我</button>

    <script>
        // 定义变量
        let name = 'Alice';
        let age = 25;

        // 函数
        function sayHello(name) {
            return `Hello, ${name}`;
        }

        // 修改元素内容
        let element = document.getElementById('myElement');
        element.textContent = sayHello(name);

        // 添加元素
        let newElement = document.createElement('p');
        newElement.textContent = `年龄: ${age}`;
        document.body.appendChild(newElement);

        // 事件处理
        document.getElementById('myButton').addEventListener('click', () => {
            console.log('按钮被点击了');
        });
    </script>
</body>
</html>

Vue.js基础教程

Vue.js 是一个渐进式 JavaScript 框架，可以让开发者以渐进的方式将 Vue 添加到项目中。Vue 的核心库专注于视图层，易于集成，非常灵活。

Vue.js 基础

安装

首先，你需要安装 Vue.js。可以通过 CDN 引入 Vue，或者使用 npm 安装。

<!-- CDN 引入 -->
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2"></script>

# 使用 npm 安装
npm install vue

基本用法

Vue 使用 v-bind 和 v-model 等指令来绑定数据和事件。

<template>
    <div id="app">
        <input v-model="message" placeholder="编辑这里...">
        <p>{{ message }}</p>
    </div>
</template>

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

实践示例

下面是一个简单的 Vue.js 示例，展示了如何使用 Vue 来绑定数据和事件：

<!DOCTYPE html>
<html>
<head>
    <title>Vue.js 示例</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="app">
        <input v-model="message" placeholder="编辑这里...">
        <p>{{ message }}</p>
    </div>
    <script>
    new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    });
    </script>
</body>
</html>

Vue.js 指令实践

Vue.js 提供了丰富的指令，使得数据绑定更加灵活。下面是一些常用的指令示例：

v-if 和 v-else：

<template>
    <div id="app">
        <p v-if="isTrue">条件为真</p>
        <p v-else>条件为假</p>
    </div>
</template>

<script>
new Vue({
    el: '#app',
    data: {
        isTrue: true
    }
});
</script>

v-for：

<template>
    <div id="app">
        <ul>
            <li v-for="item in items">{{ item }}</li>
        </ul>
    </div>
</template>

<script>
new Vue({
    el: '#app',
    data: {
        items: ['Apple', 'Banana', 'Orange']
    }
});
</script>

React.js基础教程

React.js 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发和维护。React 使用组件来构建可重用的 UI 逻辑。

React.js 基础

安装

React 通常通过 npm 安装。安装 React 时，也需要安装 react-dom，用于将组件渲染到 DOM 中。

npm install react react-dom

基本用法

React 组件可以是函数或类组件。下面是一个简单的函数组件示例：

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
    return (
        <div>
            <h1>Hello, React!</h1>
            <input type="text" value="编辑这里..." />
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));

实践示例

下面是一个简单的 React.js 示例，展示了如何使用 React 来创建一个基本的用户界面：

<!DOCTYPE html>
<html>
<head>
    <title>React.js 示例</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
    const App = () => {
        return (
            <div>
                <h1>Hello, React!</h1>
                <input value="编辑这里..." />
            </div>
        );
    };

    ReactDOM.render(<App />, document.getElementById('root'));
    </script>
</body>
</html>

React.js Hooks和Context API实践

React.js 中的 Hooks 和 Context API 提供了强大的功能来处理状态和上下文管理。

Hooks 示例：

import React, { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>
                Increment count
            </button>
        </div>
    );
}

export default Counter;

Context API 示例：

import React from 'react';

const ThemeContext = React.createContext('light');

function App() {
    return (
        <ThemeContext.Provider value="dark">
            <Toolbar />
        </ThemeContext.Provider>
    );
}

function Toolbar() {
    return (
        <ThemeContext.Consumer>
            {value => <h1>Current theme: {value}</h1>}
        </ThemeContext.Consumer>
    );
}

export default App;

Angular.js基础教程

Angular.js 是由 Google 开发的一款开源前端框架。Angular.js 使用 MVC（Model-View-Controller）架构来构建复杂的单页应用（SPA）。

Angular.js 基础

安装

Angular.js 可以通过 CDN 引入，也可以使用 npm 安装。

npm install angular

基本用法

Angular.js 应用由控制器、指令和服务组成。控制器用于管理数据和行为。

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
    <div ng-controller="myCtrl">
        <p>{{ message }}</p>
    </div>
    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.message = 'Hello Angular!';
    });
    </script>
</body>
</html>

实践示例

下面是一个简单的 Angular.js 示例，展示了如何使用 Angular 来定义控制器和绑定数据：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
    <div ng-controller="myCtrl">
        <input type="text" ng-model="message" placeholder="编辑这里..." />
        <p>{{ message }}</p>
    </div>
    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.message = 'Hello Angular!';
    });
    </script>
</body>
</html>

Angular.js 服务和服务注入实践

Angular.js 中的服务和依赖注入机制提供了一种模块化和可重用的方式。

服务注入示例：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
    <div ng-controller="myCtrl">
        <p>{{ greeting }}</p>
    </div>
    <script>
    var app = angular.module('myApp', []);
    app.service('greetingService', function() {
        return {
            getGreeting: function() {
                return 'Hello, Angular!';
            }
        };
    });

    app.controller('myCtrl', function($scope, greetingService) {
        $scope.greeting = greetingService.getGreeting();
    });
    </script>
</body>
</html>

后端主流框架技术介绍

Node.js基础教程

Node.js 是一个开源的 JavaScript 运行环境，允许在服务端运行 JavaScript 代码。Node.js 基于 Chrome 的 V8 引擎，使得 JS 在服务端执行效率很高。

Node.js 基础

安装

Node.js 可以通过官网下载安装包，也可以通过 npm 安装。

npm install -g node

基本用法

Node.js 通常用于创建服务器端应用程序。下面是一个简单的 HTTP 服务器示例：

const http = require('http');

const server = http.createServer((req, res) => {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('Hello, Node.js!');
});

server.listen(3000, () => {
    console.log('Server is running on port 3000');
});

实践示例

下面是一个使用 Express 框架的更复杂的 Node.js 示例：

const express = require('express');
const app = express();

app.get('/', (req, res) => {
    res.send('Hello, Express!');
});

app.get('/about', (req, res) => {
    res.send('This is the about page.');
});

app.use((req, res, next) => {
    res.status(404).send('Page not found.');
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

Spring Boot基础教程

Spring Boot 是一个构建微服务的框架，它简化了 Spring 应用的初始搭建以及开发过程。Spring Boot 通过约定优于配置的方式，简化了 Spring 应用的配置。

Spring Boot 基础

安装

Spring Boot 可以通过 Maven 或 Gradle 引入依赖。下面是一个简单的 Maven 项目结构：

<project xmlns="http://maven.apache.org/POM/4.0.0"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
    http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.example</groupId>
    <artifactId>demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.5.2</version>
    </parent>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
    </dependencies>
</project>

基本用法

Spring Boot 应用可以通过简单的 Java 类启动。下面是一个简单的 Spring Boot 应用示例：

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@SpringBootApplication
public class DemoApplication {
    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }
}

@RestController
class HelloController {
    @GetMapping("/")
    public String hello() {
        return "Hello, Spring Boot!";
    }
}

实践示例

下面是一个更复杂的 Spring Boot 示例，展示了一个包含数据库查询的 RESTful 应用：

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.Arrays;
import java.util.List;

@SpringBootApplication
public class DemoApplication {
    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }
}

@RestController
class UserController {
    @GetMapping("/users")
    public ResponseEntity<List<String>> getUsers() {
        List<String> users = Arrays.asList("Alice", "Bob", "Charlie");
        return ResponseEntity.ok(users);
    }
}

Django基础教程

Django 是一个高级的 Python Web 应用框架，其核心设计目标是使开发快速、可维护和安全。Django 拥有丰富的功能，包括用户认证、缓存、数据库支持等。

Django 基础

安装

Django 可以通过 pip 安装：

pip install django

基本用法

Django 应用通常由一个项目和多个应用组成。下面是一个简单的 Django 项目结构：

myproject/
    manage.py
    myproject/
        __init__.py
        settings.py
        urls.py
        wsgi.py
    myapp/
        __init__.py
        admin.py
        apps.py
        models.py
        tests.py
        views.py

实践示例

下面是一个更复杂的 Django 示例，展示了如何创建一个包含用户模型和视图的简单应用：

# settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'myapp',
]

# myapp/models.py
from django.db import models

class User(models.Model):
    username = models.CharField(max_length=100)
    email = models.EmailField()

# myapp/views.py
from django.shortcuts import render
from .models import User

def user_list(request):
    users = User.objects.all()
    return render(request, 'user_list.html', {'users': users})

# myapp/templates/user_list.html
{% for user in users %}
    <p>{{ user.username }} - {{ user.email }}</p>
{% endfor %}

Flask基础教程

Flask 是一个轻量级的 Python Web 框架，它提供了一个简单的开发接口和灵活的扩展。Flask 使用 Jinja2 作为模板引擎，并支持多种数据库和认证机制。

Flask 基础

安装

Flask 可以通过 pip 安装：

pip install flask

基本用法

Flask 应用通常由一个 Python 文件和一个或多个视图函数组成。下面是一个简单的 Flask 应用示例：

from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Hello, Flask!'

if __name__ == '__main__':
    app.run()

实践示例

下面是一个更复杂的 Flask 示例，展示了如何创建一个包含数据库操作的简单应用：

from flask import Flask, render_template
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///mydatabase.db'
db = SQLAlchemy(app)

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(80), unique=True, nullable=False)
    email = db.Column(db.String(120), unique=True, nullable=False)

@app.route('/')
def index():
    users = User.query.all()
    return render_template('index.html', users=users)

if __name__ == '__main__':
    db.create_all()  # 创建数据库表
    app.run(debug=True)

前后端框架选择指南

项目需求分析

在选择前后端框架时，需要先确定项目的需求。例如：

项目的规模（小型、中型、大型）
项目的目标（展示、交易、社交等）
项目的技术栈（前端、后端、数据库等）
项目的时间和预算

技术栈选型

根据项目需求，选择合适的前后端框架。例如：

小型项目：适合使用 Vue.js、Flask 等轻量级框架。
中型项目：适合使用 React.js、Spring Boot 等较为成熟的框架。
大型项目：适合使用 Angular.js、Django 等功能齐全的框架。

框架优缺点比较

Vue.js

优点：

轻量级框架，易于上手。
有强大的社区支持和丰富的资源。
可以无缝地集成到现有项目中。

缺点：

功能相对较少，需要配合其他库和框架使用。

React.js

优点：

高性能，支持虚拟 DOM。
组件化开发，易于维护和扩展。
有丰富的第三方库和工具。

缺点：

学习曲线相对较陡。
需要配合其他库和框架使用。

Angular.js

优点：

模块化、可维护性好。
有完善的文档和社区支持。
支持双向数据绑定。

缺点：

学习曲线较陡。
项目构建和配置相对复杂。

Node.js

优点：

JavaScript 全栈开发。
异步非阻塞 IO，性能高。
有丰富的库和模块。

缺点：

相对于其他语言，调试较为困难。
内存消耗较大。

Spring Boot

优点：

提供了丰富的功能集，开箱即用。
支持多种数据库和缓存。
自动配置，简化了开发过程。

缺点：

对于小型项目来说，配置相对繁琐。

Django

优点：

开发速度非常快。
有内置的用户认证和权限控制。
支持多种数据库。

缺点：

对于大型项目，内存消耗较大。
配置相对复杂。

Flask

优点：

轻量级，易于学习和使用。
有丰富的扩展库。
非常灵活。

缺点：

适合小型项目，不适合大型项目。

前后端框架开发环境搭建

开发工具安装

前端：使用 VS Code 或 Sublime Text 等文本编辑器。
后端：使用 IntelliJ IDEA 或 PyCharm 等 IDE。

VS Code

VS Code 是一个轻量级的代码编辑器，支持多种编程语言。可以通过官网下载安装包。

IntelliJ IDEA

IntelliJ IDEA 是由 JetBrains 开发的一款 Java 开发环境。可以通过官网下载安装包。

本地开发环境配置

前端：
- 安装 npm 或 yarn。
- 安装 Vue CLI 或 Create React App。
后端：
- 安装 JDK。
- 安装 Maven 或 Gradle。

安装 npm 或 yarn

# 安装 npm
npm install -g npm

# 安装 yarn
npm install -g yarn

安装 Vue CLI 或 Create React App

# 安装 Vue CLI
npm install -g @vue/cli

# 安装 Create React App
npx create-react-app my-app

安装 JDK

从 Oracle 官网下载 JDK 安装包。

安装 Maven 或 Gradle

# 安装 Maven
curl -O https://downloads.apache.org/maven/maven-3/3.8.4/binaries/apache-maven-3.8.4-bin.zip
unzip apache-maven-3.8.4-bin.zip -d /opt/

# 安装 Gradle
curl -sO https://services.gradle.org/distributions/gradle-7.1.1-all.zip
unzip -q gradle-7.1.1-all.zip -d /opt/

项目结构搭建

前端：
- 使用 Vue CLI 创建 Vue 项目。
- 使用 Create React App 创建 React 项目。
后端：
- 使用 Maven 创建 Spring Boot 项目。
- 使用 Django 创建 Django 项目。

使用 Vue CLI 创建 Vue 项目

vue create my-project
cd my-project
npm run serve

使用 Create React App 创建 React 项目

npx create-react-app my-app
cd my-app
npm start

使用 Maven 创建 Spring Boot 项目

mvn archetype:generate -DgroupId=com.example -DartifactId=my-boot-app -DarchetypeArtifactId=maven-archetype-quickstart -DinteractiveMode=false
cd my-boot-app
mvn spring-boot:run

使用 Django 创建 Django 项目

django-admin startproject myproject
cd myproject
python manage.py runserver

前后端框架项目实战

基本功能实现

前端：
- 页面加载
- 数据绑定
后端：
- RESTful API
- 数据库操作

页面加载

<!-- HTML -->
<!DOCTYPE html>
<html>
<head>
    <title>前端页面</title>
</head>
<body>
    <h1>这是一个页面</h1>
</body>
</html>

数据绑定

<!-- HTML -->
<!DOCTYPE html>
<html>
<head>
    <title>前端页面</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="app">
        <p>{{ message }}</p>
    </div>
    <script>
    new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    });
    </script>
</body>
</html>

RESTful API

# Python (Flask)
from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/api/data', methods=['GET'])
def get_data():
    return jsonify({'message': 'Hello, API!'})

if __name__ == '__main__':
    app.run(debug=True)

数据库操作

# Python (Django)
from django.db import models

class Book(models.Model):
    title = models.CharField(max_length=100)
    author = models.CharField(max_length=100)

    def __str__(self):
        return self.title

数据交互

前端发送请求
后端接收请求并处理
返回数据给前端

前端发送请求

<!-- HTML -->
<!DOCTYPE html>
<html>
<head>
    <title>前端页面</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <p>{{ message }}</p>
    </div>
    <script>
    new Vue({
        el: '#app',
        data: {
            message: ''
        },
        created() {
            axios.get('/api/data')
                .then(response => {
                    this.message = response.data.message;
                })
                .catch(error => {
                    console.error(error);
                });
        }
    });
    </script>
</body>
</html>

后端接收请求并处理

# Python (Flask)
from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/api/data', methods=['GET'])
def get_data():
    return jsonify({'message': 'Hello, API!'})

if __name__ == '__main__':
    app.run(debug=True)

返回数据给前端

# Python (Flask)
from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/api/data', methods=['GET'])
def get_data():
    return jsonify({'message': 'Hello, API!'})

if __name__ == '__main__':
    app.run(debug=True)

复杂数据交互案例

前端数据分页
后端数据过滤

前端数据分页

<!-- HTML -->
<!DOCTYPE html>
<html>
<head>
    <title>前端分页示例</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item in paginatedItems">{{ item }}</li>
        </ul>
        <button @click="previousPage">上一页</button>
        <button @click="nextPage">下一页</button>
    </div>
    <script>
    new Vue({
        el: '#app',
        data: {
            items: [],
            currentPage: 1,
            itemsPerPage: 10
        },
        created() {
            axios.get('/api/items')
                .then(response => {
                    this.items = response.data;
                    this.paginate();
                })
                .catch(error => {
                    console.error(error);
                });
        },
        methods: {
            paginate() {
                this.paginatedItems = this.items.slice((this.currentPage - 1) * this.itemsPerPage, this.currentPage * this.itemsPerPage);
            },
            previousPage() {
                this.currentPage--;
                this.paginate();
            },
            nextPage() {
                this.currentPage++;
                this.paginate();
            }
        }
    });
    </script>
</body>
</html>

后端数据过滤

# Python (Flask)
from flask import Flask, jsonify

app = Flask(__name__)

items = [
    {"id": 1, "name": "Item1"},
    {"id": 2, "name": "Item2"},
    {"id": 3, "name": "Item3"},
    {"id": 4, "name": "Item4"}
]

@app.route('/api/items', methods=['GET'])
def get_items():
    return jsonify(items)

@app.route('/api/items/<int:item_id>', methods=['GET'])
def get_item(item_id):
    item = next((item for item in items if item['id'] == item_id), None)
    if item:
        return jsonify(item)
    else:
        return jsonify({'error': 'Item not found'}), 404

if __name__ == '__main__':
    app.run(debug=True)

前后端框架进阶知识

性能优化

前端：
- 使用缓存
- 减少 HTTP 请求
后端：
- 使用异步编程
- 优化数据库查询

使用缓存

// 使用本地缓存
let cache = {};

function getData(id) {
    if (cache[id]) {
        return cache[id];
    }
    // 从服务器获取数据
    let data = fetchDataFromServer(id);
    cache[id] = data;
    return data;
}

减少 HTTP 请求

<!-- 合并文件 -->
<link rel="stylesheet" href="styles.css">
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="scripts.js"></script>

使用异步编程

// 使用 Promise
fetch('/api/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));

优化数据库查询

-- 使用索引
CREATE INDEX idx_name ON users (name);

安全性考虑

前端：
- 输入验证
- 防止跨站脚本攻击（XSS）
后端：
- 验证用户输入
- 防止 SQL 注入

输入验证

function validateInput(input) {
    if (input.length > 100) {
        throw new Error('输入过长');
    }
}

防止跨站脚本攻击（XSS）

<!-- 使用模板引擎 -->
<p>{{ message | escape }}</p>

验证用户输入

# Python (Django)
from django.core.exceptions import ValidationError

def validate_input(input):
    if len(input) > 100:
        raise ValidationError('输入过长')

防止 SQL 注入

// Java (Spring Boot)
String safeInput = jdbcTemplate.queryForObject("SELECT * FROM users WHERE name = ?", new Object[] { input }, User.class);

持续集成与部署

使用 CI/CD 工具（如 Jenkins、GitLab CI、GitHub Actions）
自动化构建、测试和部署流程

使用 CI/CD 工具

# GitHub Actions
name: Build and Test

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Run tests
      run: mvn test
    - name: Build and deploy
      run: mvn package

自动化构建、测试和部署流程

# 使用脚本实现自动化流程
echo "Running tests..."
mvn test
echo "Building project..."
mvn package
echo "Deploying..."
scp target/myapp.jar user@server:/path/to/deploy
ssh user@server "cd /path/to/deploy && java -jar myapp.jar"

點擊查看更多內容

為 TA 點贊

若覺得本文不錯，就分享一下吧！

評論

評論

共同學習，寫下你的評論

評論加載中...

展開查看更多評論

作者其他優(yōu)質文章

正在加載中

qq_笑_17

手記
篇

粉絲

12

獲贊與收藏

52

關注作者，訂閱最新文章

閱讀免費教程

后端通用面試教程

41個小節(jié) 32194 359

網(wǎng)絡編程入門教程

20個小節(jié) 13289 250

Pandas 入門教程

25個小節(jié) 19880 373

推薦

評論

收藏

共同學習，寫下你的評論



感謝您的支持，我會繼續(xù)努力的～

掃碼打賞，你說多少就多少

贊賞金額會直接到老師賬戶

支付方式

打開微信掃一掃，即可進行掃碼打賞哦

今天注冊有機會得

100積分直接送

付費專欄免費學

大額優(yōu)惠券免費領

立即參與放棄機會

點擊
抽獎

慕課手記新用戶專享福利

恭喜你，你的運氣太好了，居然抽中了 100個積分！

恭喜你，抽中了價值元的專欄！

太棒了，直接落到你賬戶里！

積分商城里的羅技鼠標、機械鍵盤、
Kindle 閱讀器、小米平衡車
Apple iPad （10.2英寸）、大額優(yōu)惠券
在等著你去兌換了噢

作者：

免費贈送

兌換碼：1111222211 復制

優(yōu)惠券可用于購買實戰(zhàn)課、體系課
無門檻使用

先去看看，有什么好東西馬上兌換我愛學習，選課去


第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

前后端主流框架技術入門教程

HTML基础

文档结构

常见元素

CSS基础

CSS基础选择器

实践示例

JavaScript 基础

实践示例

Vue.js 基础

安装

基本用法

实践示例

Vue.js 指令实践

React.js 基础

安装

基本用法

实践示例

React.js Hooks和Context API实践

Angular.js 基础

安装

基本用法

实践示例

Angular.js 服务和服务注入实践

Node.js 基础

安装

基本用法

实践示例

Spring Boot 基础

安装

基本用法

实践示例

Django 基础

安装

基本用法

实践示例

Flask 基础

安装

基本用法

实践示例

Vue.js

React.js

Angular.js

Node.js

Spring Boot

Django

Flask

VS Code

IntelliJ IDEA

安装 npm 或 yarn

安装 Vue CLI 或 Create React App

安装 JDK

安装 Maven 或 Gradle

使用 Vue CLI 创建 Vue 项目

使用 Create React App 创建 React 项目

使用 Maven 创建 Spring Boot 项目

使用 Django 创建 Django 项目

页面加载

数据绑定

RESTful API

数据库操作

前端发送请求

后端接收请求并处理

返回数据给前端

前端数据分页

后端数据过滤

使用缓存

减少 HTTP 请求

使用异步编程

优化数据库查询

输入验证

防止跨站脚本攻击（XSS）

验证用户输入

防止 SQL 注入

使用 CI/CD 工具

自动化构建、测试和部署流程

閱讀免費教程