首頁手記前后端主流框架技術資料入門指南

前后端主流框架技術資料入門指南

標簽：

Html5 Python AngularJS

概述

本文全面介绍了前后端主流框架的技术资料，包括前端的Vue.js、React.js和Angular，以及后端的Node.js、Django和Spring Boot。详细讲解了每个框架的基础概念、选择指南、入门教程和实战案例，并提供了前后端框架集成的实例。此外，文章还分享了常见的错误调试技巧和性能优化方法。

前端主流框架技术资料

基础概念介绍

前端开发主要负责网页的用户界面设计与交互逻辑。前端技术主要包括HTML、CSS、JavaScript以及一些流行的前端框架。其中，HTML负责构建网页的结构，CSS用于控制网页的样式，而JavaScript则处理网页的行为，负责与用户的交互和动态内容更新。

HTML

HTML（HyperText Markup Language）是用于创建网页的标准标记语言。HTML文档由元素（element）组成，每个元素都有一个开始标签（start tag）和一个结束标签（end tag）。文档的结构通常从<html>标签开始，中间包含<head>和<body>标签。

<!DOCTYPE html>
<html>
<head>
  <title>示例网页</title>
</head>
<body>
  <h1>欢迎来到我的网页</h1>
  <p>这是一个示例HTML文档。</p>
</body>
</html>

CSS

CSS（Cascading Style Sheets）用于定义网页的样式，如字体、颜色、布局等。CSS可以内联在HTML元素中，也可以通过外部文件引入。

<!DOCTYPE html>
<html>
<head>
  <title>示例网页</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1 class="header">欢迎来到我的网页</h1>
  <p class="content">这是一个示例HTML文档。</p>
</body>
</html>

.header {
  color: blue;
  font-size: 24px;
}

.content {
  color: green;
}

JavaScript

JavaScript是一种脚本语言，用于网页的动态内容和交互。JavaScript可以内嵌在HTML中，也可以通过外部文件引入。

<!DOCTYPE html>
<html>
<head>
  <title>示例网页</title>
  <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="script.js"></script>
</head>
<body>
  <h1 id="welcome">欢迎来到我的网页</h1>
  <p id="content">这是一个示例HTML文档。</p>
</body>
</html>

document.getElementById('welcome').innerText = '欢迎来到动态网页';
let content = document.getElementById('content');
content.innerText = '这是通过JavaScript动态改变的内容。';

选择合适的前端框架

前端框架可以帮助你更快地搭建复杂的网页应用，提供丰富的组件、工具和库，简化开发过程。选择合适的框架需要考虑项目需求、团队技能和框架特性。

性能与灵活性

Vue.js: 轻量级框架，易于上手，适合小型到中型项目。
React.js: 适用于大型复杂应用，性能较好，社区活跃。
Angular: 大型企业级应用，具有完整的开发工具链，学习曲线较陡。

学习曲线

Vue.js: 学习曲线较为平缓，文档丰富。
React.js: 需要理解JSX语法和组件化思维。
Angular: 需要掌握TypeScript，学习周期较长。

社区与生态系统

Vue.js: 拥有庞大的社区支持，组件库丰富。
React.js: 社区活跃，有大量第三方库支持。
Angular: 官方和社区资源丰富，但生态系统相对较小。

Vue.js 入门教程

安装Vue.js

可以通过CDN引入Vue.js，适用于开发阶段。生产环境推荐使用构建工具（如Webpack）打包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">
    {{ message }}
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello, Vue!'
      }
    });
  </script>
</body>
</html>

基础组件

Vue.js使用组件化开发，每个组件都有自己的模板、样式和逻辑。

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Vue.js 组件',
      content: '这是一个简单的Vue.js组件示例。'
    };
  }
}
</script>

生命周期钩子

Vue.js提供了多种生命周期钩子，可以在组件的不同阶段执行特定操作。

export default {
  created() {
    console.log('组件创建完成');
  },
  mounted() {
    console.log('组件挂载完成');
  },
  beforeDestroy() {
    console.log('组件即将销毁');
  }
};

React.js 入门教程

安装React.js

通过npm（或yarn）安装React.js和相关库。

npm install react react-dom

基础组件

React使用JSX语法定义组件，每个组件都有自己的JSX模板和逻辑。

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

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>这是一个简单的React组件示例。</p>
    </div>
  );
}

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

生命周期钩子

React提供了多种生命周期钩子，可以在组件的不同阶段执行特定操作。

import React from 'react';

class App extends React.Component {
  componentDidMount() {
    console.log('组件挂载完成');
  }

  componentWillUnmount() {
    console.log('组件即将销毁');
  }

