此项目是基于nuxt+egg+mysql开发的在线商城系统全栈模板,目前前端部分已适配移动端。面向开发人员友好,快速,轻巧,干净,并包含W3有效源代码。后台管理系统基于vuetify实现。项目正在逐步完善中,如果您在使用购买后发现问题,欢迎您随时提出。开源版包含首页组件等部分内容,欢迎体验。如果您有完整需求,请移步(猪八戒平台-晒点工匠)进行购买。此源码仅作为学习使用,不得商用。有任何问题都可以咨询下方的QQ,基本都在线。
用户名:test
密码:123456
联系QQ:87362873
- 一套完善的电商系统模板(前端,后端,API部分)
- 简约风格,多重组件,架构清晰
- 架构简单,入门快速,简单可依赖
- 管理系统 Material 风格
- api结构清晰,稀有nodejs优质架构
shop1
├── README.md
├── package.json
├── jsconfig.json
├── nuxt.config.json
├── assets
│ ├── img 图片
│ └── scss 样式
├── components 组件
│ ├── all-products 所有商品
│ ├── cart 购物车
│ ├── common 公用
│ ├── landing-one 详情
│ ├── modals 层
│ ├── products 商品
├── layouts
│ ├── BackToTop.vue
│ ├── default.vue
│ ├── error-layout.vue
│ ├── error.vue
│ ├── Footer.vue
│ ├── Menubar.vue 菜单
│ ├── SidebarPanel.vue
│ ├── SiteLoader.vue
│ ├── TopHeader.vue
│ ├── TopPanel.vue
├── middleware
├── plugins
│ ├── axios.js http请求
│ ├── vue-backtotop.js
│ ├── vue-carousel.js
│ ├── vue-toastification.js
│ ├── vueperslides.js
├── static
│ ├── favicon.png 图标
│ ├── README.md
├── store
│ ├── categories.js 菜单
│ ├── index.js 基础
│ ├── products.js 商品
├── utils
│ ├── sidebar-util.js
│ ├── assets
│ │ └── vuetify.svg 等静态资源
│ ├── components
│ │ └── base
│ │ ├── Btn.vue 按钮
│ │ ├── Card.vue 卡片
│ │ ├── Item.vue 菜单项
│ │ ├── ItemGroup.vue 菜单项
│ │ ├── MaterialCard.vue 卡片
│ │ ├── MaterialStatsCard.vue 卡片状态
│ ├── main.js
│ ├── plugins
│ │ ├── base.js 基础
│ │ ├── chartist.js chart
│ │ ├── vee-validate.js 验证
│ │ ├── vue-world-map.js map地图
│ │ └── vuetify.js vuetify核心
│ │ └── element.js element核心
│ ├── router.js 路由
│ ├── sass sass样式
│ │ ├── main.scss
│ │ ├── overrides.sass
│ │ └── vuetify-material
│ │ └── _sidebar.sass
│ ├── store.js vuex状态
│ └── views
│ ├── dashboard
│ │ ├── Dashboard.vue
│ │ ├── Index.vue
│ │ ├── components
│ │ │ └── core 核心
│ │ │ ├── AppBar.vue
│ │ │ ├── Drawer.vue
│ │ │ ├── Settings.vue
│ │ │ └── View.vue
│ │ ├── goods 商品
│ │ │ ├── Add.vue
│ │ │ ├── Cate.vue
│ │ │ ├── List.vue
│ │ │ └── Params.vue
│ │ ├── order 订单
│ │ │ ├── citydata.js
│ │ │ └── Order.vue
│ │ ├── power 权限
│ │ │ ├── Rights.vue
│ │ │ ├── Roles.vue
│ │ ├── report 报表
│ │ │ ├── Report.vue
│ │ └── user 用户
│ │ ├── User.vue
│ │ ├── UserProfile.vue
│ └── pages
│ ├── Error.vue 错误页
│ ├── Index.vue
│ ├── Login.vue 登录页
│ └── components 组件
│ └── core
│ ├── Footer.vue
│ └── View.vue
├── tests
│ ├── e2e
│ │ ├── plugins
│ │ │ └── index.js
│ │ ├── specs
│ │ │ └── test.js
│ │ └── support
│ │ ├── commands.js
│ │ └── index.js
│ └── unit
│ └── example.spec.js
├── vue.config.js
"config": {
"nuxt": {
"host": "localhost",
"port": "xxxx"
}
}
用于管理用户账号,商品分类,商品信息,订单,数据统计等业务
Vuetify 是一个 Vue UI 库,包含手工制作的精美材料组件。不需要设计技能 - 创建令人惊叹的应用程序所需的一切都触手可及。 https://vuetifyjs.com/zh-Hans/
admin
├── README.md
├── CHANGELOG.md
├── babel.config.js
├── cypress.json
├── jest.config.js
├── now.json
├── package.json
├── postcss.config.js
├── public
│ ├── favicon.png 图标
│ └── index.html
├── layouts 布局
│ ├── frontend
│ │ └── index.vue
│ │ └── view.vue
├── src
│ ├── App.vue
│ ├── assets
│ │ └── vuetify.svg 等 静态资源
│ ├── components
│ │ └── base
│ │ ├── Btn.vue 按钮
│ │ ├── Card.vue 卡片
│ │ ├── Item.vue 菜单项
│ │ ├── ItemGroup.vue 菜单项
│ │ ├── MaterialCard.vue 卡片
│ │ ├── MaterialStatsCard.vue 卡片状态
│ ├── main.js
│ ├── plugins
│ │ ├── base.js 基础
│ │ ├── chartist.js chart
│ │ ├── vee-validate.js 验证
│ │ ├── vue-world-map.js map地图
│ │ └── vuetify.js vuetify核心
│ │ └── element.js element核心
│ ├── router.js 路由
│ ├── sass sass样式
│ │ ├── main.scss
│ │ ├── overrides.sass
│ │ └── vuetify-material
│ │ └── _sidebar.sass
│ ├── store.js vuex状态
│ └── views
│ ├── dashboard
│ │ ├── Dashboard.vue
│ │ ├── Index.vue
│ │ ├── components
│ │ │ └── core 核心
│ │ │ ├── AppBar.vue
│ │ │ ├── Drawer.vue
│ │ │ ├── Settings.vue
│ │ │ └── View.vue
│ │ ├── goods 商品
│ │ │ ├── Add.vue
│ │ │ ├── Cate.vue
│ │ │ ├── List.vue
│ │ │ └── Params.vue
│ │ ├── order 订单
│ │ │ ├── citydata.js
│ │ │ └── Order.vue
│ │ ├── power 权限
│ │ │ ├── Rights.vue
│ │ │ ├── Roles.vue
│ │ ├── report 报表
│ │ │ ├── Report.vue
│ │ └── user 用户
│ │ ├── User.vue
│ │ ├── UserProfile.vue
│ └── pages
│ ├── Error.vue 错误页
│ ├── Index.vue
│ ├── Login.vue 登录页
│ └── components 组件
│ └── core
│ ├── Footer.vue
│ └── View.vue
├── tests
│ ├── e2e
│ │ ├── plugins
│ │ │ └── index.js
│ │ ├── specs
│ │ │ └── test.js
│ │ └── support
│ │ ├── commands.js
│ │ └── index.js
│ └── unit
│ └── example.spec.js
├── vue.config.js
├──config 配置文件目录
│ ├── default.json 默认配置文件(其中包含数据库配置,jwt配置)
├──dao 数据访问层,存放对数据库的增删改查操作
│ ├── DAO.js 提供的公共访问数据库的方法
├──models 存放具体数据库 ORM 模型文件
├──modules 当前项目模块
│ ├── authorization.js API权限验证模块
│ ├── database.js 数据库模块(数据库加载基于 nodejs-orm2 库加载)
│ ├── passport.js 基于 passport 模块的登录搭建
│ ├── resextra.js API 统一返回结果接口
├──node_modules 项目依赖的第三方模块
├──routes 统一路由
│ ├── api 提供 api 接口
│ ├── mapp 提供移动APP界面
│ ├── mweb 提供移动web站点
├──services 服务层,业务逻辑代码在这一层编写,通过不同的接口获取的数据转换成统一的前端所需要的数据
├──app.js 主项目入口文件
├──package.json 项目配置文件
categoriesweb ,goodsweb 等 后缀 为web的为 提供前端调取的api接口
Node.js + MySQL
数据库文件在:db -> mysdb.sql
创建数据库mydb,可通过新建查询执行mysdb.sql下的SQL语句建立数据库,数据库表
数据库连接名:root 密码: 123456
可在config -> default.json 修改
- nuxt
- vue
- router
- vuex
- axios
- vue
- vuetify
- vuex
- axios
# 建议安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install
所有项目必须先 npm install (前端+后端管理系统+apiserver)
npm run dev
npm run build
npm run serve
npm run build
1. npm install supervisor -g
2. supervisor node app.js
1. npm i pm2 -g //全局安装
2. pm2 start 脚本(如./app.js) --name 自定义名称 // 启动项目
3. pm2 ls //查看服务器运行的项目
4. pm2 restart 自定义名称 //重启项目
5. pm2 stop 自定义名称 //停止项目
6. pm2 delete 自定义名称 //删除项目