Vue+elementUi《后台管理系统》前端实现02

一、定义一个http.js,保存链接端口和定义请求拦截方法

import axios from 'axios'
import Vue from "vue"
import router from './router'

//定义链接接口
const http = axios.create({
    baseURL:'http://localhost:3037/admin/api'
})

http.interceptors.request.use(function(config){
   
  if(localStorage.token){
   config.headers.Authorization = "Bearer "+localStorage.token
   }
    return config
},function(err){
  
    return Promise.reject(err)
})


//请求拦截响应
http.interceptors.response.use(res =>{
    return res
},err=>{
    if(err.response.data.message){
        //输出错误信息
    Vue.prototype.$message({
        type:'error',
        message:err.response.data.message
    })
    //如果请求状态码为401证明没有登陆,则转回登陆界面
    if(err.response.status === 401){
       router.push("/login")
    }
}
    return Promise.reject(err)
})




export default http

 

二、在main.js中将http绑定到Vue实例对象中,使它可以在前端界面中被应用

import http from './http'
Vue.prototype.$http = http

  

三、 在views中定义一个Main.vue,作为起始界面,将所有路由显示都写在这里,并在router里面写入路由路径,使用的是el-container组件进行信息显示,左边是导航右边是内容,一个写了三个大板块,六个小内容。

//...   
<el-submenu index="1"> <template slot="title" ><i class="el-icon-message"></i>内容管理</template > <el-menu-item-group> <template slot="title">物品</template> <el-menu-item index="/items/create">新建物品</el-menu-item> <el-menu-item index="/items/list">物品列表</el-menu-item> </el-menu-item-group> <el-menu-item-group> <template slot="title">英雄</template> <el-menu-item index="/heros/create">新建英雄</el-menu-item> <el-menu-item index="/heros/list">英雄列表</el-menu-item> </el-menu-item-group> <el-menu-item-group> <template slot="title">文章</template> <el-menu-item index="/articles/create">新建文章</el-menu-item> <el-menu-item index="/articles/list">文章列表</el-menu-item> </el-menu-item-group> </el-submenu>
//...

 

 

 

 

 四、新建物品和物品列表实现等其他界面

  • 新建物品界面使用了el-form-item和el-upload组件
 <h1>{{ id ? "编辑" : "新建" }}物品</h1>
    <el-form label-width="120px" @submit.native.prevent="save">
      <el-form-item label="名称">
        <el-input v-model="model.name"></el-input>
      </el-form-item>
<!-- action设置上传路径,headers请求路由设置,on-success上传成功之后的动作 -->
      <el-form-item label="图标">
        <el-upload
          class="avatar-uploader"
          :action="uploadUrl"
          :headers=" getAuthHeaders()"
          :show-file-list="false"
          :on-success="afterUpload"
        >
          <img v-if="model.icon" :src="model.icon" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" native-type="submit">保存</el-button>
      </el-form-item>
    </el-form>
  • 新建物品界面调用接口,保存数据 
 methods: {
//数据上传成功后 afterUpload(res){ this.$set(this.model,'icon',res.url) // this.model.icon = res.url }, async save() { let res; //将数据上传 if (this.id) { res = await this.$http.put(`rest/items/${this.id}`, this.model); } else { res = await this.$http.post("rest/items", this.model); } console.log(res); this.$router.push("/items/list"); //上传成功则弹出保存成功 this.$message({ type: "success", message: "保存成功", }); }, //当创建时便获取数据 async fetch() { const res = await this.$http.get(`rest/items/${this.id}`); this.model = res.data; }, }, 
  • 物品列表界面用el-table渲染数据,用接口获取数据
<div>
    <h1>物品列表</h1>
    <!-- _id、name、icon是在数据库中预先定义的数据列表,使用接口获取数据items,然后用prop可以直接访问 -->
    <el-table :data="items">
      <el-table-column prop="_id" label="ID" width="180"> </el-table-column>     
      <el-table-column prop="name" label="物品名称"> </el-table-column>
           <el-table-column prop="icon" label="图标">
            <template slot-scope="scope">
                <img :src = "scope.row.icon" style="height:3em">
            </template>
            </el-table-column>
     <!-- 编辑,绑定单击事件,将页面跳转到编辑页面,编辑页面和新建页面一样 -->
      <el-table-column fixed="right" label="操作" width="180">
        <template slot-scope="scope">
          <el-button type="text" size="small" 
          @click="$router.push(`/items/edit/${scope.row._id}`)">编辑</el-button>
           <el-button type="text" size="small" 
          @click="remove(scope.row)">删除</el-button>
      
        </template>
      </el-table-column>
    </el-table>
  </div>

  

 methods: {
    //获取数据
    async fetch() {
      const res = await this.$http.get("rest/items");
      this.items = res.data;
    },
    //设置删除方法
    async remove(row){
        this.$confirm(`是否删除,"${row.name}"`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          //调用删除接口
        const res =  await this.$http.delete(`rest/items/${row._id}`)
        console.log(res)
        //删除
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          //重新获取数据
          this.fetch()
        })        
        
    }
  },

 五、其他界面的新建界面和数据列表界面大同小异,值得一提的是新建英雄界面和新建文章界面

  • 新建英雄界面使用el-tabs组件中的el-tab-pane,
  • 头像上传使用el-upload组件,
  • 类型选择是使用的el-select列表中的el-options设置可以多选
  • 难度评分使用的el-rate组件
 

 

  

 

 

   

          <el-form-item label="头像">
            <el-upload
              class="avatar-uploader"
              :action="$http.defaults.baseURL + '/upload'"
              :show-file-list="false"
              :on-success="afterUpload"
            >
              <img v-if="model.avatar" :src="model.avatar" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>

          <el-form-item label="类型">
            <el-select v-model="model.categories" multiple>
              <el-option
                v-for="item of categories"
                :key="item._id"
                :label="item.name"
                :value="item._id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="难度">
            <el-rate
              style="margin-top: 0.6rem"
              :max="9"
              show-score
              v-model="model.scores.difficult"
            ></el-rate>
          </el-form-item>
  • 新建文章界面,使用的是vue2-editor库中的VueEditor组件,类word编辑器,使得编辑时所见到的界面,是显示时所得到界面

  •  <h1>{{ id ? "编辑" : "新建" }}文章</h1>
        <el-form label-width="120px" @submit.native.prevent="save">
          <el-form-item label="所属分类">
            <el-select v-model="model.categories" multiple>
              <el-option
                v-for="item in categories"
                :key="item._id"
                :label="item.name"
                :value="item._id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标题">
            <el-input v-model="model.title"></el-input>
          </el-form-item>
          <el-form-item label="详情">
            <vue-editor v-model="model.body" useCustomImageHandler
            @image-added = "handleImageAdded"
            >
    
            </vue-editor>
          </el-form-item>
         
         
          <el-form-item>
            <el-button type="primary" native-type="submit">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    

      

 

posted @ 2021-07-31 17:14  AoYeDDM  阅读(65)  评论(0编辑  收藏  举报