Node.js对前端来说无疑具有里程碑意义，与其越来越流行的今天，掌握 Node.js 技术已经不仅仅是加分项，而是前端攻城师们必须要掌握的一项技能。而 Express 基于 Node.js 平台，快速、开放、极简的 Web 开发框架，成为 Node.js 最流行的框架，所以使用 Express 进行 web 服务端的开发是个不错且可信赖的选择。但是 Express 初始化后，并不马上就是一个开箱即用，各种功能完善的 web 服务端项目，例如：MySQL 连接、jwt-token 认证、md5 加密、中间件路由模块、异常错误处理、跨域配置、自动重启等一系列常见的功能，需要开发者自己手动配置安装插件和工具来完善功能，如果你对 web 服务端开发或者 Express 框架不熟悉，那将是一项耗费巨大资源的工作。

本文作者根据项目实战经验已将底层服务架构搭建完成，并且本项目已在 github 开源，供大家学习参考使用（如有不足，还请批评指正），希望能减轻大家的工作量，更高效的完成工作，有更多时间提升自己的能力。

后端 API 接口源码地址 👉：https://github.com/jackchen0120/todo-nodejs-api

前端界面源码地址 👉：https://github.com/jackchen0120/todo-vue-admin

如果觉得本文还不错，记得点个 👍 或者给个 ❤️，你们的赞和 star 是作者编写更多更精彩文章的动力！

分享之前我们先来认识一下Node.js、Express都是什么东东。

简单的说 Node.js 就是运行在服务端的 JavaScript。

Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台。

Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境，基于 Google 的 V8 引擎，V8 引擎执行 Javascript 的速度非常快，性能非常好。

Express 是一个简洁而灵活的 Node.js Web 应用框架，提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。使用 Express 可以快速地搭建一个完整功能的网站。

Express 框架核心特性：

前端项目采用的技术栈是基于Vue + iView，用 vue-cli 构建前端界面，后端项目采用的技术栈是基于Node.js + Express + MySQL，用 Express 搭建的后端服务器。

Web3研习社 👉：[https://54web3.cc/)

开发前准备工作，相关运行环境配置如下：

运行项目

1> 下载安装依赖

git clone https://github.com/jackchen0120/todo-vue-admin.git

cd todo-vue-admin

npm install 或 yarn

2> 开发模式

npm run serve

运行之后，访问地址：http://localhost:8082

3> 生产环境打包

npm run build

npm install -g @vue/cli #安装指定版本

npm install -g @vue/[email protected]

#OR

yarn global add @vue/cli

vue create todo-vue-admin

cd todo-vue-admin

npm run serve

在项目根目录新增vue.config.js文件，配置信息如图所示：

按照上面的步骤完成脚手架搭建后，把需要的 axios、vue-router、view-design、sass-loader、node-sass 等依赖库安装配置好，准备开始上膛。

首先在 views 文件夹下面新建login.vue组件，编写一个静态的登录注册页面。登录成功后将登录返回的 token 保存到浏览器端并跳转到主页。views 文件夹下面新建home.vue组件，显示登录成功后的页面，并获取用户基本信息，主页右上角显示用户头像、修改密码、退出登录等功能。代码如下：