使用Express搭建一个本地服务运行前端项目

express官网

安装express

由于express是基于nodejs，所以首先需要安装nodejs，安装教程网上到处都是，自行查找！

• 执行安装命令

npm install express -g

• 安装装载器 [4.0之前的不用安装这个]

npm install express-generator -g

• 检查是否安装成功

express --vserion

创建一个express项目

express -e projectName //项目名字

如下图

在这里插入图片描述

• 进入项目

cd expressCsdn

• 安装依赖

npm install

• 服务启动

npm run start

如下图

在这里插入图片描述

• 访问默认3000端口 如下图

在这里插入图片描述

配置一个get请求的接口

• 打开项目app.js文件,添加哟个get请求

//本地的一个json数据文件
var datas = require("./datas.json")

app.get('/csdn', function (req, res) {
  res.send(datas)
})

• app.js 同级目录创建一个json的数据文件

{"data":true,"code":1,"success":true,"desc":null}

• 目录结构如下图

在这里插入图片描述

• 验证接口是否可以请求通 如下图：

在这里插入图片描述

• 使用postman测试

在这里插入图片描述

部署vue-dist包文件

需求说明

下面进行的操作根据自己的业务需求进行，如果你的vue或者别的框架的项目是基于express进行运行的，那么你可以完全直接在express里面进行创建一个vue项目，如果只是将express作为一个服务器提供给你的同事或者方便自己测试的话，那么你可以独立出来一个vue或者别的框架的项目进行打包，直接将包文件扔到express框架里面的人任何位置，根据下面的步骤将dist包文件位置暴露给express即可！

• 创建一个vue项目 [下面全部是vue默认执行命令，自己可以根据需求进行更改webpack配置]
• 进入到public文件夹 [可以是别的文件夹]

cd public

• 初始化一个vue项目

vue init projectName

• 进入项目

cd projectName

• 安装vue项目依赖

npm install

• 启动项目

npm run dev

• 打包

npm run build

• 更改express执行文件地址

app.use(express.static(path.join(__dirname, 'public/vuePro/dist')));

• 运行当前express （我这里端口改为了7000） 如下图：

在这里插入图片描述

• 更改端口号

打开express/bin/www

var port = normalizePort(process.env.PORT || '7000'); //写自己需要的端口号

写到后面

以上就是express的最基础的使用，可以满足日常我们搭建服务使用，可以自己本地接口进行模拟测试，当然如果你觉得比较麻烦，完全可以使用mockjs进行模拟数据的输出！后续更加高级的用法，我会持续更新，谢谢阅读，打完收工！拜了个白！