node服务端搭建

参考以下连接安装vue前端项目：
https://blog.csdn.net/marslover521/article/details/80938686

dos窗口下测试vue项目是否正常运行：

npm run dev

运行结果为：
这里写图片描述

搭建express服务端目录

参考链接：https://www.jianshu.com/p/6b2bf63bb00e

在构建项目没有报错的前提下执行以下操作来搭建express服务端：

在项目根目录下创建server文件夹，同时在server文件夹下创建：db.js，index.js，sqlMap.js，api文件夹，api/userApi.js
参考目录结构如下：
这里写图片描述

bd.js

//数据库连接配置
module.exports = {
    mysql : {
        host: 'localhost',//数据库IP地址
        user: 'root',//用户名
        password: '123456',//用户密码
        database: 'network_sys',//数据库名称
        port: '3306'//数据库端口号
    }
}

index.js

// node 后端服务器
const userApi = require('./api/userApi');//引入项目中的文件的相对位置
//const fs = require('fs');//Node.js内置的文件系统模块（fs）
//const path = require('path');//Node.js path 模块提供了一些用于处理文件路径的小工具
const bodyParser = require('body-parser');//引入插件，通过npm下载
//body-parser 是一个Http请求体解析中间件
const express = require('express');//引入插件，通过npm下载
const app = express();

app.use(bodyParser.json());//json解析器,处理json数据
app.use(bodyParser.urlencoded({extended: false}));//ture->使用queryString库（默认） false->使用qs库

// 后端api路由
app.use('/api/user', userApi);
...//后续有别的路由时继续在下面添加

// 监听端口
app.listen(3000);
console.log('success listen at port:3000......');

sqlMap.js

// sql语句,查询数据库表中的数据
var sqlMap = {
    // 用户对象,index.js中定义后端api路由时用
    user: {
        select_name:'select * from user'//sql语句查询表
    },
    ...//后续有别的sql查询时继续在下面添加
}
module.exports = sqlMap;

api/userApi.js

var models = require('../db');//引入项目中的文件的相对位置
var express = require('express');//引入插件，通过npm下载
var router = express.Router();
var mysql = require('mysql');//引入插件，通过npm下载
var $sql = require('../sqlMap');//引入项目中的文件的相对位置

// 连接数据库
var conn = mysql.createConnection(models.mysql);

conn.connect();
var jsonWrite = function(res, ret) {
    if(typeof ret === 'undefined') {
        res.json({
            code: '1',
            msg: '操作失败'
        });
    } else {
        res.json(ret);
    }
};

//获取用户信息接口 --/getUser是前端使用接口名称
router.get('/getUser', (req, res) => {
    var sql_name = $sql.user.select_name;//该行相当于一行sql语句代码
    conn.query(sql_name, function(err, result) {
        if (err) {
            console.log(err);
        }
        if (result[0] === undefined) {
            res.send('-1')   //查询不出username，data 返回-1
        } else {
            jsonWrite(res, result);
        }
    })
});
...
//后续有别的接口时继续在下面添加

module.exports = router;

config/index.js

设置代理与跨域(非常重要)

dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {        
        '/api': {
            target: 'http://localhost:3000/api/',
            changeOrigin: true,
            pathRewrite: {                
                '^/api': ''
            }
        }
    },
    cssSourceMap: false
  }
}

后端服务代码已经完成，其中注释中包含：//引入插件，通过npm下载代码，
都需要在dos窗口通过npm install name --save的方式下载在项目中并保存在package.json文件中。

前端调用后端数据接口

在需要调用接口的文件中，执行以下代码

this.$http.get('/api/user/getUser').then((response) => {
    var data = JSON.parse(response.bodyText);
    //response.bodyText本身是json格式的字符串
});

可以将以上代码封装进一个方法中在需要的时候调用，例如：

get_user() {
  this.$http.get('/api/user/getUser').then((response) => {
    var data = JSON.parse(response.bodyText);
  });
}

使用$http.get方法钱需要在main.js文件中引入vue-resource，详细代码如下：

import VueResource from 'vue-resource';
Vue.use(VueResource)

通过npm install vue-resource --save下载

搭建express服务端目录

前端调用后端数据接口

猜你喜欢