當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

javascript --- spa初体验

發布時間：2023/12/10 javascript 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 javascript --- spa初体验小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

首先使用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: 2title: "睡覺" }, {id: 3title: "打豆豆" }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中,寫入用于跳轉用的錨點.

此時點擊會跳到對應的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);})

總結

以上是生活随笔為你收集整理的javascript --- spa初体验的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： vue实现导出excel的两种方式
下一篇： gradle idea java ssm