Comment créer un projet de création automatique de site Web dans vue (tutoriel détaillé)-js tutoriel-php.cn

Cet article présente principalement comment utiliser vue pour créer un projet de création automatique de site Web. Je vais maintenant le partager avec vous et vous donner une référence.

Écrit devant

J'utilise Jquery+Jquery-ui pour réaliser ce projet. À cette époque, il n'y avait aucune ébauche de conception ni aucune exigence de projet. à cause des mots de BOSS, Faire quelque chose comme ça, à ce moment-là... d'accord ! J'avoue, en fait j'y suis habitué, et ça n'a plus d'importance (c'est aussi impuissant, hé) !!!

Après un certain temps, j'ai fait une démo, et BOSS était très satisfait , alors j'ai continué lentement Faisons-le, pendant environ deux ou trois mois, concentrons-nous juste là-dessus. Plus tard, le projet a été lancé. Bien sûr, à cause de l'imperfection du produit, il y avait encore quelques problèmes !

Mais cela peut essentiellement répondre aux besoins de l'entreprise. Tout ce qui peut être modifié peut être modifié. L'arrière-plan du composant (y compris les images d'arrière-plan) la bordure de couleur, la marge d'ombre, la largeur de remplissage, l'alignement de la hauteur (police et interne). éléments du composant) bordure- La police Radius (font-size/font-family) et d'autres éléments de base peuvent être modifiés à volonté. Bien entendu, étant donné qu'elle peut ne pas répondre aux besoins de l'entreprise, une fonction de style personnalisée est ajoutée et. cela ne peut être utilisé que par des personnes qui comprennent le front-end. Non, il n'y a pas d'autre moyen. La demande ne suivra jamais les changements, c'est donc plus sûr. Parce que tout le monde sait que la satisfaction et le changement des besoins précèdent toujours les besoins prêts à l'emploi

En plus de ces changements fondamentaux, les fonctions modifiables uniques de chaque composant sont également fondamentalement complètes, comme les changements d'image du carrousel, les fonctions de le mode carrousel, contrôler s'il faut carrousel, etc. ne sera pas introduit un par un ici

Y compris plus tard, parce que certains éléments du composant ne peuvent pas être modifiés, la fonction [Binding Modification] a été ajoutée, c'est-à-dire Après la fonction est sélectionnée, dans l'interface de visualisation, sélectionnez l'élément qui doit être modifié, et vous pourrez ensuite le modifier Cette fonction est assez intéressante

Cela dit, en fait, car elle a été réalisée en. pressé, ce qui a été enregistré pendant le stockage était du HTML, ne le méprisez pas (honte 0.0), cela a toujours été une blague dans mon cœur. Récemment, BOSS a proposé de nouvelles idées. Après y avoir réfléchi, j'ai décidé de reconstruire le projet

Considérant que vue est réactive et essentiellement de pures opérations de données, nous avons décidé de reconstruire ce projet en utilisant vue.

Préparation du développement

1 Utilisez vue-cli pour télécharger les éléments configurés
2 Parce que l'opération de glisser-déposer de génération de composants est impliquée, donc utilisé. vuedraggable et sortablejs.

Installer vuedraggable sortablejs

npm install vuedraggable
npm install sortablejs

Copier après la connexion

Dans le projet, il suffit d'introduire vuedraggable Lorsque sortablejs est impliqué, vuedraggable chargera et appellera les méthodes dans sortablejs. nous devons y prêter attention (si vous voulez savoir, vous pouvez aller voir par vous-même

3. Installez vuex, car cela implique beaucoup d'interactions de données et de nombreux composants nécessitent des données communes, alors n'utilisez pas vuex Le gérer apportera plus de problèmes inutiles au développement ;

Installer vuex

npm install --save vuex

Copier après la connexion

4 Parce qu'il n'y a pas de brouillon de conception, j'ai audacieusement utilisé une interface utilisateur tierce. library element-ui;

adresse du site officiel d'element-ui

Installer elememt

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

Copier après la connexion

5. Installation d'axios, qui sera utilisée plus tard pour interagir avec les données d'arrière-plan<. 🎜>

Installer axios

npm install --save axios

Copier après la connexion

C'est tous les préparatifs, regardons ensuite la mise en œuvre du projet

Le projet démarre

1 , Configuration de divers fichiers

-> Configuration des fichiers dans main.js

Il y a des explications dans les images, vous devriez pouvoir les lire. Compris

-> Configuration des données des composants de glissement de la barre latérale

Le fichier étant trop long, certains ont été supprimés. . Voici un format simple, pour référence seulement, pas comme standard

Il y a un problème de disposition entre les composants, il doit donc y avoir des composants de disposition pour que les composants puissent être placés dans l'assemblage de disposition, afin que c'est plus flexible

-> configuration js dans la gestion de l'état vuexjs

Instructions :

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">
    <p class="app-aside-list" 
     v-for="(dragList,index) in dragData" 
     :type="dragList.type" 
     :key="dragList.type">
     <p class="aside-item-body">
      <i class="aside-item-ele"></i>
      <span class="aside-item-ele">{{ list.title }}</span>
     </p>
    </p>
   </Draggable>
  <el-aside>
  <el-main class="app-main">
   <section class="app-phone">
    <p class="app-phone-header">
     <span class="phone-camera"></span>
     <span class="phone-ls"></span>
    </p>
    <!--页面view区 -->
    <Sort class="app-phone-body"></Sort>
    <p class="app-phone-footer">
     <button class="app-phone-menu">RS</button>
    </p>
   </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: &#39;app&#39;,
 data(){
  return{
   dragData: {},
   dragOption: {
    group: {
     name: &#39;components&#39;, //这个很重要，其他的与之能产生关联的拖拽框就靠这name 一定要一致
     pull: &#39;clone&#39;, 
     put: false
    },
    sort: false //默然为true。这里我们只需要他拖拽，无需能拖动排序
   }
  }
 },
 components: {
  Draggable,
  Sort,
  BaseEdit
 },
 created(){
  //侧边栏拖拽列表数据
  //这里我只写了组件的数据进来，布局的暂时没放
  this.dragData = DragApi.configList[1].content;
 }
}
</script>

