为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 前后端分离资料：新手入门教程

前后端分离资料：新手入门教程

标签：
前端工具 设计 API
概述

本文介绍了前后端分离的概念及其技术栈，详细讲解了前端与后端的技术对比和基本原理，提供了从入门到实践的全面指南。文中涵盖了HTML、CSS、JavaScript等前端技术，以及Python、Node.js等后端技术的使用方法，旨在帮助新手快速掌握前后端分离资料。

前后端分离资料：新手入门教程
前端与后端简介

介绍前端和后端的概念

前端是指用户通过浏览器直接与应用交互的部分，通常包括页面布局、样式渲染、交互逻辑等。前端负责展示用户界面，通过HTML、CSS和JavaScript来创建动态且交互性强的网页。后端则是服务器端的代码，负责处理数据、业务逻辑、数据库交互等。后端通常由服务器、应用和数据库组成，通过网络协议与前端通信。

前端与后端的技术栈对比

前端与后端在技术栈上有明显的区别：

  • 前端技术栈：HTML、CSS、JavaScript（框架如Vue.js、React.js）、前端构建工具（如Webpack）
  • 后端技术栈：服务器端语言（如Python、Node.js）、数据库（如MySQL、MongoDB）、Web服务器（如Express.js、Django）、API设计（如RESTful API）

前后端分离的基本原则

前后端分离的核心原则是将前端代码与后端服务解耦，前端专注于展示和交互，后端专注于数据处理和业务逻辑。分离后，前端可以独立部署和测试，后端也可以独立维护和升级。这提高了开发效率和代码的可维护性。

示例：前后端分离的基本实现

前端代码示例：

<!DOCTYPE html>
<html>
<head>
  <title>前端页面示例</title>
</head>
<body>
  <h1>欢迎来到我的页面</h1>
  <button id="fetchData">获取数据</button>
  <div id="data"></div>
  <script>
    document.getElementById('fetchData').addEventListener('click', () => {
      fetch('http://localhost:3000/data')
        .then(response => response.json())
        .then(data => {
          document.getElementById('data').innerHTML = JSON.stringify(data);
        })
        .catch(error => console.error('Error:', error));
    });
  </script>
</body>
</html>

后端代码示例：

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

app.get('/data', (req, res) => {
  res.json({ name: 'John Doe', email: 'john@example.com' });
});

app.listen(3000, () => {
  console.log('Server running at http://localhost:3000');
});
前端技术基础

HTML、CSS、JavaScript的基本使用

HTML是网页的基础结构，CSS用于定义样式，JavaScript则处理动态行为。

  • HTML示例代码：

    <html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是一个简单的HTML示例。</p>
</body>
</html>

  • CSS示例代码：

    body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}

h1 {
color: #333;
}

p {
color: #666;
}

  • JavaScript示例代码：

    function sayHello() {
alert("Hello, welcome to my website!");
}

document.getElementById("myButton").addEventListener("click", sayHello);

常见前端框架Vue.js和React.js简介

Vue.js

Vue.js是一个渐进式的JavaScript框架，非常适合构建交互式界面。它易于学习，灵活并且可扩展。

  • Vue.js基本示例代码：

    <!DOCTYPE html>
<html>
<head>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
</head>
<body>
<div id="app">
  {{ message }}
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue.js!'
    }
  });
</script>
</body>
</html>

React.js

React.js是一个用于构建用户界面的JavaScript库，由Facebook维护。它用JSX（JS和XML的混合语法）来描述UI，支持组件化开发。

  • React.js基本示例代码：

    <!DOCTYPE html>
<html>
<head>
<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/babel.min.js"></script>
</head>
<body>
<div id="root"></div>

<script type="text/babel">
  ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('root')
  );
</script>
</body>
</html>

静态文件的构建与优化

静态文件的构建通常使用前端构建工具，如Webpack。Webpack通过模块化的方式将代码打包为可部署的静态文件。

Webpack基本配置

  • webpack.config.js示例代码：

    const path = require('path');

