Vue 版商城 (一)

Author Avatar
ldq 8月 15, 2017
  • 在其它设备中阅读本文章

Vue 版商城介绍

预览地址

预览地址

部署

部署在阿里云
采用 Nginx 进行代理转发
PM2 做守护进程

注意

注意存在的问题


由于域名没有备案，所以用 ip 访问，防止被阿里云封 < br>
由于没有使用 Https[国内的免费证书都要备案域名]

Chrome，Firefox 等遇到 <input type=”password”> 会报不安全 < br>
并非代码本身有问题 < br>

源码

GitHub

起因

做 Vue 版商城的原因：

1. 了解前后端通信
2. 了解服务器部署
3. 了解 MongoDB
4. 了解 Nginx

技术栈

  • Vue2.3: [ 前端框架 ]
  • Vuex: [ 状态管理, 组件通信 ]
  • Vue-router: [ 配置路由，组件切换 ]
  • Vue-lazyload: [ 图片懒加载 ]
  • Vue-infinite-scroll: [ 滚动加载 ]
  • Vue-pull-to-refresh: [ 自己开发的下拉刷新 ]
  • ES6/7: [ JS 版本 ]
  • Webpack: [ 模块化处理，编译打包 ]
  • Express: [ 服务器 ]
  • Mongoose: [ 连接 MongoDB 数据库 ]
  • Nginx: [ 代理转发，gzip 压缩等 ]
  • PM2: [ 做守护进程, 发布更新项目 ]
  • Axios: [ 基于 Promise 处理 HTTP 请求 ]
  • SASS(SCSS): [ css 预处理器 ]
  • Flex: [ 弹性布局 ]
  • loaclStorge: [ 本地存储用户信息 ]
  • Echarts: [ 数据可视化显示 ]
  • Svg-captcha: [ 验证码 ]

效果图

01

成果

实现登录，注册，
添加删除购物车，添加删除地址，
完成订单，查看订单详情，
下拉刷新

阿里云部署

  1. 创建新用户
  2. 更换端口，禁止 root 登录
  3. 安装配置 iptables， fail2ban，nginx，mongodb，nodejs
  4. 利用公私钥实现 ssh 无密码登录
  5. 利用 git，github，pm2 实现高效的部署代码
  6. 利用 nginx 开启 gizp

注意
阿里云安全组本身就有做端口访问限制

问题

没有备案, 没有使用 HTTPS，导致 chrome 提示不安全
没有实现 RESTful API

未来

解决问题
优化代码
优化服务器配置

参考资料

Vue 文档 : https://cn.vuejs.org/v2/guide/
Mongoose 文档 : http://mongoosejs.com/
Mongodb 文档 : https://docs.mongodb.com/

许可协议: "署名-非商用-相同方式共享 4.0"

本文链接：http://ldq-first.github.io/2017/08/15/Vue版商城-一/