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 相关文章推荐
jQuery使用数组编写图片无缝向左滚动
Dec 11 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
Nov 14 Javascript
javascript使用正则获取url上的某个参数
Sep 04 Javascript
jQuery实现长按按钮触发事件的方法
Feb 02 Javascript
jQuery获取同级元素的简单代码
Jul 09 Javascript
angularJs关于指令的一些冷门属性详解
Oct 24 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
Nov 10 Javascript
form+iframe解决跨域上传文件的方法
Nov 18 Javascript
Bootstrap源码解读排版(1)
Dec 23 Javascript
Vuex之理解Getters的用法实例
Apr 19 Javascript
vue-quill-editor实现图片上传功能
Aug 08 Javascript
详解使用uni-app开发微信小程序之登录模块
May 09 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 daodb插入、更新与删除数据
2009/03/19 PHP
php保存任意网络图片到服务器的方法
2015/04/14 PHP
php实现简易聊天室应用代码
2015/09/23 PHP
Laravel SQL语句记录方式(推荐)
2016/05/26 PHP
在 Laravel 6 中缓存数据库查询结果的方法
2019/12/11 PHP
js实现的网页颜色代码表全集
2007/07/17 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
2013/11/12 Javascript
jquery1.10给新增元素绑定事件的方法
2014/03/06 Javascript
javascript抽象工厂模式详细说明
2014/12/16 Javascript
jQuery聚合函数实例
2015/05/21 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
JavaScript实现倒计时跳转页面功能【实用】
2016/12/13 Javascript
Javascript Event(事件)的传播与冒泡
2017/01/23 Javascript
Bootstarp 基础教程之表单部分实例代码
2017/02/03 Javascript
微信小程序中用WebStorm使用LESS
2017/03/08 Javascript
JavaScript纯色二维码变成彩色二维码
2020/07/23 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
angular.js实现列表orderby排序的方法
2018/10/02 Javascript
JavaScript实现秒杀时钟倒计时
2019/09/29 Javascript
微信小程序 轮播图实现原理及优化详解
2019/09/29 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
js实现数字跳动到指定数字
2020/08/25 Javascript
python实现文件的备份流程详解
2019/06/18 Python
Python更新所有已安装包的操作
2020/02/13 Python
Python无头爬虫下载文件的实现
2020/04/02 Python
浅谈Python3多线程之间的执行顺序问题
2020/05/02 Python
轻松掌握CSS3中的字体大小单位rem的使用方法
2016/05/24 HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
凯特方迪化妆品官网:Kat Von D Beauty
2016/11/15 全球购物
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
Perfume’s Club澳大利亚官网:西班牙领先的在线美容店
2021/02/01 全球购物
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书
2014年教研员工作总结
2014/12/23 职场文书
迎新年主持词
2015/07/06 职场文书
运动会宣传稿50字
2015/07/23 职场文书
党风廉洁教育心得体会
2016/01/20 职场文书