  render() {
    return (
      <div>
        <h1>Hello, React!</h1>
        <p>这是一个简单的React组件示例。</p>
      </div>
    );
  }
}

Angular 入门教程

安装Angular

通过Angular CLI快速搭建Angular应用。

npm install -g @angular/cli
ng new my-app
cd my-app
npm start

基础组件

Angular使用TypeScript定义组件，每个组件都有自己的模板、样式和逻辑。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  `
})
export class AppComponent {
  title = 'Angular 组件';
  content = '这是一个简单的Angular组件示例。';
}

生命周期钩子

Angular提供了多种生命周期钩子，可以在组件的不同阶段执行特定操作。

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  `
})
export class AppComponent implements OnInit, OnDestroy {
  title = 'Angular 组件';
  content = '这是一个简单的Angular组件示例。';

  ngOnInit() {
    console.log('组件初始化完成');
  }

  ngOnDestroy() {
    console.log('组件即将销毁');
  }
}

后端主流框架技术资料

基础概念介绍

后端开发主要负责服务器端逻辑处理，包括数据存储、业务逻辑处理、用户认证等。后端技术主要包括服务器、数据库和应用服务器。常用的服务器有Node.js、Python的Flask和Django，Java的Spring Boot等。每种服务器都有自己的框架和库，用于简化开发过程。

Node.js

Node.js是一个基于Chrome V8引擎的JavaScript运行环境，可以构建高性能、可扩展的服务器端应用。Node.js具有异步非阻塞I/O、事件驱动机制等特性，适合构建I/O密集型应用。

Python

Python是一种广泛使用的高级编程语言，具有简单和清晰的语法。Python后端框架主要有Flask、Django等。

Flask: 轻量级Web框架，适合小型项目。
Django: 全栈Web框架，适合大型项目。

Java

Java是一种面向对象的编程语言，广泛应用于企业级应用开发。Java后端框架主要有Spring Boot、Spring MVC等。

Spring Boot: 简化Spring应用开发，提供自动配置和依赖管理。
Spring MVC: MVC架构模式的实现，适用于企业级应用开发。

选择合适的后端框架

选择合适的后端框架需要考虑项目需求、技术栈和团队技能。下面是一些常见的后端框架及其特性：

Node.js

Express: 基于Node.js的Web框架，轻量级、灵活。
Koa: 由Express核心团队维护，基于Generator函数和中间件。
Hapi: 提供丰富的插件系统，适合企业级应用开发。

Python

Flask: 轻量级框架，适合小型项目。
Django: 全栈框架，内置了ORM、模板引擎等功能。

Java

Spring Boot: 快速构建独立的、生产级别的应用。
Spring MVC: MVC架构模式的实现，适用于企业级应用开发。

Node.js 入门教程

安装Node.js

通过Node.js官网下载安装包，或使用NVM（Node Version Manager）管理不同版本的Node.js。

# 使用NVM安装Node.js
nvm install 14

基础应用

使用Express构建简单的HTTP服务器。

npm install express

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

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

app.listen(3000, () => {
  console.log('服务器运行在 http://localhost:3000');
});

模板引擎

Node.js支持多种模板引擎，如EJS、Pug等。

npm install ejs

app.set('view engine', 'ejs');
app.set('views', './views');

app.get('/', (req, res) => {
  res.render('index', { message: 'Hello, EJS!' });
});

<!-- views/index.ejs -->
<!DOCTYPE html>
<html>
<head>
  <title>Node.js 模板引擎示例</title>
</head>
<body>
  <h1><%= message %></h1>
</body>
</html>

Django 入门教程

安装Django

通过Python包管理工具安装Django。

pip install django

基础应用

使用Django创建一个新的项目和应用。

django-admin startproject mysite
cd mysite
python manage.py startapp myapp

视图与URL

定义视图函数处理HTTP请求。

# myapp/views.py
from django.http import HttpResponse

def hello(request):
    return HttpResponse("Hello, Django!")

配置URL路由。

# mysite/urls.py
from django.contrib import admin
from django.urls import path
from myapp import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('hello/', views.hello),
]

模板

定义模板文件，使用Django模板语言。

<!-- myapp/templates/hello.html -->
<!DOCTYPE html>
<html>
<head>
  <title>模板示例</title>
</head>
<body>
  <h1>{{ message }}</h1>
</body>
</html>

修改视图函数返回模板。

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

def hello(request):
    return render(request, 'hello.html', {'message': 'Hello, Django!'})

Spring Boot 入门教程

安装Spring Boot

通过Spring Initializr或者IDEA等开发工具自动生成Spring Boot项目。

# Maven
mvn archetype:generate -DgroupId=com.example -DartifactId=myapp -DarchetypeArtifactId=maven-archetype-quickstart -DinteractiveMode=false

