快捷導(dǎo)航

vue中使用jeecg進(jìn)行前后端聯(lián)調(diào)方式

更新時(shí)間：2022年09月09日 16:37:47 作者：芝士焗紅薯

這篇文章主要介紹了vue中使用jeecg進(jìn)行前后端聯(lián)調(diào)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue使用jeecg進(jìn)行前后端聯(lián)調(diào)

最近項(xiàng)目中總是用jeecg來進(jìn)行系統(tǒng)管理端的操作，因?yàn)閖eecg可以根據(jù)賬號(hào)直接分配權(quán)限。

但是使用jeecg需要前后端服務(wù)同時(shí)起，不然登錄不進(jìn)去，在自己電腦上同時(shí)起前后端沒問題，但是和后端聯(lián)調(diào)的時(shí)候，總是連不上，后來發(fā)現(xiàn)是有兩個(gè)地方需要改地址。

一個(gè)是vue.config.js

還有一個(gè)是env.development

兩個(gè)地方都改掉之后，就可以訪問到后端了

vue jeecg表格對(duì)數(shù)據(jù)的處理自定義

// 表頭
columns: [
? ?...
? ? {
? ? ? ? title: '商品圖片',
? ? ? ? align: "center",
? ? ? ? dataIndex: 'coverImgLocal',
? ? ? ? scopedSlots: { customRender: 'picture' }
? ? },
? ? {
? ? ? ? title: '商品名稱',
? ? ? ? align: "center",
? ? ? ? dataIndex: 'name',
? ? ? ? ellipsis: true,
? ? },
? ?...
? ? {
? ? ? ? title: '價(jià)格類型',
? ? ? ? align: "center",
? ? ? ? dataIndex: 'priceType',
? ? ? ? customRender: (text) => {
? ? ? ? ? ? if (text == '1') {
? ? ? ? ? ? ? ? return '一口價(jià)';
? ? ? ? ? ? } else if (text == '2') {
? ? ? ? ? ? ? ? return '價(jià)格區(qū)間';
? ? ? ? ? ? } else if (text == '3') {
? ? ? ? ? ? ? ? return '顯示折扣價(jià)';
? ? ? ? ? ? }
? ? ? ? }
? ? },
? ? {
? ? ? ? title: '價(jià)格(元)',
? ? ? ? align: "center",
? ? ? ? dataIndex: '',
? ? ? ? scopedSlots: { customRender: 'price' }
? ? },
? ? ....
? ? {
? ? ? ? title: '操作',
? ? ? ? dataIndex: 'action',
? ? ? ? align: "center",
? ? ? ? scopedSlots: {customRender: 'action'},
? ? }
],

?<a-table
? ? ? ? ref="table"
? ? ? ? size="middle"
? ? ? ? bordered
? ? ? ? rowKey="goodsId"
? ? ? ? :columns="columns"
? ? ? ? :dataSource="tableList"
? ? ? ? :pagination="ipagination"
? ? ? ? :loading="loading"
? ? ? ? class="j-table-force-nowrap"
? ? ? ? :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
? ? ? ? @change="handleTableChange">
? ? ? ? <span slot="action" slot-scope="text, record">
? ? ? ? ? <!--生效-->
? ? ? ? ? <div v-if="record.deleted == '1'">
? ? ? ? ? ? ? <a @click="handleDisable(record)" style="color:#3ccf2e">失效</a>
? ? ? ? ? ? ? <!--未審核-->
? ? ? ? ? ? ? <span v-if="record.auditStatus == '0'" style="color:deepskyblue">
? ? ? ? ? ? ? ? <a-divider type="vertical"/><a @click="handleRetryAudit(record)">提交審核</a>
? ? ? ? ? ? ? ? <a-divider type="vertical"/><a @click="handleEdit(record)">修改</a>
? ? ? ? ? ? ? </span>
? ? ? ? ? ? <!--審核中-->
? ? ? ? ? ? ? <span v-if="record.auditStatus == '1'" style="color:deepskyblue">
? ? ? ? ? ? ? ? <a-divider type="vertical"/><a @click="handleResetAudit(record)">撤回審核</a>
? ? ? ? ? ? ? ? <a-divider type="vertical"/><a @click="handleEdit(record)">查看</a>
? ? ? ? ? ? ? </span>
? ? ? ? ? </div>
? ? ? ? ? <!--失效-->
? ? ? ? ? <div v-if="record.deleted == '2'">
? ? ? ? ? ? <a @click="handleEnable(record)" style="color:red">生效</a>
? ? ? ? ? ? <!--審核通過-->
? ? ? ? ? ? ? <span v-if="record.auditStatus == '2'" style="color:deepskyblue">
? ? ? ? ? ? ? ? <a-divider type="vertical"/><a @click="handleEdit(record)">修改</a>
? ? ? ? ? ? ? </span>
? ? ? ? ? </div>
? ? ? ? </span>
? ? ? ? <span slot="price" slot-scope="text, record">
? ? ? ? ? <span v-if="record.priceType ?== '1'">
? ? ? ? ? ? <span>{{record.price}}</span>
? ? ? ? ? </span>
? ? ? ? ? <span v-if="record.priceType ?== '2'">
? ? ? ? ? ? {{record.price}} - {{record.price2}}
? ? ? ? ? </span>
? ? ? ? ? <span v-if="record.priceType ?== '3'">
? ? ? ? ? ? <span style="text-decoration:line-through">{{record.price}}</span>(原價(jià))&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{record.price2}}(現(xiàn)價(jià))
? ? ? ? ? </span>
? ? ? ? </span>
? ? ? ? <span slot="picture" slot-scope="text">
<!-- ? ? ? ? ?<img class="bus-img" :src="text" alt="商品圖片" v-if="text!=null">-->
? ? ? ? ? <img class="bus-img" v-lazy="text" alt="商品圖片" v-if="text!=null">
? ? ? ? </span>
? ? ? </a-table>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: