前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >基于Vue和Node.js的电商后台管理系统

基于Vue和Node.js的电商后台管理系统

作者头像
全栈程序员站长
发布2022-09-05 10:29:19
2K0
发布2022-09-05 10:29:19
举报
文章被收录于专栏:全栈程序员必看

大家好,又见面了,我是你们的朋友全栈君。

电商后台管理系统(前端项目) 预览

后端API接口源码 下载. 接口API

功能

用于管理用户账号,商品分类,商品信息,订单,数据统计等业务功能

基于Vue和Node.js的电商后台管理系统
基于Vue和Node.js的电商后台管理系统

开发模式

电商后台管理系统整体采用前后端分离的开发模式,其中前端项目是基于Vue技术栈的SPA项目

基于Vue和Node.js的电商后台管理系统
基于Vue和Node.js的电商后台管理系统

技术选型

前端项目技术栈
  • Vue
  • Vue-router
  • Element-UI
  • Axios
  • Echarts
后端项目技术栈
  • Node.js
  • Express
  • Jwt
  • Mysql
  • Sequelize 接口API. 后端源码 下载. http://www.biyezuopin.vip

项目初始化

前端项目初始化步骤
  1. 安装 Vue 脚手架
  2. 通过 Vue-Cli 创建项目
  3. 配置 Vue-router
  4. 配置 Element-UI 组件库
  5. 配置 Axios 库
  6. 初始化 git 远程仓库
相关依赖-按需导入
基于Vue和Node.js的电商后台管理系统
基于Vue和Node.js的电商后台管理系统
后端项目的环境安装配置
  1. 安装MySQL数据库
  2. 安装Node.js环境
  3. 配置项目相关信息
  4. 启动项目
    1. 使用phpstudy导入数据库并运行
    2. npm init 后端项目
    3. node ./app.js
  5. 使用Postman测试后台项目接口是否正常

登录概述

登录业务流程
  1. 在登录页面输入用户名和密码
  2. 调用后台接口进行验证
  3. 通过验证之后,根据后台的响应状态跳转到项目主页
登录业务相关技术点
  1. http是无状态的
  2. 通过cookie在客户端记录状态
  3. 通过sesion在服务器端记录状态
  4. 通过token维持状态(不允许跨域使用)
基于Vue和Node.js的电商后台管理系统
基于Vue和Node.js的电商后台管理系统
登录业务流程
登录页面的布局

通过Element-UI组件实现布局

  • el-form
  • el-form-item
  • el-input
  • el-button
  • 字体图标
创建git分支
代码语言:javascript
复制
// 创建并切换登录分支
git checkout -b login

// login分支合并到主分支
// 1.切换到master分支
git checkout master
// 2.合并分支到master
git merge login

// 将本地login子分支推送到github
git push -u origin login
路由导航守卫控制访问权限

如果用户没有登录,但是直接通过URL访问特定页面,需要重新导航到登录页面

代码语言:javascript
复制
//为路由对象,添加beforeEach导航守卫
router.beforeEach((to,from,next) => { 
   
    //如果用户访问的登录页,直接放行
    if (to.path === 'login') return next()
    //从sessionStorage中获取到保存的token值
    const tokenStr = window.sessionStorage.getItem('token')
    //如果么有token,强制跳转到登录页
    if(!tokenStr) return next('/login')
    next()
})

主页布局

通过接口获取菜单数据

通过axios请求拦截器添加token,保证拥有获取数据的权限

代码语言:javascript
复制
// axios请求拦截
axios.interceptors.request.use(config => { 
   
    // 为请求头对象,添加token验证的Authorization字段
    config.headers.Authorization = window.sessionStorage.getItem('token')
    return config
})

权限管理

权限管理业务分析

通过权限管理模块控制不同的用户可以进行哪些操作,具体可以通过角色的方式进行控制,即每个用户分配一个特定的角色,角色包括不同的功能权限

基于Vue和Node.js的电商后台管理系统
基于Vue和Node.js的电商后台管理系统

分类管理

商品分类概述

商品分类用于在购物时,快速找到需要购买的商品,进行直观显示

参数管理

参数管理概述

商品参数用于显示商品的特征信息,可以通过电商平台详情页面直观的看到

项目所用依赖(vue全家桶不描述)

  1. 运行依赖
  • axios => 发送请求
  • echarts => 图表
  • element-ui => element ui组件
  • lodash => js工具库,该项目用到深拷贝与对象合并
  • moment => 时间处理工具库
  • nprogress => 进度条库
  • v-viewer => 图片预览工具库
  • vue-quill-editor => 富文本编辑器
  • vue-table-with-tree-grid => 树形菜单/表格
  1. 开发依赖
  • babel => es6+语法转换
  • eslint/babel-eslint => 语法检查
  • less/less-loader => less语法
  • babel-plugin-transform-remove-console => 移除console插件

项目优化

项目优化策略

代码语言:javascript
复制
<link href="https://cdn.bootcss.com/viewerjs/1.3.7/viewer.min.css" rel="stylesheet">

