• Stars
    star
    368
  • Rank 115,958 (Top 3 %)
  • Language Vue
  • License
    MIT License
  • Created over 5 years ago
  • Updated about 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Starbucks Front-End Project Developed by Vue.js

vue-starbucks

写在前面

有许多小伙伴询问是否有服务端接口,最近本人整理了相关数据接口提供给大家,希望对各位小伙伴的学习能提供帮助。

GET:

http://47.114.181.210/selection/items

http://47.114.181.210/beverages/items

http://47.114.181.210/food/items

http://47.114.181.210/coffee/items

http://47.114.181.210/merchandise/items

http://47.114.181.210/storelocation/items

http://47.114.181.210/cityinfo/items

1 简介

项目介绍:

这个项目是基于 Vue.js + Node.js + MongoDB 构建的前后端分离的单页面应用。网站采用响应式布局方案,适配 PC 端和移动端,包含商品展示、定位附近门店、登录注册、获取当前用户会员信息与消费记录等功能,较为完整的展现了星巴克官方网站的全貌。项目部署于个人网站,欢迎访问。

项目文件介绍:

UploadFile 文件夹存放的是线上部署时需要上传的文件,包括:前端静态资源、HTTPS 服务端接口文件以及 Nginx 配置文件。

MongoData 文件夹存放的是网站数据(JSON 格式),建立好 MongoDB 数据库后,可直接将其中的文件导入数据库使用。

server 文件夹存放的是后端接口源码,用于在本地运行。

其他文件则是网站的前端源码。

2 技术栈

Vue + VueX + Vue-Router + Webpack + ES6 + Axios + Node(Express) + MongoDB

3 本地运行

为使项目能够在本地正常运行需提前安装 Node、npm (cnpm) 和 MongoDB。以下操作是基于 MacOS 进行的。

在本地创建一个文件夹(以 starbucks 为例)用于存放当前项目,然后将项目文件克隆至该文件夹内。打开终端进入到 starbucks 文件夹并输入如下命令:

# git clone https://github.com/hezhang18/vue-starbucks

3.1 启动前端项目

进入项目文件夹 vue-starbucks,安装依赖,启动前端项目。

# cd vue-starbucks
# npm install
# npm run dev

此时在浏览器输入:localhost:8080 即可访问到项目。

3.2 启动后端接口

启动后端接口前需要对后端代码做一个简单的修改。打开 /server/routes/linkedDB.js 文件,修改相应的数据库用户名与用户密码以及服务器的 IP 地址,本地 IP 为 127.0.0.1。

mongoose.connect('mongodb://DB_UserName:DB_PassWord@IP_Address:27017/vSbux', {useNewUrlParser: true});

打开终端进入存放后端接口源码的文件夹 server,安装依赖,启动后端接口。

# cd server
# npm install
# node bin/www

此时在浏览器输入:localhost:3000,页面是一个有 Express 字样的欢迎页面,此时表明后端接口启动成功。

3.3 MongoDB 配置

3.3.1 为数据库创建用户及密码

  • 打开终端,首先以非授权模式进入数据库:
# mongo
  • 创建 admin 数据库:
# use admin

操作结果:

switched to db admin

  • 设置用户名及密码
# db.createUser({user:"UserName",pwd:"PassWord",roles:["root"]})

操作结果:

Successfully added user: { "user" : "UserName", "roles" : [ "root" ] }

  • 授权模式(此时需输入用户名密码)进入数据库,返回 1 表示进入成功。
# db.auth("UserName","PassWord")

操作结果:

1

  • 如果以上操作都进展顺利,此时可以按照上述方法继续创建当前项目需要用到的数据库。
# use vSbux

操作结果:

switched to db vSbux

# db.createUser({user:"UserName",pwd:"PassWord",roles:[{role:'dbOwner',db:'vSbux'}]})

操作结果:

