web前端项目（一） 做一个网易考拉官网 常规静态页面 + 页面放到http服务 + 前后端分离

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: ["面膜", "口红", "减肥", "全球工厂店", "运动鞋", "项链",