前端单页面富应用(SPA)的实现

一、 什么是单页面富应用?

单页面应用:Single Page Application

• 概念:Web应用即使不刷新也在不同的页面间切换,解决浏览器前进、后退等机制被破坏等问题。并且页面访问会被浏览器保存。
• 实现方法:
  
  1. Node+Html5实现
  2. React/Vue等MVVM框架

二、单页面应用的实现

1. Node+Html5

H5实现单页面应用为什么需要Node?
虽然使用的是H5的新特性:History API,但是单页面应用实际上是利用路由变化从而判断是否改变内容。这里仅用node开启服务,url地址的变化采用的是H5的History API。

步骤

1. 使用express自动化构建项目

express myAppName

1. 去掉多余路由文件(user.js),修改App.js渲染文件的类型(默认jade => html)

app.engine('html',require('ejs').renderFile);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');

1. 编写index.html
   项目效果:点击相应button,url路由和底部内容都会相应变化
   

//html
<div class="appWried">
    <div class="appBtn">
        <button>PAGE1</button>
        <button>PAGE2</button>
        <button>PAGE3</button>