Successfully added user: {"user" : "UserName","roles" : [{"role" : "dbOwner","db" : "vSbux"}]}

  • 使用授权模式重新开启数据库
# sudo mongod --auth

或在 MongoDB 的配置文件 mongod.conf (Ubuntu 系统)/ mongod.cfg(Windows 系统)添加代码

#security:
  #authorization: enabled

然后使用服务重新启动 MongoDB

# sudo service mongod start(Ubuntu 系统)
# net start mongodb(Windows 系统)

进行到这里,通过 MongoDB 可视化工具(推荐一款官方自有的 MongoDB Compass)连接到数据库,此时可以看到已经创建好的 vSbux 数据库,在这个数据库下继续创建 8 个我们需要用到的集合:selection、beverages、coffee、food、merchandise、city、stores、users。集合创建完毕,将 MongoData 文件夹中的 JSON 数据导入到对应的集合中。

至此,整个项目前后端及数据库的本地搭建工作均已完成,如果一切进展顺利,那么整个项目已经可以在本地正常地运行了。

4 线上部署

这一部分将介绍如何将整个网站项目进行线上部署,并配置 HTTPS。以下操作是在阿里云服务器 ubuntu 18.04 操作环境下进行的。部署前需提前安装好 Node、npm (cnpm)、pm2、MongoDB 以及 Nginx。此外还需要通过命令 npm run build 将前端代码打包为生产版本备用。

4.1 MongoDB 配置

MongoDB 的安装可参考 MongoDB 官方文档,创建用户和数据库的操作方法与《 3.3 MongoDB 配置 》相同,不再赘述。

  • ubuntu 18.04 下 MongoDB 常用操作命令:
# sudo service mongod start
# sudo service mongod stop
# sudo service mongod restart
# sudo service mongod status

4.2 Nginx 安装与 HTTPS 配置

  • 使用 apt 安装:
# sudo apt install nginx
  • 安装后的位置:

/usr/sbin/nginx:主程序

/etc/nginx:存放配置文件

/var/www/html:存放静态文件

/var/log/nginx:存放日志

  • ubuntu 18.04 下 Nginx 常用操作命令:
# sudo systemctl start nginx
# sudo systemctl stop nginx
# sudo systemctl restart nginx
# sudo systemctl reload nginx
# sudo systemctl status nginx
  • 上传 SSL 证书

最近阿里云网站不支持申请免费 SSL 证书,可在腾讯云申请 SSL 证书,申请完成将证书下载并保存至 cert 文件夹中。

# scp -r cert root@Server_IP:/usr/share/nginx
  • 找到 Nginx 配置文件,修改相应配置
# vi /etc/nginx/sites-available/default

Nginx 配置文件内容如下:

# Default server configuration
#
server {
        # SSL configuration
        #
        listen 443 ssl default_server;
        listen [::]:443 ssl default_server;
        ssl on;
        ssl_certificate /usr/share/nginx/cert/www.hezhang18.cn.pem;
        ssl_certificate_key /usr/share/nginx/cert/www.hezhang18.cn.key;

        root /var/www/html;

        # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html;

        server_name hezhang18.cn;

        location / {
                try_files $uri $uri/ /index.html;
        }

        location /selection {
            proxy_pass https://127.0.0.1:3001/selection/;
        }

        location /beverages {
            proxy_pass https://127.0.0.1:3001/beverages/;
        }

        location /food {
            proxy_pass https://127.0.0.1:3001/food/;
        }

        location /coffee {
            proxy_pass https://127.0.0.1:3001/coffee/;
        }

        location /merchandise {
            proxy_pass https://127.0.0.1:3001/merchandise/;
        }

        location /storelocation {
            proxy_pass https://127.0.0.1:3001/storelocation/;
        }

        location /cityinfo {
            proxy_pass https://127.0.0.1:3001/cityinfo/;
        }

        location /users {
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $http_host;
            proxy_set_header X-NginX-Proxy true;
            proxy_pass https://127.0.0.1:3001/users/;
        }

        location /menu/users {
            proxy_pass https://127.0.0.1:3001/users/;
        }

        location /account/users {
            proxy_pass https://127.0.0.1:3001/users/;
        }

        location /account/profile/users {
            proxy_pass https://127.0.0.1:3001/users/;
        }
}

