使用vue如何构建一个自动建站项目


Posted in Javascript onFebruary 05, 2018

写在前面

之前一直用Jquery+Jquery-ui来做这个项目,那个时候没有设计稿,没有项目需求,就因为BOSS一句话,要做这样的东西,当时就...好吧!我承认,其实已经习惯了,无所谓了(也是无奈,哎)!!!

在之后的一段时间里,做了一个demo出来,BOSS很满意了,所以自己接下来就慢慢做吧,差不多两三个月吧,就闷头做这个,后来项目上线了,当然因为产品的不完善,还是有点问题了!

不过基本能满足公司的需求了,能编辑的都可以编辑,组件的background(包括背景图片) color border box-shadow margin padding width height 对齐方式(字体和组件内部元素) border-radius font(font-size/font-family)等等这些基础的都可以随心变更,当然考虑到可能满足不了公司的使用,就加了一个自定义样式的功能,而这个只有懂前端的人才能使用了,没办法,需求永远赶不上变化,这样保险一点。因为大家都知道,需求的满足和变更永远跑在现成需求的前面

除了这些基础的可更改,各个组件的特有可变更的功能也基本齐全的,比如轮播图图片变更,轮播方式,控制是否轮播等等这些功能,这里就不一一介绍了

包括后来,因为有组件内部个别元素不能修改,又增加了[绑定修改]功能,就是这个功能选中之后,在视图界面,选中需要修改的元素,便可以进行修改了,这个功能还是有点意思的

说了这么多,其实当时因为做的仓促,存储的时候存的是HTML,大家不要鄙视(要脸0.0),这个也是我心里一直的梗,最近加上BOSS重新提出了一些想法,有蛮多东西要加,思前想后,决定将项目重构一下

考虑到vue响应式与基本是纯数据操作,所以决定使用vue重新构建这个项目。

开发准备

1、使用vue-cli,下载下来配置好的东西
2、因为中间牵涉了拖拽生成组件的操作,所以使用了vuedraggable和sortablejs。

安装vuedraggable sortablejs

npm install vuedraggable
npm install sortablejs

项目中我们只需要引入vuedraggable就可以了,牵涉了sortablejs东西的时候,vuedraggable会去自己加载调用sortablejs里面的方法的,这个就不是我们需要关注的(你如果想了解,可以自己去看看);

3、安装vuex,因为里面牵涉到了大量的数据交互,很多组件都需要一些公用的数据,不使用vuex去管理,将会为开发带来更多不必要的麻烦;

安装vuex

npm install --save vuex

4、因为没有设计稿的缘故,所以大胆使用了第三方UI库 element-ui;

element-ui官网地址

安装elememt

npm install element-ui
//为什么是element-ui而不是element?因为当时npm上已经有了element包了(我当时还觉得挺有意思的,0.0 好冷啊!!!)

5、axios安装,后面与后台数据交互会用到

安装axios

npm install --save axios

差不多准备工作就这些了,接下来我们看项目实施;

项目开始

1、各种文件的配置

-> main.js中文件的配置

使用vue如何构建一个自动建站项目

图片中都有解释,应该可以看的懂的;

-> 侧边栏拖拽组件数据的配置

使用vue如何构建一个自动建站项目

因为文件太长,所以删掉了一些,这里就是一个简单的格式,仅供参考,不作为标准;

在组件当中,存在一个布局的问题,所以要有布局组件,让组件可以放到布局组建中,这样才更加的灵活

-> vuexjs 状态管理中的js配置

使用vue如何构建一个自动建站项目

说明:

1、因为用户在拖拽之后要实时保存到sessionStorage中, 所以再初始的时候要到sessionStroage中去取数据,防止突然刷新页面,还没有保存到数据库中,用户刚刚编辑的数据全部丢失的情况;
2、这里说明一下,可能考虑到用于已经提交了数据,所以用户关闭窗口之后,再次进来的时候,要结合后台给出的用户之前的数据,一起存储到sessionStorage中去,相信这一点大家肯定想的到的,这里善意提醒一下 0.0;
3、我这这里暂时放了四个参数,图中都有说明,我主要是将基本编辑做成了一个组件,会根据用户点击时哪个组件,而重新渲染数据给到编辑组件,从而可以实时对应到点击的组件去编辑;
4、editShow的作用就是控制编辑组件显示与否的,主要删除组件的时候,让编辑组件隐藏一下;点击其他组件的显示一下;

