使用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 相关文章推荐
select 控制网页内容隐藏于显示的实现代码
May 25 Javascript
随鼠标上下滚动的jquery代码
Dec 05 Javascript
将list转换为json失败的原因
Dec 17 Javascript
详解Jquery实现ready和bind事件
Apr 14 Javascript
Bootstrap3制作图片轮播效果
May 12 Javascript
详解Angular开发中的登陆与身份验证
Jul 27 Javascript
Angularjs中使用轮播图指令swiper
May 30 Javascript
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
一些手写JavaScript常用的函数汇总
Apr 16 Javascript
vue实现页面滚动到底部刷新
Aug 16 Javascript
AngularJS动态生成select下拉框的方法实例
Nov 17 Javascript
解决vue自定义指令导致的内存泄漏问题
Aug 04 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
一段php加密解密的代码
2007/07/16 PHP
PHP无限分类代码,支持数组格式化、直接输出菜单两种方式
2011/05/18 PHP
php调用shell的方法
2014/11/05 PHP
php使用正则验证中文
2016/04/06 PHP
微信自定义菜单的创建/查询/取消php示例代码
2016/08/05 PHP
Laravel如何创建服务器提供者实例代码
2019/04/15 PHP
关于Curl在Swoole协程中的解决方案详析
2019/09/12 PHP
图片自动缩小 点击放大
2008/07/07 Javascript
Javascript在IE或Firefox下获取鼠标位置的代码
2009/12/18 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
2015/03/05 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
2015/06/05 Javascript
js和jQuery设置Opacity半透明 兼容IE6
2016/05/24 Javascript
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
解决eclipse中没有js代码提示的问题
2018/10/10 Javascript
详解微信小程序之一键复制到剪切板
2019/04/24 Javascript
微信小程序实现时间戳格式转换
2020/07/20 Javascript
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
[44:40]KG vs LGD 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
编写Python CGI脚本的教程
2015/06/29 Python
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
Python实现微信表情包炸群功能
2021/01/28 Python
浅谈css3新单位vw、vh、vmin、vmax的使用详解
2017/12/01 HTML / CSS
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
HTML5边玩边学(1)画布实现方法
2010/09/21 HTML / CSS
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
2012/12/25 HTML / CSS
巴西最大的家具及装饰用品店:Mobly
2017/10/11 全球购物
Boston Proper官网:美国女装品牌
2017/10/30 全球购物
应用电子专业学生的自我评价
2013/10/16 职场文书
机电一体化毕业生求职信
2013/11/02 职场文书
自荐书范文
2013/12/08 职场文书
十八届三中全会学习方案
2014/02/16 职场文书
《特殊的葬礼》教学反思
2014/04/27 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
2014办公室年度工作总结
2014/12/09 职场文书
员工家属慰问信
2015/03/24 职场文书
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS