改造登錄到本地接口

一睬魂、跨域配置

1、什么是跨域

瀏覽器從一個域名的網(wǎng)頁去請求另一個域名的資源時贞盯，域名音念、端口、協(xié)議任一不同躏敢，都是跨域?闷愤。前后端分離開發(fā)中，需要考慮ajax跨域的問題件余。

這里我們可以從服務(wù)端解決這個問題

2讥脐、配置

在Controller類上添加注解

@CrossOrigin//跨域

01-項目中的路由

一、后臺系統(tǒng)路由實現(xiàn)分析

1啼器、入口文件中調(diào)用路由

src/main.js

......

import router from './router'//引入路由模塊

......

newVue({

????el:'#app',

????router,//掛載路由

????store,

????render:h=>h(App)

})

2旬渠、路由模塊中定義路由

src/router/index.js

......

export const constantRouterMap=[

????......

]

export default new Router({

????......

????routes:constantRouterMap

})

二、路由定義

1端壳、復(fù)制icon圖標

將vue-element-admin/src/icons/svg 中的圖標復(fù)制到 guli-admin項目中

2告丢、修改路由

修改 src/router/index.js 文件，重新定義constantRouterMap

注意：每個路由的name不能相同

{

????path:?'/teacher',

????component:?Layout,

????redirect:?'/teacher/table',

????name:?'講師管理',

????meta:?{?title:?'講師管理',?icon:?'example'?},

????children:?[

??????{

????????path:?'table',

????????name:?'講師列表',

????????component:?()?=>?import('@/views/edu/teacher/list'),

????????meta:?{?title:?'講師列表',?icon:?'table'?}

??????},

??????{

????????path:?'tree',

????????name:?'添加講師',

????????component:?()?=>?import('@/views/edu/teacher/save'),

????????meta:?{?title:?'添加講師',?icon:?'tree'?}

??????}

????]

??},

3损谦、創(chuàng)建vue組件

在src/views文件夾下創(chuàng)建以下文件夾和文件

list.vue

<template>

????<div?class="app-container">

????????講師列表

????</div>

</template>

save.vue

<template>

????<div?class="app-container">

????????講師添加

????</div>

</template>

02-使用nginx配置后臺多服務(wù)器api

一岖免、項目中的Easy Mock

config/dev.env.js?中BASE_API 為項目的easymock地址，目前具有模擬登錄照捡、登出颅湘、獲取用戶信息的功能

BASE_API:'"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"',

登錄：/user/login

獲取用戶信息：/user/info?token=admin

登出：/user/logout

config/dev.env.js，只有一個api地址的配置位置栗精，而我們實際的后端有很多微服務(wù)闯参，所以接口地址有很多，

我們可以使用nginx反向代理讓不同的api路徑分發(fā)到不同的api服務(wù)器中

二悲立、配置nginx反向代理

1赢赊、安裝window版的nginx

將nginx-1.12.0.zip解壓到開發(fā)目錄中

如：E:\development\nginx-1.12.0-guli-api

雙擊nginx.exe運行nginx

訪問：localhost

2、配置nginx代理

在Nginx中配置對應(yīng)的微服務(wù)服務(wù)器地址即可

注意：最好修改默認的 80端口到81

3级历、重啟nginx

nginx -s reload

4释移、測試

http://localhost:9001/eduservice/teacher/pageTeacherCondition/1/10

三、配置開發(fā)環(huán)境

1寥殖、修改config/dev.env.js

BASE_API:'"http://127.0.0.1:9001"'

2玩讳、重啟前端程序

修改配置文件后，需要手動重啟前端程序

03-講師管理列表組件

一嚼贡、分頁列表

1熏纯、定義api

創(chuàng)建文件 src/api/edu/teacher.js

import?request?from?'@/utils/request'

export?default{

????//1?講師列表（條件查詢分頁）

????//current當前頁，limit每頁記錄數(shù)粤策，teacherQuery條件對象

????getTeacherPageList(current,limit,teacherQuery){

????????return?request({

????????????//?url:'/eduservice/teacher/pageTeacherCondition/'+current+'/'+limit,

????????????url:`/eduservice/teacher/pageTeacherCondition/${current}/${limit}`,

????????????method:'post',

????????????//data表示把對象轉(zhuǎn)換為json進行傳遞到接口里面

????????????//data表示把對象轉(zhuǎn)換json進行傳遞到接口里面

????????????data:teacherQuery

????????})

????}

}

2樟澜、初始化vue組件

src/views/edu/teacher/list.vue

<template>

????<div?class="app-container">

????????講師列表

????</div>

</template>