server {
        listen 80;
        server_name www.hezhang18.cn;
        rewrite ^(.*) https://$server_name$1 permanent;
}

附:HTTP 请求头中的 X-Forwarded-For

4.3 后端项目部署

  • 连接远程服务器,在服务器根目录下创建 /workspace/sbux 文件夹用于存放当前项目的 HTTPS Server。
# cd /
# mkdir workspace
# cd workspace
# mkdir sbux

由于最终是要以 HTTPS 的方式访问,所以首先将证书保存一份至 httpsServer/cert 文件夹中。此外,在上传至服务器前还需要对后端接口的代码做一些相应的修改。

  • 修改 httpsServer/bin/sbux-https-server 文件:
/**
 * Module dependencies.
 */

var app = require('../app');
var debug = require('debug')('server:server');
var https = require('https')
var fs = require('fs')

/**
 * Get credentials
 */

var privateKey  = fs.readFileSync('../cert/www.hezhang18.cn.key', 'utf8');
var certificate = fs.readFileSync('../cert/www.hezhang18.cn.pem', 'utf8');
var credentials = {key: privateKey, cert: certificate};

/**
 * Get port from environment and store in Express.
 */

var sslport = normalizePort(process.env.PORT || '3000');
app.set('sslport', sslport);

/**
 * Create HTTPS server.
 */

var httpsServer = https.createServer(credentials, app);

/**
 * Listen on provided port, on all network interfaces.
 */

httpsServer.listen(sslport);
httpsServer.on('error', onError);
httpsServer.on('listening', onListening);

/**
 * Normalize a port into a number, string, or false.
 */

function normalizePort(val) {
  var port = parseInt(val, 10);

  if (isNaN(port)) {
    // named pipe
    return val;
  }

  if (port >= 0) {
    // port number
    return port;
  }

  return false;
}

/**
 * Event listener for HTTP server "error" event.
 */

function onError(error) {
  if (error.syscall !== 'listen') {
    throw error;
  }

  var bind = typeof port === 'string'
    ? 'Pipe ' + port
    : 'Port ' + port;

  // handle specific listen errors with friendly messages
  switch (error.code) {
    case 'EACCES':
      console.error(bind + ' requires elevated privileges');
      process.exit(1);
      break;
    case 'EADDRINUSE':
      console.error(bind + ' is already in use');
      process.exit(1);
      break;
    default:
      throw error;
  }
}

/**
 * Event listener for HTTP server "listening" event.
 */

function onListening() {
  var addr = httpsServer.address();
  var bind = typeof addr === 'string'
    ? 'pipe ' + addr
    : 'port ' + addr.port;
  debug('Listening on ' + bind);
}

此外还需要检查 /utils/checkTools.js 文件中的 AllowDomain 配置是否正确,否则会因跨域请求受限导致接口无法访问。

  • 上传至服务器
# cd sbux
# scp -r httpsServer root@Server_IP:/workspace/sbux
# cd httpsServer
# npm install
  • 使用 pm2 启动后端接口
# cd /workspace/sbux/httpsServer
# pm2 start sbux-https-server

pm2 常用命令:

# pm2 start fileName
# pm2 start all
# pm2 stop fileName
# pm2 stop all
# pm2 list
# pm2 log

4.4 前端项目部署

将打包好的文件上传至 Nginx 存放静态文件的文件夹中。终端进入打包生成的 dist 文件夹,输入如下命令:

# scp index.html root@Server_IP:/var/www/html
# scp -r static root@Server_IP:/var/www/html

备注:阿里云安全组

以上部署完毕,还需要在阿里云控制台配置安全组才能正常访问后端接口。