# Gradle
gradle init --type java-application

基础应用

创建一个简单的Spring Boot应用。

# Maven
mvn spring-boot:run

# Gradle
./gradlew bootRun

控制器

定义控制器处理HTTP请求。

package com.example.myapp;

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
@RestController
public class MyApplication {

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

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

模板引擎

使用Thymeleaf模板引擎。

<!-- pom.xml -->
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

<!-- templates/hello.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>模板示例</title>
</head>
<body>
  <h1 th:text="${message}">Hello, Spring Boot!</h1>
</body>
</html>

更新控制器返回模板。

// MyApplication.java
@GetMapping("/")
public String hello(Model model) {
  model.addAttribute("message", "Hello, Spring Boot!");
  return "hello";
}

前端框架实战案例

构建简单的Vue.js应用

项目结构

my-vue-app/
├── public/
│   ├── index.html
├── src/
│   ├── assets/
│   │   ├── logo.png
│   ├── components/
│   │   ├── HelloWorld.vue
│   ├── App.vue
│   ├── main.js
├── package.json

安装Vue.js

npm install vue

定义组件

<!-- src/components/HelloWorld.vue -->
<template>
  <div class="hello">
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      title: 'HelloWorld 组件',
      message: '这是一个简单的Vue.js组件示例。'
    };
  }
};
</script>

<style scoped>
.hello {
  color: #42b983;
}
</style>

主应用

<!-- src/App.vue -->
<template>
  <div id="app">
    <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./assets/logo.png" alt="logo" />
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  name: 'App',
  components: {
    HelloWorld
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

主入口文件

// src/main.js
import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: h => h(App)
}).$mount('#app');

配置文件

// package.json
{
  "name": "my-vue-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "vue-cli-service serve"
  },
  "dependencies": {
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "vue-template-compiler": "^2.6.11"
  }
}

构建简单的React.js应用

项目结构

my-react-app/
├── public/
│   ├── index.html
├── src/
│   ├── components/
│   │   ├── HelloWorld.js
│   ├── App.js
│   ├── index.js
├── package.json

安装React.js

npm install react react-dom

定义组件

// src/components/HelloWorld.js
import React from 'react';

function HelloWorld() {
  return (
    <div>
      <h1>HelloWorld 组件</h1>
      <p>这是一个简单的React.js组件示例。</p>
    </div>
  );
}

export default HelloWorld;

主应用

// src/App.js
import React from 'react';
import HelloWorld from './components/HelloWorld';

function App() {
  return (
    <div>
      <h1>React.js 示例</h1>
      <HelloWorld />
    </div>
  );
}

export default App;

主入口文件

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

配置文件

// package.json
{
  "name": "my-react-app",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start"
  },
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  }
}

构建简单的Angular应用

项目结构

my-angular-app/
├── src/
│   ├── app/
│   │   ├── components/
│   │   │   ├── hello-world/
│   │   │   │   ├── hello-world.component.ts
│   │   │   │   ├── hello-world.component.html
│   │   │   │   ├── hello-world.component.css
│   │   ├── app.component.ts
│   │   ├── app.component.html
│   │   ├── app.module.ts
│   ├── main.ts
│   ├── index.html
├── package.json

安装Angular

npm install @angular/core @angular/common @angular/platform-browser @angular/platform-browser-dynamic @angular/compiler

定义组件

// src/app/components/hello-world/hello-world.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  templateUrl: './hello-world.component.html',
  styleUrls: ['./hello-world.component.css']
})
export class HelloWorldComponent {
  title = 'HelloWorld 组件';
  message = '这是一个简单的Angular组件示例。';
}

<!-- src/app/components/hello-world/hello-world.component.html -->
<div>
  <h1>{{ title }}</h1>
  <p>{{ message }}</p>
</div>

/* src/app/components/hello-world/hello-world.component.css */
div {
  color: blue;
}

主应用

// src/app/app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular 示例';
}

<!-- src/app/app.component.html -->
<div>
  <app-hello-world></app-hello-world>
</div>

主入口文件

// src/main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

配置文件

// package.json
{
  "name": "my-angular-app",
  "version": "0.0.0",
  "scripts": {
    "start": "ng serve"
  },
  "dependencies": {
    "@angular/animations": "~11.0.0",
    "@angular/common": "~11.0.0",
    "@angular/compiler": "~11.0.0",
    "@angular/core": "~11.0.0",
    "@angular/forms": "~11.0.0",
    "@angular/platform-browser": "~11.0.0",
    "@angular/platform-browser-dynamic": "~11.0.0",
    "@angular/router": "~11.0.0",
    "rxjs": "~6.5.1",
    "tslib": "^2.0.0",
    "zone.js": "^0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1100.0",
    "@angular/cli": "~11.0.0",
    "@angular/compiler-cli": "~11.0.0",
    "@types/node": "^12.11.1",
    "typescript": "~4.0.3"
  }
}