<script>

????//?引入調(diào)用teacher.js文件

????import?teacher?from?'@/api/edu/teacher'

????export?default?{

????????//寫核心代碼位置

????????//?data:{

????????//?},

????????data(){?//定義變量和初始值

????????????return?{}

????????},

????????created(){?//頁面渲染之前執(zhí)行，一般調(diào)用method定義的方法

????????????this.getList()

????????},

????????methods:{?//創(chuàng)建具體的方法，調(diào)用teacher.js定義的方法

????????????//講師列表的方法

????????????getList(){

????????????}

????????}

????}

</script>

3秩贰、定義data

??data(){?//定義變量和初始值

????????????return?{

????????????????list:null,//查詢之后接口返回集合

????????????????page:1,//當前頁

????????????????limit:10,//每頁記錄數(shù)

????????????????total:0,//總記錄數(shù)

????????????????teacherQuery:{}//條件封裝對象

????????????}

????????},

4霹俺、定義methods

methods:{?//創(chuàng)建具體的方法，調(diào)用teacher.js定義的方法

????????????//講師列表的方法

????????????getList(){

????????????????teacher.getTeacherPageList(this.page,this.limit,this.teacherQuery)

????????????????????.then(response?=>?{//請求成功

????????????????????????//response接口返回數(shù)據(jù)

????????????????????????//?console.log(response)

????????????????????????this.list?=?response.data.rows

????????????????????????this.total?=?response.data.total

????????????????????????console.log(this.list)

????????????????????????console.log(this.total)

????????????????????})

????????????????????.catch(error?=>{//請求失敗

????????????????????????console.log(error)

????????????????????})

????????????}

????????}

5毒费、表格渲染

<template>

????<div?class="app-container">

????????講師列表

????????

????????<el-table

????????????:data="list"

????????????border

????????????fit

????????????highlight-current-row>

????????????<el-table-column

????????????????label="序號"

????????????????width="70"

????????????????align="center">

????????????????<template?slot-scope="scope">

????????????????{{?(page?-?1)?*?limit?+?scope.$index?+?1?}}

????????????????</template>

????????????</el-table-column>

????????????<el-table-column?prop="name"?label="名稱"?width="80"?/>

????????????<el-table-column?label="頭銜"?width="80">

????????????????<template?slot-scope="scope">

????????????????{{?scope.row.level===1?'高級講師':'首席講師'?}}

????????????????</template>

????????????</el-table-column>

????????????<el-table-column?prop="intro"?label="資歷"?/>

????????????<el-table-column?prop="gmtCreate"?label="添加時間"?width="160"/>

????????????<el-table-column?prop="sort"?label="排序"?width="60"?/>

????????????<el-table-column?label="操作"?width="200"?align="center">

????????????????<template?slot-scope="scope">

????????????????<router-link?:to="'/edu/teacher/edit/'+scope.row.id">

????????????????????<el-button?type="primary"?size="mini"?icon="el-icon-edit">修改</el-button>

????????????????</router-link>

????????????????<el-button?type="danger"?size="mini"?icon="el-icon-delete"?@click="removeDataById(scope.row.id)">刪除</el-button>

????????????????</template>

????????????</el-table-column>

????????</el-table>

????</div>

</template>

6丙唧、分頁組件

????????<el-pagination

????????:current-page="page"

????????:page-size="limit"

????????:total="total"

????????style="padding:?30px?0;?text-align:?center;"

????????layout="total,?prev,?pager,?next,?jumper"

????????@current-change="getList"

????????/>

7、頂部查詢表單

注意：

element-ui的 date-picker組件默認綁定的時間值是默認世界標準時間觅玻，和中國時間差8小時

設(shè)置value-format="yyyy-MM-dd HH:mm:ss"?改變綁定的值

?????

????????

????????<el-form?:inline="true"?class="demo-form-inline">

????????????<el-form-item>

????????????????<el-input?v-model="teacherQuery.name"?placeholder="講師名"/>

????????????</el-form-item>

????????????<el-form-item>

????????????????<el-select?v-model="teacherQuery.level"?clearable?placeholder="講師頭銜">

????????????????<el-option?:value="1"?label="高級講師"/>

????????????????<el-option?:value="2"?label="首席講師"/>

????????????????</el-select>

????????????</el-form-item>

????????????<el-form-item?label="添加時間">

????????????????<el-date-picker

????????????????v-model="teacherQuery.begin"

????????????????type="datetime"

????????????????placeholder="選擇開始時間"

????????????????value-format="yyyy-MM-dd?HH:mm:ss"

????????????????default-time="00:00:00"

