菜鸟进阶－－node+vue实现一个商城Demo(1):项目介绍

node+vue实现一个商城Demo(1):项目介绍

本文的目的只是纪录一下刚刚完成的个人demo,因为本人水平有限,所以将学习中遇到的坑加以总结，以免日后忘记。如果能能帮到您，不胜荣幸。如有不足，也恳请扶正。

刚刚学习完慕课程网上的Vue2.0+Node.js+MongoDB全栈打造商城系统视频教程，加以改进。将它发布到自己的Github上。

前端部分

服务端部分

与原版视频不同，本demo采用mysql做数据库，前端部分分页改为传统的分页方式，并且加入了多条件的搜索功能，添加了注册用户和添加地址功能。

项目启动

前端部分：

//启动前请确定安装了npm和node喔～



项目结构

在mm-fe目录下打开命令行，输入cnpm i 即可下载项目所需的环境包。



安装环境包

安装完所需的环境包后，输入 npm run dev 即可启动项目



项目启动

启动完以后应该是这个样子



光突突的啥也没有，没关系接下来进入服务器部分。

后台启动

后台采用的是node的express框架＋mysql数据库，网上大多数node教程都是采用mongodb，但是mongodb学习成本较高，而且没有太好用的可视化工具，网就用回mysql了，毕竟顺手的才是适合自己的。

言归正传

项目结构：



在启动服务端前先导入数据库。

//导入数据库的时候需要先新建一个mmall库再导入喔～

服务端的环境包安装方式同上

接下来启动服务端，服务端的启用通过：

node bin/www



服务器启动成功

启动之后，数据就拉过来了：

总结

不论是前端还是后台都需要安装node以及npm，通过npm即可快速的搭建起我们的项目，

接下来的章节将会详细讲解这个demo