vue中访问node服务端接口

本文比较适合初学者，前提是node、mysql都已经安装好了

1.创建node项目

npm install -g express   // 安装express

npm install -g express-generator  //安装express启动器

express '项目名'  //创建node项目，例如 express node_test

创建好项目，使用npm start来启动项目

2，根目录下app.js

// 引入express模块
const express=require("express");

// 引入bodyParser模块
const bodyParser=require("body-parser");

// 创建web服务器
var server=express();
server.listen(3000);

// 托管静态资源到public
server.use(express.static('public'));

// 配置post请求第三方中间件
server.use(bodyParser.urlencoded({
    extended:false
}))

// 引入路由模块
const login=require("./routers/login.routers");//用户登录
const user = require("./routers/user.routers")
server.use('/login',login);//用户登录
server.use('/user',user);//用户信息

3.在routers文件夹下新建login.routers.js，里面含有各路由信息

// 引入express模块
const express=require('express');
// 创建一个空的路由对象
const router=express.Router();
// 引入连接池模块
const pool=require('../pool');
//post请求是req.body，get请求是req.query
 router.post('/',(req,res)=>{
    var name=req.body.name;
    // console.log(name);
    var pwd=req.body.pwd;
    // console.log(pwd);
    if(!name){
        res.send("您输入的用户名不存在");
        return;
    }
    if(!pwd){
        res.send("您输入的密码不存在");
        return;
    }
    pool.query('select * from user where  name=? and pwd=?',[name,pwd],(err,result)=>{
        if(err) throw err;
         console.log(result);
         console.log(result.length);

         if(result.length>0){
            res.send({status:1,rel:result,msg:'登录成功'});
        }else{
          res.send({status:0,msg:"用户名或密码不正确"});
        }
     })       
 })
 module.exports=router;

4.在routers文件夹下新建user.routers.js，获取用户信息

var express = require('express');
var router = express.Router();
router.get('/getInfo', function (req, res) {
	var user = {
		name: '李四',
		age: 30,
		sex: 'woman',
	};
	var response = { status: 1, data: user };
	res.send(JSON.stringify(response));
});

module.exports = router;

5.同级目录下新建pool.js（文件名自定义）

//创建连接池
const mysql=require('mysql');
var pool=mysql.createPool({
    host:'127.0.0.1',
    port:'3306', // 数据库端口号
    user:'root', // 数据库用户名
    password:'root', // 数据库密码
    database:'mydatabase', // 数据库名称
    connectionLimit:20 // 最大连接活跃数
});
module.exports=pool;

6.vue中使用接口

1.安装axios

npm install axios --save-dev  

//讲axios绑定到vue原型上
import axios from 'axios'
Vue.prototype.$axios = axios

2.App.vue中使用

created() {
	this.$axios.get('/api/users/getInfo').then((res) => {
		console.log(res, 'res-----');// 
	});
},

3.配置代理
请求地址后会出现跨域的问题可在前端或者node服务端处理

前端配置代理
在vue根目录下新建vue.config.js文件

module.exports = {
	devServer: {
		proxy: {
			'/api': {
				target: 'http://127.0.0.1:3000', //node.js服务器运行的地址
				ws: true,
				changeOrigin: true,
				pathRewrite: {
					'^/api': 'http://127.0.0.1:3000', //路径重写
				},
			},
		},
	},
};

在node服务端的app.js中设置域名可访问

// 采用设置所有均可访问的方法解决跨域问题
app.all('*', function(req, res, next) {
  // 设置允许跨域的域名，*代表允许任意域名跨域
  res.header('Access-Control-Allow-Origin', '*');
  // 允许的header类型
  res.header('Access-Control-Allow-Headers', 'content-type');
  // 跨域允许的请求方式
  res.header('Access-Control-Allow-Methods', 'DELETE,PUT,POST,GET,OPTIONS');
  if (req.method.toLowerCase() === 'options') {
    res.send(200); // 让options尝试请求快速结束
  } else {
    next();
  }
});

到此vue中即可访问node写的接口了，另附一下原生访问node接口

7.原生页面中的登录接口的使用

$('.input_submit').click(function(){
    var name=$('.name_input').val();
    var pwd=$('.pass_input').val();
    $.ajax({
        url:"http://127.0.0.1:3000/login",
        type:"post",
        data:{
            name:name,
            pwd:pwd,
        },
        dataType:"json" ,
    })
    .then(function(result){
        console.log(result.status);
        if(result.status==1){
            sessionStorage.setItem("myname",name);
            sessionStorage.setItem("userID",result.rel[0].id)
            window.location.href='index.html';

        }else{
            console.log(111)
            alert(result.msg);
        }
    })
    return  false;

})

首先，新建文件夹test_api_2，进入文件夹，安装express。如下图所示：

在文件夹在我们创建自己的express文件夹
执行命令 express --view=ejs mynodeExpress

按照提示进入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/

在routers/index.js里面，我们在自己写一个试试：

var express = require('express');
var router = express.Router();

/* GET home page. */
// router.get('/', function(req, res, next) {
//   res.render('index', { title: 'Express' });
// });

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" }]
  });
})


module.exports = router;

让它返回一个数组，我们在页面看一下有没有返回： 

 nice，成功了，我们的node服务器搭建成功，开心。

还有一个我们再看app.js中我们发现了这样几行代码：

显而易见，3000端口号后面第一个为 ‘/'的自动匹配 ‘./routes/index’ 这个文件，
如果我们写’/users‘呢，我们测试一下
在./routes/users文件中我们再写两个路由

我们没有传递参数，给我们返回了 { status: false }这个对象

在get请求中我们在node端接收参数使用req.query接受，在post中使用req.body接受 ，可以使用ES6的解构赋值来接受，书写也是很方便，太nice了。