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

网友投稿 318 2023-02-19


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

写在前面

之前一直用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中文件的配置

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

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

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

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

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

说明:

1、因为用户在拖拽之后要实时保存到sessionStorage中, 所以再初始的时候要到sessionStroage中去取数据,防止突然刷新页面,还没有保存到数据库中,用户刚刚编辑的数据全部丢失的情况;

2、这里说明一下,可能考虑到用于已经提交了数据,所以用户关闭窗口之后,再次进来的时候,要结合后台给出的用户之前的数据,一起存储到sessionStorage中去,相信这一点大家肯定想的到的,这里善意提醒一下 0.0;

3、我这这里暂时放了四个参数,图中都有说明,我主要是将基本编辑做成了一个组件,会根据用户点击时哪个组件,而重新渲染数据给到编辑组件,从而可以实时对应到点击的组件去编辑;

4、editShow的作用就是控制编辑组件显示与否的,主要删除组件的时候,让编辑组件隐藏一下;点击其他组件的显示一下;

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

2、项目开发开始

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

v-for="(dragList,index) in dragData"

:type="dragList.type"

:key="dragList.type">

{{ list.title }}

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

@sort="onSort"

@add="onAdd"

class="app-sort">

: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">

@sort="onSort"

@add="onAdd"

class="app-sort">

: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">

-> 再来看看编辑组件

//组件特有编辑

:is="appUi.component+'Edit'"

:content="appUi.content"

:oStyle="appUi.style"

:editPartShow="appUi.editPartShow"

:aIndex="index"

:currentIndex="editIndex"

:key="appUi.content.code">

//公共样式编辑

v-for="(item,index) in colorPicker.content"

:label="item.title"

:key="item.style">

//在element-ui框架中,有很多@change @active-change事件,直接写事件发现不能传入参数,

//当然,办法总比问题多,我们换成一下这种写法就行了,他的默然参数写在前面

//这里颜色拾取器 返回的是实时的颜色值

//我这里主要想传一个对应的style

@active-change=" (value) => setStyle(value,item.style)"

v-model="sortApi[editIndex].style[item.style]"

show-alpha>

:style="{color: sortApi[editIndex].style[item.style]}">

{{ sortApi[editIndex].style[item.style] }}

v-for="(item,index) in colorPicker.content"

:label="item.title"

:key="item.style">

//在element-ui框架中,有很多@change @active-change事件,直接写事件发现不能传入参数,

//当然,办法总比问题多,我们换成一下这种写法就行了,他的默然参数写在前面

//这里颜色拾取器 返回的是实时的颜色值

//我这里主要想传一个对应的style

@active-change=" (value) => setStyle(value,item.style)"

v-model="sortApi[editIndex].style[item.style]"

show-alpha>

//在element-ui框架中,有很多@change @active-change事件,直接写事件发现不能传入参数,

//当然,办法总比问题多,我们换成一下这种写法就行了,他的默然参数写在前面

//这里颜色拾取器 返回的是实时的颜色值

//我这里主要想传一个对应的style

@active-change=" (value) => setStyle(value,item.style)"

v-model="sortApi[editIndex].style[item.style]"

show-alpha>

:style="{color: sortApi[editIndex].style[item.style]}">

{{ sortApi[editIndex].style[item.style] }}

:style="{color: sortApi[editIndex].style[item.style]}">

{{ sortApi[editIndex].style[item.style] }}

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

//按钮组件,其实里面很简单

//组件的对应的编辑组件,里面内容和这个也差不多,下面就不写了

:style="oStyle">

{{ content.text }}

:style="oStyle">

{{ content.text }}

//因为每个组件都有删除功能,所以写成了一个组件

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

title="提示"

:visible.sync="dialogVisible"

:append-to-body="appendToBody"

width="430px">

此操作将删除该模块, 是否继续?

title="提示"

:visible.sync="dialogVisible"

:append-to-body="appendToBody"

width="430px">

取 消

确 定

-> 来看看效果图吧

效果图展示

结束语

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

1、首先配置左侧的拖拽组件

2、配置vuex中的数据

3、app.vue中配置

4、编辑组件的配置

5、各种数据的传递与依赖

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


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Vue的土著指令和自定义指令实例详解
下一篇:浅谈log4j 不打印异常堆栈
相关文章

 发表评论

暂时没有评论,来抢沙发吧~