基本的配置就这些了,接下来就是真正的开发了;

2、项目开发开始

-> app.vue文件中该怎么写?

<template>
 <!--用的element-ui-->
 <el-container>
  <el-aside>
   <Draggable class="app-aside-drag" :options="dragOption">
    <div class="app-aside-list" 
     v-for="(dragList,index) in dragData" 
     :type="dragList.type" 
     :key="dragList.type">
     <div class="aside-item-body">
      <i class="aside-item-ele"></i>
      <span class="aside-item-ele">{{ list.title }}</span>
     </div>
    </div>
   </Draggable>
  <el-aside>
  <el-main class="app-main">
   <section class="app-phone">
    <div class="app-phone-header">
     <span class="phone-camera"></span>
     <span class="phone-ls"></span>
    </div>
    <!--页面view区 -->
    <Sort class="app-phone-body"></Sort>
    <div class="app-phone-footer">
     <button class="app-phone-menu">RS</button>
    </div>
   </section>
  </el-main>
  <el-aside class="app-right">
   <!--组件编辑区域-->
   <BaseEdit></BaseEdit>
  </el-aside>
 </el-container> 
</template>

<script>
import DragApi from "@/dragapi/dragapi.js";
import Draggable from "vuedraggable";
import Sort from "@/view/Sort";
import BaseEdit from "@/view/BaseEdit";

export default {
 name: 'app',
 data(){
  return{
   dragData: {},
   dragOption: {
    group: {
     name: 'components', //这个很重要,其他的与之能产生关联的拖拽框就靠这name 一定要一致
     pull: 'clone', 
     put: false
    },
    sort: false //默然为true。这里我们只需要他拖拽,无需能拖动排序
   }
  }
 },
 components: {
  Draggable,
  Sort,
  BaseEdit
 },
 created(){
  //侧边栏拖拽列表数据
  //这里我只写了组件的数据进来,布局的暂时没放
  this.dragData = DragApi.configList[1].content;
 }
}
</script>

-> 来看看sort view视图区域组件

<template>
 <Draggable :options="sortOption"
  @sort="onSort"
  @add="onAdd"
  class="app-sort">
  <!-- ui组件 -->
  <!--这里不懂的人,可以去vue官网看看动态组件-->
  <div v-for="(appUi,index) in sortApi" //循环组件
    :is="appUi.component" //根据存在的组件渲染出来
    :content="appUi.content"
    :oStyle="appUi.style"
    :editPartShow="appUi.editPartShow"
    :aIndex="index"
    //组件想要点击生效,只需要@click.native就行了
    @click.native="getIndex(index)"
    //key值一定要给出来,不然相同组件的排序可能会不成功
    :key="appUi.content.code">
  </div>
 </Draggable>
</template>
<script>
 //利用vuex 辅助函数来操作vuexjs中的数据
 import { mapState,mapMutations } from 'vuex';
 //拖拽插件引入
 import Draggable from 'vuedraggable';
 //各个组件引入
 import Carousel from "@/components/Carousel.vue";
 import Btn from "@/components/Btn.vue";

 export default {
  name: 'Sort',
  components: {
   Draggable,Btn,Carousel
  },
  data(){
   return {
    sortOption: {
     group: {
      name: 'components', //前面说的name,在这里就起了作用,不一样,是不能放入的
      pull: true,
      put: true
     },
     sort: true,
     animation: 300 //给了个动画,看起来舒服些
    }
   }
  },
  computed:{
   ...mapState(['editIndex','sortApi']),
  },
  watch:{
   sortApi:{
    handler(newVal,oldVal){
     window.sessionStorage.setItem('localData',JSON.stringify(newVal));
    },
    deep: true
   }
  },
  methods:{
   ...mapMutations(['sortCp','addCp','setStyle','setCommon']),
   onSort(res){ //排序产生的事件
    if(res.from === res.to){
     this.sortCp(res);
    }
   },
   onAdd(res){//组件增加产生的事件
    this.addCp(res);
   },
   getIndex(index){
    this.setCommon({index: index,flag: true});
   }
  }
 }
</script>

-> 再来看看编辑组件

