在前后端分离开发的大环境下，前端开发已经不仅仅局限于所谓的切图，写页面的工作，同时，也给前端开发定义了新的含义。有前后端分离项目开发的工程师，都知道，这样的项目开发起来有多么的方便，快捷。前端开发工作与后端开发工作完全独立，通过规范而统一的接口文档就可以衔接项目开发。那么，在项目开发阶段，前端开发工程师怎样独立调试已开发完成的前端项目呢？通过阅读本篇文章，你就可以GET到这一技能！
在本篇文章中，会讲到一下内容：
- 前端项目调试环境的搭建（Express）
- NGINX解决跨域
- Express链接MySQL数据库
适合阅读人群：前端开发初学者及对前端项目独立调试感兴趣的人员。
前期准备及说明
本篇文章使用到的技术栈有node【v10.16.2】、Express【v4.17.1】、vue【3+】、nginx【v.1.16.1】。所以电脑要搭建好node环境。文章所有操作都在Windows操作系统下完成。
项目目录如下：
│
└─project // 项目目录
│
├─front // 前端项目根目录
│
├─server // 后端服务目录
│
├─nginx // nginx目录模拟后端服务
本篇文章选择Express来模拟后端服务并新建API。Express是基于 Node.js 平台，快速、开放、极简的 Web 开发框架，基于Express，再结合所选择的各种 HTTP 实用工具和中间件，可以快速方便地创建强大的 API。
打开CMD命令提示符，使用以下命令安装。
npm install express -g
npm install express-generator -g进入server【后端服务目录】目录，在此目录下打开CMD命令提示符，运行以下命令，初始化express工程。
express exp-api // exp-api为工程名，可自定义进入新建的express工程目录【exp-api】，运行以下命令，安装链接mysql数据路所需的依赖包。
npm install mysql --save-devPS:关于初始化数据库内容，在这里就不详细说明了，
使用数据库管理软件，新建一个数据库【test】，并初始化一张表【t_user】，包含字段有id、name、sex、age。
接下来就是要配置链接MySQL数据库了。
在exp-api目录下，新建config目录，并在此目录下新建一个db.js文件，这个文件就是数据库配置文件。键入代码以下代码。
const mysql = require('mysql');
const dbConfig = {
// 数据库链接地址
host: 'localhost',
// 数据库开放端口
port: '3306',
// 数据库访问用户名
user: 'xxxx',
// 数据库访问密码
password: 'xxxxxx',
// 数据库名
database: 'test',
// 数据库编码
charset: 'utf8mb4'
}
/**
* 封装数据库连接方法
* @param string sql 数据库语句
* @param array args 数据库查询参数
* @param function callback 回调函数
*/
function dbConnection(sql,args,callback){
// 使用数据库连接池连接数据库
var pool = mysql.createPool(dbConfig);
pool.getConnection((err,conn) => {
if(err) return;
conn.query(sql,args,callback);
// 关闭数据库连接
conn.release();
})
}
module.exports = {dbConfig, dbConnection}在exp-api目录下，新建controllers目录【此目录用来存放数据库对象操作方法】，并新建一个userController.js文件，键入以下代码。
const db = require('../config/db');
const findAll = (req,res) => {
let sql = 'select * FROM t_user';
let args = [];
let callback = (err,data) => {
if(err){
console.log('数据库查询出错！');
} else {
res.json({
list: data
})
}
}
db.dbConnection(sql,args,callback);
}
module.exports = {
findAll
}在exp-api/routes目录下新建users.js文件【此文件一般在初始化express工程时，会自动新建，如果目录下存在此文件，修改即可】，键入以下代码。
var express = require('express');
var router = express.Router();
const UserController = require('../controllers/userController') ;
/* GET user page. */
router.get('/', UserController.findAll);
module.exports = router;修改exp-api工程的入口文件app.js，把刚刚新增的查询用户列表的路由添加进去。
// 导入新增的user路由
var usersRouter = require('./routes/users');
// 映射user路由访问地址
app.use('/api/findAll', userRouter);此番操作配置，就是在模拟后端新建一个查询用户列表/findAll的API
启动exp-api工程之后，就可以通过工程访问地址+“/api/findAll”的形式访问了，这与访问后端API几乎是一摸一样的。
使用NGINX解决跨域访问
在本篇文章中后端模拟工程exp-api使用的是express工程默认的访问端口3000，而前端工程使用的是vue工程默认访问端口8080，在模拟前后端调试时，必然会有跨域访问的问题。
打开nginx的配置文件，找到监听80端口的server配置代码，添加以下代码
location /api {
proxy_pass http://127.0.0.1:3000/api;
}
location /front {
proxy_pass http://127.0.0.1:8080/front/;
}
PS：配置说明
定义前端工程的代理统一访问地址为localhost/front，定义后端API统一代理访问地址为localhost/api。在此，着重说明以下，前后端工程的必须设置一个访问目录【前端：/front，后端：/api】,否则，在进行nginx代理访问时，会出现路径方面的问题。
前端工程访问地址配置
本篇文章中前端工程使用的时vue3.0，vue升级到3.0后，工程已经深度集成了webpack，初始化项目后，已经去除了包括webpack配置文件等一些目录及文件，使项目目录更加简洁。想要配置工程包括配置webpack，得在工程根目录下新建一个vue.config.js文件。具体如何编写该配置文件，请移步vue官方文档说明。
在vue.config.js中添加以下代码
publicPath: process.env.NODE_ENV === 'production'
? '/production-sub-path/'
: '/front/',总结
前端工程调试得方法不止本文所讲的一种方法。此方法只是笔者在项目中所习惯使用的，此方法的好处在于调试时可以使用项目的测试数据库，不需要手动编写或者配置接口返回的数据。
原创文章，作者：ZERO，如若转载，请注明出处：https://www.edu24.cn/front-end/project-adjuster.html
微信扫一扫 
支付宝扫一扫 
