资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/Vue+Express全栈购物商城

Vue+Express全栈购物商城

luzhuqun / 3217人阅读

摘要：一前言提纲基于和框架写的一个全栈购物商城，记录项目过程中遇到的一些问题以及经验和技巧。服务端技术栈登录授权用认证机制，来实现登录登出。服务器配置和缓存策略，根据不同的来代理。申请证书全站升级到，配置的协议。

一、前言提纲

基于Vue和Express框架写的一个全栈购物商城，记录项目过程中遇到的一些问题以及经验和技巧。

二、历史版本

基于Vue-CLI2.0:点我查看

这个分支版本是一两年前的，基于Vue-CLI2.0写的，数据请求是Mock，纯前端的项目。

基于 Vue-CLI3.0:点我查看

这个分支版本是基于Vue-CLI3.0的，将脚手架从2.0迁移升级到了3.0，遇到的一些问题和坑也都填完了~也是纯Web端Mock模拟数据的项目。

当前版本:点我查看

基于Vue-CLI3.0,前端用Vue全家桶，后端用Express+MongoDB+Redis，后台管理系统CMS是用的Vue-Element-Admin

三、详情 1.前端

在线预览:https://www.fancystore.cn

手机直接扫描二维码真机体验:

1.1 技术栈:

Vue全家桶(Vue-CLI3,Vue2.x)

Vue-Router(页面KeepAlive的处理)

Vuex(状态管理库，刷新保存状态)

Axios(二次封装配置的数据请求)

Less(CSS预处理)

I18n(国际化处理)

Vant(UI库,按需加载+rem)

SEO(预渲染)

Sentry(线上错误日志监控)

Travic(自动构建,持续部署)

1.2适配

项目代码px自动转换为rem，需要在main.js中引入amfe-flexible库

Vant UI库也有REM单位，需要在vue.config.js中配置:

1.3 SEO

单页(SPA)SEO是一个痛点，目前有两种方式，一种是SSR,一种是预渲染(PrerenderSPAPlugin)。

这个项目是用预渲染(PrerenderSPAPlugin)+vue-meta-info这两个库来做SEO优化的。

将rouer.js模式改为mode:history

下载安装PrerenderSPAPlugin

PrerenderSPAPlugin是Google的一个库，基于Chromium是获取数据，安装PrerenderSPAPlugin的时候会自动下载Chromium浏览器，国内npm安装Chromium会经常安装失败，建议用淘宝的cnpm安装

    npm install -g cnpm --registry=https://registry.npm.taobao.org
    cnpm install PrerenderSPAPlugin --save

在vue.config.js中引入PrerenderSPAPlugin，配置需要预渲染的路由。

下载安装 vue-meta-info

在main.js中引入vue-meta-info，在每个页面配置meta信息，这样每个单页路由都有不同的title,理由爬虫引擎抓取重要内容，利于SEO。

预渲染前只有一个index.html,预渲染后最后打包出来的预渲染目录文件如下:

1.4 路由懒加载以及缓存keep-alive动的态判断

项目中会使用keep-alive会提高用户体验和网站的性能,如果想实现部分页面缓存，部分页面不需要缓存，可以在router.js里面的路由添加meta.keepalive在跟router-vier加入判断:

1.5 Vuex状态管理页面刷新失效问题

用Vuex管理全局的状态，会遇到刷新页面的时候所有的状态丢失或者重置，可以在App.vue的钩子函数添加代码，会在页面刷新的时候将Vuex存储到Storage中，刷新完成后又再从Storage取出来存到Vuex里面:

1.6 封装数据请求

封装Axios，添加Axios请求(request)和相应(response),统一处理错误信息或者登录认证的消息,所有的数据请求都存放到api目录下，对应的页面方便后续的维护和管理。

1.7 打包构建优化vue.config.js

区分开发环境和生产环境

alias的方式直接指定目录。

CDN

