VUE第十天学习

内容：项目后台功能实现 一、rouer-link标签说明 / 首页 /user 管理员列表页 /user/add 管理员添加页 router-link-active 默认是全包含匹配规则，即path名包含当前的router path开头的router也会被匹配到。 router-link-exact-active 精确匹配规则，只有当前点击的router被匹配 二、商品分类管理 1.添加和修改 接口： 添加：/api/cateadd 详情：/api/cateinfo 修改：/api/cateedit 示例代码： 页面结构 js代码： 2.列表和删除 接口： 列表：/api/catelist 删除：/api/catedel 示例代码： 页面结构 js 三、商品管理 1.商品添加 (1)富文本编辑器（wangeditor） 安装：npm i wangeditor --save 引入： 在需要使用富文本编辑器的页面组件中进行引入 import Editor from 'wangeditor' 使用： (1)添加一个元素，并设置ref属性 (2)在当前组件挂载完成时，进行富文本编辑器的实例化 mounted(){ this.editor = new Editor(this.$refs.editorElem); this.editor.create();//生成富文本编辑器 } 添加监听事件，当富文本框中内容发生变化，实现实时同步 this.editor.customConfig.onchange = (html)=>{ this.ruleForm.desc = html; } 自定义菜单配置 this.editor.customConfig.menus = [ 'head', 'bold', 'italic', 'underline' ] 允许上传本地图片 this.editor.customConfig.uploadImgShowBase64 = true 注意，像菜单配置、和富文本编辑器的其他配置都应该在富文本编辑器创建之前进行设置。 即最后才执行编辑器的创建 this.editor.create(); (2)图片上传 由于图片文件属于资源，不能以普通的对象方式进行提交数据，而是要以表单数据方式进行提交。 给el-upload标签添加on-change属性，并指定一个函数，作用时当用户选择好文件后，可以执行一些业务逻辑代码，比如把图文文件赋值到要提交的数据对象中 changeFile(obj){ this.ruleForm.img = obj.raw } 提交按钮对应的函数中增加如下代码： //包含文件信息的数据，必须是表单 var form = new FormData(); //遍历数据对象，把每一项数据都放到表单中 for(let i in this.ruleForm){ form.append(i,this.ruleForm[i]) } 2.商品修改 图片展示： 增加了一个file-list属性，用来显示上传组件的图片内容 富文本编辑器内容设置 在组件挂载完成生命周期中添加如下内容： this.editor.txt.html('内容') 3.商品展示 商品图片显示： 图片并没有存到vue项目中，而是存到接口项目中了，所以需要在图片地址前添加上接口的域名地址。 四、作业 1.后台数据管理功能实现 2.前台静态页面样式和结构的编写，调用接口实现数据的获取（用户注册、登录）【不限制是否使用ui库，可以再新建一个项目来编写前台项目】 素材：链接: https://pan.baidu.com/s/1jFse46UhqLTUAm4bqKD4Bw 提取码: 576k

本文章由javascript技术分享原创和收集