angular入门篇7----Http模块的使用(1)：RESTful创建资源接口
在前后端分离的项目中我们需要使用Http模块的功能实现后端接口提供的服务。
本篇首先简单得创建几个接口，供项目使用。
方法一 RESTful Web Service
RESTful主要是提供API设计的规范方法。在实际中我们利用RESTful将后端资源发布为URL，例如：查找数据库中一个人的工资。
这里我们使用JS代码为RESTful提供数据。
1.1 安装必要的软件包
首先我们需要安装json-server及jsonwebtoken,在项目终端输入:
npm install json-server
npm install jsonwebtoken
1.2 JavaScript代码提供数据
在\Store路径下创建一个data.js文件:
module.exports=function(){
return{
products:[
{id:1,name:"Kayak",catagory:"Watersports",description:"A boat for one person",price:275},
{id:2,name:"LifeJacket",catagory:"Watersports",description:"Protective and fasionable",price:48.95},
{id:3,name:"Soccer Ball",catagory:"Soccer",description:"FIFA-approved size and weight",price:19.50},
{id:4,name:"Corner Flags",catagory:"Soccer",description:"Give you playing field a professional touch",price:34.95},
{id:5,name:"Stadium",catagory:"Soccer",description:"Flat-packed 35,000-seat stadium",price:79500},
{id:6,name:"Thinking Cap",catagory:"Chess",description:"Improve brain efficiency by 75%",price:16},
{id:7,name:"Unsteady Chair",catagory:"Chess",description:"Secritly give you opponent a disadvantage",price:29.95},
{id:8,name:"Human Chess Board",catagory:"Chess",description:"A fun game for the family",price:75},
{id:9,name:"Bling Bling King",catagory:"Chess",description:"Gold-plated,diamond-studded King",price:1200},
],
order:[]
}
}
代码内容很简单，即返回一个product[]实例供我们使用。
1.3 配置服务
package.json下找到如下内容:
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
添加一行配置:
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"json": "json-server data.js -p 3500 -m authMiddleware.js"
},
目的是使服务将data.js作为数据库，并通过3500端口访问。
运行 && 效果
在终端输入:
npm run json
可以看到如下内容:
我们在浏览器输入服务提供的Resources之一:
http://localhost:3500/products
可以得到如下内容:
方法二 Express框架
Express是nodejs内经典的框架。可以提供我们需要的路由。
2.1 添加Express到项目
在项目终端输入如下指令:
npm install express
这样我们的项目便自动添加了Express。
2.2 添加JavaScript数据源
参考1.2 的内容添加data.js文件
2.3 添加路由服务
在/Store下添加文件app.js：
const express = require("express")
const app = express()
const DataSender = require("../Store/data")
//路由服务
app.get("/data",(req,res,next)=>{
console.log("data");
res.send(DataSender().products)
})
app.get("/orders",(req,res,next)=>{
console.log("orders");
res.send(DataSender().order)
})
//监听3500端口
app.listen(3500);
不同于RESTful,这里的访问服务是我们自己写的。
2.4 启动服务
在项目终端，我们输入如下指令:
node app.js
这样项目便开始运行了。
我们在浏览器输入:
http://localhost:3500/products
或
http://localhost:3500/orders
便能得到结果：
下一篇我们将使用Http模块将上述接口得到的数据加载到我们的商店页面上，效果如下：