生产环境中将一些共有库Vue,vuex,vue-router等库不打包到项目中，而是通过CDN的方式引入这些共有库，这样可以减少项目的大小，也可以借助CDN的优势，让网站加载更快。推荐一个强大的cdn库：[https://www.bootcdn.cn/](https://www.bootcdn.cn/)

生产环境压缩和出去console打印日志

生产环境开启gzip压缩

生产环境启用预渲染

生产环境分离css，外链CSS可以缓存

1.7 错误日志监控Sentry

集成Sentry开源日志监控系统，在官网注册获取key，在main.js中引入RavenVue并配置即可

1.8 自动构建和持续集成

Github自动构建和持续集成基于Travis

登录Travis选择需要持续集成的项目。

在.travis.yml写上相应的config,服务器配置ssh_key，

每次代码push到指定分支(比如master)的时候，Travis会自动执行项目上的.travis.yml文件，开始自动构建，构建成功通过scp密令传送到服务器，完成自动部署的功能。

每次需要发版，只需要push代码，然后去喝杯咖啡，回来就已经构建发布完成，解放劳动力

1.9 代码自动格式化优化

团队合作的时候，每个成员用的编辑器不同，缩进格式也不同，这样合并代码的时候会出现各种意外的情况，团队统一编辑器和编辑器不太现实，因为每个人的写代码习惯和风格不一致。可以借助husky 和 link-stage，每次commit的时候都会安装配置的规则格式化代码，参考文章:https://segmentfault.com/a/1190000009546913

1.10代码优化

设计模式

表单验证需要写很多判断条件，if-else 或者swith，当条件越多时或者后面需要修改需求条件的时候，会变得不是很好维护，可以用策略模式来重构业务代码:

善用Mixin,提取共用的组件，将项目组件化

Vue的Mixin复用代码，可以更好的提高开发效率和可维护性
除了将一些共用的页面做成组件引入的方式之外，大文件项目也分好几个模块，将文件才成模块的方式会更好维护和更好的阅读。

2.服务端 2.1 技术栈:

Node

Express

Mongo

Mongoose

Redis

Qiniu

PM2

2.2 登录授权

用Session认证机制，来实现登录登出。
配置Session的加密解密，将Session存储到Redis，提高性能,如果有多台服务器，Redis可以共享Session。

2.3 中间件判断用户是否登录:

有些API请求是需要用户登录才可以访问的，可以写中间件来判断:

2.4 中间件判断用户的权限:

有些API的请求是需要判断用户是否有权限，比如添加、删除和更新，会在中间件判断是否有权限

2.5 PM2多进程启动项目 2.6 Mongodb优化设置索引 2.7 Redis做缓存 2.8 七牛云对象存储配置Key还有域名的绑定以及HTTPS证书的申请 3.后台管理系统CMS

在线预览:https://www.fancystore.cn/admin

3.1技术栈

vue-element-admin

配合后端做了权限系统，根据用户的权限来展示和隐藏菜单和按钮。

4.服务器

Nginx配置gzip和缓存策略，根据不同的 URL来代理。

申请HTTPS证书,全站升级到HTTPS，配置HTTP2.0的协议。

Github:

前端: https://github.com/czero1995/fancy-store

服务端: https://github.com/czero1995/fancy-store-server.git

后台管理CMS: https://github.com/czero1995/fancy-store-admin.git

idc机房托管 云服务器 Vue+Express 全栈购物商城 -express Express

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109631.html

相关文章

  • Vue+Express全栈购物商城

    摘要：一前言提纲基于和框架写的一个全栈购物商城，记录项目过程中遇到的一些问题以及经验和技巧。服务端技术栈登录授权用认证机制，来实现登录登出。服务器配置和缓存策略，根据不同的来代理。申请证书全站升级到，配置的协议。一、前言提纲 基于Vue和Express框架写的一个全栈购物商城，记录项目过程中遇到的一些问题以及经验和技巧。 二、历史版本 基于Vue-CLI2.0:点我查看 这个分支版本是一两年前...

    Richard_Gao 评论0 收藏0

  • 仿美团外卖的全栈项目(vue+node+mongodb)带支付->大三求实习

    摘要：前端项目包含多个路由，涉及到文件有个，功能设计登录，定位，浏览商品，加购物车，下订单，支付支持微信和支付宝的扫码支付和调起支付，评价，个人信息更改，是一个较为完整的项目。 关于 2019届大三学生，前段时间一直想一个人单独开发一个较为完整的项目，在众多应用中，考虑之后选择了美团外卖来模仿，这段时间就利用课余时间进行开发，前端用vue+vuex+vue-router+axios，因为需要...

    anRui 评论0 收藏0

  • 仿美团外卖的全栈项目(vue+node+mongodb)带支付->大三求实习

    摘要：前端项目包含多个路由，涉及到文件有个，功能设计登录，定位，浏览商品，加购物车，下订单，支付支持微信和支付宝的扫码支付和调起支付，评价，个人信息更改，是一个较为完整的项目。 关于 2019届大三学生，前段时间一直想一个人单独开发一个较为完整的项目，在众多应用中，考虑之后选择了美团外卖来模仿，这段时间就利用课余时间进行开发，前端用vue+vuex+vue-router+axios，因为需要...

    iflove 评论0 收藏0

  • 基于 Vue2+Node+mongoDB 的前后端分离全栈练手小项目

    摘要：本文源码简介之前刚入门并做好了一个简而全的纯全家桶的项目，数据都是本地模拟请求的详情请移步这里为了真正做到数据库的真实存取，于是又开始入门了并以此来为之前的页面写后台数据接口。 本文源码：Github 简介： 之前刚入门vue并做好了一个简而全的纯vue2全家桶的项目，数据都是本地 json 模拟请求的；详情请移步这里：vue-proj-demo 为了真正做到数据库的真实存取，于是又...

    jay_tian 评论0 收藏0

  • 个人的web商城网站

    摘要：于是在查找了大量资料，思考着技术选型，终于决定做一个展现商品的全栈网站。当然这个网站还有许许多多需要完善并增加的功能，在此之后也会不断去完善这个网站。所幸的是问题都已经解决，项目也顺利部署。 项目介绍 1、作为前端的菜鸟，每每看到Github上有很多大神分享着自己的项目时，内心都是蠢蠢欲动，这次终于下定决心要给自己一段时间来完成属于自己的一份作品。2、于是在查找了大量资料，思考着技术选...

    quietin 评论0 收藏0

发表评论

登陆后可评论

0条评论

luzhuqun

男|高级讲师
我要私信

TA的文章

阅读更多

云社区相关服务

提问 提问 学习 学习 认证 认证 产品 产品 技术服务 技术服务 售前咨询 售前咨询
最新活动
阅读需要支付1元查看
<