<link href="https://cdn.bootcss.com/quill/2.0.0-dev.3/quill.bubble.min.css" rel="stylesheet">

​<link href="https://cdn.bootcss.com/quill/2.0.0-dev.3/quill.core.min.css" rel="stylesheet">

<link href="https://cdn.bootcss.com/quill/2.0.0-dev.3/quill.snow.min.css" rel="stylesheet">

<link href="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">

<link href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet">
  1. 步骤3

在public/index.html文件头部,将main-prod中的已经进行配置的import(js文件)删除替换为cdn引入

代码语言:javascript
复制
 <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
 
 <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>

<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>

<script src="https://cdn.bootcss.com/lodash.js/4.17.15/lodash.min.js"></script>

<script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts.min.js"></script>

<script src="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js"></script>

<script src="https://cdn.bootcss.com/quill/2.0.0-dev.3/quill.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>

<script src="https://cdn.bootcss.com/viewerjs/1.3.7/viewer.min.js"></script>

<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script>
  1. cdn加速前后对比( chunk-vendors打包文件)

Parsed大小 2.6m=> 596.9kB

项目上线

通过node创建web服务器

新创建node项目,并安装express,通过express快速创建web服务器,将vue打包生成的dist文件夹,托管为静态资源即可,关键代码如下

代码语言:javascript
复制
// 1. npm init -y
// 2. npm i express -S
// 3. 将打包后的dist放入node项目中
// 4. 
const express = require('express')
const app = express()

app.use(express.static('./dist'))
app.listen(80, () => { 
   
    console.log('server runing at http://127.0.0.1')
})
// 5. node app.js启动项目
开启gzip配置

通过gzip减小文件体积,使传输速度更快

在服务器端使用express做gzip压缩,配置如下
代码语言:javascript
复制
// 1.npm install compression -S
// 2.导入包
const compression = require('compression')
// 3.启用中间件
app.use(compression())
配置https服务
为什么要启用https服务
  • 传统的http协议传输的数据都是明文,不安全
  • 采用https协议对传输的数据进行了加密处理,可以防止数据被中间人窃取,使用更安全

申请ssl证书(https://freessl.org) => 正常企业还是使用收费ssh(http协议默认运行在80端口,https默认运行在443端口)

使用pm2管理应用
代码语言:javascript
复制
1. npm i pm2 -g //全局安装
2. pm2 start 脚本(如./app.js) --name 自定义名称 // 启动项目
3. pm2 ls //查看服务器运行的项目
4. pm2 restart 自定义名称 //重启项目
5. pm2 stop 自定义名称 //停止项目
6. pm2 delete 自定义名称 //删除项目
基于Vue和Node.js的电商后台管理系统
基于Vue和Node.js的电商后台管理系统

接口API

vue.config.js配置

路由懒加载

babel配置

Project preview

welcome
welcome
welcome
welcome
user
user
user1
user1
role
role
auth
auth
goods
goods
params
params
addGoods
addGoods
addGoods1
addGoods1
data
data

错误异常

1. 在使用Node.js14+版本可能出现错误

Module build failed (from ./node_modules/babel-loader/lib/index.js): Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No “exports” main resolved in /home/vue/vueShop/vue-shop-admin/node_modules/@babel/helper-compilation-targets/package.json at applyExports (internal/modules/cjs/loader.js:498:9) at resolveExports (internal/modules/cjs/loader.js:514:23) …

解决npm install @babel/helper-compilation-targets --save-dev

2. 关闭Eslint语法检测

注释文件eslintsrc.js 中的这一行代码: ‘@vue/standard’

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/135621.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年6月4,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 电商后台管理系统(前端项目) 预览
    • 后端API接口源码 下载. 接口API
      • 功能
        • 开发模式
          • 技术选型
            • 前端项目技术栈
            • 后端项目技术栈
          • 项目初始化
            • 前端项目初始化步骤
            • 后端项目的环境安装配置
          • 登录概述
            • 登录业务流程
            • 登录业务相关技术点
            • 登录业务流程
          • 主页布局
            • 通过接口获取菜单数据
          • 权限管理
            • 权限管理业务分析
          • 分类管理
            • 商品分类概述
          • 参数管理
            • 参数管理概述
          • 项目所用依赖(vue全家桶不描述)
            • 项目优化
              • 项目优化策略
                • 项目上线
                  • 通过node创建web服务器
                  • 开启gzip配置
                  • 配置https服务
                  • 使用pm2管理应用
                • Project preview
                  • 1. 在使用Node.js14+版本可能出现错误
                  • 2. 关闭Eslint语法检测
              • 错误异常
              相关产品与服务
              云数据库 MySQL
              腾讯云数据库 MySQL(TencentDB for MySQL)为用户提供安全可靠,性能卓越、易于维护的企业级云数据库服务。其具备6大企业级特性,包括企业级定制内核、企业级高可用、企业级高可靠、企业级安全、企业级扩展以及企业级智能运维。通过使用腾讯云数据库 MySQL,可实现分钟级别的数据库部署、弹性扩展以及全自动化的运维管理,不仅经济实惠,而且稳定可靠,易于运维。
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档