????????????????/>

????????????</el-form-item>

????????????<el-form-item>

????????????????<el-date-picker

????????????????v-model="teacherQuery.end"

????????????????type="datetime"

????????????????placeholder="選擇截止時間"

????????????????value-format="yyyy-MM-dd?HH:mm:ss"

????????????????default-time="00:00:00"

????????????????/>

????????????</el-form-item>

????????????<el-button?type="primary"?icon="el-icon-search"?@click="getList()">查詢</el-button>

????????????<el-button?type="default"?@click="resetData()">清空</el-button>

????????</el-form>

清空方法：

?resetData(){//清空方法

????????????????//表單輸入項數(shù)據(jù)清空

????????????????this.teacherQuery?=?{}

????????????????//查詢所有講師數(shù)據(jù)

????????????????this.getList()

????????????}

8想际、測試

二、刪除

1溪厘、定義api

src/api/edu/teacher.js

????removeById(id){

????????return?request({

????????????url:`/eduservice/teacher/${id}`,

????????????method:'delete'

????????})

????}

2胡本、定義methods

src/views/edu/teacher/list.vue

使用MessageBox 彈框組件

????????removeDataById(id){

????????????????//?debugger

????????????????//?console.log(memberId)

????????????????this.$confirm('此操作將永久刪除該記錄,?是否繼續(xù)?',?'提示',?{

????????????????????confirmButtonText:?'確定',

????????????????????cancelButtonText:?'取消',

????????????????????type:?'warning'

????????????????}).then(()?=>?{//點擊確定，執(zhí)行then方法

????????????????????//調(diào)用刪除的方法

????????????????????teacher.removeById(id)

????????????????????????.then(?response?=>?{//刪除成功????????????

????????????????????????//提示信息

????????????????????????this.$message({

????????????????????????????type:?'success',

????????????????????????????message:?'刪除成功!'

????????????????????????})

????????????????????????//回到列表頁面

????????????????????????this.getList()????????????????????

????????????????????})

????????????????})//點擊取消畸悬，執(zhí)行catch方法

????????????}

04-講師管理表單組件

一侧甫、新增

1、定義api

?src/api/edu/teacher.js

??????//添加講師

????addTeacher(teacher){

????????return?request({

????????????url:`/eduservice/teacher/addTeacher`,

????????????method:'post',

????????????data:teacher

????????})

????}

2傻昙、初始化組件

src/views/edu/teacher/save.vue

html

<template>

????<div?class="app-container">

????????<el-form?label-width="120px">

????????????<el-form-item?label="講師名稱">

????????????????<el-input?v-model="teacher.name"/>

????????????</el-form-item>

????????????<el-form-item?label="講師排序">

????????????????<el-input-number?v-model="teacher.sort"?controls-position="right"?min="0"/>

????????????</el-form-item>

????????????<el-form-item?label="講師頭銜">

????????????????<el-select?v-model="teacher.level"?clearable?placeholder="請選擇">

????????????????

????????????????<el-option?:value="1"?label="高級講師"/>

????????????????<el-option?:value="2"?label="首席講師"/>

????????????????</el-select>

????????????</el-form-item>

????????????<el-form-item?label="講師資歷">

????????????????<el-input?v-model="teacher.career"/>

????????????</el-form-item>

????????????<el-form-item?label="講師簡介">

????????????????<el-input?v-model="teacher.intro"?:rows="10"?type="textarea"/>

????????????</el-form-item>

????????????

????????????<el-form-item>

????????????????<el-button?:disabled="saveBtnDisabled"?type="primary"?@click="saveOrUpdate">保存</el-button>

????????????</el-form-item>

????????</el-form>

????</div>

</template>

<script>

export?default?{

????data(){

????????return?{

????????????teacher:{

????????????????name:?'',

????????????????sort:?0,

????????????????level:?1,

????????????????career:?'',

????????????????intro:?'',

????????????????avatar:?''

????????????},

????????????saveBtnDisabled:?false?//?保存按鈕是否禁用,

????????}

????},

????created(){

????},

????methods:{

????????saveOrUpdate(){

????????????//添加

????????????this.saveTeacher()

????????},

????????//添加講師的方法

????????saveTeacher(){

????????}

????}

}

</script>

3僻爽、實現(xiàn)新增功能

引入teacher api模塊

import?teacherApi?from?'@/api/edu/teacher'

完善save方法

?????????//添加講師的方法

????????saveTeacher(){

????????????teacherApi.addTeacher(this.teacher)

????????????????.then(response?=>{

????????????????????//提示信息

????????????????????this.$message({

????????????????????????type:'success',

????????????????????????message:'添加成功！'

????????????????????});

????????????????????//回到列表頁面?路由跳轉(zhuǎn)

????????????????????this.$router.push({path:'/teacher/table'})

????????????????})

????????}

修改講師信息：通過隱藏路由傳遞講師id

index.js

????{

????????path:?'edit/:id',

????????name:?'EduTeacherEdit',

????????component:?()?=>?import('@/views/edu/teacher/save'),

????????meta:?{?title:?'編輯講師',?noCache:true?},

????????hidden:true

??????}

二贾惦、回顯

1胸梆、定義api?

?src/api/edu/teacher.js

getTeacherInfo(id){

????????return?request({

????????????url:`/eduservice/teacher/getTeacher/${id}`,

????????????method:'get'

????????})

????}

2、組件中調(diào)用api

save.vue中的methods中定義getInfo

????????//根據(jù)講師id查詢的方法

????????getInfo(id){

????????????teacherApi.getTeacherInfo(id)

????????????????.then(response?=>?{

????????????????????this.teacher?=?response.data.teacher

????????????????})

????????},

3须板、頁面渲染前調(diào)用fetchDataById

save.vue

created(){//頁面渲染之前執(zhí)行

????????//判斷路徑是否有id值

????????if?(this.$route.params?&&?this.$route.params.id)?{

????????????//從路徑獲取id值

????????????const?id?=?this.$route.params.id

????????????//調(diào)用根據(jù)id查詢的方法

????????????this.getInfo(id)

????????}

????},

三碰镜、更新

1、定義api

teacher.js

????//修改講師

????updateById(teacher){

????????return?request({

????????????url:`/eduservice/teacher/updateTeacher`,

????????????method:'post',

????????????data:teacher

????????})

????}

2习瑰、組件中調(diào)用api

methods中定義updateData

????//修改講師的方法

????????updateData(){

????????????this.saveBtnDisabled?=?true

????????????teacherApi.updateById(this.teacher)

????????????????.then(response?=>?{

????????????????????//提示信息

????????????????????this.$message({

????????????????????????type:'success',

????????????????????????message:'修改成功绪颖！'

????????????????????});

????????????????????//回到列表頁面?路由跳轉(zhuǎn)

????????????????????this.$router.push({path:'/teacher/table'})

????????????????})

????????}

3、完善saveOrUpdate方法

????saveOrUpdate(){

????????????this.saveBtnDisabled?=?true

????????????//判斷修改還是添加

????????????//根據(jù)teacher是否有id

????????????if(!this.teacher.id){

????????????????//添加

????????????????this.saveTeacher()

????????????}else{

????????????????//修改

????????????????this.updateData()

????????????}

????????},

四甜奄、存在問題

vue-router導(dǎo)航切換時柠横，如果兩個路由都渲染同個組件，組件會重（chong）用,

組件的生命周期鉤子（created）不會再被調(diào)用, 使得組件的一些數(shù)據(jù)無法根據(jù) path的改變得到更新

因此：

1课兄、我們可以在watch中監(jiān)聽路由的變化牍氛，當路由變化時，重新調(diào)用created中的內(nèi)容

2烟阐、在init方法中我們判斷路由的變化搬俊，如果是修改路由紊扬，則從api獲取表單數(shù)據(jù)，

? ? ? 如果是新增路由唉擂，則重新初始化表單數(shù)據(jù)

<script>

import?teacherApi?from?'@/api/edu/teacher'

export?default?{

????data(){

????????return?{

????????????teacher:{

????????????????name:?'',

????????????????sort:?0,

????????????????level:?1,

????????????????career:?'',

????????????????intro:?'',

????????????????avatar:?''

????????????},

????????????saveBtnDisabled:?false?//?保存按鈕是否禁用,

????????}

????},

????created(){//頁面渲染之前執(zhí)行

????????this.init()

????},

????watch:?{//監(jiān)聽

????????$route(to,from)?{?//路由變化方式餐屎，路由發(fā)生變化，方法就會執(zhí)行

????????this.init()

???????}

????},

????methods:{

????????init(){

????????????//判斷路徑是否有id值

????????????if?(this.$route.params?&&?this.$route.params.id)?{

????????????????//從路徑獲取id值

????????????????const?id?=?this.$route.params.id

????????????????//調(diào)用根據(jù)id查詢的方法

????????????????this.getInfo(id)

????????????}else{//路徑中沒有id值楔敌，做添加

????????????????//清空表單

????????????????this.teacher?=?{}

????????????}

????????},

.......

}

</script>

day05項目【講師管理模塊前端開發(fā)】