vue+node前后端分离项目搭建

搭建说明

第一次搭建前后端分离项目，特此记录，以备日后查阅。

前端：使用vue可视化面板搭建

后端：node+express，使用express-generator脚手架搭建

前端部分

1、安装node

http://nodejs.cn/

2、安装vue-cli脚手架

npm i -g vue-cli

4、查看安装的版本号

vue -V

如图。

5、开启vue可视化面板（版本在3.0以上）

vue ui

如图。

执行完vue ui后自动跳转。

6、创建项目

6.1 点击创建

6.2 配置文件名、包管理器和git

包管理器：npm，根据实际情况选择

6.3 预设项目

可以选择默认，也可以选择曾经保存过的配置、也可以手动配置，选好点击下一步

6.4 选择功能

Babel：可以将一些es6以上的代码转化为低级别的es4,5，使得浏览器能够支持
TypeScript：支持用ts代码编写项目，用js代码就不用选这个了
PWA：支持PWA
Router：路由
Vuex：状态管理
Css Pre-processors：css预处理器，常见的有sass,less或stylus
Linter/Formatter：检查代码格式是否正确，格式化代码
Unit Testing：支持单元测试
E2E Testing：支持E2E测试
使用配置文件：选择后配置文件会放在各自相应的文件夹里

选择完成点击下一步

6.5 项目配置

lint on save：保存即检查代码
lint and fix on commit：fix 和 commit 的时候才检查
点击创建项目

6.6 保存预设

可以将刚才的配置保存

6.7 项目创建成功

6.8 安装插件、依赖

安装项目需要的插件依赖elmentui、axios
可以直接用可视化面板安装，也可以用npm，这里用npm

安装elementui

（1）cd到指定文件夹
用vscode打开项目文件夹，新建终端，cd到前端文件夹，如图。

（2）安装elementui

npm i element-ui -S

查看package.json文件，有了就是安装成功了

（3）引入文件
在前端文件夹中的main.js中引入

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

如图。

axios

（1）安装
还是前端文件夹，输入如下命令。

npm install axios

查看package.json文件

（2）main.js中引入文件

注意问题

创建项目时选了lint代码检查，编译时会出现很多格式报错，人工修改很麻烦，设置让eslint自动修复错误。这只能自动修复代码格式，其他问题还要自行设置规则。

vue-cli5.0及以上版本：在.vue.config.js中加上如下代码

chainWebpack: config => {
    config
      .plugin('eslint')
      .tap(args => {
        args[0].fix = true
        return args
      })
  }

vue-cli5.0以下版本：

 chainWebpack: config => {
    // 保存时自动格式化代码
    config.module
      .rule('eslint')
      .use('eslint-loader')
      .loader('eslint-loader')
      .tap(options => {
        options.fix = true
        return options
      })
  }

后端部分

1、安装node

http://nodejs.cn/

2、安装express

npm install express -g

安装好会显示

3、安装express-generator脚手架

npm install express-generator -g

安装好会显示

4、创建后端项目

express 想要创建的项目名称   //express 项目名称

如图。

5、进入项目

cd back //back：文件名

6、配置包

npm install   

如图。

配置完后项目文件夹里会多出一个名为node_modules的文件夹

7、运行项目

npm  run start

如图。

8、访问项目

浏览器输入下面的链接
http://localhost:3000/

如图。

3000端口是项目初始化的默认端口，可以在项目的bin\www文件中修改

9、实现跨域访问

要想前后端可以交互，要配置跨域访问。
在后端文件夹中的app.js文件中粘贴如下代码

//设置跨域访问
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*"); //包含本域地址
    res.header("Access-Control-Allow-Headers", "X-PINGOTHER,Content-type,X-Requested-With,Authorization");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By", ' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
})

10、连接mysql数据库

（1）cd到后端文件夹，安装数据库模块

npm i mysql

查看package.json文件

（2）连接数据库
新建一个utils文件夹，创建pool.js（名字随便取），用于配置数据库连接，粘贴下面代码。

// 连接mysql数据库
// 数据库连接池
require('babel-polyfill'); // 兼容性问题
var mysql = require('mysql');
//建立连接池
var pool = mysql.createPool({
    host: 'localhost',
    user: '*****', //用户名
    password: '*****', //密码
    database: '*****', //要连接数据库名
    //设置超时时间解决握手不活动超时问题
    connectionLimit: 1000,
    connectTimeout: 60 * 60 * 1000,
    acquireTimeout: 60 * 60 * 1000,
    timeout: 60 * 60 * 1000,
});
// 取出连接
function getPoolConnection() {
    let p = new Promise((resolve, reject) => {
        // 从连接池中取出连接 err:错误信息 conn：从连接池中取出的连接对象，通过这个对象去访问数据库
        pool.getConnection((err, conn) => {
            // 成功信息
            if (err) {
                // 失败信息
                reject("mysql数据库连接失败!失败原因：" + err);
            } else {
                resolve(conn);
            }
        });
    })
    return p;
}
//执行sql
function execute(sql) {
    return new Promise(function(resolve, reject) {
        var connection;
        //then中有2个参数，第⼀个参数是状态变为成功后应该执⾏的回调函数，第⼆个参数是状态变为失败后应该执⾏的回调函数
        getPoolConnection().then(function(conn) {
            conn.query(sql, function(err, result) {
                if (err) {
                    console.log("sql错误");
                    console.log(err);
                    reject(err);
                } else {
                    resolve(result);
                    console.log("sql执行完成");
                    // console.log(result)
                    conn.release();
                    // console.log("释放完成");
                }
            });
        }).catch(function(err) {
            reject(err)
        })
    });
}
module.exports = {
    getPoolConnection,
    execute
};

项目整体搭建完成

1、前端文件夹

2、后端文件夹