后端框架实战案例

构建简单的Node.js应用

项目结构

my-node-app/
├── app.js
├── package.json

安装Node.js

npm install express

基础应用

// app.js
const express = require('express');
const app = express();

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

app.listen(3000, () => {
  console.log('服务器运行在 http://localhost:3000');
});

配置文件

// package.json
{
  "name": "my-node-app",
  "version": "1.0.0",
  "main": "app.js",
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "express": "^4.17.1"
  }
}

构建简单的Django应用

项目结构

my-django-app/
├── myapp/
│   ├── models.py
│   ├── views.py
│   ├── urls.py
├── mysite/
│   ├── settings.py
│   ├── urls.py
│   ├── wsgi.py
├── manage.py
├── requirements.txt

安装Django

pip install django

基础应用

# 创建项目和应用
django-admin startproject mysite
cd mysite
python manage.py startapp myapp

定义模型

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

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

定义视图

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

def book_list(request):
    books = Book.objects.all()
    return render(request, 'book_list.html', {'books': books})

URL配置

# mysite/urls.py
from django.contrib import admin
from django.urls import path
from myapp import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('books/', views.book_list, name='book_list'),
]

模板文件

<!-- myapp/templates/book_list.html -->
<!DOCTYPE html>
<html>
<head>
  <title>书籍列表</title>
</head>
<body>
  <h1>书籍列表</h1>
  <ul>
    {% for book in books %}
      <li>{{ book.title }} - {{ book.author }} - {{ book.pub_date }}</li>
    {% endfor %}
  </ul>
</body>
</html>

配置文件

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

# requirements.txt
Django>=3.1,<4.0

构建简单的Spring Boot应用

项目结构

my-spring-boot-app/
├── src/
│   ├── main/
│   │   ├── java/
│   │   │   └── com/
│   │   │       └── example/
│   │   │           └── myapp/
│   │   │               ├── MyApplication.java
│   │   │               ├── controller/
│   │   │               │   └── HelloController.java
│   │   ├── resources/
│   │   │   └── application.properties
├── pom.xml

安装Spring Boot

<!-- pom.xml -->
<dependencies>
  <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
  </dependency>
  <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
  </dependency>
</dependencies>

基础应用

// src/main/java/com/example/myapp/MyApplication.java
package com.example.myapp;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class MyApplication {

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

控制器

// src/main/java/com/example/myapp/controller/HelloController.java
package com.example.myapp.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HelloController {

  @GetMapping("/")
  public String hello(Model model) {
    model.addAttribute("message", "Hello, Spring Boot!");
    return "hello";
  }
}

模板文件

<!-- src/main/resources/templates/hello.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>Spring Boot 示例</title>
</head>
<body>
  <h1 th:text="${message}">Hello, Spring Boot!</h1>
</body>
</html>

配置文件

# src/main/resources/application.properties
spring.autoconfigure.exclude=org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration

前后端框架集成入门

前后端分离开发简介

前后端分离开发是指前端和后端开发分开，前端负责用户界面和交互，后端负责服务器端逻辑处理。这种方式使得前后端可以独立开发、测试和部署，提高了开发效率和代码质量。

RESTful API

RESTful API是前后端分离开发的重要组成部分。RESTful API通过HTTP协议的GET、POST、PUT、DELETE等方法实现资源的增删改查操作。前端通过发送HTTP请求调用后端API，后端通过处理请求返回响应数据。

数据传输格式

前后端之间传输数据通常采用JSON格式。JSON是一种轻量级的数据交换格式，易于阅读和编写，适合前后端数据交互。

使用RESTful API连接前后端

以下是一个简单的前后端分离开发示例，前端使用Vue.js调用后端Node.js提供的RESTful API。

后端API

// app.js
const express = require('express');
const bodyParser = require('body-parser');
const app = express();

app.use(bodyParser.json());

let todos = [
  { id: 1, text: '学习Vue.js', done: true },
  { id: 2, text: '学习React.js', done: false },
  { id: 3, text: '学习Angular', done: false },
];

app.get('/api/todos', (req, res) => {
  res.json(todos);
});

app.post('/api/todos', (req, res) => {
  const todo = req.body;
  todos.push(todo);
  res.json(todos);
});

app.put('/api/todos/:id', (req, res) => {
  const id = parseInt(req.params.id);
  const todo = todos.find(t => t.id === id);
  if (todo) {
    todo.text = req.body.text;
    todo.done = req.body.done;
  }
  res.json(todos);
});

app.delete('/api/todos/:id', (req, res) => {
  const id = parseInt(req.params.id);
  todos = todos.filter(t => t.id !== id);
  res.json(todos);
});

app.listen(3000, () => {
  console.log('服务器运行在 http://localhost:3000');
});

前端调用API

<!-- src/components/TodoList.vue -->
<template>
  <div>
    <h1>TodoList</h1>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        {{ todo.text }} <button @click="deleteTodo(todo)">删除</button>
      </li>
    </ul>
    <form @submit.prevent="addTodo">
      <input v-model="newTodo.text" placeholder="新任务">
      <button type="submit">添加</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      todos: [],
      newTodo: {
        text: '',
        done: false
      }
    };
  },
  created() {
    this.fetchTodos();
  },
  methods: {
    fetchTodos() {
      axios.get('/api/todos')
        .then(response => {
          this.todos = response.data;
        });
    },
    addTodo() {
      axios.post('/api/todos', this.newTodo)
        .then(response => {
          this.todos = response.data;
          this.newTodo = { text: '', done: false };
        });
    },
    deleteTodo(todo) {
      axios.delete(`/api/todos/${todo.id}`)
        .then(response => {
          this.todos = response.data;
        });
    }
  }
};
</script>

