网站排名推广平台,提供网站排名推广优化、关键词整站排名推广、SEO快速排名推广技巧。

网站排名推广平台

专注于网站排名推广优化SEO关键词快速排名优化关键词整站推广渠道

1.单页面应用程序

作者:jcmp      发布时间:2021-04-22      浏览量:0
一、网站交互方式二、模拟前后端分离开发模

一、网站交互方式

二、模拟前后端分离开发模式

三、前后端分离 - 客户端多页开发

下面构建一个简单的 todo list 来展现多页 后台 后台只需要设计好以下数据接口,让前端可以访问 Get: http://127.0.0.1:3000/todos Post: http://127.0.0.1:3000/todos。

const express = require('express')const bodyParser = require('body-parser')const app = express()app.use(bodyParser.urlencoded({ extended: false }))app.use(bodyParser.json())const todos = [{ id:1, title:'吃饭'},{ id:2, title:'睡觉'},{ id:3, title:'学习'}]app .get('/todos', (req, res) => { res.json(todos) }) .post('/todos', (req, res) => { const todo = { title: req.body.title, id: todos[todos.length-1].id + 1 } todos.push(todo) res.json(todos) }) app.listen(3000, () => console.log('api server running 3000'))。

前端 前端直接使用 ajax 异步请求后台的接口请求数据后渲染页面。

index.html (渲染 todo list)

Document

头部
侧边栏
添加 todo

    add.html (输入 todo 点击保存后跳转 index.html)。

    Document

    头部
    侧边栏

    上述例子可以看出来前端后台职责明确,但多页需要整个页面重新渲染。

    四、前后端分离 - 客户端单页开发

    单页开发可以通过增加 hash 进行页面标识(类似锚点),通过 window.onhashchange 事件判断 hash 值改变,进而通过 window.location.hash 获取 hash 值渲染对应的局部页面。(本案例服务端接口同前) index.html。

    Document

    头部

    myTodoList.html


    我的 todo list:

      add.html

      通过上述方式可以实现单页,但是这种方式有缺陷,在操作 DOM 元素进行渲染的过程中,不同页面的 DOM 元素很可能冲突,一旦页面多了同样难以维护,因此诞生了三大前端框架: