vue中使用jeecg進(jìn)行前后端聯(lián)調(diào)方式
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à)) {{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è)參考。一起跟隨小編過來看看吧2019-06-06
vue實(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-04
vue-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è)參考。一起跟隨小編過來看看吧2017-05-05
el-select二次封裝實(shí)現(xiàn)可分頁(yè)加載數(shù)據(jù)的示例代碼
使用el-select時(shí)一次性渲染幾百條數(shù)據(jù)時(shí)會(huì)造成頁(yè)面克頓, 可以通過分頁(yè)來實(shí)現(xiàn),所以本文給大家介紹了el-select二次封裝實(shí)現(xiàn)可分頁(yè)加載數(shù)據(jù),文中有詳細(xì)的代碼講解,具有一定的參考價(jià)值,需要的朋友可以參考下2023-12-12

