「本文已参与低调务实优秀中国好青年社群的写作活动」。
前言
该篇讲述了express的安装与简单使用，实现一个奶茶选择器功能。 及如何用node渲染vue，react。适合要入门express的前端开发阅读
express是什么？express可以做什么？
express是基于node平台的web开发框架，封装了一些node操作服务端功能，比如
1.路由模块
2.简化http操作（状态码，请求包处理）
3.模板引擎
简化了我们的开发难度，可以为我们开启一个web服务端，实现前后端同构，这样我们就可以做SSR（服务端渲染）啦，还有代理请求，rpc调用，连接数据库等等。
项目初始化
新建一个service文件夹，并创建index.js和index.html，打开终端，安装依赖 npm i express
创建web服务，路由分发
1.引入express，生成应用实例，并指定端口，终端输入node index.js 这样一个web服务就启动了
2.根据不同路径，分发路由 引入node fs文件处理模块 路径为/时，返回index.html给浏览器渲染
const fs = require('fs');
const express = require('express'); //引入express
const app = express(); //生成应用实例
app.get('/favicon.ico', function (request, response) {
// 一句 status(200) 代替 writeHead(200); end();
response.status(200)
return;
})
app.get('/', function (request, response) {
// send接口会判断你传入的值的类型，文本的话则会处理为text/html
response.send(
fs.readFileSync(__dirname + '/index.html', 'utf-8')
)
})
app.listen(3000); //监听3000端口
console.log('success listen');
3.编写简单奶茶选择器html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>奶茶自由</title>
</head>
<body>
<div>今天喝什么？</div>
<br>
<div id="output"></div>
<br>
<button id="seesee" style="height: 40px; width: 80px">看看</button>
</body>
<script>
document.getElementById('seesee').addEventListener('click', function () {
fetch(`http://${location.host}/drink`)
.then((res) => {
return res.text()
})
.then((text) => {
document.getElementById('output').innerHTML += text + '<br/>';
})
})
</script>
</html>
- node index.js 启动node服务，打开3000端口，浏览器就能渲染到html页面。点击看看按钮发送drink请求
路由功能逻辑实现
5.处理drink请求路由逻辑
let drinkArr = ['古茗', '奈雪', '喜茶']
app.get('/drink', function (request, response) {
let result = "";
let random = Math.random() * drinkArr.length
let drinkArrindex = Math.floor(random)
result = drinkArr[drinkArrindex]
response.send(result)
})
重启服务
6.重启服务，node index.js 点击按钮就能看到啦
总结
以上就是express的简单使用啦，希望对没有接触过express开发的人有所帮助。 当然还有很多强大的功能没写出来，比如express的中间件next()，和vue，react的渲染，分开来写吧