<template>
 <transition name="slide-right">
  <div v-if="sortApi.length > 0 && editShow === true">
   //组件特有编辑
   <el-tabs v-model="activeName">
    <el-tab-pane label="组件设置" name="first">
     <div v-for="(appUi,index) in sortApi"
       :is="appUi.component+'Edit'"
       :content="appUi.content"
       :oStyle="appUi.style"
       :editPartShow="appUi.editPartShow"
       :aIndex="index"
       :currentIndex="editIndex"
       :key="appUi.content.code">
     </div>
    </el-tab-pane>
    <el-tab-pane label="样式设置" name="second">
     //公共样式编辑
     <el-collapse v-model="colorPicker.name" class="base-edit" accordion>
      <el-collapse-item class="tititt" :title="colorPicker.type" :name="colorPicker.type">
       <el-form ref="form" :model="colorPicker" size="mini">
        <el-form-item class="cui-inline-reset"
         v-for="(item,index) in colorPicker.content"
         :label="item.title"
         :key="item.style">
         <el-color-picker
          //在element-ui框架中,有很多@change @active-change事件,直接写事件发现不能传入参数,
          //当然,办法总比问题多,我们换成一下这种写法就行了,他的默然参数写在前面
          //这里颜色拾取器 返回的是实时的颜色值
          //我这里主要想传一个对应的style
          @active-change=" (value) => setStyle(value,item.style)"
          v-model="sortApi[editIndex].style[item.style]"
          show-alpha>
         </el-color-picker>
         <span class="black-text-shadow"
          :style="{color: sortApi[editIndex].style[item.style]}">
          {{ sortApi[editIndex].style[item.style] }}
         </span>
        </el-form-item>
       </el-form>
      </el-collapse-item>
     </el-collapse>
    </el-tab-pane>
   </el-tabs>
  </div>
 </transition>
</template>
<script>
 import { mapState,mapMutations } from 'vuex';
 //这里我将组建特有的编辑栏,写成了一个组件,为什么不写在相应的组件一起了?
 //这里必须说明一下,主要是我没有想到方法,让他在同一组件内分离出来,单独将dom结构放在编辑栏这里,如果有大神知道
 //还望不吝赐教
 import BtnEdit from "@/components/BtnEdit.vue";
 
 export default{
  name: 'BaseEdit',
  components: {
   BtnEdit
  },
  data(){
   return{
    colorPicker: {
     type: '颜色设置',
     name: 'Picker',
     content:[
      {
       title: '背景颜色',
       style: 'background'
      },
      {
       title: '字体颜色',
       style: 'color'
      }
     ]
     
    },
    activeName: 'first'
   }
  },
  
  computed:{
   ...mapState(['editIndex','sortApi','editShow'])
  },
  methods:{
   setStyle(value,style){
    //根据上面传入的style属性,实时改变现有的值
    this.$set(this.sortApi[this.editIndex].style,style,value);
   }
  }
 }
</script>

-> 选出一个组件来看看里面是怎么配置的

//按钮组件,其实里面很简单
//组件的对应的编辑组件,里面内容和这个也差不多,下面就不写了
<template>
 <div class="btn-box ui-sortable" :data-code="content.code">
  <el-button class="ui-btn"
   :style="oStyle">
   {{ content.text }}
  </el-button>
  //因为每个组件都有删除功能,所以写成了一个组件
  <DeleteCp :aIndex="aIndex"></DeleteCp>
 </div>
</template>
<script>
 import DeleteCp from "@/components/DeleteCp";
 export default {
  name: 'Btn',
  props: { //父组件传入的参数
   content: Object,
   oStyle: Object,
   aIndex: Number
  },
  components: {
   DeleteCp
  },
  data(){
   return{
    btnModel: 'btn-model'
   }
  }
 }
</script>

->最后来看看删除组件吧

<template>
 <div class="delete-compontent-box">
  <div class="el-icon-delete remove-component" @click.stop="dailogStatu"></div>
  <el-dialog
   title="提示"
   :visible.sync="dialogVisible"
   :append-to-body="appendToBody"
   width="430px">
   <div class="el-message-box__content">
    <div class="el-message-box__status el-icon-warning"></div>
    <div class="el-message-box__message dialog-message">此操作将删除该模块, 是否继续?</div>
   </div>
   <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false" size="small">取 消</el-button>
    <el-button type="primary" @click="onRemove(aIndex)" size="small">确 定</el-button>
   </span>
  </el-dialog>
 </div>
</template>

