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

示例代码：

页面结构

<template>
  <div class="app-container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/category' }">分类列表</el-breadcrumb-item>
      <el-breadcrumb-item>分类{{ tip }}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="标题" prop="title">
        <el-input v-model="ruleForm.title"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-switch v-model="ruleForm.status" active-text="启用" inactive-text="禁用"></el-switch>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">{{tip}}</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

js代码：

<script>
export default {
    mounted(){
        if(this.$route.params.cateid){
            this.tip = '修改'
            //如果路由有id参数，则认为是要展示分类信息
            this.axios({
                url:'/api/cateinfo',
                params:{ id : this.$route.params.cateid }
            }).then(res=>{
                this.ruleForm = res.data.data
                this.ruleForm.id = this.ruleForm._id;
                delete this.ruleForm._id;
                delete this.ruleForm.__v;
            })
        }
    },
    data() {
        return {
            tip:"添加",
            ruleForm: {
                title: "",
                status: true
            },
            rules: {
                title: [
                    { required: true, message: "请输入分类名称", trigger: "blur" },
                    { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" }
                ]
            }
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    var url = this.$route.params.cateid ? "/api/cateedit" : "/api/cateadd";
                    this.axios.post(url, this.ruleForm).then(res => {
                        if (res.data.status == 1) {
                        this.$router.push("/category");
                        }else{
                            alert(res.data.info)
                        }
                    });
                } else {
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
};
</script>

2.列表和删除

接口：

列表：/api/catelist

删除：/api/catedel

示例代码：

页面结构

<template>
    <div class="app-container">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>分类列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-button type="primary" @click="()=>$router.push('/category/add')">添加</el-button>
        <el-table 
            :data="tableData" style="width: 100%"
            stripe
            border
        >
            <el-table-column
                prop="_id"
                label="编号"
                width="180">
                <template slot-scope="scope">
                    {{ scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column
                prop="title"
                label="标题"
                width="180">
            </el-table-column>
            <el-table-column
                prop="status"
                label="状态"
                width="180">
                <template slot-scope="scope">
                    <el-tag size="medium">{{ scope.row.status ?  '启用' : '禁用'}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">详情</el-button>
                <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

js

<script>
export default {
    data(){
        return{
            tableData:[]
        }
    },
    methods: {
        handleEdit(index, row) {
            //跳转到详情页面
            this.$router.push('/category/'+row._id)
        },
        handleDelete(index, row) {
            this.axios({
                method:'post',//method默认是get
                url:'/api/catedel',//请求地址
                data:{ id:row._id }
            }).then(res=>{
                this.tableData.splice(index,1)
            })
        }
    },
    mounted(){
        this.axios({
            url:'/api/catelist'
        }).then(res=>{
            this.tableData = res.data.data
        })
    }
}
</script>

三、商品管理

1.商品添加

(1)富文本编辑器（wangeditor）

安装：npm i wangeditor --save

引入：

在需要使用富文本编辑器的页面组件中进行引入

import Editor from 'wangeditor'

使用：

(1)添加一个元素，并设置ref属性

<div ref="editorElem"></div>

(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属性，并指定一个函数，作用时当用户选择好文件后，可以执行一些业务逻辑代码，比如把图文文件赋值到要提交的数据对象中

<el-upload
    action="#"
    list-type="picture-card"
    :auto-upload="false"
    :multiple="false"
    :on-change="changeFile"
>

<!-- 自定义函数 -->

changeFile(obj){
     this.ruleForm.img = obj.raw
}

提交按钮对应的函数中增加如下代码：

//包含文件信息的数据，必须是表单
var form = new FormData();
//遍历数据对象，把每一项数据都放到表单中
for(let i in this.ruleForm){
     form.append(i,this.ruleForm[i])
}

2.商品修改

图片展示：

<el-upload
    action="#"
    list-type="picture-card"
    :auto-upload="false"
    :multiple="false"
    :on-change="changeFile"
    :file-list="imgArr"
>

增加了一个file-list属性，用来显示上传组件的图片内容

富文本编辑器内容设置

在组件挂载完成生命周期中添加如下内容：

this.editor.txt.html('内容')

3.商品展示

商品图片显示：

 <el-table-column
                prop="img"
                label="图片"
                width="180">
                <template slot-scope="scope">
                    <img style="width:100px;height:100px;" :src="'http://localhost:3000'+scope.row.img">
                </template>
            </el-table-column>

图片并没有存到vue项目中，而是存到接口项目中了，所以需要在图片地址前添加上接口的域名地址。

四、作业

1.后台数据管理功能实现

2.前台静态页面样式和结构的编写，调用接口实现数据的获取（用户注册、登录）【不限制是否使用ui库，可以再新建一个项目来编写前台项目】
素材：链接: https://pan.baidu.com/s/1jFse46UhqLTUAm4bqKD4Bw 提取码: 576k