javascript --- > spa初体验

最新推荐文章于 2024-04-03 14:10:31 发布

栗子好好吃

最新推荐文章于 2024-04-03 14:10:31 发布

阅读量501

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/piano9425/article/details/99054614

版权

JavaScript 专栏收录该内容

113 篇文章 1 订阅

订阅专栏

本文介绍了如何使用Express创建一个简单的服务器来支持Single Page Application (SPA)。在SPA项目结构中，通过创建be-project和fe-project-spa文件夹来区分前后端。在SPA中，利用hash路由实现页面跳转，比如从index.html跳转到find-music.html。当点击音乐链接时，使用Ajax获取3000端口上的数据，并借助模板引擎art-template将数据渲染到id为container的部分。

摘要由CSDN通过智能技术生成

首先使用express创建一个简单的服务器
创建文件夹 be-project

# (确保安装了node,并配置好了环境) 在be-project目录下(命令行执行)
npm init -y
npm install --save express body-parse
npm install --global nodemon

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

const app = express();
app.use(bodyParser.urlencoded({ extended: false })
app.use(bodyParser.json())


const todo = [{
    id: 1,
    title: "吃饭"
},
{
    id: 2
    title: "睡觉"
},
{
    id: 3
    title: "打豆豆"
}

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

app.listen(3000, () => console.log("Server running...");

然后在be-project目录下执行

# cli
nodemon app.js.

浏览器输出:  http://127.0.0.1://3000/todos

在这里插入图片描述
此时数据就暴露3000端口,主机名127.0.0.1, 路径是todos.

SPA(Single Page Application)

创建另外一个文件夹 fe-project-spa,此时目录结构如下
在这里插入图片描述

# 保证前面的小黑框不关闭,重新打开一个命令行.进入fe-project-spa
npm init -y
npm install --save jquery art-template

在index.html中,写入用于跳转用的锚点.

<body>
    <div class = "header">
        头部
    </div>
    <div class = "aside">
        <ul>
            <li><a href="#/">发现音乐</a></li>
            <li><a href="#/my-music">我的音乐</a></li>
            <li><a href="#/friend">朋友</a></li>
        </ul>
    </div>
    <!-- 用于放内容的container -->
    <div id = "container"> </div>
</body>

此时点击会跳到对应的hash, PS: #后面加/ 是为了区分普通的锚点,即不是用来跳转的.
在这里插入图片描述
当点击发现音乐的时候,会渲染 id为container的内容
即加载入find-musice.html

// index.js
<script src="node_modules/jquery/dist/jquery.js"></script>
<script>
    window.onhashchange = function () {
        var hash = window.location.hash.substr(1);
        if(hash === '/') {
            $.get("./find-music.html', function(data) {
                $('#container').html(data);
            })
        }
    }
</script>
// ps : 获取发现页面(渲染进container中)的方法使用了ajax的方法

下面对find-music.html页面进行处理:使用ajax请求最开始放在3000端口的数据,然后使用模板引擎art-template进行渲染.

// find-music.html
<div>发现音乐</div>

<!-- 用于模板引擎渲染 -->
<ul id ="find-music-container"> </ul>
<script type="text/template" id="tpl-find-musice">
    {{ each todos }}
        {{ $value.title }}
    {{ /each }}
</script>
<script>
    $.get("http://127.0.0.1:3000/todos", function(data){
        var htmlStr = template('tpl-find-music', {
            todos: data
        })
        $('#find-music-container").html(htmlStr);
    })

在这里插入图片描述

栗子好好吃

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript --- > spa初体验

首先使用express创建一个简单的服务器创建文件夹 be-project# (确保安装了node,并配置好了环境) 在be-project目录下(命令行执行)npm init -ynpm install --save express body-parsenpm install --global nodemon// app.jsconst express = require("ex...
复制链接

扫一扫

专栏目录