前言

在之前，我用了三篇文章讲解了如何使用Vue+Webpack搭建简书网站的前端页面，如果感兴趣的可以看看之前写的三篇文章。

1. Vue2.0+Webpack搭建完整简书网站系列教程（1）

2. Vue2.0+Webpack完整案例之搭建简书网站（2）

3. Vue2.0+Webpack完整案例之搭建简书网站（3）

在前端页面做完后，接下来就考虑搭建简述网站的服务端了，我选择的是基于NodeJS的Express框架，接下来就跟着我一起来学习下，如何进行服务端搭建吧？

Github地址如下，感兴趣的可以自行clone或者fork。

https://github.com/zhouxiongking/vue2.0-vuex2.0-demo-jianshu

准备知识

• Vue-resource

Vue-resource是Vue中使用AJAX发送请求并处理响应的库，言外之意是$.ajax()能做的事vue-resource都可以办到，而且其API更为简洁。

• Express

Express是一款基于NodeJS的服务端框架，可以处理服务端代码

• 数据库基础
  

因为涉及到服务端编程，对数据库基本知识的掌握是必须的，简单的SQL语句要会编写。

数据库设计

在做服务端代码设计时，第一件事是对数据库的设计，在我做的简书网站中主要涉及到用户和文章两张表，建表语句如下所示。

jianshu.sql

创建server

• 安装Express

安装Express

• 使用Express

在进行服务端代码编写后，我们会慢慢用到build下的文件，首先就是dev-server.js文件，在这个文件中通过如下代码，创建一个server。

创建server

在创建app后，可以通过app.use()方法使用一系列针对功能的中间件，这些会在后面讨论到具体功能时慢慢添加。

注册/登录

首先我们针对注册/登录功能的整个执行过程做一次全栈的讲解，对全栈开发感兴趣的可以认真看一下。

注册/登录页

针对一个完整的全栈功能，一般会按照如下过程执行。

1. 编写前端页面

2. 发送请求至服务端

3. 服务端处理请求url

4. 操作数据库

5. 处理响应结果

我们按照上述5个步骤分别进行讲解。

编写前端页面

前端页面实际效果如上图所示，这里截取主要的登录form表单内容。

前端页面内容

发送请求

在.vue文件的script部分，通过vue-resource发送请求，需要在main.js中添加以下代码。

main.js

然后通过以下代码发送请求。

发送请求

服务端处理请求

在服务端因为使用Express启动了一个server，因此可以直接使用，在项目中我是新建了一个server文件夹，里面专门存放不同功能的server文件。

针对用户注册/登录功能的服务端代码如下。

用户注册

用户登录

操作数据库

在接收到请求并获取参数后，便开始操作数据库，比如用户名是否已经注册，登录时用户名密码是否正确。

操作数据库的文件也专门建立一个dbUtil文件夹，首先是数据库的连接，大家自行修改用户名和密码。

数据库连接

然后是针对用户的dbUtil文件，主要内容如下。

注册时查找用户

登录时，查找用户

处理响应结果

在处理完数据库，发送响应消息后，浏览器需要处理响应的结果，根据返回的结果执行后续流程。

处理响应的代码同样写在.vue文件的script标签中。

处理响应

至此，一个完整的注册/登录流程就结束了。

结束语

今天这篇文章主要讲的是使用Express搭建简书网站的服务端，并配合Vue完成全栈功能，内容有点多，你是否有收获呢？