一、下在安装node.js
官网:Node.js
二、安装express框架
1、首先假定你已经安装了 Node.js,接下来为你的应用创建一个目录,然后进入此目录并将其作为当前工作目录。
这是创建文件夹
$ mkdir myapp
进入到这个文件夹
$ cd myapp
2、通过 npm init
命令为你的应用创建一个 package.json
文件。
欲了解 package.json
是如何起作用的,请参考 Specifics of npm’s package.json handling.
$ npm init
3、此命令将要求你输入几个参数,例如此应用的名称和版本。 你可以直接按“回车”键接受大部分默认设置即可,下面这个除外:
指定入口文件
entry point: (index.js)
键入 app.js
或者你所希望的名称,这是当前应用的入口文件。如果你希望采用默认的 index.js
文件名,只需按“回车”键即可。
接下来在 myapp
目录下安装 Express 并将其保存到依赖列表中。如下:
将express框架设置为全局配置
$ npm install express --save
4、如果只是临时安装 Express,不想将它添加到依赖列表中,可执行如下命令:
不将express设置为临时配置
$ npm install express --no-save
5、项目结构
可能和大家文件结构不一样,(该删就删,该加就加)大家可以先仿照我的结构,大家没有的话可以先创建,后面带大家补充内容
index.js代码
//index.js文件
let express = require('express') // 引入express
let app = express() // 相当于 http.createServer(app)
// 访问根路由
app.get('/',(request,response) => {
response.send('Hello World')
})
// 监听3000端口
let server = app.listen(3000, '127.0.0.1', () => {
let host = server.address().address // host域
let port = server.address().port // 端口号
console.log(`Server running at http://${host}:${port}`)
})
6、安装依赖,运行项目
npm install
运行(index.js是入口文件名,要是不一样记得换)
node index.js
看到下面这个页面,就代表跑起来了
三、搭建项目
这里呢router文件夹下面的两个文件其实就是两个路由文件,下来配置一下index.js文件主路由:
//index.js文件
let express = require('express') // 引入express
let app = express() // 相当于 http.createServer(app)
// 访问根路由
app.get('/',(req,res) => {
res.send('Hello World')
})
// user路由
app.get('/user',(req,res) => {
res.send('user')
})
// news路由
app.get('/news',(req,res) => {
res.send('news')
})
// 监听3000端口
let server = app.listen(3000, '127.0.0.1', () => {
let host = server.address().address // host域
let port = server.address().port // 端口号
console.log(`Server running at http://${host}:${port}`)
})
接下来我们访问 http://127.0.0.1:3000/user \ http://127.0.0.1:3000/news 发现都可以访问到了
Express.Router()
将两个路由文件写在router里面是利用express - Router()分别模块化,为了方面管理
user.js文件:
/**
* user.js
*/
let express = require('express')
let router = express.Router()
router.get('/', (req,res) => res.send('user')) // 访问user根路由
module.exports = router
news.js文件
/**
* news.js
*/
let express = require('express')
let router = express.Router()
router.get('/', (req,res) => res.send('news')) // 访问news根路由
module.exports = router
接下来在index.js中引入刚才配置的两个js文件
let express = require('express') // 引入express
let app = express() // 相当于 http.createServer(app)
// 访问根路由
app.get('/',(req,res) => {
res.send('Hello World')
})
// 引入user.js
app.use('/user', require('./router/user'))
// 引入news,js
app.use('/news', require('./router/news'))
// 监听3000端口
let server = app.listen(3000, '127.0.0.1', () => {
let host = server.address().address // host域
let port = server.address().port // 端口号
console.log(`Server running at http://${host}:${port}`)
})
我们访问 http://127.0.0.1:3000/user 、 http://127.0.0.1:3000/news 可以看到OK了
API接口
接下来我们就写几个简单的接口供前端使用
先创建一个json文件,通过fs模块,读取文件内容,注意设置编码格式UTF8
user.json
[
{
"userId": 1,
"userName": "张三",
"des": "我是张三"
},
{
"userId": 2,
"userName": "李四",
"des": "我是李四"
},
{
"userId": 3,
"userName": "王五",
"des": "我是王五"
},
{
"userId": 4,
"userName": "小红",
"des": "我是小红"
},
{
"userId": 5,
"userName": "赵木·辛因",
"des": "我是赵木·辛因"
}
]
user.js
创建的是一个get带有参数的接口
/**
* user.js
* @description user路由
*/
let express = require("express");
let router = express.Router();
let fs = require("fs");
// 访问/user根目录
router.get("/", (req, res) => res.send("user")); // 访问user根路由
// 访问/user/getUserList
router.get("/getUserList", (req, res) => {
//取出参数
let { Id: id } = req.query;
console.log(id);
// parse属性将get参数转换为对象
// let { query, pathname } = url.parse(req.url, true);
// console.log(query);
// console.log(pathname);
fs.readFile("user.json", "utf8", (err, data) => {
if (err) throw err;
data = JSON.parse(data).filter((value) => value.userId == id);
res.send(data);
});
});
module.exports = router;
我们通过客户端axios发起请求(就是在项目外重新写一个前端页面,并用axios发起请求拿数据)
项目外新建文件夹,创建index.html
我们发一个get,带有参数的请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Access-Control-Allow-Origin" content="*" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<title>Document</title>
</head>
<body>
<h3>这是请求后台页面</h3>
</body>
</html>
<script>
// 这里用到了axios库,因为端口号不同存在跨域,我们这里配置代理解决跨域问题
axios.get('http://localhost:3000/user/getUserList', {
params: {
Id: 3
}
}).then(res => {
console.log(res)
})
</script>
在保证服务器运行得同时,运行index.html后打开控制台,因为端口号不同,会报跨域问题,我们只需要在index.js配置白名单即可:
let express = require("express"); // 引入express
let app = express(); // 相当于 http.createServer(app)
//----- 配置跨域 -----
// express框架解决跨域问题的代码,注意该代码要放在 app.use(router); 之前
app.all("*", (req, res, next) => {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By", "Express");
res.header("Content-Type", "application/json;charset=utf-8");
next();
});
// 访问根路由
app.get("/", (req, res) => {
// rse.AddHeader("Access-Control-Allow-Origin", "*");
res.send("Hello World");
});
// 引入user.js
app.use("/user", require("./router/user"));
// 引入news.js
app.use("/news", require("./router/news"));
// 监听3000端口
let server = app.listen(3000, "127.0.0.1", () => {
let host = server.address().address; // host域
let port = server.address().port; // 端口号
console.log(`Server running at http://${host}:${port}`);
});
每次配置完服务端都得重新跑,不然不会生效。
在次运行打开控制台,如下图所示:
这就是根据id请求到的数据
四、总结
因为express框架是入门node.js的一款私人练习框架,所以我也就只写到请求到JSON数据后不往下写的原因了,后续会转egg、koa之类的框架,在这些框架准备连接数据库实现一下交互式接口,并且上线接口。