使用vue+express+mongoose打造商城

趁着寒假有时间，想加强下自己的vue基础 同时学习node和mongodb，于是选择了一门慕课网的实战来学习

技术栈：vue+vue-router+vuex(一点)+axios+express+mongoose

项目上线地址 http://shop.scauvolare.cn/

废话不多说，先上目录结构

ImoocMall
├─ .babelrc
├─ .editorconfig
├─ .eslintignore
├─ .eslintrc.js
├─ .gitignore
├─ .postcssrc.js
├─ README.md
├─ index.html
├─ package.json
├─ build
├─ config
├─ src
│    ├─ App.vue
│    ├─ assets
│    ├─ components    #组件
│    ├─ main.js       #入口
│    ├─ pages         #页面vue文件
│    └─ router        #路由文件
└─ static
       ├─ .gitkeep
       ├─ img
       └─ loading

有一点需要注意，在搭建该项目的时候，我升级了vue-cli
原来的2.x版本是使用express搭建web服务器的，可以在dev-server.js搭建自己所需的服务。
build目录如下

升级了3.0版本后发现使用webpack-dev-server
目录build改变如下

所使用的实际命令行也不一样
2.x 版本 node build/dev-server.js
3.0 版本 webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
鉴于对webpack的了解不够深入，在此不作解释

后台项目目录结构

server
├─ app.js
├─ package.json
├─ bin
│    └─ www
├─ model
│    ├─ goods.js
│    └─ user.js
├─ routes
│    ├─ goods.js
│    ├─ index.js
│    └─ users.js
└─ util
      └─ util.js

既然是前后端分离项目，必然会涉及到跨域问题。
关于跨域问题的解决网上很多，就不多说 了。
vue-cli提供了代理功能，在开发环境可完美解决跨域问题。
在config文件下的index.js设置代理

proxyTable: {
      '/': {
        target: 'http://localhost:3000/'  #将所有请求都代理转发
      }
}

需要注意的一点是，代理功能只能开发环境使用。
换一句话说，就是当执行npm run build打包生产文件后，依旧访问不同端口的api，还是会产生跨域的问题。
在这里我使用了nginx进行代理。

---

部署

本项目使用腾讯云的服务器，操作系统为windows server 2012。
在项目的部署上我想实现两个功能，一是可以在web服务器上实现代理转发的功能，二是可以用二级域名来访问该项目。
IIS部署简单，但是没有代理功能；使用node服务器不会出现跨域问题，直接用res.render('index.html')渲染页面，但是只能用一级域名或者一级域名+目录来进行访问。达不到我想要的想要。
最后我选择了用nginx来做web服务器，配置简单。

server {
        listen       80;
        server_name  shop.scauvolare.cn;

    location / {
        root   C:/www/shop;
        index  index.html index.htm;
    }
    location /goods/ {
            proxy_pass   http://127.0.0.1:3000/goods/;
        }
    location /users/ {
            proxy_pass   http://127.0.0.1:3000/users/;
        }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

修改完nginx.conf文件后，执行nginx -s reload命令，就可以启动服务了。
可以成功访问 http://shop.scauvolare.cn/
以后就可以按照这种方式在同一个服务器里使用不同的二级域名部署多个不同的项目啦。

---

总结

做该项目的时候还是遇到了一些问题的，有些要注意的地方还是写出来。

1. 在使用mongoose时，需要在文档中加入额外的属性时，要先Schema中先定义好该属性。否则在通过 . 或者 [] 方式赋值时，不会添加到数据库文档当中。
2. 在windows操作系统上使用nginx时，最好在nginx安装目录下使用nginx命令，否则会出现比较奇葩的错误。用任务管理器来关闭nginx进程。

在学习该项目的过程中，从一个页面到部署到服务器，还是学到了很多东西。

不过该项目也有些不好的地方，例如后端代码没有按照MVC模式进行编写，目录结构不太友好，express和mongoose的各种回调也不太好。以后会使用Promise或者asnyc/await来写回调，使代码更加简洁。

俗话说学无止境，前端之路路漫漫，希望自己能一直学习，一直强大自己，一直走下去。