Vue 电商后台管理项目阶段性总结(推荐)


Posted in Javascript onAugust 22, 2020

一、阶段总结

该项目偏向前端更多一点,后端 API 服务是已经搭建好了的,我们只需要用既可以,(但是作为一个 全栈开发人员,它的数据库的表设计,Restful API 的设计是我们要着重学习的!!!)

这个vue 项目是从 2020 4月开始,一直开发直至 5月23日 部署上线,也算是我的第二个 vue 的实战项目(其实是熟悉 elementUI 的使用),在开发过程中使用 Vue cil4 脚手架进行开发,使用码云作为 Git 管理仓库, 目前已经基本开发完毕,在服务器上也能够正常运行 (nginx 配置整整用了我两天)

项目仓库:vue_shop
项目地址:运行地址
测试账号:test
测试密码:123456

鉴于可能会出现一些危险的操作,这个测试账号只提供了查询的功能,修改,删除操作就通过权限管理禁用了。(小服务器,没啥值钱的东西,求大佬放过)

二、项目技术栈

2.1 前端

前端采用 vue cli4 脚手架搭建框架,大体使用 elementUI 美化项目结构,所以需要安装 elementUI 插件

Vue 电商后台管理项目阶段性总结(推荐)

其次是环境依赖 (有开发依赖,有运行依赖),有的功能是有现成的轮子的,直接那来用就好了,比如:

富文本编辑器

Vue 电商后台管理项目阶段性总结(推荐)

加载进度条

Vue 电商后台管理项目阶段性总结(推荐)

图表展示功能

Vue 电商后台管理项目阶段性总结(推荐)

第三方 http 库

Vue 电商后台管理项目阶段性总结(推荐)

2.2 后端

后端是已经写好了的,采用 express 搭建的 API 服务,返回的数据是 JSON 格式的数据,所以用起来还是比较舒服的,我们只需要导入数据库,并配置一下数据库信息,就可以跑起来了。也有对应的 API 文档

后端 API 文档:传送门

2.3 数据库

数据库采用 MySQL 5.7存储,我们只需要将项目的 sql 文件导入即可,数据库的表如下

Vue 电商后台管理项目阶段性总结(推荐)

三、项目概要

3.1 开发流程

开发流程以及记录在另一博客上了:传送门 (感谢 My-Belief的分享)

因为使用版本控制工具 Git 来管理工程,所以每开发一个新模块,就会提交一个新分支:仓库地址

Vue 电商后台管理项目阶段性总结(推荐)

3.2 项目预览

登录界面

Vue 电商后台管理项目阶段性总结(推荐)

项目首页

Vue 电商后台管理项目阶段性总结(推荐)

项目模块展示

Vue 电商后台管理项目阶段性总结(推荐)

框架真香

使用 node 的 pm2 管理项目

Vue 电商后台管理项目阶段性总结(推荐)

Vue 电商后台管理项目阶段性总结(推荐)

使用 node 快速关闭一个端口的服务

全局安装: npm install -g xl_close_port关闭某一个端口 ( 8081 )xl_close_port -p 8080四、学习资源

哔哩哔哩上有这个资源:B站视频

到此这篇关于Vue 电商后台管理项目阶段性总结的文章就介绍到这了,更多相关Vue 电商后台管理项目内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
IE6,IE7下js动态加载图片不显示错误
Jul 17 Javascript
JS简单实现文件上传实例代码(无需插件)
Nov 15 Javascript
Script标签与访问HTML页面详解
Jan 10 Javascript
基于jquery实现省市联动特效
Dec 17 Javascript
Javascript实现鼠标框选操作  不是点击选取
Apr 14 Javascript
BootStrap树状图显示功能
Nov 24 Javascript
详解Require.js与Sea.js的区别
Aug 05 Javascript
微信小程序缓存过期时间的使用详情
May 12 Javascript
vue中v-show和v-if的异同及v-show用法
Jun 06 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 Javascript
webpack proxy 使用(代理的使用)
Jan 10 Javascript
vue中实现图片压缩 file文件的方法
May 28 Javascript
vue实现移动端H5数字键盘组件使用详解
Aug 25 #Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
Aug 21 #Javascript
js实现页面导航层级指示效果
Aug 25 #Javascript
js实现拖拽元素选择和删除
Aug 25 #Javascript
基于vue实现简易打地鼠游戏
Aug 21 #Javascript
vue实现打地鼠小游戏
Aug 21 #Javascript
js实现滑动进度条效果
Aug 21 #Javascript
You might like
php中使用Curl、socket、file_get_contents三种方法POST提交数据
2011/08/12 PHP
克隆一个新项目的快捷方式
2013/04/10 PHP
php中的PHP_EOL换行符详细解析
2013/10/26 PHP
Symfony2实现在doctrine中内置数据的方法
2016/02/05 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
关于document.cookie的使用javascript
2008/04/11 Javascript
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
Javascript基础 函数“重载” 详细介绍
2013/10/25 Javascript
JQuery与JS里submit()的区别示例介绍
2014/02/17 Javascript
js实现的黑背景灰色二级导航菜单效果代码
2015/08/24 Javascript
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
2017/03/27 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
2017/05/04 Javascript
jquery中封装函数传递当前元素的方法示例
2017/05/05 jQuery
javascript实现文字无缝滚动效果
2017/08/26 Javascript
NodeJs form-data格式传输文件的方法
2017/12/13 NodeJs
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
在element-ui的select下拉框加上滚动加载
2019/04/18 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
vue中改变滚动条样式的方法
2020/03/03 Javascript
python 性能优化方法小结
2017/03/31 Python
Python定义二叉树及4种遍历方法实例详解
2018/07/05 Python
python-xpath获取html文档的部分内容
2020/03/06 Python
深入浅析Python 命令行模块 Click
2020/03/11 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
canvas进阶之如何画出平滑的曲线
2018/10/15 HTML / CSS
北美大型运动类产品商城:Champs Sports
2017/01/12 全球购物
Nike法国官方网站:Nike.com FR
2018/07/22 全球购物
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
意大利一家专营包包和配饰的网上商店:Borse Last Minute
2019/08/26 全球购物
澳大利亚家具商店:Freedom
2020/12/17 全球购物
毕业实习个人鉴定范文
2013/12/10 职场文书
退休感言
2014/01/28 职场文书
美丽的大脚观后感
2015/06/03 职场文书
利用Python脚本写端口扫描器socket,python-nmap
2022/07/23 Python
Python中tqdm的使用和例子
2022/09/23 Python