vue配合axios连接express搭建的node服务器接口_简单案例

首先，我们先搭建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/

好了，今天就分享到这了，加油。