首先，我们先搭建node服务器
我们需要使用express这个node搭建服务的框架，当然也可以使用其他的
下载全局express和express-generator这两个模块依赖包
npm i -g express express-generator
在文件夹在我们创建自己的express文件夹，并打开cmd
执行命令
express --view=ejs mynodeExpress
mynodeExpress 是我们的node项目文件名
按照提示进入mynodeExpress文件夹下载依赖包 npm i
文件目录为
bin下面的www是我们的执行node服务入口文件
node|_modules是依赖包 比如fs板块 cookice-parser body-parser模块包
public是存放静态文件的 还可以存放我们前端打包好的文件 利用宝塔面板 pm2 直接就可以运行项目
routes是路由文件夹
views存放页面
app.js 入口文件
package.json 依赖目录
运行项目 npm start 会执行bin文件夹下的www文件 里面是服务的配置
我们可以看到创建了一个http服务，他的端口号默认是3000，如果process.env.PORT有值的话就是它的值，端口号就是它了。
运行服务，我们打开
localhost:3000
是一个初始页面，我们可以看一下app.js文件，因为这个文件里面我们找到我们的路由来自哪里
显而易见是routes下面的index文件，我们再查看一下它
在这里它引入了路由模块，添加了一个get方式的路由 ‘/’，我们刚刚匹配的页面就是来自这个路由
localhost:3000/
下面我们在自己写一个试试：
router.get('/zjq', (req, res) => {
console.log(req.query, 'req')
res.send({
nameList: [
{
name: 'zjq', age: "23" },
{
name: 'zrb', age: "22" },
{
name: 'zry', age: "18" },
{
name: 'fyy', age: "24" }]
});
})
让它返回一个数组，我们在页面看一下有没有返回：
nice，成功了，我们的node服务器搭建成功，喝一袋可口的酸酸乳奖励自己一下，开心。
还有一个我们再看app.js中我们发现了这样几行代码：
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
app.use('/', indexRouter);
app.use('/users', usersRouter);
显而易见，3000端口号后面第一个为 ‘/'的自动匹配 ‘./routes/index’ 这个文件，
如果我们写’/users‘呢，我们测试一下
在./routes/users文件中我们再写两个路由
var express = require('express');
var router = express.Router();
/* GET users listing. */
router.get('/', function (req, res, next) {
res.send('respond with a resource');
});
//新加的get请求
router.get('/zjq', (req, res) => {
let {
zjq, zrh } = req.query
if (zjq == 'zjq' || zrh == 'zrh') {
res.send({
status: true })
} else {
res.send({
status: false })
}
})
//新加的post请求
router.post('/postDome', (req, res) => {
let {
id } = req.body
console.log(id, 'id')
let arr = [{
id: 1, name: "zjqAndId=1" }, {
id: 2, name: "zjqAndId=2" }, {
id: 3, name: "zjqAndId=3" },]
if (id) {
let brr = arr.filter((item) => {
return item.id == id
})
res.send({
res: brr
})
} else {
res.send({
res: false })
}
})
module.exports = router;
当然我们在浏览器url上只能测试get请求
我们没有传递参数，给我们返回了 { status: false }这个对象
在get请求中我们在node端接收参数使用req.query接受，在post中使用req.body接受 ，可以使用ES6的解构赋值来接受，书写也是很方便，太nice了。
下一步我们简单搭建一个vue项目，测试post请求。
当然肯定是可以的，不一定非要用搭建vue这种方式测试 我们可以用vscode xxx.http后缀为http的文件测试也是很方便的。我的目的是为了给大家展示一个坑。
npm create 我的项目名称
npm create my_project
流程很简单 我们选择自动安装路由的（选不选都可以，我这里习惯性的选上了），我这里忘了截图。
再下载一个我们vue全家桶中的axios
运行运行命令我们可以在package.json中的scripts自己配置
npm run serve
运行在了8080端口，这个时候会产生跨域的问题，因为同源策略的限制，我们必须在同协议域名端口号下才不算跨域。我们的解决方法是proxy代理
新建vue.config.js文件
module.exports = {
lintOnSave: false,//取消严格模式
devServer: {
// 设置主机地址
host: 'localhost',
// 设置默认端口
port: 8080,
// 设置代理
proxy: {
'/api': {
// 目标 API 地址
target: 'http://127.0.0.1:3000/',
// 如果要代理 websockets
ws: false,
// 将主机标头的原点更改为目标URL
changeOrigin: true,
pathRewrite: {
// 路径重写
"/api": "" // 这个意思就是以api开头的，定向到哪里, 如果你的后边还有路径的话， 会自动拼接上
}
}
}
}
}
我们就在这个路由下，首先看我们的src下的router文件
匹配的是我们src下views/Home.vue文件
我们让它在挂载的时候请求，挂载的时候页面已经渲染完成。el、ref、data我们都可以获取到了
看到了打印
成功的将我们对应的node接口信息返回~
我说一个我遇到的坑，我在代理的时候我使用了
target:process.env.VUE_APP_URL
我在.env.development中配置的是:这是一个很低级的错误
NODE_ENV = development
VUE_APP_URL='http://127.0.0.1:3000/'
NODE_ENV = development
VUE_APP_URL=127.0.0.1:3000/
这里面的url不能加引号否则会按字符串处理，也不能不写协议
下面的才是对的
NODE_ENV = development
VUE_APP_URL=http://127.0.0.1:3000/
好了，今天就分享到这了，加油。
