1
新建文件夾 分css img 文件夾 index.html

靜態頁面

2

將本地做的靜態頁面放到 http 服務

localhost:8080
設置nodejs靜態目錄 npm install express -save-env

如果提示 沒有 package.json 考過來就行

// 這個地方相當于引用 express var express = require('express'); var app = express();app.get('/', function (req, res) {res.end('i am fhj'); })app.listen(8080, function () {console.log('網易考拉，8080已經運行'); })

打開終端

打開頁面 localhost:8080

3

接口生成 導航條

標準的前后端分離

1

// 引入express var express = require("express"); var app = express();// 頂部導航條的數據 app.get("/get_top_nav", function (req, res) {// 本來這個東西是需要寫在數據庫中var _topNav = {arrs: ["每日簽到","我的訂單","個人中心","客戶服務","充值中心","消費者權益","更多","視頻內容",],};res.send(_topNav); }); // 創建靜態目錄 app.use(express.static("public")); // 監聽時間 app.listen(8080, function () {console.log("網易考拉，8080已經運行"); });

2 訪問鏈接 得到接口
1）

2）
然后 我們需要做的事情是 將這部分引入到 我們的localhost:8080
3）

菜鳥教程 ---- 學習 jquery ----- 安裝 jquery ----- 往下拉到 百度 CDN ----引用 在線的jquery 也可以自己下載 <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>

4）我們利用jquery 寫到 html尾部

//上面是做這個頁面需要的代碼 先不展示出來了 <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> <script> //利用jquery 這個格式需要注意$(function () {//調用ajax 方法 里面寫入了多個內容$.ajax({//這個是路徑url: 'http://localhost:8080/get_top_nav',//方法type: 'get',//數據類型dataType: 'json',//成功展示后的操作success: function (_d) {console.log(_d)}})}) </script>

5） 打開 node app.js
我們刷新一下 可以在 localhost:8080 看到
我們成功啦！

6)
刪掉 本來的部分

添加一個id 來進行操作

7）
html里面添加內容

var _data = _d.arrs; for (var i = 0; i < _data.length; i++) {console.log(_data[i]); }

頁面效果

