精华内容
下载资源
问答
  • 本书以Vue.js 2为基础,以项目实战的方式来引导读者渐进式学习Vue.js。本书分为基础篇、进阶篇和实战篇三部分。基础篇主要是对 Vue.js 核心功能的介绍;进阶篇主要讲解前端工程化Vue.js的组件化、插件的使用;实战篇...
  • vue实战资料

    2018-09-17 16:26:42
    vue实战资料,现在流行的前端开发框架。和elementUI结合快速开发
  • Vue.js 实战.pdf

    2020-03-04 12:51:26
    Vuejs实战教程,梁灏编著,清华大学出版社,基于vue2.0,相比于官方文档来说本书结构较为清晰模式和快速入门vuejs的小伙伴们
  • Vue实战2.0

    2018-11-10 21:53:13
    vue基础开始一步步教你怎么搭建项目,然后通过vue-cli搭建项目,通过调用其他平台接口获取数据,构建自己的前端vue界面
  • 分享一个vue 3.0从基础入门到实战的项目
  • vue接口文档

    千次阅读 2019-08-15 16:43:44
    https://localhost:8080/项目命名/vue/userAction_login.action 参数 是否必须 参数说明 uname 是 用户名 pwd 是 用户密码 返回说明 正确时返回JSON数据包: 登录成功: { cod...

     

    用户登录

    接口调用请求说明

    http请求方式: POST(请使用https协议)
    https://localhost:8080/项目命名/vue/userAction_login.action
    
    参数是否必须参数说明
    uname用户名
    pwd用户密码

    返回说明

    正确时返回JSON数据包:

    登录成功:

    {
    	code: 1
    	msg: "登录成功"
    	result: {
    		uname: "zs",
    	    pwd: "123"
    	}

    登录失败:

    {
    	code:0
    	msg: "用户或者密码错误"
    	result: {
    		uname: "sa",
    	    pwd: "sa"
    	}
    

    用户名和密码为空

    {
    	code:0
    	msg: "用户或者密码为空"
    	result: {
    		uname: "",
    	    pwd: ""
    	}
    

    树形菜单

    接口调用请求说明

    http请求方式: POST(请使用https协议)
    http://localhost:8080/sshdemo/vue/treeNodeAction.action

    返回说明

    正确时返回JSON数据包:

    {
    	"msg": "操作成功",
    	"result": [
    		{
    			"treeNodeId": 1,
    			"treeNodeName": "系统管理",
    			"treeNodeType": 1,
    			"url": null,
    			"position": 1,
    			"icon": "el-icon-setting",
    			"children": [
    				{
    					"treeNodeId": 2,
    					"treeNodeName": "用户管理",
    					"treeNodeType": 2,
    					"url": "/sys/VuexPage1",
    					"position": 2,
    					"icon": "el-icon-user",
    					"children": []
    				},
    				{
    					"treeNodeId": 3,
    					"treeNodeName": "角色管理",
    					"treeNodeType": 2,
    					"url": "/sys/VuexPage2",
    					"position": 3,
    					"icon": "",
    					"children": []
    				},
    				{
    					"treeNodeId": 4,
    					"treeNodeName": "密码修改",
    					"treeNodeType": 2,
    					"url": null,
    					"position": 4,
    					"icon": null,
    					"children": []
    				}
    			]
    		},
    		{
    			"treeNodeId": 5,
    			"treeNodeName": "论坛管理",
    			"treeNodeType": 1,
    			"url": null,
    			"position": 5,
    			"icon": "el-icon-reading",
    			"children": [
    				{
    					"treeNodeId": 6,
    					"treeNodeName": "文章管理",
    					"treeNodeType": 2,
    					"url": "/sys/Articles",
    					"position": 6,
    					"icon": null,
    					"children": []
    				}
    			]
    		}
    	],
    	"code": 1
    }
    
    
    参数说明
    code状态 :0为失败  1为成功
    msg消息提示
    result查询树形菜单后返回的集合

    查询文章

    接口调用请求说明

    http请求方式: POST(请使用https协议)
    http://localhost:8080/sshdemo/vue/articleAction_list.action
    参数是否必须参数说明
    page不必须页数,默认为1
    rows不必须行数,默认为10
    title不必须根据文章标题查询用到

    正确时返回JSON数据包

    {
    	"result":[{"id":1,"title":"vue教程","body":"vue是一个很牛逼的框架"],
    	"pageBean":{
    		"page":2,
    		"rows":1,
    		"total":0,
    	}
    }
    

    result结果集

    参数说明
    id文章id
    title文章标题
    body文章内容

     

    增加文章

    接口调用请求说明

    http请求方式: POST(请使用https协议)
    http://localhost:8080/sshdemo/vue/articleAction_add.action
    参数是否必须参数说明
    id不必须文章id
    title不必须文章标题
    body不必须文章内容
       

    正确时返回JSON数据包

    {"msg":"新增成功","result":[],"code":1}
    

    错误时返回JSON数据包

    {"msg":"新增失败","result":[],"code":0}
    
    
    参数说明
    code状态码:0为失败,1为成功
    msg消息提示

    修改文章


    接口调用说明

    http请求方式: POST(请使用https协议)
    http://localhost:8080/sshdemo/vue/articleAction_edit.action
    参数是否必须参数说明
    id必须文章id
    title必须文章标题
    body必须文章内容

    正确时返回JSON数据包

    {"msg":"修改成功","code":1}
    

    错误时返回JSON数据包

    {"msg":"修改失败","code":0}
    
    
    参数说明
    code状态码:0为失败,1为成功
    msg消息提示

    文章删除

    接口调用请求说明

    正确时返回JSON数据包

    {"msg":"删除成功","code":1}
    

    二,错误时返回JSON数据包

    {"msg":"删除失败","code":0}
    
    参数说明
    code状态码:0为失败,1为成功
    msg消息提示

     

     

     

     

     

    展开全文
  • 文档Vue.js项目实战 :源码,代码为:纪尧姆·周(Guillaume Chau) (作者) 周智勋 , 张伟杰 , 孔亚杰 , 李骏 (译者) 所编写的《Vue.js项目实战 》一书全部代码,代码可以自己学习,也可以跟随书籍学习,相对...
  • vue项目实战语法

    2018-04-09 22:46:19
    vue项目实战语法,vue项目实战语法,vue项目实战语法,vue项目实战语法,vue项目实战语法,vue项目实战语法,vue项目实战语法
  • Vue.js实战

    2019-07-12 15:12:11
    文档为PDF格式的,名为《Vue.js实战》,下载后如果是手机用户,最好使用专用的PDF查看的APP观看,这样会相对来说比较清晰一点
  • vue项目实战

    千次阅读 2020-12-10 23:01:39
    vue项目实战 1.3 电商后台管理系统的开发模式(前后端分离) 后端负责写接口,管理数据库 前端负责调接口(基于vue技术栈,ajax) 1.4 电商后台管理系统的技术选型 1.前端项目技术栈 vue vue-router(路由) ...

    vue项目实战(没学完还在更)

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

    后端负责写接口,管理数据库
    前端负责调接口(基于vue技术栈,ajax)

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

    1.前端项目技术栈

    • vue
    • vue-router(路由)
    • Element-UI(前端UI组件库)
    • Axios(网络数据请求)
    • Echarts(图形化表)

    2.后端项目技术栈

    • Node.js
    • Express
    • Jwt
    • Mysql
    • Sequelize

    2.项目初始化

    2.1前端项目初始化步骤

    • 安装vue脚手架
      • npm install webpack@3.6.0 -g
      • npm install @vue/cli -g
    • 通过vue脚手架创建项目
      • vue ui通过可视化的形式来创建vue项目【vue ui】
    • 配置vue路由
    • 配置Element-UI组件库
      • 在可视化界面中点击安装插件
    • 配置axios库(支持在开发过程中发起网络数据请求)
      • 在可视化界面中安装依赖
    • 初始化git远程仓库(用git进行源代码的管理)
    • 将本地项目托管到github或码云中
      • 设置公钥
      • 把项目git到码云中
      • 在这里插入图片描述

    2.2后台项目的环境安装配置

    • 安装mysql数据库
    • 安装node.js
    • 配置项目相关信息
    • 启动项目
    • 使用postman测试后台项目接口是否正常
      • postman接口测试工具

    3.登录/退出功能

    3.1登录概述

    • 1.登录业务流程
      • 在登录页面输入用户名和密码
      • 调用后台接口进行验证
      • 通过验证之后,根据后台的响应状态跳转到项目主页
    • 2.登陆业务相关技术点
      • http是无状态的,但登录成功之后需要记录用户的登陆状态
      • 通过cookie在客户端记录状态
      • 通过session在服务器端记录状态
      • 通过token方式维持状态
      • 如果服务器后台接口和前端vue之间不存在跨域问题,那么就用cookie、session来维持登录状态,否则用token

    3.2登录–token原理分析

    在这里插入图片描述

    3.3登录功能实现

    • 1.登录页面的布局
      • 通过Element-UI组件实现布局
        • el-form 表单组件
        • el-form-item 用户名,密码区域,登录,重置区域也是item项
        • el-input 文本输入框
        • el-button 按钮
        • 字体图标 两个小图标
        • 在这里插入图片描述
    • 2.创建登录页面
    • 一般开发一个新功能的时候,都要把他先写在项目的一个新分支下,当这个功能开发完成,再把它合并到主分支下
    • 在这里插入图片描述
      这是项目运行后最开始现实的原始页面,现在我们需要修改源码让它变成上面那张图那样的登录框页面项目原始页面

    1.先在项目的components目录下新建一个login.vue文件(一个单文件组件),分为三个部分:模板template,行为script,样式style

    • 在这里插入图片描述

    2.通过路由的形式把这个login组件渲染到app根组件中

    • 在这里插入图片描述

    3.在app根组件中放一个路由的占位符

    • 在这里插入图片描述

    4.开始写登录页面

    • 改login.vue
      在这里插入图片描述
    • 写一个全局样式在这里插入图片描述
    • 把全局样式文件导入到根目录下
    • 在这里插入图片描述
      • 写登录页面的小盒子
      • 在这里插入图片描述
      • css盒子垂直水平居中给方式1:平移 定位+transform,即先把盒子的左上角平移到页面中心,再用transfor以盒子自身为基准向右向上平移半个长和宽,这样就使盒子的中心在页面中间了在这里插入图片描述

    5.绘制默认头像

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    6.绘制登录表单区域

    要用Element-UI的一些组件:form表单

    • 进入Element-UI的官网直接有源码可以复制在这里插入图片描述
    • 加入element-ui的源码之后会报错,因为还没导入这里面用到的一些组件,所以需要按需导入在这里插入图片描述
    • 下面是这部分的实现代码和效果:在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述

    7.绘制带icon的input输入框

    Element-UI
    eg.

    <el-input v-model="loginForm.username" prefix-icon="el-icon-user-solid"></el-input>            
    • 1导入Element-UI官方给好的图标
    • 2用v-model绑定输入的用户名数据
    <el-input v-model="loginForm.password" prefix-icon="el-icon-lock" type="password"></el-input>

    在这里插入图片描述

    • type设为password就可以保证输入密码时看到的是*****

    8.实现表单数据验证

    【表单验证】:在防止用户犯错的前提下,尽可能让用户更早地发现并纠正错误。

    • 1.给el-form通过属性绑定rules绑定一个校验规则对象:
    <el-form :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form"> 
    • 2校验规则对象写在script里面的data中,在校验规则对象中定义几个校验规则的属性也可以在element-ui网站里面找这些指令
    • 3在表单item项中通过prop属性绑定不同的校验规则
    <!--用户名区域-->                
    <el-form-item prop="username">                    
    	<el-input v-model="loginForm.username" prefix-icon="el-icon-user-solid"></el-input>                
    </el-form-item>

    9.实现表单的重置功能

    • 1.为表单el-form添加一个ref引用ref=“loginFormRef”,这个引用的值就是这个组件的一个实例对象可以通过ref直接获取对表单的引用
    • 2.然后在methods中通过this访问到this.$refs.loginFormRef.然后调用resetFields()方法实现重置表单

    10.实现登录前表单数据的预验证

    再发起请求前先对表单数据发起一个验证,验证通过再向服务器发起这次网络请求,否则要向用户提示这个数据不合法
    思路:点击登录时,这个对象绑定一个单击事件,通过调用表单的某个函数来验证【@click=“login”】
    在这里插入图片描述
    validate函数接收一个回调函数从而拿到验证的结果valid
    通过valid的布尔值来知道验证通过还是失败了

    11.配置axios发起登陆请求

    • 先在main.js对axios进行全局配置`
    /* 对axios进行全局配置,因为表单验证完要发起网络请求了 */
    import axios from 'axios'
    //配置请求的根路径
    axios.defaults.baseURL='http://127.0.0.1:8888/api/private/v1/'
    /*把axios这个包挂载到vue的原型对象上,这样的话vue的每一个组件都可通过this直接访问到http,从而去发起ajax请求 */
    Vue.prototype.$http = axiosVue.config.productionTip = false
    • 如果valid为true说明预验证通过,那么发起登陆请求,否则直接return不发起登录请求
      在这里插入图片描述
      (从api接口文档中可以知道post需要的两个参数都是啥)
      (要进行网络请求的前提是先把这个服务器跑起来,到这个目录下D:\Vue\vue\shizhan\material\vue_api_server\vue_api_server,在命令行窗口执行命令:
      node app.js)
    • res.meta.status是把服务器返回的promise中包含的状态码揪出来了,就是简化了一下,如果这个状态码是200说明登陆成功

    12.配置Message全局弹框组件

    登录成功或者失败,我们都给用户一个弹窗来提示状态

    • 1.现在plugin/element.js中导入弹框这个组件
      • import { Input,Message,Form,FormItem,Button} from 'element-ui//message导入弹框提示组件
      • Vue.prototype.$message = Message //message需要进行全局挂载,这样每个组件都可以通过this来访问message
    • 2.在login中使用弹框,上图中就用了,效果是这样的
    • 在这里插入图片描述

    13.完善登录成功之后的操作

    • 1.将登录成功之后的token,保存到客户端的sessionStorage中
      • 1.1项目中除了登陆之外的其他API接口,必须在登录之后才能访问,在登陆之后访问其他接口的时候要携带着这个token去访问,
      • 1.2token只应在当前网站打开期间生效,所以将token保存在sessionStorage中,因为sessionStorage是会话期间的存储机制(localstorage是持久化的存储机制)
    • 2 .通过编程式导航跳转到后台主页,路由地址是/home【代码上面的图里面有】
    • 3.在/components文件夹下新建一个Home.vue文件,这就是主页
      • 3.1要在router/index.js中导入Home这个组件并加入一个路由规则
      • 3.2this.$router.push('/home')点击登录就可以跳转到home主页了,下面就可以准备写主页的页面了

    14.路由导航守卫控制页面访问权限

    • 我们要保证必须在有登陆权限toke的情况下才可以访问主页,要是在主页突然失去了token,必须立马跳转到login页面去,这时候就需要路由导航守卫来实现这个功能
    • /router/index.js:
    • 在这里插入图片描述

    15.实现退出功能

    基于token的退出功能很简单,只需要销毁token就好了

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

    16.将本地代码提交到码云中(git指令)

    • 1.在vscode中打开终端,快捷键:ctrl+`(tab上面的那个键)
    • 2.git status查看当前项目中源代码的一些状态【第一部分显示的是修改过的,第二部分显示的是新增的文件】
    • 3.git add . 把所有文件全部添加到暂存区
    • 4.git status这是会发现所有文件名字都变绿色了,说明已经被添加到了暂存区
    • 5.git commit -m "完成了登录功能"把暂存区中的所有代码提交到了本地仓库中,并给了一句修改说明
    • 6.git branch查看当前所处的分支,发现处于login分支,说明刚才进行的一系列操作是在login分支中进行的,接下来我们可以把login分支中的所有代码合并到master主分支中去
    • 7.git checkout master切换到主分支,想要把login合并到master主分支中,首先要先切换到主分支,在从主分支主动合并login
    • 8.git branch检查当前的确已经到了master分支
    • 9.git merge login合并login到master
    • 10.git push把本地master中的所有代码推送到了云端的码云中
    • 11.【把本地的login分支也推送到云端】
    • 12.git checkout login切换到login分支
    • 13.git branch检查一下是不是到了login分支
    • 14.git push -u origin login第一次推送这个分支时需要加上push后面的内容,表示我们要将本地的login子分支推送到云端origin仓储里面,同时在云端叫做login,以后再修改login在要推送的时候只要写git push就可以了

    4.主页布局

    4.1整体布局

    • 整体布局:线上下划分,下面那部分再左右划分
    • Element-UI这里面有各种布局的源代码真的是宝藏网站了,爱了爱了太方便了
    • 记得先在/plugin/element.js里面导入container这个组件,也可以一键全局导入
    /plugin/element.js
    import ElementUI from 'element-ui'
    Vue.use(ElementUI)
    /components/Home.vue
    <el-container>            
    	<!--头部区域-->            
    	<el-header></el-header>            
    	<el-container>                
    		<!--侧边栏区域-->                
    		<el-aside></el-aside>                
    		<!--右侧主体区域-->                
    		<el-main></el-main>            
    	</el-container>        
    </el-container>
    • 可以通过类选择器给每一部分添加样式,可以用类名,也可以直接用el-hearder这种块名

    4.2美化主页header区域

    在这里插入图片描述

    .el-header {        
    	background-color: #373d41;        
    	display: flex; // 页面flex布局        
    	justify-content: space-between;  //让按钮和图片文字盒子分别占左边和右边        padding-left: 0;        
    	align-items: center; // 让按钮垂直方向居中显示,不再上下都贴着边沿        color: #fff;        
    	font-size: 20px;        
    	> div{            
    		display: flex;            
    		align-items: center;            
    		span {                
    			margin-left: 15px; // 文字和左边的图片之间间隔            
    		}            
    		img {                
    			width: 60px;                
    			height: 60px;            
    		}        
    	}    
     }

    4.3左侧菜单布局

    模板在element-ui里面的导航菜单里有
    在这里插入图片描述

    <el-container>            
    	<!--侧边栏区域-->            
    	<el-aside width="200px">                
    		<!--侧边栏菜单区域-->                
    		<el-menu background-color="#333447" text-color="#fff" active-text-color="#ffd04b">                
    			<!--一级菜单-->                
    			<el-submenu index="1">                    
    				<!--一级菜单的模板-->                  
    				<template slot="title">                        
    					<!--图标-->                        
    					<i class="el-icon-location"></i>                        
    					<!--文本-->                        
    					<span>导航一</span>                    
    				</template>                    
    			<!--二级菜单-->                    
    			<el-menu-item index="1-1">                        
    				<!--二级菜单的模板-->                        
    				<template slot="title">                            	
    					<!--图标-->                            
    					<i class="el-icon-location"></i>                            
    					<!--文本-->                            
    					<span>选项1</span>                        
    				</template>                    
    			</el-menu-item>                
    		</el-submenu>                
    	</el-menu>            
    </el-aside>            
    

    4.4通过接口获取菜单数据

    除了登录页面的接口,其他接口都需要token令牌才能访问,这个token令牌就是在登录页面登陆成功的时候服务器给我们返回的东西里面带的
    通过axios请求拦截器添加token,保证拥有获取数据的权限
    在这里插入图片描述
    请求在到达服务器之前会先调用这个use函数,对请求进行预处理,给请求头对象挂载一个Authorization字段,这个字段里面装的就是我们的token,只有请求头里面有这个字段,才能访问那些有权限的页面

    【main.js】
    // 4.4为axios设置一个拦截器
    axios.interceptors.request.use(config => {  
    console.log(config)  // 在最后必须return config  
    // 为请求头对象添加Token验证的Authorization字段
    config.headers.Authorization = window.sessionStorage.getItem('token')  
    return config
    })

    这样就可以保证登录之后在想要访问其他需要权限的页面时,有一个token验证

    4.5获取左侧菜单栏数据

    在这里插入图片描述

    • 如果meta中的status=200说明请求成功
    • data就是服务器返回的菜单列表
    • 有children说明有二级菜单
    • 在整个页面刚一加载的时候就应该立即获取左侧菜单数据,所以应该在Home.js的行为区(script)定义一个生命周期函数created()
    • 对象模型的解构赋值
      解构赋值是对赋值运算符的扩展。
      他是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。
      在代码书写上简洁且易读,语义更加清晰明了;也方便了复杂对象中数据字段获取
      let { baz : foo } = { baz : 'ddd' };
      // foo = 'ddd'
     【Home.vue】
     created () {        
     	this.getMenuList()        
     	this.activePath = window.sessionStorage.getItem('activePath')    	},    
     methods: {        
     	logout () {            
     		// 清空token            
     		window.sessionStorage.clear()            
     		// 跳转到登录页            
     		this.$router.push('/login')        
     		},        // 获取所有的菜单        
     	async getMenuList () {            
    	 	const { data: res } = await this.$http.get('menus')  
    	 	// asyncawait可以简化get的promise返回值,const{}是在解构data,赋值给res            
    	 	if (res.meta.status !== 200) return this.$message.error(res.meta.msg) // 如果获取数据不成功就啥也不返回            
    	 	this.menulist = res.data  //如果获取数据成功就把数据保存到menulist中          
    	 	console.log(this.menulist)        
     	},

    4.6通过双层v-for循环渲染左侧菜单

    获取到了菜单栏数据我们得把它渲染显示到页面上,让他显示出来一层一层的菜单

    • 【渲染一级菜单】menulist数组中的每一项都是一个一级菜单,每个一级菜单中又通过children属性嵌套着二级菜单—>我们只要通过一个双层for循环来渲染各个左侧菜单就好了
      • 给一级菜单的el-submenu动态绑定一个v-for并为每一个v-for提供一个独一无二的key值(如果有id尽量用id)
      • 给一级菜单的span文本区动态绑定不同的名称item.authName
      • 一级菜单的展开,这时候是同步的,展开一个一级菜单,所有一级菜单就都展开了,这是因为大家的index都是1,只要让他们都不相同就好了:**动态绑定::index=“item.id + ‘’” **因为index只接收字符串不接收数字,所以我们要把item.id变成字符串(数值和字符串拼接的结果是一个字符串)
    • 【渲染二级菜单】
      • 二级菜单都在一级菜单的item的children属性里面,流程同上
    【Home.js】
    
    <!--一级菜单-->                
    <el-submenu :index="item.id + ''" v-for="item in menulist" :key="item.id">                    
    	<!--一级菜单的模板-->                    
    	<template slot="title">                        
    		<!--图标-->                        
    		<i :class="iconsObj[item.id]"></i>                        
    		<!--文本-->                        
    		<span>{{item.authName}}</span>                    
    	</template>                    
    	<!--二级菜单-->                    
    	<el-menu-item :index="'/' + subItem.path " v-for="subItem in item.children" 
    	:key="subItem.id" @click="saveNavState ('/' + subItem.path)">                        
    		<!--二级菜单的模板-->                        
    		<template slot="title">                            
    			<!--图标-->                            
    			<i class="el-icon-menu"></i>                            
    			<!--文本-->                            
    			<span>{{subItem.authName}}</span>                        
    		</template>                    
    	</el-menu-item>                
    </el-submenu>

    效果:
    在这里插入图片描述

    4.7为选中项设置字体颜色并添加分类图标

    1.我们要把当前选中项的文本设置特殊的高亮颜色

    每次只能打开一个菜单项unique-opened
    是否水平折叠收起菜单collapse
    【Home.js】
    
    <!--侧边栏菜单区域-->                
    <el-menu background-color="#333447" text-color="#fff"                
    active-text-color="#409EFF"  <!--设置高亮颜色-->
    unique-opened="true"   <!--每次只能打开一个菜单项-->
    :collapse="isCollapse"                
    :collapse-transition="false"  <!--不开启折叠展开动画【4.9】-->
    router   <!--激活路由模式,激活导航时,会跳转到el-submenu对应的index绑定的路径里去【4.11】>
    :default-active="activePath">                
    	<!--一级菜单-->
    	<el-submenu>...

    2.把所有二级一级菜单的图标都改成独特的

    【一级菜单的】
    <i :class="iconsObj[item.id]"></i>
    【二级菜单的】
    <i :class="el-icon-menu"></i>
    

    一级菜单的图标我们专门给他搞一个数组来存,这些图标都在element-ui网站里面有:

    data () {        
    	return { // 左侧菜单数据            
    	menulist: [],            
    	iconsObj: {                
    		125: 'el-icon-user-solid',                
    		103: 'el-icon-s-claim',                
    		101: 'el-icon-s-goods',                
    		102: 'el-icon-s-order',                
    		145: 'el-icon-s-marketing'            
    	},            
    	// 是否折叠            
    	isCollapse: false,            
    	// 被激活的链接地址            
    	activePath: ''        
    	}   
    },

    3.图标和文本之间的间距

    这个要在类的样式style里面加

    <style>
    	.i {        
    		margin-right: 10px;    
    	}
    </style>

    4.8解决边框对齐问题

    在这里插入图片描述

    .el-aside {        
    	background-color: #333744;        
    	.el-menu {            
    		border-right: none;  //把右边框线取消
    	}    
    }

    4.9实现侧边栏的折叠与展开效果!

    • 1.侧边栏内部,菜单之前加一个盒子按钮条,准备实现当点击这个区域时就折叠,再点又展开
    • 2.给这个按钮条绑定一个单击事件toggleCollapse,这个函数会修改el-menu的isCollapse属性,这个属性就是控制是否水平折叠收起菜单的
    • 3.关闭很丑的折叠展开动画collapse-transition
    • 4.让侧边栏背景也跟着侧边栏一起折叠展开:width = “isCollapse ? ‘64px’ : ‘200px’”
    	<aside :width = "isCollapse ? '64px' : '200px'">
    		<div class="toggle-button" @click="toggleCollapse">|||</div>
    		//给el-menu加动态collapse属性,4.7有
    		<el-menu :collapse="isCollapse" :collapse-transition="false"  <!--不开启折叠展开动画-->>...
    	</aside>
    <script>
    
    export default {
    	data () {        
    		return { 
    			// 是否折叠            
    			isCollapse: false,
    		}
    	methods: {
    		// 点击按钮切换菜单的折叠与否        
    		toggleCollapse () {            
    			this.isCollapse = !this.isCollapse        
    		},       
    	}
    }
    </script>
    	
    <style>
    	.toggle-button {        
    		background-color: #4A5064;        
    		font-size: 10px;  //文本字体大小
    		line-height: 24px;  //行高
    		color: #fff;    //字体颜色
    		text-align: center;    //字体居中
    		letter-spacing: 0.2em;      //竖线之间的间距
    		//em是容器的内距容器边--到--容器内容的距离em是相对长度单位。相对于当前对象内文本的字体尺寸。
    		cursor: pointer;    //鼠标放上去的时候变成一个小手
    	}
    </style>

    在这里插入图片描述

    4.10实现首页路由重定向

    想要实现一到home页面就自动重定向到welcome,在home的主体区域为我们展示welcome这个组件

    • 1.在components文件夹下定义一个welcome.vue组件
    • 2.在home.vue的主体区域放一个路由占位符
    <!--右侧主体区域-->            
    <el-main>                
    	<!--路由占位符-->                
    	<router-view></router-view>            
    </el-main>
    • 3.把welcome路由设置为home路由的子路由
    【router/index.js】
    
    import Welcome from '../components/Welcome.vue
    const router = new VueRouter({  
    	routes: [    
    	{ path: '/', redirect: '/login' }, 
    	// 【路由重定向】如果用户访问‘/’,那么就给他重定向到‘/login’    
    	{ path: '/login', component: login }, 
    	{      
    		path: '/Home',      
    		component: Home,      
    		redirect: '/Welcome',      //路由重定向
    		children: [        
    			{ path: '/Welcome', component: Welcome },        
    			{ path: '/users', component: Users }      
    		]    
    	} 
    ]
    })

    在这里插入图片描述

    4.11实现侧边栏路由链接的改造

    在这里插入图片描述

    • 1.在el-menu里面绑定属性:router=“true”也可以省略后面的只写个router是一个意思,激活导航时,会跳转到el-submenu对应的index绑定的路径里去,所以我们应该给index改成对应的二级菜单的path:
    <el-menu-item :index="'/' + subItem.path " 
    v-for="subItem in item.children"                    
    :key="subItem.id" 
    @click="saveNavState ('/' + subItem.path)">
    • 因为path前面是没有自带/的,所以写的时候要自己给他拼接一个
      要不然实现不了跳转
    • 如果点击“角色列表”浏览器就会自动跳转到localhost:8080/#/roles这个路径,想只改变页面的主体区域的话就像【4.10】一样给他加一个路由重定向就好了

    5.主页-用户列表

    5.21 修改用户状态

    • 报错
    async userStateChanged (userinfo) {
          console.log(userinfo)
          const { data: res } = await this.$http.put(`users/${userinfo.id}/state/:${userinfo.mg_state}`)
          if (res.meta.status !== 200) {
            userinfo.mg_state = !userinfo.mg_state
            return this.$message.error('更新用户状态失败!')
          }
          return this.$message.success('更新用户状态成功!')
        }

    注意这里的:${userinfo.mg_state}前面必须加:,否则会报错Invalid prop: type check failed for prop “enterable”. Expected Boolean, got String with value “false”.是因为布尔值要用“:“动态来表示 否则会将布尔值”false”化为字符串形式。

    5.22 实现搜索功能

    • 1.把搜索框和data中的数据数据做双向绑定
    • 2.点击搜索按钮时调用获取用户列表的函数进行数据的查询

    5.24 渲染添加用户的表单

    【10.sublime一些快捷键】

    1.分屏显示

    • view–layout–column 2可以把页面变成两列显示
    • 在每一个窗口ctrl+p然后输入想打开的文件名即可

    2.文件列表的显示和隐藏

    ctrl+B,ctrl+K
    按住ctrl,然后按b再按k才行

    展开全文
  • Vue.js实战 高清版

    2019-06-29 00:58:45
    本书以Vue.js 2为基础,以项目实战的方式来引导读者渐进式学习Vue.js。本书分为基础篇、进阶篇和实战篇三部分。基础篇主要是对 Vue.js 核心功能的介绍;进阶篇主要讲解前端工程化Vue.js的组件化、插件的使用;实战篇...
  • Spring Boot Vue前后端分离开发实战.pdf 上手简单,文档讲述清晰,实在好用。
  • VUE实战项目【电商管理端】后台数据库SQL文件
  • 千峰vue实战喵喵电影项目原始码及接口文档 连接文档 正在热映 http://39.97.33.178/api/movieOnInfoList?cityId=10 即将上映 http://39.97.33.178/api/movieComingList?cityId=10 搜索 ...城市 ...
  • Vue基础篇四:Vue的生命周期(秒杀案例实战Vue基础篇五:Vue的指令 Vue基础篇六:Vue使用JSX进行动态渲染 Vue提高篇一:使用Vuex进行状态管理 Vue提高篇二:使用vue-router实现静态路由 Vue提高篇三:使用vue-...

    系列文章目录

    Vue基础篇一:编写第一个Vue程序
    Vue基础篇二:Vue组件的核心概念
    Vue基础篇三:Vue的计算属性与侦听器
    Vue基础篇四:Vue的生命周期(秒杀案例实战)
    Vue基础篇五:Vue的指令
    Vue基础篇六:Vue使用JSX进行动态渲染
    Vue提高篇一:使用Vuex进行状态管理
    Vue提高篇二:使用vue-router实现静态路由
    Vue提高篇三:使用vue-router实现动态路由
    Vue提高篇四:使用Element UI组件库
    Vue提高篇五:使用Jest进行单元测试
    Vue提高篇六: 使用Vetur+ESLint+Prettier插件提升开发效率
    Vue实战篇一: 使用Vue搭建注册登录界面
    Vue实战篇二: 实现邮件验证码发送
    Vue实战篇三:实现用户注册
    Vue实战篇四:创建多步骤表单
    Vue实战篇五:实现文件上传
    Vue实战篇六:表格渲染动态数据
    Vue实战篇七:表单校验
    Vue实战篇八:实现弹出对话框进行交互
    Vue实战篇九:使用省市区级联选择插件
    Vue实战篇十:响应式布局
    Vue实战篇十一:父组件获取子组件数据的常规方法
    Vue实战篇十二:多项选择器的实际运用
    Vue实战篇十三:实战分页组件
    Vue实战篇十四:前端excel组件实现数据导入
    Vue实战篇十五:表格数据多选在实际项目中的技巧
    Vue实战篇十六:导航菜单
    Vue实战篇十七:用树型组件实现一个知识目录


    一、背景

    • 树型组件在具有父子关系的数据展示中会经常用到,比如:
    1. 一个树状的部门列表,可以展示出部门的上下级关系。
    2. 一个树状的文档目录结构,可以极大地方便操作人员检索文件。

    二、Element Tree

    • Tree 树形控件用清晰的层级结构展示信息,可展开或折叠。
    <el-tree :data="data"  @node-click="handleNodeClick"></el-tree>
    <script>
      export default {
        data() {
          return {
            // 树型数据的组成类似于json嵌套结构
            data: [{       
              {
                // 一级数据
              label: '一级 1',
                 // 一级数据
                children: [{
                 // 二级子数据 
                 label: '二级 1-1',
                  children: [{
                    // 三级子数据 
                   label: '三级 1-1-1'
                  }]
                 }]
              }
            }]
          };
        },
        methods: {
          handleNodeClick(data) {
            console.log(data);
          }
        }
      };
    </script>
    

    在这里插入图片描述

    三、用树型组件实现一个文档目录结构

    • 利用树型组件的嵌套结构,建立一个产品开发文档目录,并可以按关键字进行过滤筛选
    <template>
      <div class="sidebar">
        <div class="ui-layout-pane ui-layout-pane-west">
    
          <el-form id="searchForm">
            <el-form-item>
              <el-input
                v-model="filterText"
                placeholder="搜索目录..."
                class="input-with-select"
              >
    
              </el-input>
            </el-form-item>
            <el-form-item>
              <h3>知识目录</h3>
              <hr />
            </el-form-item>
            <el-form-item>
              <div>
                <el-scrollbar wrap-class="scrollbar-wrapper" style="height:100%">
                  <el-tree
                    ref="tree"
                    :data="data"
                    :props="defaultProps"
                    :default-expand-all="true"
                    :filter-node-method="filterNode"
                    @node-click="handleNodeClick"
                  >
                  </el-tree>
                </el-scrollbar>
              </div>
            </el-form-item>
          </el-form>
    
        </div>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          filterText: '',
          // mock数据
          data: [{
            id: '1',
            label: 'WA',
            icon: 'el-icon-success',
            children: [{
              id: '1.1',
              label: '1.1 SQR相关',
              children: [
                {
                  id: '1.1.1',
                  label: 'QFD'
                },
                {
                  id: '1.1.2',
                  label: '产品开发要求规格'
                },
                {
                  id: '1.1.3',
                  label: '测试清单'
                }
    
              ]
    
            },
            {
              id: '1.2',
              label: '1.2 项目计划',
              children: [
                {
                  id: '1.2.1',
                  label: '项目开发计划'
                },
                {
                  id: '1.2.2',
                  label: '问题解决计划'
                },
                {
                  id: '1.2.3',
                  label: '送样计划 '
                }
              ]
            },
            {
              id: '1.3',
              label: '1.3 立项任务书'
            },
            {
              id: '1.4',
              label: '1.4 成本/BOM',
              children: [
                {
                  id: '1.4.1',
                  label: '项目成本要求'
                },
                {
                  id: '1.4.2',
                  label: '项目预算'
                },
                {
                  id: '1.4.3',
                  label: '项目实际花费'
                },
                {
                  id: '1.4.4',
                  label: 'BOM'
                }
              ]
            },
            {
              id: '1.5',
              label: '1.5 每阶段设计构想',
              children: [
                {
                  id: '1.5.1',
                  label: '设计构想书'
                },
                {
                  id: '1.5.2',
                  label: 'DOE方案'
                }
              ]
            },
            {
              id: '1.6',
              label: '1.6 试验/试产总结',
              children: [
                {
                  id: '1.6.1',
                  label: '试验总结'
                },
                {
                  id: '1.6.2',
                  label: '试产总结'
                }
              ]
            },
            {
              id: '1.7',
              label: '1.7 问题清单及问题解决报告',
              children: [
                {
                  id: '1.7.1',
                  label: '问题清单'
                },
                {
                  id: '1.7.2',
                  label: '问题解决报告'
                }
              ]
            },
            {
              id: '1.8',
              label: '1.8 FMEA',
              children: [
                {
                  id: '1.8.1',
                  label: 'DFMEA'
                },
                {
                  id: '1.8.2',
                  label: 'PFMEA'
                }
              ]
            },
            {
              id: '1.9',
              label: '1.9 CC/SC; PFD; CP',
              children: [
                {
                  id: '1.9.1',
                  label: 'CC/SC'
                },
                {
                  id: '1.9.2',
                  label: 'PFD'
                },
                {
                  id: '1.9.3',
                  label: 'CP'
                }
              ]
            },
            {
              id: '2.0',
              label: '2.0 生产工艺文件相关'
            },
            {
              id: '2.0',
              label: '2.0 生产工艺文件相关',
              children: [
                {
                  id: '2.0.1',
                  label: '生产规格书'
                },
                {
                  id: '2.0.2',
                  label: '测试清单'
                }
              ]
            },
            {
              id: '2.1',
              label: '2.1 图纸'
            },
            {
              id: '2.2',
              label: '2.2 各阶段评审报告'
            },
            {
              id: '2.3',
              label: '2.3 原材料规格书'
            }
            ]
          }
          ],
          defaultProps: {
            children: 'children',
            label: 'label'
          }
    
        }
      },
      watch: {
        filterText(val) {
          this.$refs.tree.filter(val)
        }
      },
      methods: {
        handleNodeClick(data) {
          console.log(data)
        },
        filterNode(value, data) {
          if (!value) return true
          return data.label.indexOf(value) !== -1
        }
      }
    }
    </script>
    <style lang="scss" scoped>
    
    .scrollbar-wrapper {
      overflow-x: hidden !important;
    }
    
    /**
     * layout
     */
     .sidebar{
         position: fixed;
         z-index: 4;
         margin-top: 64px;
     }
    /* pane */
    .ui-layout-pane {
    //   border: 1px solid #bbb;
      height: 100%;
    //   width : 230px;
    }
    /* main-left pane */
    .ui-layout-pane-west {
      padding: 8px 10px;
      background-color: #f5f5f5 !important;
    }
    
    .el-tree {
      background-color: #f5f5f5 !important;
      min-height: 200px;
      max-height: 410px
    
    }
    
    </style>
    
    
    • 实现效果
      在这里插入图片描述

    • 关键字筛选
      在这里插入图片描述

    展开全文
  • 然后,通过搭建一个demo性质的平台,学习Vue.js2.0在项目中的应用,主要内容涵盖如何使用脚手架初始化项目,如何布局整个项目目录,如何使用Vue指令,如何设计使用组件,如何使用vue路由,vue数据请求等等,是一门...
  • 电商管理后台 API 接口文档1.1. API V1 接口说明1.1.1. 支持的请求方法1.1.2. 通用返回状态说明1.2. 登录1.2.1. 登录验证接口1.3. 用户管理1.3.1. 用户数据列表1.3.2. 添加用户1.3.3. 修改用户状态1.3.4. 根据 ID ...

    1. 电商管理后台 API 接口文档

    1.1. API V1 接口说明

    • 接口基准地址:http://127.0.0.1:8888/api/private/v1/
    • 服务端已开启 CORS 跨域支持
    • API V1 认证统一使用 Token 认证
    • 需要授权的 API ,必须在请求头中使用 Authorization 字段提供 token 令牌
    • 使用 HTTP Status Code 标识状态
    • 数据返回格式统一使用 JSON

    1.1.1. 支持的请求方法

    • GET(SELECT):从服务器取出资源(一项或多项)。
    • POST(CREATE):在服务器新建一个资源。
    • PUT(UPDATE):在服务器更新资源(客户端提供改变后的完整资源)。
    • PATCH(UPDATE):在服务器更新资源(客户端提供改变的属性)。
    • DELETE(DELETE):从服务器删除资源。
    • HEAD:获取资源的元数据。
    • OPTIONS:获取信息,关于资源的哪些属性是客户端可以改变的。

    1.1.2. 通用返回状态说明

    状态码含义说明
    200OK请求成功
    201CREATED创建成功
    204DELETED删除成功
    400BAD REQUEST请求的地址不存在或者包含不支持的参数
    401UNAUTHORIZED未授权
    403FORBIDDEN被禁止访问
    404NOT FOUND请求的资源不存在
    422Unprocesable entity[POST/PUT/PATCH] 当创建一个对象时,发生一个验证错误
    500INTERNAL SERVER ERROR内部错误

    1.2. 登录

    1.2.1. 登录验证接口

    • 请求路径:login
    • 请求方法:post
    • 请求参数
    参数名参数说明备注
    username用户名不能为空
    password密码不能为空
    • 响应参数
    参数名参数说明备注
    id用户 ID
    rid用户角色 ID
    username用户名
    mobile手机号
    email邮箱
    token令牌基于 jwt 的令牌
    • 响应数据
    {
        "data": {
            "id": 500,
            "rid": 0,
            "username": "admin",
            "mobile": "123",
            "email": "123@qq.com",
            "token": "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjUwMCwicmlkIjowLCJpYXQiOjE1MTI1NDQyOTksImV4cCI6MTUxMjYzMDY5OX0.eGrsrvwHm-tPsO9r_pxHIQ5i5L1kX9RX444uwnRGaIM"
        },
        "meta": {
            "msg": "登录成功",
            "status": 200
        }
    }
    

    1.3. 用户管理

    1.3.1. 用户数据列表

    • 请求路径:users
    • 请求方法:get
    • 请求参数
    参数名参数说明备注
    query查询参数可以为空
    pagenum当前页码不能为空
    pagesize每页显示条数不能为空
    • 响应参数
    参数名参数说明备注
    totalpage总记录数
    pagenum当前页码
    users用户数据集合
    • 响应数据
    {
        "data": {
            "totalpage": 5,
            "pagenum": 4,
            "users": [
                {
                    "id": 25,
                    "username": "tige117",
                    "mobile": "18616358651",
                    "type": 1,
                    "email": "tige112@163.com",
                    "create_time": "2017-11-09T20:36:26.000Z",
                    "mg_state": true, // 当前用户的状态
                    "role_name": "炒鸡管理员"
                }
            ]
        },
        "meta": {
            "msg": "获取成功",
            "status": 200
        }
    }
    

    1.3.2. 添加用户

    • 请求路径:users
    • 请求方法:post
    • 请求参数
    参数名参数说明备注
    username用户名称不能为空
    password用户密码不能为空
    email邮箱可以为空
    mobile手机号可以为空
    • 响应参数
    参数名参数说明备注
    id用户 ID
    rid用户角色 ID
    username用户名
    mobile手机号
    email邮箱
    • 响应数据
    {
        "data": {
            "id": 28,
            "username": "tige1200",
            "mobile": "test",
            "type": 1,
            "openid": "",
            "email": "test@test.com",
            "create_time": "2017-11-10T03:47:13.533Z",
            "modify_time": null,
            "is_delete": false,
            "is_active": false
        },
        "meta": {
            "msg": "用户创建成功",
            "status": 201
        }
    }
    

    1.3.3. 修改用户状态

    • 请求路径:users/:uId/state/:type
    • 请求方法:put
    • 请求参数
    参数名参数说明备注
    uId用户 ID不能为空携带在url中
    type用户状态不能为空携带在url中,值为 true 或者 false
    • 响应数据
    {
      "data": {
        "id": 566,
        "rid": 30,
        "username": "admin",
        "mobile": "123456",
        "email": "bb@itcast.com",
        "mg_state": 0
      },
      "meta": {
        "msg": "设置状态成功",
        "status": 200
      }
    }
    

    1.3.4. 根据 ID 查询用户信息

    • 请求路径:users/:id
    • 请求方法:get
    • 请求参数
    参数名参数说明备注
    id用户 ID不能为空携带在url中
    • 响应参数
    参数名参数说明备注
    id用户 ID
    role_id角色 ID
    mobile手机号
    email邮箱
    • 响应数据
    {
        "data": {
            "id": 503,
            "username": "admin3",
            "role_id": 0,
            "mobile": "00000",
            "email": "new@new.com"
        },
        "meta": {
            "msg": "查询成功",
            "status": 200
        }
    }
    

    1.3.5. 编辑用户提交

    • 请求路径:users/:id
    • 请求方法:put
    • 请求参数
    参数名参数说明备注
    id用户 id不能为空 参数是url参数:id
    email邮箱可以为空
    mobile手机号可以为空
    • 响应参数
    参数名参数说明备注
    id用户 ID
    role_id角色 ID
    mobile手机号
    email邮箱
    • 响应数据
    /* 200表示成功,500表示失败 */
    {
        "data": {
            "id": 503,
            "username": "admin3",
            "role_id": 0,
            "mobile": "111",
            "email": "123@123.com"
        },
        "meta": {
            "msg": "更新成功",
            "status": 200
        }
    }
    

    1.3.6. 删除单个用户

    • 请求路径:users/:id
    • 请求方法:delete
    • 请求参数
    参数名参数说明备注
    id用户 id不能为空参数是url参数:id
    • 响应参数
    • 响应数据
    {
        "data": null,
        "meta": {
            "msg": "删除成功",
            "status": 200
        }
    }
    

    1.3.7. 分配用户角色

    • 请求路径:users/:id/role
    • 请求方法:put
    • 请求参数
    参数名参数说明备注
    id用户 ID不能为空参数是url参数:id
    rid角色 id不能为空参数body参数
    • 响应参数
    参数名参数说明备注
    id用户 ID
    role_id角色 ID
    mobile手机号
    email邮箱
    • 响应数据
    {
        "data": {
            "id": 508,
            "rid": "30",
            "username": "asdf1",
            "mobile": "123123",
            "email": "adfsa@qq.com"
        },
        "meta": {
            "msg": "设置角色成功",
            "status": 200
        }
    }
    

    1.4. 权限管理

    1.4.1. 所有权限列表

    • 请求路径:rights/:type
    • 请求方法:get
    • 请求参数
    参数名参数说明备注
    type类型值 list 或 tree , list 列表显示权限, tree 树状显示权限,参数是url参数:type
    • 响应参数
    参数名参数说明备注
    id权限 ID
    authName权限说明
    level权限层级
    pid权限父 ID
    path对应访问路径
    • 响应数据 type=list
      {
        "data": [
            {
                "id": 101,
                "authName": "商品管理",
                "level": "0",
                "pid": 0,
                "path": null
            },
            {
                "id": 102,
                "authName": "订单管理",
                "level": "0",
                "pid": 0,
                "path": null
            }
        ],
        "meta": {
            "msg": "获取权限列表成功",
            "status": 200
        }
    }
    

    type=tree

      {
        data: [
          {
            id: 101,
            authName: '商品管理',
            path: null,
            pid: 0,
            children: [
              {
                id: 104,
                authName: '商品列表',
                path: null,
                pid: 101,
                children: [
                  {
                    id: 105,
                    authName: '添加商品',
                    path: null,
                    pid: '104,101'
                  }
                ]
              }
            ]
          }
        ],
        meta: {
          msg: '获取权限列表成功',
          status: 200
        }
      }
    

    1.4.2. 左侧菜单权限

    • 请求路径:menus
    • 请求方法:get
    • 响应数据
    {
        "data":
            {
                "id": 101,
                "authName": "商品管理",
                "path": null,
                "children": [
                    {
                        "id": 104,
                        "authName": "商品列表",
                        "path": null,
                        "children": []
                    }
                ]
            }
        "meta": {
            "msg": "获取菜单列表成功",
            "status": 200
        }
    }
    

    1.5. 角色管理

    1.5.1. 角色列表

    • 请求路径:roles

    • 请求方法:get

    • 响应数据说明

      • 第一层为角色信息
      • 第二层开始为权限说明,权限一共有 3 层权限
      • 最后一层权限,不包含 children 属性
    • 响应数据

    {
        "data": [
            {
                "id": 30,
                "roleName": "主管",
                "roleDesc": "技术负责人",
                "children": [
                    {
                        "id": 101,
                        "authName": "商品管理",
                        "path": null,
                        "children": [
                            {
                                "id": 104,
                                "authName": "商品列表",
                                "path": null,
                                "children": [
                                    {
                                        "id": 105,
                                        "authName": "添加商品",
                                        "path": null
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ],
        "meta": {
            "msg": "获取成功",
            "status": 200
        }
    }
    

    1.5.2. 添加角色

    • 请求路径:roles
    • 请求方法:post
    • 请求参数
    参数名参数说明备注
    roleName角色名称不能为空
    roleDesc角色描述可以为空
    • 响应参数
    参数名参数说明备注
    roleId角色 ID
    roleName角色名称
    roleDesc角色描述
    • 响应数据
    {
        "data": {
            "roleId": 40,
            "roleName": "admin2",
            "roleDesc": "admin2Desc"
        },
        "meta": {
            "msg": "创建成功",
            "status": 201
        }
    }
    

    1.5.3. 根据 ID 查询角色

    • 请求路径:roles/:id
    • 请求方法:get
    • 请求参数
    参数名参数说明备注
    :id角色 ID不能为空携带在url中
    • 响应参数
    参数名参数说明备注
    roleId角色 ID
    roleName角色名称
    roleDesc角色描述
    • 响应数据
    {
        "data": {
            "roleId": 31,
            "roleName": "测试角色",
            "roleDesc": "测试负责人"
        },
        "meta": {
            "msg": "获取成功",
            "status": 200
        }
    }
    

    1.5.4. 编辑提交角色

    • 请求路径:roles/:id
    • 请求方法:put
    • 请求参数
    参数名参数说明备注
    :id角色 ID不能为空携带在url中
    roleName角色名称不能为空
    roleDesc角色描述可以为空
    • 响应数据
    {
        "data": {
            "roleId": 31,
            "roleName": "测试角色",
            "roleDesc": "测试角色描述"
        },
        "meta": {
            "msg": "获取成功",
            "status": 200
        }
    }
    

    1.5.5. 删除角色

    • 请求路径:roles/:id
    • 请求方法:delete
    • 请求参数
    参数名参数说明备注
    :id角色 ID不能为空携带在url中
    • 响应数据
    {
        "data": null,
        "meta": {
            "msg": "删除成功",
            "status": 200
        }
    }
    

    1.5.6. 角色授权

    • 请求路径:roles/:roleId/rights
    • 请求方法:post
    • 请求参数:通过 请求体 发送给后端
    参数名参数说明备注
    :roleId角色 ID不能为空携带在url中
    rids权限 ID 列表(字符串), 分割的权限 ID 列表(获取所有被选中、叶子节点的key和半选中节点的key, 包括 1,2,3级节点)
    • 响应数据
    {
        "data": null,
        "meta": {
            "msg": "更新成功",
            "status": 200
        }
    }
    

    1.5.7. 删除角色指定权限

    • 请求路径:roles/:roleId/rights/:rightId

    • 请求方法:delete

    • 请求参数

      参数名参数说明备注
      :roleId角色 ID不能为空携带在url中
      :rightId权限 ID不能为空携带在url中
    • 响应数据说明

      • 返回的data, 是当前角色下最新的权限数据
    • 响应数据

      {
          "data": [
              {
                  "id": 101,
                  "authName": "商品管理",
                  "path": null,
                  "children": [
                      {
                          "id": 104,
                          "authName": "商品列表",
                          "path": null,
                          "children": [
                              {
                                  "id": 105,
                                  "authName": "添加商品",
                                  "path": null
                              },
                              {
                                  "id": 116,
                                  "authName": "修改",
                                  "path": null
                              }
                          ]
                      }
                  ]
              }
          ],
          "meta": {
              "msg": "取消权限成功",
              "status": 200
          }
      }
      

    1.6. 商品分类管理

    1.6.1. 商品分类数据列表

    • 请求路径:categories
    • 请求方法:get
    • 请求参数
    参数名参数说明备注
    type[1,2,3]值:1,2,3 分别表示显示一层二层三层分类列表
    【可选参数】如果不传递,则默认获取所有级别的分类
    pagenum当前页码值【可选参数】如果不传递,则默认获取所有分类
    pagesize每页显示多少条数据【可选参数】如果不传递,则默认获取所有分类
    • 响应参数
    参数名参数说明备注
    cat_id分类 ID
    cat_name分类名称
    cat_pid分类父 ID
    cat_level分类当前层级
    • 响应数据
    {
        "data": [
            {
                "cat_id": 1,
                "cat_name": "大家电",
                "cat_pid": 0,
                "cat_level": 0,
                "cat_deleted": false,
                "children": [
                    {
                        "cat_id": 3,
                        "cat_name": "电视",
                        "cat_pid": 1,
                        "cat_level": 1,
                        "cat_deleted": false,
                        "children": [
                            {
                                "cat_id": 6,
                                "cat_name": "曲面电视",
                                "cat_pid": 3,
                                "cat_level": 2,
                                "cat_deleted": false
                            },
                            {
                                "cat_id": 7,
                                "cat_name": "海信",
                                "cat_pid": 3,
                                "cat_level": 2,
                                "cat_deleted": false
                            }
                        ]
                    }
                ]
            }
        ],
        "meta": {
            "msg": "获取成功",
            "status": 200
        }
    }
    

    1.6.2. 添加分类

    • 请求路径:categories
    • 请求方法:post
    • 请求参数
    参数名参数说明备注
    cat_pid分类父 ID不能为空,如果要添加1级分类,则父分类Id应该设置为 0
    cat_name分类名称不能为空
    cat_level分类层级不能为空,0表示一级分类;1表示二级分类;2表示三级分类
    • 响应数据
    {
        "data": {
            "cat_id": 62,
            "cat_name": "相框",
            "cat_pid": "1",
            "cat_level": "1"
        },
        "meta": {
            "msg": "创建成功",
            "status": 201
        }
    }
    

    1.6.3. 根据 id 查询分类

    • 请求路径:categories/:id
    • 请求方法:get
    • 请求参数
    参数名参数说明备注
    :id分类 ID不能为空携带在url中
    • 响应数据
    {
        "data": {
            "cat_id": 3,
            "cat_name": "厨卫电器",
            "cat_pid": 0,
            "cat_level": 0
        },
        "meta": {
            "msg": "获取成功",
            "status": 200
        }
    }
    

    1.6.4. 编辑提交分类

    • 请求路径:categories/:id
    • 请求方法:put
    • 请求参数
    参数名参数说明备注
    :id分类 ID不能为空携带在url中
    cat_name分类名称不能为空【此参数,放到请求体中】
    • 响应数据
    {
        "data": {
            "cat_id": 22,
            "cat_name": "自拍杆",
            "cat_pid": 7,
            "cat_level": 2
        },
        "meta": {
            "msg": "更新成功",
            "status": 200
        }
    }
    

    1.6.5. 删除分类

    • 请求路径:categories/:id
    • 请求方法:delete
    • 请求参数
    参数名参数说明备注
    :id分类 ID不能为空携带在url中
    • 响应数据
    {
        "data": null,
        "meta": {
            "msg": "删除成功",
            "status": 200
        }
    }
    

    1.7. 分类参数管理

    1.7.1. 参数列表

    • 请求路径:categories/:id/attributes
    • 请求方法:get
    • 请求参数
    参数名参数说明备注
    :id分类 ID不能为空携带在url中
    sel[only,many]不能为空,通过 only 或 many 来获取分类静态参数还是动态参数
    • 响应参数
    参数名参数说明备注
    attr_id分类参数 ID
    attr_name分类参数名称
    cat_id分类参数所属分类
    attr_selonly:输入框(唯一) many:后台下拉列表/前台单选框
    attr_writemanual:手工录入 list:从列表选择
    attr_vals如果 attr_write:list,那么有值,该值以逗号分隔
    • 响应数据
    {
        "data": [
            {
                "attr_id": 1,
                "attr_name": "cpu",
                "cat_id": 22,
                "attr_sel": "only",
                "attr_write": "manual",
                "attr_vals": "ffff"
            }
        ],
        "meta": {
            "msg": "获取成功",
            "status": 200
        }
    }
    

    1.7.2. 添加动态参数或者静态属性

    • 请求路径:categories/:id/attributes
    • 请求方法:post
    • 请求参数
    参数名参数说明备注
    :id分类 ID不能为空携带在url中
    attr_name参数名称不能为空
    attr_sel[only,many]不能为空
    attr_vals如果是 many 就需要填写值的选项,以逗号分隔【可选参数】
    • 响应数据
    {
        "data": {
            "attr_id": 44,
            "attr_name": "测试参数",
            "cat_id": "1",
            "attr_sel": "many",
            "attr_write": "list",
            "attr_vals": "a,b,c"
        },
        "meta": {
            "msg": "创建成功",
            "status": 201
        }
    }
    

    1.7.3. 删除参数

    • 请求路径: categories/:id/attributes/:attrid
    • 请求方法:delete
    • 请求参数
    参数名参数说明备注
    :id分类 ID不能为空携带在url中
    :attrid参数 ID不能为空携带在url中
    • 响应数据
    {
        "data": null,
        "meta": {
            "msg": "删除成功",
            "status": 200
        }
    }
    

    1.7.4. 根据 ID 查询参数

    • 请求路径:categories/:id/attributes/:attrId
    • 请求方法:get
    • 请求参数
    参数名参数说明备注
    :id分类 ID不能为空携带在url中
    :attrId属性 ID不能为空携带在url中
    attr_sel[only,many]不能为空
    attr_vals如果是 many 就需要填写值的选项,以逗号分隔
    • 响应数据
    {
        "data": {
            "attr_id": 1,
            "attr_name": "cpu",
            "cat_id": 22,
            "attr_sel": "only",
            "attr_write": "manual",
            "attr_vals": "ffff"
        },
        "meta": {
            "msg": "获取成功",
            "status": 200
        }
    }
    

    1.7.5. 编辑提交参数

    • 请求路径:categories/:id/attributes/:attrId
    • 请求方法:put
    • 请求参数
    参数名参数说明备注
    :id分类 ID不能为空携带在url中
    :attrId属性 ID不能为空携带在url中
    attr_name新属性的名字不能为空,携带在请求体
    attr_sel属性的类型[many或only]不能为空,携带在请求体
    attr_vals参数的属性值可选参数,携带在请求体
    • 响应数据
    {
        "data": {
            "attr_id": 9,
            "attr_name": "测试更新",
            "cat_id": "43",
            "attr_sel": "only",
            "attr_write": "manual",
            "attr_vals": "abc"
        },
        "meta": {
            "msg": "更新成功",
            "status": 200
        }
    }
    

    1.8. 商品管理

    1.8.1. 商品列表数据

    • 请求路径:goods
    • 请求方法:get
    • 请求参数
    参数名参数说明备注
    query查询参数可以为空
    pagenum当前页码不能为空
    pagesize每页显示条数不能为空
    • 响应参数
    参数名参数说明备注
    total总共商品条数
    pagenum当前商品页数
    goods_id商品 ID
    goods_name商品名称
    goods_price价格
    goods_number数量
    goods_weight重量不能为空
    goods_state商品状态商品状态 0: 未通过 1: 审核中 2: 已审核
    add_time添加时间
    upd_time更新时间
    hot_mumber热销品数量
    is_promote是否是热销品
    • 响应数据
    {
        "data": {
            "total": 50,
            "pagenum": "1",
            "goods": [
                {
                    "goods_id": 144,
                    "goods_name": "asfdsd",
                    "goods_price": 1,
                    "goods_number": 1,
                    "goods_weight": 1,
                    "goods_state": null,
                    "add_time": 1512954923,
                    "upd_time": 1512954923,
                    "hot_mumber": 0,
                    "is_promote": false
                }
            ]
        },
        "meta": {
            "msg": "获取成功",
            "status": 200
        }
    }
    

    1.8.2. 添加商品

    • 请求路径:goods
    • 请求方法:post
    • 请求参数
    参数名参数说明备注
    goods_name商品名称不能为空
    goods_cat以为’,'分割的分类列表不能为空
    goods_price价格不能为空
    goods_number数量不能为空
    goods_weight重量不能为空
    goods_introduce介绍可以为空
    pics上传的图片临时路径(对象)可以为空
    attrs商品的参数(数组),包含 动态参数静态属性可以为空
    • 请求数据
    {
      "goods_name":"test_goods_name2",
      "goods_cat": "1,2,3",
      "goods_price":20,
      "goods_number":30,
      "goods_weight":40,
      "goods_introduce":"abc",
      "pics":[
        {"pic":"/tmp_uploads/30f08d52c551ecb447277eae232304b8"}
        ],
      "attrs":[
        {
          "attr_id":15,
          "attr_value":"ddd"
        },
        {
          "attr_id":15,
          "attr_value":"eee"
        }
        ]
    }
    
    • 响应参数
    参数名参数说明备注
    total总共商品条数
    pagenum当前商品页数
    goods_id商品 ID
    goods_cat以为’,'分割的分类列表
    goods_name商品名称
    goods_price价格
    goods_number数量
    goods_weight重量不能为空
    goods_state商品状态商品状态 0: 未通过 1: 审核中 2: 已审核
    add_time添加时间
    upd_time更新时间
    hot_mumber热销品数量
    is_promote是否是热销品
    pics上传的图片临时路径(对象)pics_id:图片 ID,goods_id:商品 ID,pics_big:大图,pics_mid:中图,pics_sma:小图
    attrs商品的参数(数组)goods_id:商品 ID,attr_value:当前商品的参数值,add_price:浮动价格,attr_vals:预定义的参数值,attr_sel:手动输入,还是单选,
    • 响应数据
    {
        "data": {
            "goods_id": 145,
            "goods_name": "test_goods_name2",
            "goods_price": 20,
            "cat_id": 1,
            "goods_number": 30,
            "goods_weight": 40,
            "goods_introduce": "abc",
            "goods_big_logo": "",
            "goods_small_logo": "",
            "goods_state": 1,
            "add_time": 1512962370,
            "upd_time": 1512962370,
            "hot_mumber": 0,
            "is_promote": false,
            "pics": [
                {
                    "pics_id": 397,
                    "goods_id": 145,
                    "pics_big": "uploads/goodspics/big_30f08d52c551ecb447277eae232304b8",
                    "pics_mid": "uploads/goodspics/mid_30f08d52c551ecb447277eae232304b8",
                    "pics_sma": "uploads/goodspics/sma_30f08d52c551ecb447277eae232304b8"
                }
            ],
            "attrs": [
                {
                    "goods_id": 145,
                    "attr_id": 15,
                    "attr_value": "ddd",
                    "add_price": null,
                    "attr_name": "fffffff",
                    "attr_sel": "many",
                    "attr_write": "list",
                    "attr_vals": ""
                },
                {
                    "goods_id": 145,
                    "attr_id": 15,
                    "attr_value": "eee",
                    "add_price": null,
                    "attr_name": "fffffff",
                    "attr_sel": "many",
                    "attr_write": "list",
                    "attr_vals": ""
                }
            ]
        },
        "meta": {
            "msg": "创建商品成功",
            "status": 201
        }
    }
    

    1.8.3. 根据 ID 查询商品

    • 请求路径:goods/:id
    • 请求方法:get
    • 请求参数
    参数名参数说明备注
    id商品 ID不能为空携带在url中
    • 响应参数
    参数名参数说明备注
    total总共商品条数
    pagenum当前商品页数
    goods_id商品 ID
    goods_name商品名称
    goods_price价格
    goods_number数量
    goods_weight重量不能为空
    goods_state商品状态商品状态 0: 未通过 1: 审核中 2: 已审核
    add_time添加时间
    upd_time更新时间
    hot_mumber热销品数量
    is_promote是否是热销品
    pics上传的图片临时路径(对象)pics_id:图片 ID,goods_id:商品 ID,pics_big:大图,pics_mid:中图,pics_sma:小图
    attrs商品的参数(数组)goods_id:商品 ID,attr_value:当前商品的参数值,add_price:浮动价格,attr_vals:预定义的参数值,attr_sel:手动输入,还是单选,
    • 响应数据
    {
        "data": {
            "goods_id": 145,
            "goods_name": "test_goods_name2",
            "goods_price": 20,
            "goods_number": 30,
            "goods_weight": 40,
            "goods_introduce": "abc",
            "goods_big_logo": "",
            "goods_small_logo": "",
            "goods_state": 1,
            "add_time": 1512962370,
            "upd_time": 1512962370,
            "hot_mumber": 0,
            "is_promote": false,
            "pics": [
                {
                    "pics_id": 397,
                    "goods_id": 145,
                    "pics_big": "uploads/goodspics/big_30f08d52c551ecb447277eae232304b8",
                    "pics_mid": "uploads/goodspics/mid_30f08d52c551ecb447277eae232304b8",
                    "pics_sma": "uploads/goodspics/sma_30f08d52c551ecb447277eae232304b8"
                }
            ],
            "attrs": [
                {
                    "goods_id": 145,
                    "attr_id": 15,
                    "attr_value": "ddd",
                    "add_price": null,
                    "attr_name": "fffffff",
                    "attr_sel": "many",
                    "attr_write": "list",
                    "attr_vals": ""
                },
                {
                    "goods_id": 145,
                    "attr_id": 15,
                    "attr_value": "eee",
                    "add_price": null,
                    "attr_name": "fffffff",
                    "attr_sel": "many",
                    "attr_write": "list",
                    "attr_vals": ""
                }
            ]
        },
        "meta": {
            "msg": "创建商品成功",
            "status": 201
        }
    }
    

    1.8.4. 编辑提交商品

    • 请求路径:goods/:id
    • 请求方法:put
    • 请求参数
    参数名参数说明备注
    id商品 ID不能为空携带在url中
    goods_name商品名称不能为空
    goods_price价格不能为空
    goods_number数量不能为空
    goods_weight重量不能为空
    goods_introduce介绍可以为空
    pics上传的图片临时路径(对象)可以为空
    attrs商品的参数(数组)可以为空
    • 请求数据
    {
      "goods_name":"test_goods_name2",
      "goods_price":20,
      "goods_number":30,
      "goods_weight":40,
      "goods_introduce":"abc",
      "pics":[
        {"pic":"/tmp_uploads/30f08d52c551ecb447277eae232304b8"}
        ],
      "attrs":[
        {
          "attr_id":15,
          "attr_value":"ddd"
        },
        {
          "attr_id":15,
          "attr_value":"eee"
        }
        ]
    }
    
    • 响应参数
    参数名参数说明备注
    total总共商品条数
    pagenum当前商品页数
    goods_id商品 ID
    goods_name商品名称
    goods_price价格
    goods_number数量
    goods_weight重量不能为空
    goods_state商品状态商品状态 0: 未通过 1: 审核中 2: 已审核
    add_time添加时间
    upd_time更新时间
    hot_mumber热销品数量
    is_promote是否是热销品
    pics上传的图片临时路径(对象)pics_id:图片 ID,goods_id:商品 ID,pics_big:大图,pics_mid:中图,pics_sma:小图
    attrs商品的参数(数组)goods_id:商品 ID,attr_value:当前商品的参数值,add_price:浮动价格,attr_vals:预定义的参数值,attr_sel:手动输入,还是单选,
    • 响应数据
    {
        "data": {
            "goods_id": 145,
            "goods_name": "test_goods_name2",
            "goods_price": 20,
            "goods_number": 30,
            "goods_weight": 40,
            "goods_introduce": "abc",
            "goods_big_logo": "",
            "goods_small_logo": "",
            "goods_state": 1,
            "add_time": 1512962370,
            "upd_time": 1512962370,
            "hot_mumber": 0,
            "is_promote": false,
            "pics": [
                {
                    "pics_id": 397,
                    "goods_id": 145,
                    "pics_big": "uploads/goodspics/big_30f08d52c551ecb447277eae232304b8",
                    "pics_mid": "uploads/goodspics/mid_30f08d52c551ecb447277eae232304b8",
                    "pics_sma": "uploads/goodspics/sma_30f08d52c551ecb447277eae232304b8"
                }
            ],
            "attrs": [
                {
                    "goods_id": 145,
                    "attr_id": 15,
                    "attr_value": "ddd",
                    "add_price": null,
                    "attr_name": "fffffff",
                    "attr_sel": "many",
                    "attr_write": "list",
                    "attr_vals": ""
                },
                {
                    "goods_id": 145,
                    "attr_id": 15,
                    "attr_value": "eee",
                    "add_price": null,
                    "attr_name": "fffffff",
                    "attr_sel": "many",
                    "attr_write": "list",
                    "attr_vals": ""
                }
            ]
        },
        "meta": {
            "msg": "创建商品成功",
            "status": 201
        }
    }
    

    1.8.5. 删除商品

    • 请求路径:goods/:id
    • 请求方法:delete
    • 请求参数
    参数名参数说明备注
    id商品 ID不能为空携带在url中
    • 响应数据
    {
        "data": null,
        "meta": {
            "msg": "删除成功",
            "status": 200
        }
    }
    

    ###同步商品图片

    • 请求路径:goods/:id/pics
    • 请求方法:put
    • 请求参数
    参数名参数说明备注
    id商品 ID不能为空携带在url中
    pics商品图片集合如果有 pics_id 字段会保留该图片,如果没有 pics_id 但是有 pic 字段就会新生成图片数据
    • 请求数据
    ;[
      { pic: 'tmp_uploads/db28f6316835836e97653b5c75e418be.png' },
      {
        pics_id: 397,
        goods_id: 145,
        pics_big: 'uploads/goodspics/big_30f08d52c551ecb447277eae232304b8',
        pics_mid: 'uploads/goodspics/mid_30f08d52c551ecb447277eae232304b8',
        pics_sma: 'uploads/goodspics/sma_30f08d52c551ecb447277eae232304b8'
      }
    ]
    
    • 响应数据
    {
        "data": {
            "goods_id": 96,
            "goods_name": "iphoneXX",
            "goods_price": 2,
            "goods_number": 22,
            "goods_weight": 22,
            "goods_introduce": null,
            "goods_big_logo": "./uploads/goods/20171113/483a3b8e99e534ec3e4312dbbaee7c9d.jpg",
            "goods_small_logo": "./uploads/goods/20171113/small_483a3b8e99e534ec3e4312dbbaee7c9d.jpg",
            "goods_state": 0,
            "is_del": "1",
            "add_time": 1510045904,
            "upd_time": 1512635159,
            "delete_time": 1512635159,
            "hot_mumber": 0,
            "is_promote": false,
            "pics": [
                {
                    "pics_id": 383,
                    "goods_id": 96,
                    "pics_big": "uploads/goodspics/big_6f5750132abd3f5b2b93dd722fcde653.jpg",
                    "pics_mid": "uploads/goodspics/mid_6f5750132abd3f5b2b93dd722fcde653.jpg",
                    "pics_sma": "uploads/goodspics/sma_6f5750132abd3f5b2b93dd722fcde653.jpg"
                }
            ],
            "attrs": [
                {
                    "goods_id": 96,
                    "attr_id": 15,
                    "attr_value": "eee",
                    "add_price": null,
                    "attr_name": "fffffff",
                    "attr_sel": "many",
                    "attr_write": "list",
                    "attr_vals": ""
                },
                {
                    "goods_id": 96,
                    "attr_id": 15,
                    "attr_value": "ddd",
                    "add_price": null,
                    "attr_name": "fffffff",
                    "attr_sel": "many",
                    "attr_write": "list",
                    "attr_vals": ""
                }
            ]
        },
        "meta": {
            "msg": "更新成功",
            "status": 200
        }
    }
    

    ###同步商品属性

    • 请求路径:goods/:id/attributes
    • 请求方法:put
    • 请求参数
    参数名参数说明备注
    id商品 ID不能为空携带在url中
    • 请求数据
    ;[
      {
        attr_id: 15,
        attr_value: 'ddd'
      },
      {
        attr_id: 15,
        attr_value: 'eee'
      }
    ]
    
    • 响应数据
    {
        "data": {
            "goods_id": 96,
            "goods_name": "iphoneXX",
            "goods_price": 2,
            "goods_number": 22,
            "goods_weight": 22,
            "goods_introduce": null,
            "goods_big_logo": "./uploads/goods/20171113/483a3b8e99e534ec3e4312dbbaee7c9d.jpg",
            "goods_small_logo": "./uploads/goods/20171113/small_483a3b8e99e534ec3e4312dbbaee7c9d.jpg",
            "goods_state": 0,
            "is_del": "1",
            "add_time": 1510045904,
            "upd_time": 1512635159,
            "delete_time": 1512635159,
            "hot_mumber": 0,
            "is_promote": false,
            "pics": [
                {
                    "pics_id": 383,
                    "goods_id": 96,
                    "pics_big": "uploads/goodspics/big_6f5750132abd3f5b2b93dd722fcde653.jpg",
                    "pics_mid": "uploads/goodspics/mid_6f5750132abd3f5b2b93dd722fcde653.jpg",
                    "pics_sma": "uploads/goodspics/sma_6f5750132abd3f5b2b93dd722fcde653.jpg"
                }
            ],
            "attrs": [
                {
                    "goods_id": 96,
                    "attr_id": 15,
                    "attr_value": "eee",
                    "add_price": null,
                    "attr_name": "fffffff",
                    "attr_sel": "many",
                    "attr_write": "list",
                    "attr_vals": ""
                },
                {
                    "goods_id": 96,
                    "attr_id": 15,
                    "attr_value": "ddd",
                    "add_price": null,
                    "attr_name": "fffffff",
                    "attr_sel": "many",
                    "attr_write": "list",
                    "attr_vals": ""
                }
            ]
        },
        "meta": {
            "msg": "更新成功",
            "status": 200
        }
    }
    

    ###商品图片处理必须安装 GraphicsMagick

    • linux
    apt-get install GraphicsMagick
    
    • Mac OS X
    brew install GraphicsMagick
    

    1.9. 图片上传

    • 请求路径:upload
    • 请求方法:post
    • 请求参数
    参数名参数说明备注
    file上传文件
    • 响应数据
    {
        "data": {
            "tmp_path": "tmp_uploads/ccfc5179a914e94506bcbb7377e8985f.png",
            "url": "http://127.0.0.1:8888tmp_uploads/ccfc5179a914e94506bcbb7377e8985f.png"
        },
        "meta": {
            "msg": "上传成功",
            "status": 200
        }
    }
    

    1.10. 订单管理

    1.10.1. 订单数据列表

    • 请求路径:orders
    • 请求方法:get
    • 请求参数
    参数名参数说明备注
    query查询参数可以为空
    pagenum当前页码不能为空
    pagesize每页显示条数不能为空
    user_id用户 ID可以为空
    pay_status支付状态可以为空
    is_send是否发货可以为空
    order_fapiao_title[‘个人’,‘公司’]可以为空
    order_fapiao_company公司名称可以为空
    order_fapiao_content发票内容可以为空
    consignee_addr发货地址可以为空
    • 响应数据
    {
        "data": {
            "total": 1,
            "pagenum": "1",
            "goods": [
                {
                    "order_id": 47,
                    "user_id": 133,
                    "order_number": "itcast-59e7502d7993d",
                    "order_price": 322,
                    "order_pay": "1",
                    "is_send": "是",
                    "trade_no": "",
                    "order_fapiao_title": "个人",
                    "order_fapiao_company": "",
                    "order_fapiao_content": "办公用品",
                    "consignee_addr": "a:7:{s:6:\"cgn_id\";i:1;s:7:\"user_id\";i:133;s:8:\"cgn_name\";s:9:\"王二柱\";s:11:\"cgn_address\";s:51:\"北京市海淀区苏州街长远天地大厦305室\";s:7:\"cgn_tel\";s:11:\"13566771298\";s:8:\"cgn_code\";s:6:\"306810\";s:11:\"delete_time\";N;}",
                    "pay_status": "1",
                    "create_time": 1508331565,
                    "update_time": 1508331565
                }
            ]
        },
        "meta": {
            "msg": "获取成功",
            "status": 200
        }
    }
    

    1.10.2. 修改订单状态

    • 请求路径:orders/:id
    • 请求方法:put
    • 请求参数
    参数名参数说明备注
    id订单 ID不能为空携带在url中
    is_send订单是否发货1:已经发货,0:未发货
    order_pay订单支付支付方式 0 未支付 1 支付宝 2 微信 3 银行卡
    order_price订单价格
    order_number订单数量
    pay_status支付状态订单状态: 0 未付款、1 已付款
    • 请求数据说明
      • 所有请求数据都是增量更新,如果参数不填写,就不会更新该字段
    • 响应数据
    {
        "data": {
            "order_id": 67,
            "user_id": 1,
            "order_number": "itcast-g7kmck71vjaujfgoi",
            "order_price": 20,
            "order_pay": "0",
            "is_send": "否",
            "trade_no": "",
            "order_fapiao_title": "个人",
            "order_fapiao_company": "",
            "order_fapiao_content": "",
            "consignee_addr": "",
            "pay_status": "0",
            "create_time": 1512533560,
            "update_time": 1512533560,
            "goods": [
                {
                    "id": 82,
                    "order_id": 67,
                    "goods_id": 96,
                    "goods_price": 333,
                    "goods_number": 2,
                    "goods_total_price": 999
                },
                {
                    "id": 83,
                    "order_id": 67,
                    "goods_id": 95,
                    "goods_price": 666,
                    "goods_number": 5,
                    "goods_total_price": 999
                }
            ]
        },
        "meta": {
            "msg": "获取成功",
            "status": 200
        }
    }
    

    1.10.3. 查看订单详情

    • 请求路径:orders/:id
    • 请求方法:get
    • 请求参数
    参数名参数说明备注
    id订单 ID不能为空携带在url中
    • 响应数据
    {
        "data": {
            "order_id": 67,
            "user_id": 1,
            "order_number": "itcast-g7kmck71vjaujfgoi",
            "order_price": 20,
            "order_pay": "0",
            "is_send": "否",
            "trade_no": "",
            "order_fapiao_title": "个人",
            "order_fapiao_company": "",
            "order_fapiao_content": "",
            "consignee_addr": "",
            "pay_status": "0",
            "create_time": 1512533560,
            "update_time": 1512533560,
            "goods": [
                {
                    "id": 82,
                    "order_id": 67,
                    "goods_id": 96,
                    "goods_price": 333,
                    "goods_number": 2,
                    "goods_total_price": 999
                },
                {
                    "id": 83,
                    "order_id": 67,
                    "goods_id": 95,
                    "goods_price": 666,
                    "goods_number": 5,
                    "goods_total_price": 999
                }
            ]
        },
        "meta": {
            "msg": "获取成功",
            "status": 200
        }
    }
    

    1.10.4. 修改地址

    1. 省市区/县联动效果 - 结合ElementUI的 el-cascader 组件

    1.10.5. 查看物流信息

    • 请求路径:/kuaidi/:id

    • 请求方法:get

    • 供测试的物流单号:1106975712662

    • 响应数据:

      {
        "data": [
          {
            "time": "2018-05-10 09:39:00",
            "ftime": "2018-05-10 09:39:00",
            "context": "已签收,感谢使用顺丰,期待再次为您服务",
            "location": ""
          },
          {
            "time": "2018-05-10 08:23:00",
            "ftime": "2018-05-10 08:23:00",
            "context": "[北京市]北京海淀育新小区营业点派件员 顺丰速运 95338正在为您派件",
            "location": ""
          },
          {
            "time": "2018-05-10 07:32:00",
            "ftime": "2018-05-10 07:32:00",
            "context": "快件到达 [北京海淀育新小区营业点]",
            "location": ""
          },
          {
            "time": "2018-05-10 02:03:00",
            "ftime": "2018-05-10 02:03:00",
            "context": "快件在[北京顺义集散中心]已装车,准备发往 [北京海淀育新小区营业点]",
            "location": ""
          },
          {
            "time": "2018-05-09 23:05:00",
            "ftime": "2018-05-09 23:05:00",
            "context": "快件到达 [北京顺义集散中心]",
            "location": ""
          },
          {
            "time": "2018-05-09 21:21:00",
            "ftime": "2018-05-09 21:21:00",
            "context": "快件在[北京宝胜营业点]已装车,准备发往 [北京顺义集散中心]",
            "location": ""
          },
          {
            "time": "2018-05-09 13:07:00",
            "ftime": "2018-05-09 13:07:00",
            "context": "顺丰速运 已收取快件",
            "location": ""
          },
          {
            "time": "2018-05-09 12:25:03",
            "ftime": "2018-05-09 12:25:03",
            "context": "卖家发货",
            "location": ""
          },
          {
            "time": "2018-05-09 12:22:24",
            "ftime": "2018-05-09 12:22:24",
            "context": "您的订单将由HLA(北京海淀区清河中街店)门店安排发货。",
            "location": ""
          },
          {
            "time": "2018-05-08 21:36:04",
            "ftime": "2018-05-08 21:36:04",
            "context": "商品已经下单",
            "location": ""
          }
        ],
        "meta": { "status": 200, "message": "获取物流信息成功!" }
      }
      
      

    1.11. 数据统计

    1.11.1. 基于时间统计的折线图

    • 请求路径:reports/type/1

    • 请求方法:get

    • 响应数据

    • 需要合并的选项

      options: {
              title: {
                text: '用户来源'
              },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'cross',
                  label: {
                    backgroundColor: '#E9EEF3'
                  }
                }
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              xAxis: [
                {
                  boundaryGap: false
                }
              ],
              yAxis: [
                {
                  type: 'value'
                }
              ]
            }
      
    展开全文
  • 使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生。 官方文档: https://router.vuejs.org/zh-cn/essentials/getting-started.html ...
  • Vue 3 开发文档

    千次阅读 多人点赞 2020-07-28 19:49:31
    本博客会长期更新(在 Vue 的中文官方文档没有发布前)。 博客的边界:本博客只会带来 Vue 3 新增内容的整理文档(经过验证的) 重点内容: Vite Composition API 新的响应式机制 计算属性和侦听器 利用 vite ...
  • Vue2.x开发实战

    2018-05-11 16:04:03
    vue是一套用于构建用户界面的渐进式框架;本书适用于小白、前端开发及有相关专业人士
  • 零基础学习vue文档详解

    千次阅读 2018-09-26 18:27:44
    vue init webpack vue-project //vue-project项目名称 启动项目 npm run dev 2.3. vue-cli项目解释 src目录 - assets: 存放静态资源,比如图片 - components: 存放组件 - router/index.js 配...
  • 这篇文章本身就是按照官方的文档中的构建流程来的(官方构建建议)。一下是构建过程。 一、 安装 node.js 首先需要安装node环境,可以直接到中文官网http://nodejs.cn/下载安装包。 安装完成后,可以命令行工具中...
  • vue电商实战项目

    万次阅读 多人点赞 2020-03-12 21:10:10
    最近想把vue项目练练手,然后就在网上找了一个视频教程,跟着别人老师把项目做了一遍,做完后收获还是很大的,和那个老师不一样的是,他那上面的一些组件都是自己封装的,比如,那些轮播图,tab导航栏,toast提示框...
  • 2021最详细SpringBoot+Vue前后端分离项目实战-在线智能办公系统-云E办,运用Springboot、Vue全家桶、Spring Security、JWT令牌、Redis完成一个前后端分离项目
  • 08.后台项目的环境安装配置_ 导入数据库后mydb为空的问题 解决方案,在phpstudy/MySQL/my.ini,把里面的...有些同学的rutor与视频中的位的不同,改成与视频一致,然后再vue ui 面板中重新启动即可 安装less之后还出现
  • Vue.js 前端开发实战 课程教学大纲 课程英文名称 课程编号 学 分学分 学 时82 学时 其中讲课学时42 上机学时40 先修课程计算机基础计算机网络HTMLCSSJavaScript 适用专业信息技术及其计算机相关专业 开课部门计算机...
  • Vue实战项目开发--vue基础精讲

    千次阅读 2018-06-08 22:29:08
    项目的源代码在GitHub上:点击查看Vue实例vue的每一个组件都是一个实例,该实例对应着很多属性和方法。&lt;!DOCTYPE html&gt; &lt;html lang="...Vue实例&lt;/title&gt; &lt;scr
  • 项目描述 : 1) 此项目为外卖 Web App (SPA) 2) 包括商家, 商品, 购物车, 用户等多个子模块 3) 使用 Vue 全家桶+ES6+Webpack 等前端最新最热的技术 4) 采用模块化、组件化、工程化的模式开发
  • Vue基础篇四:Vue的生命周期(秒杀案例实战Vue基础篇五:Vue的指令 Vue基础篇六:Vue使用JSX进行动态渲染 Vue提高篇一:使用Vuex进行状态管理 Vue提高篇二:使用vue-router实现静态路由 Vue提高篇三:使用vue-...
  • vue实战

    2021-02-02 19:42:08
    vue实战 1.项目概述 1.功能模块 电商后台管理系统大致可以分为以下几个功能模块: 用户登录,退出登录 用户管理 权限管理 角色列表 权限列表 商品管理 商品列表 分类列表 参数管理 订单管理 数据管理 2.开发...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,347
精华内容 3,738
关键字:

vue实战文档下载

vue 订阅