Vue.js与Node.js集成实例

后端Node.js应用

// app.js
const express = require('express');
const bodyParser = require('body-parser');
const app = express();

app.use(bodyParser.json());

let todos = [
  { id: 1, text: '学习Vue.js', done: true },
  { id: 2, text: '学习React.js', done: false },
  { id: 3, text: '学习Angular', done: false },
];

app.get('/api/todos', (req, res) => {
  res.json(todos);
});

app.post('/api/todos', (req, res) => {
  const todo = req.body;
  todos.push(todo);
  res.json(todos);
});

app.put('/api/todos/:id', (req, res) => {
  const id = parseInt(req.params.id);
  const todo = todos.find(t => t.id === id);
  if (todo) {
    todo.text = req.body.text;
    todo.done = req.body.done;
  }
  res.json(todos);
});

app.delete('/api/todos/:id', (req, res) => {
  const id = parseInt(req.params.id);
  todos = todos.filter(t => t.id !== id);
  res.json(todos);
});

app.listen(3000, () => {
  console.log('服务器运行在 http://localhost:3000');
});

前端Vue.js应用

<!-- src/components/TodoList.vue -->
<template>
  <div>
    <h1>TodoList</h1>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        {{ todo.text }} <button @click="deleteTodo(todo)">删除</button>
      </li>
    </ul>
    <form @submit.prevent="addTodo">
      <input v-model="newTodo.text" placeholder="新任务">
      <button type="submit">添加</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      todos: [],
      newTodo: {
        text: '',
        done: false
      }
    };
  },
  created() {
    this.fetchTodos();
  },
  methods: {
    fetchTodos() {
      axios.get('/api/todos')
        .then(response => {
          this.todos = response.data;
        });
    },
    addTodo() {
      axios.post('/api/todos', this.newTodo)
        .then(response => {
          this.todos = response.data;
          this.newTodo = { text: '', done: false };
        });
    },
    deleteTodo(todo) {
      axios.delete(`/api/todos/${todo.id}`)
        .then(response => {
          this.todos = response.data;
        });
    }
  }
};
</script>

React.js与Spring Boot集成实例

后端Spring Boot应用

// src/main/java/com/example/myapp/controller/TodoController.java
package com.example.myapp.controller;

import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;

import java.util.ArrayList;
import java.util.List;

@RestController
@RequestMapping("/api/todos")
public class TodoController {

  private List<Todo> todos = new ArrayList<>();
  {
    todos.add(new Todo(1, "学习Vue.js", true));
    todos.add(new Todo(2, "学习React.js", false));
    todos.add(new Todo(3, "学习Angular", false));
  }

  @GetMapping
  public ResponseEntity<List<Todo>> getTodos() {
    return ResponseEntity.ok(todos);
  }

  @PostMapping
  public ResponseEntity<Todo> addTodo(@RequestBody Todo todo) {
    todos.add(todo);
    return ResponseEntity.status(HttpStatus.CREATED).body(todo);
  }

  @PutMapping("/{id}")
  public ResponseEntity<Todo> updateTodo(@PathVariable int id, @RequestBody Todo todo) {
    Todo existingTodo = todos.stream().filter(t -> t.getId() == id).findFirst().orElse(null);
    if (existingTodo != null) {
      existingTodo.setText(todo.getText());
      existingTodo.setDone(todo.isDone());
    }
    return ResponseEntity.ok(existingTodo);
  }