module.exports = {
entry: './src/index.js',
output: {
  filename: 'bundle.js',
  path: path.resolve(__dirname, 'dist')
},
module: {
  rules: [
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }
  ]
}
};
后端技术基础

服务器端语言Python与Node.js简介

Python

Python是一种高级语言，广泛应用于服务器端开发。Flask和Django是两种流行的Python Web框架。

  • Flask基本示例代码：

    from flask import Flask
app = Flask(__name__)

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

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

Node.js

Node.js是一个开源的、跨平台的JavaScript运行环境。它使得JavaScript可以脱离浏览器，在服务器端执行。

  • Node.js基本示例代码：

    const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello, World!\n');
});

server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});

RESTful API设计与实现

RESTful API是一种遵循REST原则的Web服务接口。它基于HTTP协议，使用标准的HTTP方法（GET、POST、PUT、DELETE）操作资源。

  • RESTful API示例代码（Node.js Express）：

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

let todos = [];

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

app.post('/todos', (req, res) => {
const todo = {
  id: Date.now(),
  text: req.body.text,
  completed: false
};
todos.push(todo);
res.status(201).json(todo);
});

app.put('/todos/:id', (req, res) => {
const todoIndex = todos.findIndex(todo => todo.id === parseInt(req.params.id));
if (todoIndex > -1) {
  todos[todoIndex] = {
    ...todos[todoIndex],
    text: req.body.text,
    completed: req.body.completed
  };
  res.json(todos[todoIndex]);
} else {
  res.status(404).json({ message: 'Not found' });
}
});

app.delete('/todos/:id', (req, res) => {
const todoIndex = todos.findIndex(todo => todo.id === parseInt(req.params.id));
if (todoIndex > -1) {
  todos.splice(todoIndex, 1);
  res.status(204).end();
} else {
  res.status(404).json({ message: 'Not found' });
}
});

app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});

数据库（MySQL、MongoDB）的使用与管理

MySQL

MySQL是一种关系型数据库，适合结构化的数据存储。常用命令如下：

  • 安装与启动：

    sudo apt-get install mysql-server
sudo service mysql start
  • 创建数据库与表： 
    CREATE DATABASE mydb;
USE mydb;
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100),
email VARCHAR(100)
);

MongoDB

MongoDB是一种NoSQL数据库，适合非结构化的数据存储。常用命令如下：

  • 安装与启动：

    sudo apt-get install mongodb
sudo service mongodb start
  • 创建集合与插入文档： 
    use mydb;
db.users.insert({
name: 'John Doe',
email: 'john@example.com'
});
前后端交互

HTTP协议基础知识

HTTP（Hypertext Transfer Protocol）是用于在Web上传送或接收数据的协议。它定义了客户端（浏览器）和服务器之间的通信规则。主要方法包括：

  • GET：请求特定资源
  • POST：提交数据到服务器
  • PUT：更新资源
  • DELETE：删除资源

Ajax技术应用及案例

AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下，与服务器交互并更新部分页面的技术。

  • Ajax基本示例代码：

    function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState === 4 && this.status === 200) {
    document.getElementById("demo").innerHTML = this.responseText;
  }
};
xhttp.open("GET", "demo_test.txt", true);
xhttp.send();
}

  • 使用XMLHttpRequest的完整示例代码：

    <!DOCTYPE html>
<html>
<body>

<h2>AJAX 实例</h2>

<button type="button" onclick="loadDoc()">点击这里</button>

<p id="demo"></p>

<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState === 4 && this.status === 200) {
    document.getElementById("demo").innerHTML = this.responseText;
  }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
</script>

</body>
</html>

跨域问题及解决方案

