精华内容
下载资源
问答
  • vue后台管理项目增删改查规范代码
  • Vue后台管理项目踩坑

    2020-03-21 21:38:08
    最近跟着黑马前端视频在做vue后台管理项目。 下面这张图是利用element-ui渲染出来的级联选择器,但是它高度溢出了。 由于element-ui新的版本有一些bug,所以我们需要在全局样式中自定义高度。如下: .el-cascader-...

    最近跟着黑马前端视频在做vue后台管理项目。
    下面这张图是利用element-ui渲染出来的级联选择器,但是它高度溢出了。
    渲染的级联选择器撑满了整个页面高度
    由于element-ui新的版本有一些bug,所以我们需要在全局样式中自定义高度。如下:

    .el-cascader-menu {
      height: 300px;
    }
    

    完美解决。
    在这里插入图片描述

    展开全文
  • vue后台管理项目开发流程

    千次阅读 2019-05-15 10:33:11
    vue后台管理项目开发流程 1. 先拷贝一份其他完整的项目到gitblit上 2. 删除无用的页面、路由、theme.css等,只保留一个空壳,例如:main.css和其他重要的东西 3. 仔细查看设计稿、配色、布局(一点一点看) 4. ...

    vue后台管理项目开发流程

    1. 先拷贝一份其他完整的项目到gitblit上
    
    2. 删除无用的页面、路由、theme.css等,只保留一个空壳,例如:main.css和其他重要的东西
    
    3. 仔细查看设计稿、配色、布局(一点一点看)
    
    4. 创建路由、页面(名字),项目跑起来
    
    5. 找一个具有代表性的页面开始做。写dom布局,提取公共样式、公共组件
    
    6. 开始写页面,注意命名规范,css规范,写完dom,然后自查(检查优雅度、增加删除无用div标签,添加方法,注意方法名规范)
    
    7. 页面书写过程中注意提取公共样式,注意复用性,一直到最后一个页面
    
    8. 页面写完,自查以后,交给上级进行代码审查。
    
    展开全文
  • Ant Design Vue 后台管理项目总结父组件调用子组件(Modal为例)接口调用插槽的使用ES6中规范写法ES6箭头函数修改数据之后的refresh数据重置时间格式 (moment文档)在一个界面打开另一个界面(路由)上传图片的功能...

    父组件调用子组件(Modal为例)

    (1)在父组件中引入 子组件(addNoticeBoard.vue)

    import addNoticeBoard from './module/addNoticeBoard'
    

    (2)在export default 中的component中注册 addNoticeBoard
    (3)在父组件< div >中添加组件标签< add-notice-board ref=“add”>< /add-notice-board >
    (4)在父组件的点击按钮方法中

    submit(){
        this.refs.add.showModal()
    }
    

    (5)在子组件中

    method:{
        showModal(record){}
    }
    

    record时传入的参数,来自插槽

    子组件调用父组件refreh绑定的方法

    this.$emit("refresh")
    

    父组件

    <add-notic-board @refresh="handleOk" ref="add"></add-notic-board>
    

    接口调用

    (1)数据封装,调用接口

    data(){
       form: { title: '', id: '', status: 1, content: '' }
    }
     this.$api.marketingManage.noticeEdit(this.form).then(res => {
            if (res.status == 'ok') {
              this.$message.success(res.message.message)
              this.$emit('refresh')
            } else {
              this.$message.error(res.message.message)
            }
          })
    

    插槽的使用

    (1)在columns中 声明

      {
              title: '上架状态',
              dataIndex: 'status',
              width: 120,
              scopedSlots: { customRender: 'status' }
            },
    

    (2)在< table >中使用< template >

            <template
              slot="status"
              slot-scope="text"
            >
              <a-badge :status="text == 1 ? 'processing' : 'default'" />
              <span>{{ statusMap[text] }} </span>
            </template>
    

    在slot-scope=“text,record”中,第一个参数为当前项的值,第二个参数为整行数据的值。

     <a-badge :status="text == 1 ? 'processing' : 'default'" />
    

    a-badge是antD中的徽标数样式

    ES6中规范写法

    例子:’ 是否 ${text}该公告 `

    (最好查看ES6官方文档)

    ES6箭头函数

    // 正常函数写法
    var result = values.sort(function (a, b) {
      return a - b;
    });
    
    // 箭头函数写法
    var result = values.sort((a, b) => a - b);
    

    ①调用方法中调用接口用到this的 方法要改为箭头函数

    OnOk:()=>{
    ...//代码块
    }
    

    ②在Data中声明的要用this引用

    修改数据之后的refresh

    handleOK(bool=false){
    this.refs.table.refresh(bool)
    }
    

    refresh()是页面更新的方法

    数据重置

    handleReset(){
    this.form.resetFields()
    //赋值语句
     const { package_name, image, author, heat, sort, status, count, rank_id } = this.record
     this.form = { package_name, image, author, heat, sort, status, count, rank_id }
    }
    

    时间格式 (moment文档)

    {
              title: '更新时间',
              dataIndex: 'gmt_modified',
              customRender: record => this.$moment.unix(record).format('YYYY-MM-DD HH:mm:ss'),
              width: 120
            },
    

    在一个界面打开另一个界面(路由)

    <a-button @click="showConfirm(record)">查看榜单内容</a-button>
    
        showConfirm (record) {
          this.$router.push({
            name: 'rankListDetail',
            params: {
              rank_id: record.id
            }
          })
        }
    

    获取路由网址id值

    handleReset () {
          this.form.resetFields()
          this.queryParam = {
            name: '',
            user_id: this.$route.params.id,
            time: this.$route.query.time
          }
    

    上传图片的功能

    (1)引入外部文件

    <script>
    import UploadImage from '../../../components/UploadImage'
    </script>
    

    (2)在Data中声明

      components: {
        UploadImage
      },
    

    (3)使用组件

    <div>
              <a-form-item label="素材封面">
                <upload-image
                  ref="image"
                  @fnUploadSuccess="fnUploadSuccess"
                  filed="image"
                  :defaultFileList="defaultFileList"
                  v-decorator="[
                    'image',
                    {
                      initialValue: constv.QINIU_IMAGE_CND_URL+form.image
                    }
                  ]"
                ></upload-image>
              </a-form-item>
            </div> 
    

    (4)在UploadImage 中的index.vue上传图片的方法中

    //成功是返回
    this.$emit("fnUploadSuccess",this.field,res.key)
    

    (5)在组件方法中接收参数

    fnUploadSuccess (filed, key) {
          this.form.image = key
        },
    

    上传图片问题-展示默认图片

    (1)在UploadImage 中的index.vue中,有一个对象(数组)

    defaultFileList:{
    		type:array,
    		default:()=>[ ]
    },
    

    (2)在生命周期函数中接收

    created(){}
    	this.filelist=this.defaultFileList
    

    声明数组

    	defaultFileList: [],
    

    (3)在使用的组件中接收

    	:defaultFileList="defaultFileList"
    

    (4)在新增、编辑的判断那赋值

    this.defaultFileList = [{
              uid: record.id,
              name: record.image,
              status: 'done',
              // url: this.constv.QINIU_IMAGE_CND_URL + record.image
              url: record.image
            }]
    

    图片上传问题–不同id对应不同image

    <a-modal
          v-model="visible"
          :title="`${isEdit == true ? '编辑' : '新增'}素材包`"
          :footer="null"
          :destroyOnClose="true"
        >
    

    ==:destroyOnClose=“true”==Modal中的API,作用:销毁Modal中的子元素。

    github 提交

    github提交规范

    在这里插入图片描述

    github命令行提交代码

    ① git status
    ②git add .
    ③git commit -m “(修改名称)”

    github创建分支

    命令:git checkout -b 分支名称

    查看当前所有命令

    命令:git branch

    js实体文本转纯文本方法

     entityToString (entity) {
          var div = document.createElement('div')
          div.innerHTML = entity
          var res = div.innerText || div.textContent
          console.log(entity, '->', res, div.innerHTML)
          return res
        },
    

    antD表单绑定和校验规则

    (1)榜单绑定
    (2)校验规则

    <a-form-item label="标题">
            <a-input
              placeholder="请输入标题"
              style="margin:0px auto 20px"
              v-decorator="['title',{rules:[{required: true, message: '请输入标题'}],initialValue: form.title}]"
              @change="titleChange"
            />
          </a-form-item>
    

    正则表达式

    ① 富文本编辑(显示文字前15字,如果有图片则显示【图片】)为例

    <template
              slot="content"
              slot-scope="text"
              style="font-size:small;font-weight:normal !important"
            >
              <p
                v-html="disPlayChange(text)"
                class="content"
                style="font-size:small;font-weight:normal !important"
              > </p>
    
            </template>
    
       disPlayChange: function (val) {
          if (val.indexOf('<img') > -1) {
            return val.replace(/<img[^>]*>/, '[图片]')
          } else {
            return this.entityToString(val).substring(0, 15)
          }
        },
    

    ②正整数

    <div>
              <a-form-item label="前端排序">
                <a-input
                  v-decorator="[
                    'sort',
                    { rules: [ { required: true, message: '请输入前端排序(正整数)' },{initialValue: form.sort}] ,initialValue: form.sort,
                      getValueFromEvent:(event) => {
                        return event.target.value.replace(/^(0+)|[^\d]+/g,'')
                      }},
    
                  ]"
                  placeholder="请输入前端排序"
                />
              </a-form-item>
            </div>
    

    wangEditor富文本编辑器

    富文本编辑器上传图片到七牛

    展开全文
  • vue后台管理项目中修改商品表单信息后,点击更新但是表单无法显示最新商品信息 问题 在商品表单页面修改商品信息之后,点击更新按钮,表单依然显示旧的商品信息,没有展示新商品信息。 原因 当前端分发新商品对象...

    vue后台管理项目中修改商品表单信息后,点击更新但是表单无法显示最新商品信息

    问题

    在商品表单页面修改商品信息之后,点击更新按钮,表单依然显示旧的商品信息,没有展示新商品信息。
    在这里插入图片描述
    在这里插入图片描述

    原因

    当前端分发新商品对象到后端时,后端并没有响应更新好的商品对象,因此在action文件中提交到对应mutation中的商品对象也就是未更新的,导致保存到本地的商品对象也是未更新的,所以我们在表单中看到的还是旧的商品信息。
    在这里插入图片描述
    在这里插入图片描述

    解决方法

    我们应该在action文件中将新的商品对象提交到对应的mutation中,取代使用网络请求响应的数据。
    在这里插入图片描述
    如果本文对你有帮助的话还请点赞支持一下,另外如果哪里有错误的话还请各位大佬指出来,互相学习。

    展开全文
  • 首先在vue可视化管理面板中安装echarts运行依赖。 导入echarts。在使用echarts的组件中导入。 import echarts from 'echarts' 为echarts准备一个具备大小的Dom。 <div id="main" style="width: 600px;height...
  • vue后台管理项目中添加商品时报错:Error in render: “TypeError: Cannot read property ‘_id’ of null” 问题 当在商品后台管理页面中添加商品时,后台报错信息显示无法读取_id属性,如下图所示: 原因 由于...
  • Vue后台管理项目的总结

    千次阅读 多人点赞 2021-06-09 14:33:07
    Vue后台项目的前端总结技术栈:样式:CSS 预处理器的选择:局部样式与全局样式:异步请求:--- 重点封装 Axios:跨域问题:Mock 数据:规则:路由:--- 重点布局三大类:权限验证:1.auth2.permissionsVuex:组件库:过滤...
  • vue后台管理模板

    2018-05-19 13:32:32
    vue后台管理模板
  • vue后台管理项目权限控制开发雏形,使用自定义指令和路由守卫 权限控制 vue后台管理端 博客https://blog.csdn.net/github_35631540/article/details/97674939
  • VUE后台管理系统项目优化 1、生成打包报告 通过可视化的UI面板直接查看报告,在可视化的UI面板中,通过控制台和分析面板,可以方便地看到项目中所存在的问题。 2、 通过 vue.config.js 修改 webpack 的默认配置 默认...
  • 主要介绍了Vue 后台管理项目兼容IE9+的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 前端vue后台管理系统项目优化

    千次阅读 2019-11-12 17:22:46
    1.项目运行一段时间会出现缓存过多,处理办法:this.$destroy(); 在销毁的时候处理: destroyed(){ this.$destroy(); } 2.button按钮不让用户连续点击,点击完后等待2秒,才可以再次点击 处理方法:v-...
  • Vue商场后台管理项目

    千次阅读 2019-07-14 09:02:55
    项目描述:电商后台管理系统用于管理用户账号、商品分类、商品信息、订单、数据统计等业务功能。 技术栈: 前端项目技术栈: Vue Vue-router Element-UI Axios Echarts 后端项目技术栈: NodeJs ...
  • vue后台管理系统.

    2021-01-16 21:19:25
    使用完整的vue框架,构建的一个完整的后台管理系统,功能已经完善。可以快速上手并且学习。
  • 主要介绍了Vue 电商后台管理项目阶段性总结,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 32,403
精华内容 12,961
关键字:

vue后台管理项目

vue 订阅