  @DeleteMapping("/{id}")
  public ResponseEntity<Void> deleteTodo(@PathVariable int id) {
    todos.removeIf(todo -> todo.getId() == id);
    return ResponseEntity.ok().build();
  }

  private static class Todo {
    private int id;
    private String text;
    private boolean done;

    public Todo(int id, String text, boolean done) {
      this.id = id;
      this.text = text;
      this.done = done;
    }

    public int getId() {
      return id;
    }

    public void setId(int id) {
      this.id = id;
    }

    public String getText() {
      return text;
    }

    public void setText(String text) {
      this.text = text;
    }

    public boolean isDone() {
      return done;
    }

    public void setDone(boolean done) {
      this.done = done;
    }
  }
}

前端React.js应用

// src/components/TodoList.js
import React, { useEffect, useState } from 'react';
import axios from 'axios';

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState({ text: '', done: false });

  useEffect(() => {
    fetchTodos();
  }, []);

  const fetchTodos = () => {
    axios.get('/api/todos')
      .then(response => {
        setTodos(response.data);
      });
  };

  const addTodo = () => {
    axios.post('/api/todos', newTodo)
      .then(response => {
        setTodos(response.data);
        setNewTodo({ text: '', done: false });
      });
  };

  const deleteTodo = (id) => {
    axios.delete(`/api/todos/${id}`)
      .then(() => {
        setTodos(todos.filter(todo => todo.id !== id));
      });
  };

  return (
    <div>
      <h1>TodoList</h1>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            {todo.text} <button onClick={() => deleteTodo(todo.id)}>删除</button>
          </li>
        ))}
      </ul>
      <form onSubmit={(e) => {
        e.preventDefault();
        addTodo();
      }}>
        <input value={newTodo.text} onChange={(e) => setNewTodo({ ...newTodo, text: e.target.value })} placeholder="新任务" />
        <button type="submit">添加</button>
      </form>
    </div>
  );
}

export default TodoList;

Angular与Django集成实例

后端Django应用

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

class Todo(models.Model):
    text = models.CharField(max_length=100)
    done = models.BooleanField(default=False)

    def __str__(self):
        return self.text

# myapp/views.py
from django.shortcuts import render
from django.http import JsonResponse
from .models import Todo

def todo_list(request):
    todos = Todo.objects.all()
    return JsonResponse([{'id': todo.id, 'text': todo.text, 'done': todo.done} for todo in todos], safe=False)

def add_todo(request):
    if request.method == 'POST':
        text = request.POST.get('text')
        done = request.POST.get('done', False)
        todo = Todo.objects.create(text=text, done=done)
        return JsonResponse({'id': todo.id, 'text': todo.text, 'done': todo.done})
    return JsonResponse({'error': 'Invalid request'}, status=400)

def update_todo(request, id):
    if request.method == 'PUT':
        todo = Todo.objects.get(id=id)
        todo.text = request.PUT.get('text')
        todo.done = request.PUT.get('done', False)
        todo.save()
        return JsonResponse({'id': todo.id, 'text': todo.text, 'done': todo.done})
    return JsonResponse({'error': 'Invalid request'}, status=400)

def delete_todo(request, id):
    if request.method == 'DELETE':
        Todo.objects.get(id=id).delete()
        return JsonResponse({'message': 'Todo deleted'}, status=200)
    return JsonResponse({'error': 'Invalid request'}, status=400)

前端Angular应用

// src/app/components/todo-list/todo-list.component.ts
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-todo-list',
  templateUrl: './todo-list.component.html',
  styleUrls: ['./todo-list.component.css']
})
export class TodoListComponent implements OnInit {
  todos: any[] = [];
  newTodo = { text: '', done: false };

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.fetchTodos();
  }

  fetchTodos() {
    this.http.get('/api/todos').subscribe(response => {
      this.todos = response;
    });
  }

  addTodo() {
    this.http.post('/api/todos', this.newTodo).subscribe(response => {
      this.todos = [...this.todos, response];
      this.newTodo = { text: '', done: false };
    });
  }

  deleteTodo(id: number) {
    this.http.delete(`/api/todos/${id}`).subscribe(() => {
      this.todos = this.todos.filter(todo => todo.id !== id);
    });
  }
}

<!-- src/app/components/todo-list/todo-list.component.html -->
<div>
  <h1>TodoList</h1>
  <ul>
    <li *ngFor="let todo of todos">
      {{ todo.text }} <button (click)="deleteTodo(todo.id)">删除</button>
    </li>
  </ul>
  <form (submit)="addTodo()">
    <input [(ngModel)]="newTodo.text" placeholder="新任务" />
    <button type="submit">添加</button>
  </form>