跨域问题是指浏览器由于同源策略限制，不允许一个域内的页面去请求另一个域内的资源。解决方法包括CORS、JSONP等。

  • CORS（跨源资源共享）：

    • 服务器端设置CORS头： 
      app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});

  • JSONP：

    • 服务器端JSONP响应： 
      app.get('/callback', (req, res) => {
const callback = req.query.callback;
const data = { name: 'John Doe', email: 'john@example.com' };
res.send(`${callback}(${JSON.stringify(data)})`);
});
  • 使用fetch API和CORS： 
    fetch('https://example.com/api/data', {
method: 'GET',
headers: {
  'Content-Type': 'application/json',
  'Access-Control-Allow-Origin': '*'
}
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
项目实践与部署

从零开始构建一个简单的前后端分离项目

项目结构

my-project
|- frontend
|  |- public
|  |- src
|- backend
|  |- routes
|  |- models
|  |- app.js
|- package.json
|- README.md

前端部分

  • 安装依赖：

    cd frontend
npm install
  • 开发服务器： 
    npm run dev

后端部分

  • 安装依赖：

    cd backend
npm install
  • 启动服务器： 
    node app.js

完整代码示例

  • 前端示例代码 (frontend/public/index.html)：

    <!DOCTYPE html>
<html>
<head>
<title>前端页面</title>
</head>
<body>
<h1>欢迎来到我的页面</h1>
<button id="fetchData">获取数据</button>
<div id="data"></div>

<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/bundle.js"></script>
</body>
</html>

  • 前端示例代码 (frontend/src/main.js)：

    import axios from 'axios';

document.getElementById('fetchData').addEventListener('click', () => {
axios.get('http://localhost:3000/data')
  .then(response => {
    document.getElementById('data').innerHTML = JSON.stringify(response.data);
  })
  .catch(error => console.error('Error:', error));
});

  • 后端示例代码 (backend/app.js)：

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

app.get('/data', (req, res) => {
res.json({ name: 'John Doe', email: 'john@example.com' });
});

app.listen(3000, () => {
console.log('Server running at http://localhost:3000');
});

项目部署的步骤与注意事项

  1. 选择合适的服务器：根据项目规模选择合适的服务商，如AWS、DigitalOcean等。
  2. 配置服务器环境：安装必要的软件（如Node.js、Nginx）。
  3. 上传代码：使用FTP、SCP等工具将代码上传到服务器。
  4. 安装依赖：在服务器上安装项目所需的依赖。
  5. 启动应用：通过PM2等工具管理应用进程。
  6. 配置域名：将域名指向服务器IP地址。
  7. 设置SSL证书：启用HTTPS，提高安全性。
  8. 监控与维护：定期检查服务器状态，确保应用正常运行。

使用Git进行代码版本控制

  • 初始化Git仓库：

    git init

  • 添加文件到仓库：

    git add .

  • 提交更改：

    git commit -m "Initial commit"

  • 创建远程仓库：

    git remote add origin https://github.com/yourusername/yourrepo.git
  • 推送代码到远程仓库： 
    git push -u origin master
其他相关资源与工具

常用开发工具介绍

  • VS Code：一个由微软开发的免费源代码编辑器，支持多种编程语言。
  • WebStorm：一个基于JetBrains的JavaScript IDE，支持Vue.js和React.js等前端框架。

学习前后端分离的优质网站与课程推荐

  • 慕课网：提供丰富的前后端课程和项目实战，适合各种水平的学习者。
  • MDN Web Docs：官方文档，详细介绍了Web开发的相关技术。
  • Stack Overflow：开发者问答社区，可以获取实时的技术支持。

常见问题解答及社区支持

  • 跨域问题：可以通过设置CORS头或使用JSONP来解决。
  • 构建工具配置复杂：可以参考官方文档或社区教程，逐步配置。
  • 性能优化：可以使用CDN、缓存策略等技术来提高网站性能。

通过以上步骤和知识，希望你能够更好地理解和掌握前后端分离技术，为你的Web开发之路打下坚实的基础。

点击查看更多内容
发表于 2024.09.19 18:15， 共 54 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

慕森卡

手记
篇
粉丝
120
获赞与收藏
527

关注作者，订阅最新文章

相关文章推荐

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消