迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:vue-shop-admin开源软件地址:https://gitee.com/wBekvam/vue-shop-admin开源软件介绍:大家有问题尽量在这里提: https://gitee.com/wBekvam/vue-shop-admin/issues电商后台管理系统(前端项目) 预览后端API接口源码 下载. 接口API
功能
开发模式
技术选型前端项目技术栈
后端项目技术栈项目初始化前端项目初始化步骤
相关依赖-按需导入后端项目的环境安装配置
登录概述登录业务流程
登录业务相关技术点
登录业务流程登录页面的布局通过Element-UI组件实现布局
创建git分支// 创建并切换登录分支git checkout -b login// login分支合并到主分支// 1.切换到master分支git checkout master// 2.合并分支到mastergit merge login// 将本地login子分支推送到githubgit push -u origin login 路由导航守卫控制访问权限
//为路由对象,添加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请求拦截axios.interceptors.request.use(config => { // 为请求头对象,添加token验证的Authorization字段 config.headers.Authorization = window.sessionStorage.getItem('token') return config}) 权限管理权限管理业务分析
分类管理商品分类概述
参数管理参数管理概述
项目所用依赖(vue全家桶不描述)
项目优化项目优化策略
<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">
<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/[email protected]/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>
项目上线通过node创建web服务器
// 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配置
在服务器端使用express做gzip压缩,配置如下// 1.npm install compression -S// 2.导入包const compression = require('compression')// 3.启用中间件app.use(compression()) 配置https服务为什么要启用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 自定义名称 //删除项目 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.jsonat applyExports (internal/modules/cjs/loader.js:498:9)at resolveExports (internal/modules/cjs/loader.js:514:23)... 解决 : 2. 关闭Eslint语法检测注释文件eslintsrc.js 中的这一行代码: '@vue/standard' ![]() |
请发表评论