</div>

项目结构

my-angular-app/
├── src/
│   ├── app/
│   │   ├── components/
│   │   │   ├── todo-list/
│   │   │   │   ├── todo-list.component.ts
│   │   │   │   ├── todo-list.component.html
│   │   │   │   ├── todo-list.component.css
│   │   ├── app.component.ts
│   │   ├── app.component.html
│   │   ├── app.module.ts
│   ├── main.ts
│   ├── index.html
├── package.json

前后端框架集成入门总结

Angular前端

// src/app/components/todo-list/todo-list.component.ts
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-todo-list',
  templateUrl: './todo-list.component.html',
  styleUrls: ['./todo-list.component.css']
})
export class TodoListComponent implements OnInit {
  todos: any[] = [];
  newTodo = { text: '', done: false };

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.fetchTodos();
  }

  fetchTodos() {
    this.http.get('/api/todos').subscribe(response => {
      this.todos = response;
    });
  }

  addTodo() {
    this.http.post('/api/todos', this.newTodo).subscribe(response => {
      this.todos = [...this.todos, response];
      this.newTodo = { text: '', done: false };
    });
  }

  deleteTodo(id: number) {
    this.http.delete(`/api/todos/${id}`).subscribe(() => {
      this.todos = this.todos.filter(todo => todo.id !== id);
    });
  }
}

<!-- src/app/components/todo-list/todo-list.component.html -->
<div>
  <h1>TodoList</h1>
  <ul>
    <li *ngFor="let todo of todos">
      {{ todo.text }} <button (click)="deleteTodo(todo.id)">删除</button>
    </li>
  </ul>
  <form (submit)="addTodo()">
    <input [(ngModel)]="newTodo.text" placeholder="新任务" />
    <button type="submit">添加</button>
  </form>
</div>

Django后端

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

class Todo(models.Model):
    text = models.CharField(max_length=100)
    done = models.BooleanField(default=False)

    def __str__(self):
        return self.text

# myapp/views.py
from django.shortcuts import render
from django.http import JsonResponse
from .models import Todo

def todo_list(request):
    todos = Todo.objects.all()
    return JsonResponse([{'id': todo.id, 'text': todo.text, 'done': todo.done} for todo in todos], safe=False)

def add_todo(request):
    if request.method == 'POST':
        text = request.POST.get('text')
        done = request.POST.get('done', False)
        todo = Todo.objects.create(text=text, done=done)
        return JsonResponse({'id': todo.id, 'text': todo.text, 'done': todo.done})
    return JsonResponse({'error': 'Invalid request'}, status=400)

def update_todo(request, id):
    if request.method == 'PUT':
        todo = Todo.objects.get(id=id)
        todo.text = request.PUT.get('text')
        todo.done = request.PUT.get('done', False)
        todo.save()
        return JsonResponse({'id': todo.id, 'text': todo.text, 'done': todo.done})
    return JsonResponse({'error': 'Invalid request'}, status=400)

def delete_todo(request, id):
    if request.method == 'DELETE':
        Todo.objects.get(id=id).delete()
        return JsonResponse({'message': 'Todo deleted'}, status=200)
    return JsonResponse({'error': 'Invalid request'}, status=400)

配置文件

# mysite/urls.py
from django.contrib import admin
from django.urls import path
from myapp import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/todos/', views.todo_list, name='todo_list'),
    path('api/todos/add/', views.add_todo, name='add_todo'),
    path('api/todos/update/<int:id>/', views.update_todo, name='update_todo'),
    path('api/todos/delete/<int:id>/', views.delete_todo, name='delete_todo'),
]

常见问题及解决方法

常见错误及调试技巧

前端错误

404 错误

原因：请求的资源路径不存在。
解决方法：检查请求的URL路径是否正确，服务器端是否正确配置了路由。

CORS 错误

原因：浏览器出于安全考虑阻止了跨域请求。
解决方法：在后端服务器配置CORS策略，允许特定来源的跨域请求。

语法错误

原因：代码语法错误，如拼错关键字、缺少分号等。
解决方法：使用代码编辑器的语法检查功能，或通过浏览器开发者工具查看错误信息。

后端错误

500 错误

原因：服务器内部错误，如未捕获的异常。
解决方法：查看服务器日志，找到具体的错误信息并修复。

404 错误

原因：请求的资源路径不存在。
解决方法：检查路由配置，确保路径正确且资源存在。

语法错误

原因：代码语法错误，如拼错关键字、缺少分号等。
解决方法：使用IDE的语法检查功能，或通过日志查看错误信息。

调试技巧