8）
繼續寫

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> <script>$(function () {$.ajax({// 發起請求url: 'http://localhost:8080/get_top_nav',type: 'get',dataType: 'json',// 回調函數 保存success: function (_d) {// console.log(_d)var _data = _d.arrs;for (var i = 0; i < _data.length; i++) {console.log(_data[i])// 生成 $('<li/>').html(_data[i]).appendTo($('#topNavUlId'));}}})}) </script>

我現在想把這三個放在一個接口內 怎么操作？？

1 首先修改app.js

// 引入express var express = require("express"); var app = express();// 頂部導航條的數據 app.get("/get_header_data", function (req, res) {// 本來這個東西是需要寫在數據庫中// 但是暫且把數據寫在這里var _data = {top_nav: ["每日簽到","我的訂單","個人中心","客戶服務","充值中心","消費者權益","更多","視頻內容",],hot_word: ["面膜", "口紅", "減肥", "全球工廠店", "運動鞋", "項鏈", "女包"],column_word: ["首頁", "海外直購", "工廠店", "品質奶粉", "人氣面膜", "充值"],};res.send(_data); });// 創建靜態目錄 app.use(express.static("public")); // 監聽時間 app.listen(8080, function () {console.log("網易考拉，8080已經運行"); });

2
更改 html

在這里插入代碼片

3

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> <script>$(function () {$.ajax({url: 'http://localhost:8080/get_header_data',type: 'get',dataType: 'json',success: function (_d) {console.log(_d)// var _data = _d.arrs;// for (var i = 0; i < _data.length; i++) {// console.log(_data[i])// $('<li/>')// .html(_data[i])// .appendTo($('#topNavUlId'));// }}})}) </script>

4
看一下頁面效果

5
js修改一下

// 引入express var express = require("express"); var app = express();// 頂部導航條的數據 app.get("/get_header_data", function (req, res) {// 本來這個東西是需要寫在數據庫中// 但是暫且把數據寫在這里var _data = {top_nav: ["每日簽到","我的訂單","個人中心","客戶服務","充值中心","消費者權益","更多","視頻內容",],hot_word: ["面膜", "口紅", "減肥", "全球工廠店", "運動鞋", "項鏈", "女包"],column_word: ["首頁", "海外直購", "工廠店", "品質奶粉", "人氣面膜", "充值"],};res.send(_data); });// 創建靜態目錄 app.use(express.static("public")); // 監聽時間 app.listen(8080, function () {console.log("網易考拉，8080已經運行"); });

6
html 修改一下

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> <script>$(function () {$.ajax({url: 'http://localhost:8080/get_header_data',type: 'get',dataType: 'json',success: function (_d) {console.log(_d)// /d 表示的是整個對象var _top_nav = _d.top_nav;for (var i = 0; i < _top_nav.length; i++) {// console.log(_data[i])$('<li/>').html(_top_nav[i]).appendTo($('#topNavUlId'));}}})}) </script>

看一下頁面效果

這里需要特別注意一個問題 var _top_nav = _d.top_nav;
不能寫成 var _top_nav = _d._top_nav;

7
再做另外兩欄的效果
7-1 先找到 html 里面寫這一部分的內容

刪掉 所以的li 加一個id : class名字加一個Id

變成這個樣子

7-2
修改html 加了第二部分內容 可以在下面的代碼看到

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> <script>$(function () {$.ajax({url: 'http://localhost:8080/get_header_data',type: 'get',dataType: 'json',success: function (_d) {console.log(_d)// /d 表示的是整個對象var _top_nav = _d.top_nav;//第二行的內容var _hot_word = _d.hot_word;for (var i = 0; i < _top_nav.length; i++) {// console.log(_data[i])$('<li/>').html(_top_nav[i]).appendTo($('#topNavUlId'));}// 加了第二部分內容for (var i = 0; i < _hot_word.length; i++) {// console.log(_data[i])$('<li/>').html(_hot_word[i]).appendTo($('#search_tip_listId'));}}})}) </script>

8
我們再來嘗試做第三部分的內容

8-1
我們也是在html 找到這部分 加id 并且注釋掉 li


8-2
我們在html 加上這個第三部分

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> <script>$(function () {$.ajax({url: 'http://localhost:8080/get_header_data',type: 'get',dataType: 'json',success: function (_d) {console.log(_d)// /d 表示的是整個對象var _top_nav = _d.top_nav;//第二行的內容var _hot_word = _d.hot_word;//第三部分的內容var _column_word = _d.column_word;// 頂部導航條for (var i = 0; i < _top_nav.length; i++) {// console.log(_data[i])$('<li/>').html(_top_nav[i]).appendTo($('#topNavUlId'));}// 搜索框下面的導航條for (var i = 0; i < _hot_word.length; i++) {// console.log(_data[i])$('<li/>').html(_hot_word[i]).appendTo($('#search_tip_listId'));}// 欄目導航條for (var i = 0; i < _column_word.length; i++) {// console.log(_data[i])$('<li/>').html(_column_word[i])//這個引號的部分 非常重要 就是上面html 第三部分寫的// 那個id = "navColumnUlId".appendTo($('#navColumnUlId'));}}})}) </script>

8-3
我們看一下效果試試 完美出現了 說明我們成功了

9
我們現在做的東西 是可以的 但是不能點擊 需要加鏈接
9-1
更改 app.js 文件 更改的是 columb_word

// 引入express var express = require("express"); var app = express();// 頂部導航條的數據 app.get("/get_header_data", function (req, res) {// 本來這個東西是需要寫在數據庫中// 但是暫且把數據寫在這里var _data = {top_nav: ["每日簽到","我的訂單","個人中心","客戶服務","充值中心","消費者權益","更多","視頻內容",],hot_word: ["面膜", "口紅", "減肥", "全球工廠店", "運動鞋", "項鏈", "女包"],column_word: [{name: "首頁",// a_url表示a 標簽的內容 先這樣寫a_url: "aaa",},{name: "海外直購",// a_url表示a 標簽的內容 先這樣寫a_url: "bbb",},{name: "工廠店",// a_url表示a 標簽的內容 先這樣寫a_url: "ccc",},{name: "品質奶粉",// a_url表示a 標簽的內容 先這樣寫a_url: "ddd",},{name: "人氣面膜",// a_url表示a 標簽的內容 先這樣寫a_url: "eee",},{name: "充值",// a_url表示a 標簽的內容 先這樣寫a_url: "fff",},],};res.send(_data); });// 創建靜態目錄 app.use(express.static("public")); // 監聽時間 app.listen(8080, function () {console.log("網易考拉，8080已經運行"); });

重啟服務后打開 頁面是column_word是一堆對象

9-2 修改 html部分的文件
先把名字在頁面上展示出來

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> <script>$(function () {$.ajax({url: 'http://localhost:8080/get_header_data',type: 'get',dataType: 'json',success: function (_d) {console.log(_d)// /d 表示的是整個對象var _top_nav = _d.top_nav;//第二行的內容var _hot_word = _d.hot_word;var _column_word = _d.column_word;// 頂部導航條for (var i = 0; i < _top_nav.length; i++) {// console.log(_data[i])$('<li/>').html(_top_nav[i]).appendTo($('#topNavUlId'));}// 搜索框下面的導航條for (var i = 0; i < _hot_word.length; i++) {// console.log(_data[i])$('<li/>').html(_hot_word[i]).appendTo($('#search_tip_listId'));}// 欄目導航條for (var i = 0; i < _column_word.length; i++) {console.log(_column_word[i].name)$('<li/>').html(_column_word[i].name).appendTo($('#navColumnUlId'));}}})}) </script>

頁面看一下效果

接下來 我們實現 a標簽

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> <script>$(function () {$.ajax({url: 'http://localhost:8080/get_header_data',type: 'get',dataType: 'json',success: function (_d) {console.log(_d)// /d 表示的是整個對象var _top_nav = _d.top_nav;//第二行的內容var _hot_word = _d.hot_word;var _column_word = _d.column_word;// 頂部導航條for (var i = 0; i < _top_nav.length; i++) {// console.log(_data[i])$('<li/>').html(_top_nav[i]).appendTo($('#topNavUlId'));}// 搜索框下面的導航條for (var i = 0; i < _hot_word.length; i++) {// console.log(_data[i])$('<li/>').html(_hot_word[i]).appendTo($('#search_tip_listId'));}// 欄目導航條for (var i = 0; i < _column_word.length; i++) {// console.log(_column_word[i].name)$('<li/>')// li里面是a標簽 .html(function () {$('<a/>').attr('href', _column_word[i].a_url)// a標簽里面是文字.html(_column_word[i].name).appendTo($(this));}).appendTo($('#navColumnUlId'));}}})}) </script>

頁面展示一下 有點瑕疵 可以點擊了
不過顏色淡了 暫且不處理

我們補寫一下 另外兩個 展示一下 app.js

// 引入express var express = require("express"); var app = express();// 頂部導航條的數據 app.get("/get_header_data", function (req, res) {// 本來這個東西是需要寫在數據庫中// 但是暫且把數據寫在這里var _data = {top_nav: [{name: "每日簽到",a_url: "a",},{name: "我的訂單",a_url: "b",},{name: "個人中心",a_url: "c",},{name: "客戶服務",a_url: "d",},{name: "充值中心",a_url: "e",},{name: "消費者權益",a_url: "f",},{name: "更多",a_url: "g",},{name: "視頻內容",a_url: "h",},],hot_word: [{name: "面膜",a_url: "aa",},{name: "口紅",a_url: "bb",},{name: "減肥",a_url: "cc",},{name: "全球工廠店",a_url: "dd",},{name: "運動鞋",a_url: "ee",},{name: "項鏈",a_url: "ff",},{name: "女包",a_url: "gg",},],column_word: [{name: "首頁",// a_url表示a 標簽的內容 先這樣寫a_url: "aaa",},{name: "海外直購",// a_url表示a 標簽的內容 先這樣寫a_url: "bbb",},{name: "工廠店",// a_url表示a 標簽的內容 先這樣寫a_url: "ccc",},{name: "品質奶粉",// a_url表示a 標簽的內容 先這樣寫a_url: "ddd",},{name: "人氣面膜",// a_url表示a 標簽的內容 先這樣寫a_url: "eee",},{name: "充值",// a_url表示a 標簽的內容 先這樣寫a_url: "fff",},],};res.send(_data); });// 創建靜態目錄 app.use(express.static("public")); // 監聽時間 app.listen(8080, function () {console.log("網易考拉，8080已經運行"); });

展示一下 html

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> <script>$(function () {$.ajax({url: 'http://localhost:8080/get_header_data',type: 'get',dataType: 'json',success: function (_d) {console.log(_d)// /d 表示的是整個對象var _top_nav = _d.top_nav;//第二行的內容var _hot_word = _d.hot_word;var _column_word = _d.column_word;// 頂部導航條for (var i = 0; i < _top_nav.length; i++) {// console.log(_data[i])$('<li/>')// li里面是a標簽 .html(function () {$('<a/>').attr('href', _top_nav[i].a_url)// a標簽里面是文字.html(_top_nav[i].name).appendTo($(this));}).appendTo($('#topNavUlId'));}// 搜索框下面的導航條for (var i = 0; i < _hot_word.length; i++) {// console.log(_hot_word[i])$('<li/>')// li里面是a標簽 .html(function () {$('<a/>').attr('href', _hot_word[i].a_url)// a標簽里面是文字.html(_hot_word[i].name).appendTo($(this));}).appendTo($('#search_tip_listId'));}// 欄目導航條for (var i = 0; i < _column_word.length; i++) {// console.log(_column_word[i].name)$('<li/>')// li里面是a標簽 .html(function () {$('<a/>').attr('href', _column_word[i].a_url)// a標簽里面是文字.html(_column_word[i].name).appendTo($(this));}).appendTo($('#navColumnUlId'));}}})}) </script>

我們看一下頁面 很舒適 這三個地方都已經寫好了 都是可以點擊的

總結

以上是生活随笔為你收集整理的web前端项目（一） 做一个网易考拉官网 常规静态页面 + 页面放到http服务 + 前后端分离的全部內容，希望文章能夠幫你解決所遇到的問題。

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