|
第一步，完成环境配置。织梦CMS是一款在PHP和MYSQL环境下运行的程序，所以你要保证空间可以正常使用PHP+MYSQL，同时准备好空间数据库用户名和密码。第二步，安装织梦程序。下载后解压uploads文件，然后打开复制里面所有的文件，粘贴到到指定的文件夹内，设定好安全目录。第三步，在地址栏输入你的域名，会出现一个安装页面和协议。第四步：同意安装协议，不停点击继续即可。我们会看到另外界面，这时注意对换机和目录权限进行检测。如果都符合要求，那就点击继续。第五步：安装完成，进入后台，选择需要的模块，填写数据库信息，设置好后台管理初始密码，填写你的网站名称。在后台点击首页就是你的网站页面，模板是默认的样式。不过织梦有很多模板可以选择，你可以自己设计，也可以找平台上现有的模板。就看它的在线教程啊。网络上也有提供教程的。推荐你看个视频教程织梦仿站185294631@给一份谢谢！我的礼品网站马上就要筹划起来了，哈哈【基本介绍】小马织梦建站工具箱1.1是一款专门为利用织梦（dedecms）建站程序建设网站的朋友开发的建站小工具。它集成了织梦建站程序的大部分标签，极大方便了网站建设人员，即使你是刚接触织梦程序的新手，也能利用小马织梦建站工具箱快速建设网站。织梦sitemap地图实时推送给百度的教程，织梦sitemap在之前，织梦有一套自己主动ping百度的插件，但是后来用不了了，最后百度推出了实时推送链接地址到百度，这样要比sitemap方便好用多了，而且还能保证文章的原创，下面我通过查阅相关资料，根据百度的接口写了一篇sitemap地图实时推送给百度的处理办法，分享给大家。关于织梦的百度实时推送我写了两种方法,大家可以自行选择:1.手动创建一个文件,每天访问这个文件就可以把当天的全部文章推送到百度搜索引擎.在根目录下面创建一个tuisong.php访问后会返回百度接口结果.$dayBegin.;//这里dede换成你们自己的表前缀$urls=;$dsql->Execute(arch.id,types.typedir,$query);while($row=$dsql->GetArray(arch.id,types.typedir)){$urls.=.str_replace({cmspath},,$row[typedir])./.$row[id]..html.,;//将上边的换成你的网址}$urls=substr($urls,0,-1);$urls=explode(,,$urls);$api=?site=www.baidu.com&token=hereistoken;//前边的site换成自己的sitexxx换成自己的密钥$ch=curl_init();$options=array(CURLOPT_URL=>$api,CURLOPT_POST=>true,CURLOPT_RETURNTRANSFER=>true,CURLOPT_POSTFIELDS=>implode(n,$urls),CURLOPT_HTTPHEADER=>array(Content-Type:text/plain),);curl_setopt_array($ch,$options);$result=curl_exec($ch);echo$result.count($urls);?>查看推送反馈推送成功状态码为200，可能返回以下字段：字段是否必选参数类型说明success是int成功推送的url条数remain是int当天剩余的可推送url条数not_same_site否array由于不是本站url而未处理的url列表not_valid否array不合法的url列表成功返回示例：代码如下:{remain:4999998,success:2,not_same_site:[],not_valid:[]}推送失败状态码为4xx，返回字段有：字段是否必传类型说明error是int错误码，与状态码相同message是string错误描述失败返回示例：代码如下:{error:401,message:tokenisnotvalid}2、第二种是发布一篇文章,就像百度推送一次,这种比较方便,我就是用这种打开织梦后台的article_add.php文件.找到差不多262行的样子注意：如果你系统设置的-》核心选项如果是否直接.加入以下代码,否则注意下面的提示//百度推送$urls=.$artUrl;//前面域名换成你自己的如果上面图片选择的是是就把.去掉$urls=explode(,,$urls);$api=?site=www.0cx.cc&token=hereistoken;//前边site换成自己的sitexxx换成自己的密钥$ch=curl_init();$options=array(CURLOPT_URL=>$api,CURLOPT_POST=>true,CURLOPT_RETURNTRANSFER=>true,CURLOPT_POSTFIELDS=>implode(n,$urls),CURLOPT_HTTPHEADER=>array(Content-Type:text/plain),);curl_setopt_array($ch,$options);$result=curl_exec($ch);就OK了,如果想看添加成功没,可以在修改下面一两行的样子的代码代码如下:请选择你的后续操作.$result.$urls[0].：result是看百度返回的结果,urls是看你推送的url.基本上就OK了,如果你想让修改文章的时候也事实推送,就类似我上面一样去修改article_edit.php就好了.织梦虽然很方便很强大，但学织梦还是要花点时间，下点功夫的。网上有很多教程，可以慢慢去看去学。这篇文章主要介绍了使用vue如何构建一个自动建站项目，现在分享给大家，也给大家做个参考。写在前面之前一直用Jquery+Jquery-ui来做这个项目，那个时候没有设计稿，没有项目需求，就因为BOSS一句话，要做这样的东西，当时就.好吧！我承认，其实已经习惯了，无所谓了(也是无奈，哎)!在之后的一段时间里，做了一个demo出来，BOSS很满意了，所以自己接下来就慢慢做吧，差不多两三个月吧，就闷头做这个，后来项目上线了，当然因为产品的不完善，还是有点问题了！不过基本能满足公司的需求了，能编辑的都可以编辑，组件的background(包括背景图片)colorborderbox-shadowmarginpaddingwidthheight对齐方式(字体和组件内部元素)border-radiusfont(font-size/font-family)等等这些基础的都可以随心变更，当然考虑到可能满足不了公司的使用，就加了一个自定义样式的功能，而这个只有懂前端的人才能使用了，没办法，需求永远赶不上变化，这样保险一点。因为大家都知道，需求的满足和变更永远跑在现成需求的前面除了这些基础的可更改，各个组件的特有可变更的功能也基本齐全的，比如轮播图图片变更，轮播方式，控制是否轮播等等这些功能，这里就不一一介绍了包括后来，因为有组件内部个别元素不能修改，又增加了[绑定修改]功能，就是这个功能选中之后，在视图界面，选中需要修改的元素，便可以进行修改了，这个功能还是有点意思的说了这么多，其实当时因为做的仓促，存储的时候存的是HTML,大家不要鄙视(要脸0.0),这个也是我心里一直的梗，最近加上BOSS重新提出了一些想法，有蛮多东西要加，思前想后,决定将项目重构一下考虑到vue响应式与基本是纯数据操作，所以决定使用vue重新构建这个项目。开发准备1、使用vue-cli，下载下来配置好的东西2、因为中间牵涉了拖拽生成组件的操作，所以使用了vuedraggable和sortablejs。安装vuedraggablesortablejsnpminstallvuedraggablenpminstallsortablejs项目中我们只需要引入vuedraggable就可以了，牵涉了sortablejs东西的时候，vuedraggable会去自己加载调用sortablejs里面的方法的，这个就不是我们需要关注的(你如果想了解，可以自己去看看)；3、安装vuex，因为里面牵涉到了大量的数据交互，很多组件都需要一些公用的数据，不使用vuex去管理，将会为开发带来更多不必要的麻烦;安装vuexnpminstall--savevuex4、因为没有设计稿的缘故，所以大胆使用了第三方UI库element-ui;element-ui官网地址安装elememtnpminstallelement-ui//为什么是element-ui而不是element?因为当时npm上已经有了element包了(我当时还觉得挺有意思的，0.0好冷啊！)5、axios安装,后面与后台数据交互会用到安装axiosnpminstall--saveaxios差不多准备工作就这些了，接下来我们看项目实施；项目开始1、各种文件的配置->main.js中文件的配置图片中都有解释，应该可以看的懂的；->侧边栏拖拽组件数据的配置因为文件太长，所以删掉了一些，这里就是一个简单的格式，仅供参考，不作为标准；在组件当中，存在一个布局的问题，所以要有布局组件，让组件可以放到布局组建中，这样才更加的灵活->vuexjs状态管理中的js配置说明：1、因为用户在拖拽之后要实时保存到sessionStorage中，所以再初始的时候要到sessionStroage中去取数据，防止突然刷新页面，还没有保存到数据库中，用户刚刚编辑的数据全部丢失的情况;2、这里说明一下，可能考虑到用于已经提交了数据，所以用户关闭窗口之后，再次进来的时候，要结合后台给出的用户之前的数据，一起存储到sessionStorage中去，相信这一点大家肯定想的到的，这里善意提醒一下0.0；3、我这这里暂时放了四个参数，图中都有说明，我主要是将基本编辑做成了一个组件，会根据用户点击时哪个组件，而重新渲染数据给到编辑组件，从而可以实时对应到点击的组件去编辑；4、editShow的作用就是控制编辑组件显示与否的，主要删除组件的时候，让编辑组件隐藏一下；点击其他组件的显示一下；基本的配置就这些了，接下来就是真正的开发了;2、项目开发开始->app.vue文件中该怎么写？<template><--用的element-ui--><el-container><el-aside><Draggableclass=app-aside-drag:options=dragOption><pclass=app-aside-listv-for=(dragList,index)indragData:type=dragList.type:key=dragList.type><pclass=aside-item-body><iclass=aside-item-ele></i><spanclass=aside-item-ele>{{list.title}}</span></p></p></Draggable><el-aside><el-mainclass=app-main><sectionclass=app-phone><pclass=app-phone-header><spanclass=phone-camera></span><spanclass=phone-ls></span></p><--页面view区--><Sortclass=app-phone-body></Sort><pclass=app-phone-footer><buttonclass=app-phone-menu>RS</button></p></section></el-main><el-asideclass=app-right><--组件编辑区域--><BaseEdit></BaseEdit></el-aside></el-container></template><script>importDragApifrom@/dragapi/dragapi.jsimportDraggablefromvuedraggableimportSortfrom@/view/SortimportBaseEditfrom@/view/BaseEditexportdefault{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>->来看看sortview视图区域组件<template><Draggable:options=sortOption@sort=onSort@add=onAddclass=app-sort><--ui组件--><--这里不懂的人，可以去vue官网看看动态组件--><pv-for=(appUi,index)insortApi//循环组件: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'vuex'//拖拽插件引入importDraggablefrom'vuedraggable'//各个组件引入importCarouselfrom@/components/Carousel.vueimportBtnfrom@/components/Btn.vueexportdefault{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><transitionname=slide-right><pv-if=sortApi.length>0&&editShow===true>//组件特有编辑<el-tabsv-model=activeName><el-tab-panelabel=组件设置name=first><pv-for=(appUi,index)insortApi:is=appUi.component+'Edit':content=appUi.content:oStyle=appUi.style:editPartShow=appUi.editPartShow:aIndex=index:currentIndex=editIndex:key=appUi.content.code></p></el-tab-pane><el-tab-panelabel=样式设置name=second>//公共样式编辑<el-collapsev-model=colorPicker.nameclass=base-editaccordion><el-collapse-itemclass=tititt:title=colorPicker.type:name=colorPicker.type><el-formref=form:model=colorPickersize=mini><el-form-itemclass=cui-inline-resetv-for=(item,index)incolorPicker.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><spanclass=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'vuex'//这里我将组建特有的编辑栏，写成了一个组件，为什么不写在相应的组件一起了？//这里必须说明一下，主要是我没有想到方法，让他在同一组件内分离出来，单独将dom结构放在编辑栏这里，如果有大神知道//还望不吝赐教importBtnEditfrom@/components/BtnEdit.vueexportdefault{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><pclass=btn-boxui-sortable:data-code=content.code><el-buttonclass=ui-btn:style=oStyle>{{content.text}}</el-button>//因为每个组件都有删除功能，所以写成了一个组件<DeleteCp:aIndex=aIndex></DeleteCp></p></template><script>importDeleteCpfrom@/components/DeleteCpexportdefault{name:'Btn'props:{//父组件传入的参数content:Object,oStyle:Object,aIndex:Number},components:{DeleteCp},data(){return{btnModel:'btn-model'}}}</script>->最后来看看删除组件吧<template><pclass=delete-compontent-box><pclass=el-icon-deleteremove-component@click.stop=dailogStatu></p><el-dialogtitle=提示:visible.sync=dialogVisible:append-to-body=appendToBodywidth=430px><pclass=el-message-box__content><pclass=el-message-box__statusel-icon-warning></p><pclass=el-message-box__messagedialog-message>此操作将删除该模块,是否继续?</p></p><spanslot=footerclass=dialog-footer><el-button@click=dialogVisible=falsesize=small>取消</el-button><el-buttontype=primary@click=onRemove(aIndex)size=small>确定</el-button></span></el-dialog></p></template><script>import{mapMutations}fromvuexexportdefault{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){//点击确定删除对应的组件letflag=false;this.deleteCp(index);this.dialogVisible=false;this.$message({message:'该模块已删除!'type:'success'});this.setCommon({flag:false,index:0})}}}</script>->来看看效果图吧效果图展示结束语好了，今天写了很多了，最后我们来梳理一下思路：1、首先配置左侧的拖拽组件2、配置vuex中的数据3、app.vue中配置4、编辑组件的配置5、各种数据的传递与依赖上面是我整理给大家的，希望今后会对大家有帮助。
|
