做直播的网站有哪些,营销网站制作方案,快速的网站设计制作,小程序制作价格文章目录 一#xff0c;准备工作1#xff0c;新增一级菜单2#xff0c;新增二级菜单 二#xff0c;前端树形界面开发1#xff0c;开发分类展示组件 三#xff0c;远程调用接口获取商品分类数据1#xff0c;远程调用2#xff0c;路由配置 错误记录 本节的主要内容#… 文章目录 一准备工作1新增一级菜单2新增二级菜单 二前端树形界面开发1开发分类展示组件 三远程调用接口获取商品分类数据1远程调用2路由配置 错误记录 本节的主要内容 前端调用三级分类接口并树形展示
一准备工作
启动product服务启动renren-fast后台服务启动renren-fast-vue服务创建商品系统菜单
1新增一级菜单
在左侧菜单栏创建商品系统菜单这是renren-fast自带的功能我们在页面上操作即可。 点击确定后刷新页面可以看到左侧多了一个一级菜单。 2新增二级菜单
在商品系统下新增商品分类二级菜单。 注意上级菜单一定要选择上一步创建的“商品系统”。 二前端树形界面开发
要用原生的js和html开发一个树形展示界面是非常有挑战性的但使用Vue和ElementUI可以大大加速在几分钟内完成开发。
1开发分类展示组件
①
在renren-fast-vue前端工程中src-views-modules下新建文件夹product然后在product文件夹下新建category.vue文件。 使用我们之前配置vue模板快速插入代码。
② 在ElementUI文档中找到树形控件复制代码。 完整代码
templateel-tree:datadata:propsdefaultPropsnode-clickhandleNodeClick/el-tree
/templatescript
export default {components: {},props: {},data () {return {data: [{label: 一级 1,children: [{label: 二级 1-1,children: [{label: 三级 1-1-1}]}]}],defaultProps: {children: children,label: label,},}},methods: {handleNodeClick (data) {console.log(data)},},
}
/script
style scoped
/style③
点击菜单商品分类就可以看到三级菜单了。 三远程调用接口获取商品分类数据
1远程调用
分类数据存储在数据库中前端要调用接口获取数据后才能展示在页面上。
在category.vue的脚本中新增方法getDataList
methods: {handleNodeClick (data) {console.log(data)},// 获取分类数据getDataList () {this.dataListLoading truethis.$http({url: this.$http.adornUrl(/product/category/list/tree),method: get}).then(({data}) {console.log(data)this.dataListLoading false})}},在生命周期方法中调用这个方法。
created() {this.getDataList() // 获取分类数据
}2路由配置
前端所有请求都通过网关转发给后台服务所以要做两件事
前端的url要配置网关的IP和端口 网关要配置路由策略将请求转发到响应的服务。 - id: admin_routeuri: lb://renren-fastpredicates:- Path/api/**filters:- RewritePath/api/(?segment.*),/renren-fast/$\{segment}错误记录
这一节出现了很多包依赖相关的错误记录在此谷粒商城实战笔记-包依赖踩坑。
