搭建说明

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

前端:使用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、前端文件夹

![在这里插入图片描述](https://img-blog.csdnimg.cn/271901f998fe4a1eb8b20e92087010c6.png

2、后端文件夹

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