精华内容
下载资源
问答
  • 电商后台管理系统

    2018-06-11 10:55:39
    电商后台管理,集成权限,商家,支付,微信端于一体的管理系统
  • 电商项目基本业务概述 根据不同的应用场景,电商系统一般都提供了 PC 端、移动 APP、移动 Web、微信小程序等多种终端...电商后台管理系统整体采用前后端分离的开发模式,其中前端项目是基于 Vue 技术栈的 SPA 项目...

    电商项目基本业务概述

    根据不同的应用场景,电商系统一般都提供了 PC 端、移动 APP、移动 Web、微信小程序等多种终端访问方式。



    电商后台管理系统的功能

    电商后台管理系统用于管理用户账号、商品分类、商品信息、订单、数据统计等业务功能。



    电商后台管理系统的开发模式(前后端分离)

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



    电商后台管理系统的技术选型

    展开全文
  • vue电商后台管理系统

    2019-04-24 12:08:41
    电商后台管理系统的前端项目,基于Vue+Element实现。 主要包括商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计报表、财务管理、权限管理、设置等功能
  • 电商后台管理系统前端源码
  • 旅游电商后台管理系统,涉及商品管理、订单管理、会员管理
  • Vue 电商后台管理系统后台 API 接口服务器
  • 微信小程序 电商后台管理系统
  • 一、项目概述 1. 基本业务概述 ...电商后台管理系统整体采用前后端分离的开发模式,其中前端项目是基于 Vue 技术栈的 SPA 项目 4. 电商后台管理系统的技术选型 前端项目技术栈 Vue Vue-rou...

    一、项目概述 

    1、基本业务概述 

    • 根据不同的应用场景,电商系统一般都提供了 PC 端、移动 APP、移动 Web、微信小程序等多种终端访问方式

     

    2、电商后台管理系统的功能 

    • 电商后台管理系统用于管理用户账号、商品分类、商品信息、订单、数据统计等业务功能

    3、电商后台管理系统的开发模式(前后端分离) 

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

     

    4、电商后台管理系统的技术选型 

    • 前端项目技术栈 
      • Vue 
      • Vue-router 
      • Element-UI 
      • Axios 
      • Echarts 
    • 后端项目技术栈 
      • Node.js 
      • Express 
      • Jwt 
      • Mysql 
      • Sequelize 

     

    二、项目初始化 

    1、前端项目初始化步骤 

    • ① 安装 Vue 脚手架 
    npm install -g @vue/cli 
    • ② 通过 Vue 脚手架创建项目 
    vue ui

    • ③ 配置 Vue 路由 

    • ④ 配置 Element-UI 组件库 

    • ⑤ 配置 axios 库 

    • ⑥ 初始化 git 远程仓库 (windows 系统安装 git 工具,这里不多说,360软件安装都行)
      • 如果想要cmd 也能使用 git 的命令,需要配置环境变量 C:\Program Files\Git\cmd 

     

    • 配置SSH:

    • ⑦ 将本地项目托管到 Github 或 码云 中 

    • git add .  添加到修改区

    • 到此为止:原始的项目上传到自己的仓库中去了,现在只有一个master分支

     

    2、后台项目的环境安装配置

    • ① 安装 MySQL 数据库 
      • 给的工具 phpStudy20161103.exe 安装后打开,停止Apache

    • 导入mysql数据 (工具有有个 vue_api_sever 解压后 目录 db 下有个 mydb.sql文件,选择要还原的文件)

    • 会进入命令行执行命令导入数据
    • 导入后,查看导入的数据

    • ② 安装 Node.js 环境 
      • 进入 vue_api_sever 目录下
        • 1. 执行 npm install 安装需要的插件
        • 2. 执行 node app.js

    • ③ 使用 Postman 测试后台项目接口是否正常 

    • 具体的后台访问地址看: 【 电商管理后台 API 接口文档.md 】
    • 此项目不开发后台(后台已经写好直接用),如果大事件项目后台你看过,应该知道后台是如何开发的,此项目开发前端界面以及如何访问到后台获取数据
    展开全文
  • Vue 电商后台管理系统后台 API 接口服务器,里面有数据库脚本,大家可以下载自己运行,此资料仅供学习,谢谢
  • 电商后台管理系统.doc

    2020-07-08 20:24:02
    电商后台管理系统,包括课题背景、总体设计、需求分析,结果分析,总结,致谢等。商城系统后台管理除了在功能性上有必要的更新之外,他的便捷可以节省维护、操作人员的工作时间,并且相应的提高工作效率和工作进度,...
  • React16 React-Router4 webpack3 Antdesign 电商后台管理系统
  • 用的的知识:html,css,js,axios,vue,element-ui插件以及相关的依赖 使用element-ui插件开发电商后台管理系统项目的图片教程
  • 电商后台管理系统 目的 堆 建造 安装 平台和工具 克隆项目 如何使用 浏览器支持 发展 文件夹结构 默认构建 连续建筑 无需测试即可构建 构建发布代码 持续测试
  • vue_shop电商后台管理系统

    千次阅读 2020-03-17 11:13:52
    1.2 电商后台管理系统的功能   电商后台管理系统用于管理用户账号、商品分类、商品信息、订单、数据统计等业务功能。   电商后台管理系统 前端项目技术栈  Vue  Vue-router  Element-UI  Axios  ...

    1. 项目概述

    1.2 电商后台管理系统的功能

      电商后台管理系统用于管理用户账号、商品分类、商品信息、订单、数据统计等业务功能。

    电商后台管理系统

    • 用 户 登 录
    • 退 出 登 录
    • 用 户 管 理
    • 权 限 管 理
      角 色 列 表、权 限 列 表
    • 商 品 管 理
      商 品 列 表、分 类 管 理、参 数 管 理
    • 订 单 管 理
    • 数 据 统 计

    前端项目技术栈

    •  Vue
       Vue-router
       Element-UI
       Axios
       Echarts

    2. 项目初始化

    2.1 前端项目初始化步骤

    ① 安装 Vue 脚手架
    ② 通过 Vue 脚手架创建项目
    ③ 配置 Vue 路由
    ④ 配置 Element-UI 组件库
    ⑤ 配置 axios 库
    ⑥ 初始化 git 远程仓库
    ⑦ 提交项目初始化版本

    3. 登录/退出功能

    3.1 登录概述

    1. 登录业务流程

    ① 在登录页面输入用户名和密码
    ② 调用后台接口进行验证
    ③ 通过验证之后,根据后台的响应状态跳转到项目主页

    2. 登录业务的相关技术点
    • http 是无状态的
    • 通过 cookie 在客户端记录状态
    • 通过 session 在服务器端记录状态
    • 通过 token 方式维持状态

    3.2 登录 — token 原理分析

    3.3 登录功能实现

    1. 登录组件布局

    通过 Element-UI 组件实现布局
     el-form  el-form-item  el-input  el-button  字体图

    2. 实现登录

    ① 通过 axios 调用登录验证接口
    ② 登录成功之后保存用户 token 信息
    ③ 跳转到项目主页

     const {data: res } = await this.$http.post('login', this.loginForm)  
     if (res.meta.status !== 200)return this.$message.error('登录失败!')  
     // 提示登录成功  
     this.$message.success('登录成功!')  
     // 把登录成功的token保存到sessionStorage  
     window.sessionStorage.setItem('token', res.data.token)  
     // 使用编程式导航,跳转到后台主页  
     this.$router.push('/home')
    
    3. 路由导航守卫控制访问权限

    如果用户没有登录,但是直接通过 URL 访问特定页面,需要重新导航到登录页面

     // 为路由对象,添加 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() 
     }) 
    
    4. Vue 直接操作 DOM
    • 通过 ref 标注 DOM 元素
      //  在 DOM 元素上通过 ref 属性标注,属性名称自定义  
      <div ref="info">hello</div> 
    
    • 通过 $refs 获取 DOM 元素
    // 通过 Vue 实例的 $refs 获取标记 ref 属性的元素  
     let info = this.$refs.info.innerHTML 
     console.log(info) // hello 
    
    5. 基于 Element-UI 进行表单验证

    Element-UI表单验证规则

     loginFormRules: {    
     	// 登录名称的验证规则    
     	username: [{ required: true, message: '请输入用户名称', trigger: 'blur' }],    
     	password: [{ required: true, message: '请输入用户密码', trigger: 'blur' }]  
     } 
    
     // 进行表单验证  
     this.$refs.loginFormRef.validate(async valid => {    
     	// 如果验证失败,直接退出后续代码的执行    
     	if (!valid) return    
     	// 验证通过后这里完成登录成功后的相关操作(保存token、跳转到主页)  
     })
    

    3.4 退出功能

    基于 token 的方式实现退出比较简单,只需要销毁本地的 token 即可。这样,后续的请求就不会携带 token , 必须重新登录生成一个新的 token 之后才可以访问页面。

      // 清空token  
       window.sessionStorage.clear()   
       // 跳转到登录页   
       this.$router.push('/login') 
    

    4. 主页布局

    4.1 整体布局

    整体布局:先上下划分,再左右划分。

    
     <el-container>     
      <!-- 头部区域 -->     
      <el-header></el-header> 
        <el-container>       
        <!-- 侧边栏区域 -->       
        <el-aside></el-aside>       
        <!-- 右侧主体区域 -->       
        <el-main></el-main> 
        </el-container> 
     </el-container> 
    

    4.2 左侧菜单布局

    菜单分为二级,并且可以折叠。

    
     <el-menu> 
        <el-submenu>      
         <!-- 这个 template 是一级菜单的内容模板 -->       
         <i class="el-icon-menu"></i>       
         <span>一级菜单</span>       
         <!-- 在一级菜单中,可以嵌套二级菜单 -->       
         <el-menu-item> 
            <i class="el-icon-menu"></i>         
            <span slot="title">二级菜单</span>       
            </el-menu-item> 
        </el-submenu> 
    </el-menu> 
    

    4.3 通过接口获取菜单数据

    通过 axios 请求拦截器添加 token,保证拥有获取数据的权限。

     // axios请求拦截   
     axios.interceptors.request.use(config => {     
     // 为请求头对象,添加 Token 验证的 Authorization 字段  
     	config.headers.Authorization = window.sessionStorage.getItem('token') 
        return config 
      }) 
    
    展开全文
  • 电商后台管理系统v1.0 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and...
  • admin-server 电商后台管理系统--后端应用
  • 电商后台管理系统整体采用前后端分离的开发模式,其中前端项目是基于 Vue 技术栈的 SPA 项目。 电商后台管理系统的技术选型 : 1. 前端项目技术栈 : Vue  Vue-router  Element-UI  Axios  Echarts 2. ...
  • xunxun 电商后台管理系统,以及进销存管理,订单管理,财务管理。
  • 电商后台管理系统功能 三电商后台管理系统的开发模式(前后端分离) 四电商后台管理系统的技术选型 五 前端项目初始化步骤 六创建新项目 七 安装 element-UI插件 八配置element-UI为按需导入 九安装axios ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 26,495
精华内容 10,598
关键字:

电商后台管理系统