基于Vue和Node.js的电商后台管理系统_全套源码文档获取_nodejs电商源码

网络投稿 02-07 2663

电商后台管理系统(前端项目）预览后端API接口源码下载. 接口API 功能

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

开发模式

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

技术选型前端项目技术栈 VueVue-routerElement-UIAxiosEcharts 后端项目技术栈

Node.js

Express

Jwt

Mysql

Sequelize

接口API.

后端源码下载. http://·/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"> 步骤3

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

Parsed大小 2.6m=> 596.9kB

使用cdn优化elementui打包

具体操作流程

在main-prod.js中,注释掉element-ui按需加载的代码

在index.html头部区域中,通过cdn加载element-ui的js和css样式

`<link href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet">` `<script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script>`

首页内容定制

不同打包环境下,首页内容可能会有所不同,通过插件方式定制

vue.config.js配置 config.plugin('html').tap(args => { args[0].isProd = true或false return args }) index.html修改  <title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev-' %>vue-mall</title> <% if(htmlWebpackPlugin.options.isProd) { %> css | js放在这儿 <% } %>

Element-UI组件按需加载

路由懒加载

在打包构建项目时,javascript包会变得特别大,影响页面加载,如果我们能把不同路由对应的组件分隔成不同的代码块,然后当路由被访问的时候才加载对应组件,这样更加高效

安装@babel/plugin-syntax-dynamic-import包在babel.config.js配置文件声明该插件将路由改为按需加载形式 // 示例: const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue') const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue') const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue') // import Login from '../components/Login.vue' const Login = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Login.vue') // import Home from '../components/Home.vue' const Home = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Home.vue') // import Welcome from '../components/Welcome.vue' const Welcome = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Welcome.vue') ...

具体内容参考文章底部链接

项目上线通过node创建web服务器

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

// 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压缩,配置如下 // 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管理应用 1. npm i pm2 -g //全局安装 2. pm2 start 脚本(如./app.js) --name 自定义名称 // 启动项目 3. pm2 ls //查看服务器运行的项目 4. pm2 restart 自定义名称 //重启项目 5. pm2 stop 自定义名称 //停止项目 6. pm2 delete 自定义名称 //删除项目

接口API

vue.config.js配置

路由懒加载

babel配置

Project preview

错误异常 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’