<script>
 import { mapMutations } from "vuex";
 export default {
  name: 'oText',
  props: {
   aIndex: Number
  },
  data(){
   return{
    //这两个参数是弹框的参数
    dialogVisible: false,
    appendToBody: true 
   }
  },
  methods:{
   ...mapMutations(['deleteCp','setCommon']),
   dailogStatu(){
   //主要是控制弹窗出来,并且显示该组件对应的编辑栏
    this.dialogVisible = true;
    this.setCommon({flag: true,index: this.aIndex})
   },
   onRemove(index){
    //点击确定删除对应的组件
    let flag = false;
    this.deleteCp(index);
    this.dialogVisible = false;
    this.$message({
     message: '该模块已删除 !',
     type: 'success'
    });
    this.setCommon({flag: false,index: 0})
   }
  }
 }
</script>

-> 来看看效果图吧

效果图展示

使用vue如何构建一个自动建站项目

结束语

好了,今天写了很多了,最后我们来梳理一下思路:

1、首先配置左侧的拖拽组件
2、配置vuex中的数据
3、app.vue中配置
4、编辑组件的配置
5、各种数据的传递与依赖

其实每个项目,都需要一个清晰的路线,这样才能很好的开发下去,所以我的建议是,在拿到项目的时候,千万不要一股脑的去写,一定要想好怎么做,以及突发事情的发生(比如突来的需求变更),这样既方便了我们自己,也方便了后来维护的人,也阻止了不必要的麻烦

谢谢大家的耐心的阅读,毕竟这只是一个大概的介绍,肯定存在很多不足,如果大家有建议,欢迎留言交流,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
javascript变量声明实例分析
Apr 25 Javascript
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
利用n工具轻松管理Node.js的版本
Apr 21 Javascript
微信小程序form表单组件示例代码
Jul 15 Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 Javascript
JavaScript时间与时间戳的转换操作实例分析
Dec 07 Javascript
自定义Vue中的v-module双向绑定的实现
Apr 17 Javascript
微信小程序实现拍照画布指定区域生成图片
Jul 18 Javascript
解决ant Design Search无法输入内容的问题
Oct 29 Javascript
jquery插件实现图片悬浮
Apr 16 jQuery
TypeScript实用技巧 Nominal Typing名义类型详解
Sep 23 Javascript
在 webpack 中使用 ECharts的实例详解
Feb 05 #Javascript
在Vue中使用echarts的方法
Feb 05 #Javascript
JavaScript中Object基础内部方法图
Feb 05 #Javascript
基于axios封装fetch方法及调用实例
Feb 05 #Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
Feb 05 #Javascript
JS中Map和ForEach的区别
Feb 05 #Javascript
完美解决axios跨域请求出错的问题
Feb 05 #Javascript
You might like
我常用的几个类
2006/10/09 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
PHP设计模式(八)装饰器模式Decorator实例详解【结构型】
2020/05/02 PHP
srcElement表格样式
2006/09/03 Javascript
响应鼠标变换表格背景或者颜色的代码
2009/03/30 Javascript
jquery EasyUI的formatter格式化函数代码
2011/01/12 Javascript
jquery 仿锚点跳转到页面指定位置的实例
2017/02/14 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
2017/04/21 jQuery
在页面中引入js的两种方法(推荐)
2017/08/29 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
2017/09/19 jQuery
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
Javascript之高级数组API的使用实例
2019/03/08 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
2019/04/04 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
vue自定义指令和动态路由实现权限控制
2020/08/28 Javascript
夯基础之手撕javascript继承详解
2020/11/09 Javascript
python使用urllib模块开发的多线程豆瓣小站mp3下载器
2014/01/16 Python
Python标准库之Sys模块使用详解
2015/05/23 Python
浅谈python字符串方法的简单使用
2016/07/18 Python
Python对List中的元素排序的方法
2018/04/01 Python
Pandas 同元素多列去重的实例
2018/07/03 Python
python如何获取当前文件夹下所有文件名详解
2019/01/25 Python
python中利用matplotlib读取灰度图的例子
2019/12/07 Python
用CSS禁用输入法(CSS3 UI规范)实例解析
2012/12/04 HTML / CSS
活动宣传策划方案
2014/05/23 职场文书
土建工程师岗位职责
2014/06/10 职场文书
领导干部作风建设总结
2014/10/23 职场文书
群众路线个人剖析材料及整改措施
2014/11/04 职场文书
2014年基层党支部工作总结
2014/12/04 职场文书
2016春季幼儿园小班开学寄语
2015/12/03 职场文书
幼师自荐信范文(2016推荐篇)
2016/01/28 职场文书
2016年学校安全教育月活动总结
2016/04/06 职场文书
java调用Restful接口的三种方法
2021/08/23 Java/Android