誰告訴你的,使用Vue就一定要前后端分離,云起開發平臺1.1版本通過重寫thinkphp-template模板引擎,使它能支持在后端渲染vue頁面,從此不用打包,不用繁瑣的代理處理跨域,不用vue-router,不用前后端都要重復控制權限問題,不用npm引入一大堆看不懂的js代碼,你就能愉快的使用vue來編程。
如下所示,這是一段回收站功能的代碼,不用打包,不用nodejs,不用ssr,所見即所得,響應快捷迅速。
<template>
<el-card shadow="never" style="border:0;">
<yun-table
:columns='recyclebin_("init")'
search="{$search}"
ref="yuntable"
:common-search="false"
:extend="extend"
toolbar="refresh,restore,destroy,restoreall,clear">
<template #toolbar="{tool,selections}">
<el-button v-if="tool=='restore'" type="success" @click.stop="recyclebin_('restore',selections)" :disabled="selections.length == 0"><i class="fa fa-rotate-left"></i> 還原</el-button>
<el-button v-if="tool=='destroy'" type="danger" @click.stop="recyclebin_('destroy',selections)" :disabled="selections.length == 0"><i class="fa fa-remove"></i> 徹底刪除</el-button>
<el-button v-if="tool=='restoreall'" type="warning" @click.stop="recyclebin_('restoreall')"><i class="fa fa-rotate-left"></i> 全部還原</el-button>
<el-button v-if="tool=='clear'" type="danger" @click.stop="recyclebin_('clear')"><i class="fa fa-remove"></i> 全部清空</el-button>
</template>
</yun-table>
</el-card>
</template>
<script>
import table from "@components/Table.js";
export default{
components:{
'YunTable':table
},
data:{
extend:{
index_url:Yunqi.config.url,
recyclebin_url:'',
}
},
onLoad:function (){
this.extend.recyclebin_url = Yunqi.config.url.slice(0,Yunqi.config.url.indexOf('?'));
},
methods: {
}
}
</script>
<style>
</style>
云起開發平臺是基于 Thinkphp8.0 + ES6.0 + Vue3.2 + Element Plus2.3 等技術開發的,開源免費的快速開發平臺。