浏览器开发者工具：使用Chrome、Firefox等浏览器的开发者工具，查看网络请求、元素结构和控制台输出。
断点调试：在代码中设置断点，逐步执行代码，观察变量变化。
日志输出：在关键位置输出日志信息，记录执行流程和变量状态。
单元测试：编写单元测试用例，验证代码逻辑是否正确。

性能优化方法

前端性能优化

减少HTTP请求次数

合并CSS/JS文件：将多个CSS/JS文件合并为一个文件，减少HTTP请求次数。
使用CDN：将静态资源部署到CDN，减少服务器响应时间。

压缩资源文件

压缩HTML：使用HTML压缩工具减少HTML文件大小。
压缩CSS/JS：使用压缩工具压缩CSS/JS文件，减少文件大小。

使用缓存技术

浏览器缓存：设置HTTP响应头，让浏览器缓存静态资源。
CDN缓存：利用CDN的缓存机制减少重复请求。

减少DOM操作

批量更新DOM：尽量减少DOM操作次数，将多次操作合并为一次操作。
使用虚拟DOM：使用React.js等框架提供的虚拟DOM技术，减少DOM重绘次数。

后端性能优化

数据库优化

索引优化：为经常查询的字段创建索引，减少查询时间。
查询优化：优化数据库查询语句，减少查询复杂度。

缓存机制

页面缓存：使用缓存技术缓存经常访问的页面，减少数据库查询次数。
数据缓存：缓存频繁访问的数据，减少数据库请求次数。

异步处理

异步IO：使用Node.js等支持异步IO的语言，提高服务器响应速度。
异步任务：将耗时任务异步处理，避免阻塞主线程。

代码优化

减少循环次数：优化循环逻辑，减少循环次数。
减少函数调用次数：尽量减少函数调用次数，减少函数调用开销。

部署上线前的注意事项

环境一致性

开发环境与生产环境：保持开发环境与生产环境的一致性，避免因环境差异导致的问题。

数据库迁移

数据迁移：确保数据库迁移脚本正确执行，避免数据丢失或不一致。
备份与恢复：定期备份数据库，确保在出现问题时能够快速恢复。

代码质量

代码审查：进行代码审查，确保代码逻辑正确，没有明显的错误。
单元测试：编写单元测试用例，验证代码逻辑。

安全性

数据加密：对敏感数据进行加密存储，防止数据泄露。
权限控制：严格控制应用的权限，避免越权操作。
安全测试：进行安全测试，确保应用没有安全漏洞。

性能监控

监控工具：部署性能监控工具，实时监控应用性能。
日志分析：定期分析日志，发现并解决潜在问题。
性能调优：根据监控数据进行性能调优，提高应用性能。

點擊查看更多內容

為 TA 點贊

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

評論

評論

共同學習，寫下你的評論

評論加載中...

展開查看更多評論

作者其他優質文章

正在加載中

冉冉說

手記
篇

粉絲

44

獲贊與收藏

197

關注作者，訂閱最新文章

閱讀免費教程

Html5 入門教程

25個小節 62022 826

Python 辦公自動化教程

17個小節 26775 907

Python 算法入門教程

15個小節 29165 1121

Python 進階應用教程

38個小節 69964 1093

推薦

評論

收藏

共同學習，寫下你的評論



感謝您的支持，我會繼續努力的～

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

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

支付方式

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

今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與放棄機會

點擊
抽獎

慕課手記新用戶專享福利

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

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

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

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

作者：

免費贈送

兌換碼：1111222211 復制

優惠券可用于購買實戰課、體系課
無門檻使用

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

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

前后端主流框架技術資料入門指南

HTML

CSS

JavaScript

性能与灵活性

学习曲线

社区与生态系统

安装Vue.js

基础组件

生命周期钩子

安装React.js

基础组件

生命周期钩子

安装Angular

基础组件

生命周期钩子

Node.js

Python

Java

Node.js

Python

Java

安装Node.js

基础应用

模板引擎

安装Django

基础应用

视图与URL

模板

安装Spring Boot

基础应用

控制器

模板引擎

项目结构

安装Vue.js

定义组件

主应用

主入口文件

配置文件

项目结构

安装React.js

定义组件

主应用

主入口文件

配置文件

项目结构

安装Angular

定义组件

主应用

主入口文件

配置文件

项目结构

安装Node.js

基础应用

配置文件

项目结构

安装Django

基础应用

定义模型

定义视图

URL配置

模板文件

配置文件

项目结构

安装Spring Boot

基础应用

控制器

模板文件

配置文件

RESTful API

数据传输格式

后端API

前端调用API

后端Node.js应用

前端Vue.js应用

后端Spring Boot应用

前端React.js应用