一、前端vue构建（先将假数据写到页面里）

1. 先搭建一个vue项目（vue-cli刚搭建的项目是单页面应用，所以以下是单页面全栈构建网站，当然可以通过修改里面的配置变成一个多页面应用,方法是增加多个页面入口。）

可以用vue-cli搭建项目，参考如下：

http://blog.csdn.net/wisewrong/article/details/55212684

2. 在vue配置里做适当改动，设置代理访问，即通过访问/cart就能跳到该页面，改动地方如下：

3. 设置路由（进行跳转）

4. 利用axios获取vue前端接口传来的数据

这些一般都是放到config的axios文件夹下的axios.js里的，然后在common.js把所有接口都写好，例如在智慧辽源项目里在vue里引入（记得加括号，因为common里有很多个接口实现方式，只引入其中一个）===>注意将项目代码重复的部分写入文件，建好项目目录结构。

二、express构建后端

1. 用express生成器搭建一个后端项目，参考如下：

http://www.expressjs.com.cn/starter/generator.html

运行可以用node命令node bin/www因为express生成器已经构建好了server，在www里有createServer

设置好端口，createServer一个server然后监听这个端口。

2. 在这里插一个express是如何实现后端项目构建的知识

3. server里面的需要添加的配置内容

然后建一个express()，并且执行接口。

4. 写后端接口，连接数据库，获取数据

res.json就将query到的数据库里的数据发送到前端axios想要获取的地方，但是返回的数据最好要设置好传送的数据格式，比如：

还有connection.query是要封装成一个function的，传入sql等参数，然后在这些接口中调用。

再看个添加购物车接口的实现

三、运行界面

1. 先启动后端服务器（就是域名http://localhost:3000）

2. 再启动前端服务器（域名http://localhost:8000）

运行界面如下：

四、最后附一张关系图梳理知识点