Copier après la connexion

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

<template>
 <Draggable :options="sortOption"
  @sort="onSort"
  @add="onAdd"
  class="app-sort">
  <!-- ui组件 -->
  <!--这里不懂的人，可以去vue官网看看动态组件-->
  <p 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">
  </p>
 </Draggable>
</template>
<script>
 //利用vuex 辅助函数来操作vuexjs中的数据
 import { mapState,mapMutations } from &#39;vuex&#39;;
 //拖拽插件引入
 import Draggable from &#39;vuedraggable&#39;;
 //各个组件引入
 import Carousel from "@/components/Carousel.vue";
 import Btn from "@/components/Btn.vue";

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

Copier après la connexion

-> 再来看看编辑组件

<template>
 <transition name="slide-right">
  <p v-if="sortApi.length > 0 && editShow === true">
   //组件特有编辑
   <el-tabs v-model="activeName">
    <el-tab-pane label="组件设置" name="first">
     <p v-for="(appUi,index) in sortApi"
       :is="appUi.component+&#39;Edit&#39;"
       :content="appUi.content"
       :oStyle="appUi.style"
       :editPartShow="appUi.editPartShow"
       :aIndex="index"
       :currentIndex="editIndex"
       :key="appUi.content.code">
     </p>
    </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>
  </p>
 </transition>
</template>
<script>
 import { mapState,mapMutations } from &#39;vuex&#39;;
 //这里我将组建特有的编辑栏，写成了一个组件，为什么不写在相应的组件一起了？
 //这里必须说明一下，主要是我没有想到方法，让他在同一组件内分离出来，单独将dom结构放在编辑栏这里，如果有大神知道
 //还望不吝赐教
 import BtnEdit from "@/components/BtnEdit.vue";
 
 export default{
  name: &#39;BaseEdit&#39;,
  components: {
   BtnEdit
  },
  data(){
   return{
    colorPicker: {
     type: &#39;颜色设置&#39;,
     name: &#39;Picker&#39;,
     content:[
      {
       title: &#39;背景颜色&#39;,
       style: &#39;background&#39;
      },
      {
       title: &#39;字体颜色&#39;,
       style: &#39;color&#39;
      }
     ]
     
    },
    activeName: &#39;first&#39;
   }
  },
  
  computed:{
   ...mapState([&#39;editIndex&#39;,&#39;sortApi&#39;,&#39;editShow&#39;])
  },
  methods:{
   setStyle(value,style){
    //根据上面传入的style属性，实时改变现有的值
    this.$set(this.sortApi[this.editIndex].style,style,value);
   }
  }
 }
</script>

Copier après la connexion

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

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

Copier après la connexion

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

<template>
 <p class="delete-compontent-box">
  <p class="el-icon-delete remove-component" @click.stop="dailogStatu"></p>
  <el-dialog
   title="提示"
   :visible.sync="dialogVisible"
   :append-to-body="appendToBody"
   width="430px">
   <p class="el-message-box__content">
    <p class="el-message-box__status el-icon-warning"></p>
    <p class="el-message-box__message dialog-message">此操作将删除该模块, 是否继续?</p>
   </p>
   <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>
 </p>
</template>

<script>
 import { mapMutations } from "vuex";
 export default {
  name: &#39;oText&#39;,
  props: {
   aIndex: Number
  },
  data(){
   return{
    //这两个参数是弹框的参数
    dialogVisible: false,
    appendToBody: true 
   }
  },
  methods:{
   ...mapMutations([&#39;deleteCp&#39;,&#39;setCommon&#39;]),
   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: &#39;该模块已删除 !&#39;,
     type: &#39;success&#39;
    });
    this.setCommon({flag: false,index: 0})
   }
  }
 }
</script>

Copier après la connexion

-> 来看看效果图吧

效果图展示