vue中使用jeecg進(jìn)行前后端聯(lián)調(diào)方式
vue使用jeecg進(jìn)行前后端聯(lián)調(diào)
最近項(xiàng)目中總是用jeecg來(lái)進(jìn)行系統(tǒng)管理端的操作,因?yàn)閖eecg可以根據(jù)賬號(hào)直接分配權(quán)限。
但是使用jeecg需要前后端服務(wù)同時(shí)起,不然登錄不進(jìn)去,在自己電腦上同時(shí)起前后端沒問題,但是和后端聯(lián)調(diào)的時(shí)候,總是連不上,后來(lái)發(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à)) {{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è)參考,也希望大家多多支持腳本之家。
相關(guān)文章
詳解vue微信網(wǎng)頁(yè)授權(quán)最終解決方案
這篇文章主要介紹了 詳解vue微信網(wǎng)頁(yè)授權(quán)最終解決方案,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2019-06-06vue實(shí)現(xiàn)token登錄驗(yàn)證的完整實(shí)例
最近公司新啟動(dòng)了個(gè)項(xiàng)目,用的是vue框架在做,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)token登錄驗(yàn)證的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04vue-router?導(dǎo)航完成后獲取數(shù)據(jù)的實(shí)現(xiàn)方法
這篇文章主要介紹了vue-router?導(dǎo)航完成后獲取數(shù)據(jù),通過使用生命周期的 created() 函數(shù),在組件創(chuàng)建完成后調(diào)用該方法,本文結(jié)合實(shí)例代碼給大家講解的非常詳細(xì)需要的朋友可以參考下2022-11-11詳解vuex 中的 state 在組件中如何監(jiān)聽
本篇文章主要介紹了詳解vuex 中的 state 在組件中如何監(jiān)聽,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-05-05el-select二次封裝實(shí)現(xiàn)可分頁(yè)加載數(shù)據(jù)的示例代碼
使用el-select時(shí)一次性渲染幾百條數(shù)據(jù)時(shí)會(huì)造成頁(yè)面克頓, 可以通過分頁(yè)來(lái)實(shí)現(xiàn),所以本文給大家介紹了el-select二次封裝實(shí)現(xiàn)可分頁(yè)加載數(shù)據(jù),文中有詳細(xì)的代碼講解,具有一定的參考價(jià)值,需要的朋友可以參考下2023-12-12