07-尚硅谷-云尚办公【前端框架搭建】

一、前端环境

1、搭建

1.1、利用VScode建立前端项目工作区

创建文件夹myyunshangbangong-vue

下载前端工程文件

链接：https://pan.baidu.com/s/1mqrscDii-JR78IoiJJdZUA?pwd=fpqo 
提取码：fpqo

将oa-admin文件夹复制到文件夹myyunshangbangong-vue中

用VScode打开文件夹

创建工作区

1.2、 根据配置文件下载相关依赖package.json

使用命令：npm install

完成完整文件的创建

1.3、 启动项目命令

npm run dev

浏览器自动跳出

2、登录功能

2.1  前端

修改ip和端口号

修改方式一：

修改方式二：

在vue.config.js中注释掉mock接口配置

    proxy: {
      '/dev-api': { // 匹配所有以 '/dev-api'开头的请求路径
        target: 'http://localhost:8800',
        changeOrigin: true, // 支持跨域
        pathRewrite: { // 重写路径: 去掉路径中开头的'/dev-api'
          '^/dev-api': ''
        }
      }
    }

2.2、在后端创建登录相关接口返回mock相同数据

打开之前创建好的后端工程（链接：https://pan.baidu.com/s/1RzmE2tGUFxxdzyrFq_qgcw?pwd=6a6o 提取码：6a6o）

创建LoginController类

创建login接口

请求类型为post

package com.yun.oa.controller;

import com.yun.utils.common.Result;
import io.swagger.annotations.Api;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.HashMap;
import java.util.Map;

/*
 * @paragram: myyunshangbangong
 * @description: 后台登陆登录接口
 * @author:
 * @create: 2024-01-18
 */
@Api(tags = "后台登陆")
@RestController
@RequestMapping("/admin/system/log")
public class LoginController {
    //  login
    @PostMapping("login")
    public Result login(){
        //{"code":200,"data":{"token":"admin-token"}}
        Map<String,Object> map = new HashMap<>();
        map.put("token","admin-token");
        return Result.ok(map);
    }
    //  info
    @GetMapping("info")
    public Result info(){
        Map<String,Object> map = new HashMap<>();
        map.put("roles","[admin]");
        map.put("name","admin");
        map.put("avatar","https://oss.aliyuncs.com/aliyun_id_photo_bucket/default_handsom.jpg");
        return Result.ok(map);
    }
    //  logout
    @PostMapping("logout")
    public Result logout(){
        return Result.ok();
    }
    @GetMapping("list")
    public Result getList(){
        return Result.ok();
    }
}

3、修改完善前端

3.1、修改api文件夹里的user.js接口路径修改本地路径

根据后端修改后的user.js

import request from '@/utils/request'

export function login(data) {
  return request({
    url: '/admin/system/log/login',
    method: 'post',
    data
  })
}

export function getInfo(token) {
  return request({
    url: '/admin/system/log/info',
    method: 'get',
    params: { token }
  })
}

export function logout() {
  return request({
    url: '/admin/system/log/logout',
    method: 'post'
  })
}

3.2、修改状态码

修改js文件，把返回状态码修改为200，因为后端规定的状态码是200

启动前端和后端项目

登录成功

能够成功跳转

二、角色列表显示

1、添加角色管理路由

  {
    path: '/system',
    component:Layout,
    meta:{
      title: '系统管理',
      icon: 'el-icon-s-tools'
    },
    alwaysShow:true,
    children: [
      {
        path: 'sysRole',
        component: ()=> import('@/views/system/sysRole/list'),
        meta:{
          title: '角色管理',
          icon: 'el-icon-s-help'
        }
      }
    ]
  },

2、创建前端文件

2.1、在api文件夹中创建js文件，定义接口信息

与后端参数需要对应

import request from '@/utils/request'//封装了axios相关内容

const api_name = '/admin/system/sysRole'
export default{
    // 角色列表-条件分页查询
    // 与后端匹配
    getPageList(current,limit,searchObj) {
        return request({
            url: `${api_name}/${current}/${limit}`,
            method: 'get',
            //如果普通对象参数写法 params:对象参数名称
            //如果使用json格式传递，data:对象参数名称
            params:searchObj
        })
    }
}

 2.2、创建vue文件

代码

<!--><template>
  <div class="app-container">
    角色列表
  </div>
</template>
-->
<template>
    <div class="app-container">
    角色列表

    <!--查询表单-->
    <div class="search-div">
      <el-form label-width="70px" size="small">
        <el-row>
          <el-col :span="24">
            <el-form-item label="角色名称">
              <el-input style="width: 100%" v-model="searchObj.roleName" placeholder="角色名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="display: flex;">
          <el-button type="primary" icon="el-icon-search" size="mini" :loading="loading" @click="fetchData()">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" :loading="loading" @click="restData">重置</el-button>
        </el-row>
      </el-form>
    </div>
    <!--表格-->
    <el-table
      v-loading="listLoading"
      :data="list"
      stripe
      border
      style="width: 100%;margin-top: 10px;"
      @selection-change="handeleSelectionChange">

      <el-table-column type="selection"/>

      <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="roleName" label="角色名称"/>
      <el-table-column prop="roleCode" label="角色编码"/>
      <el-table-column prop="createTime" label="创建时间" width="160"/>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini"
          @click="edit(scope.row.id)" title="修改"/>
          <el-button type="danger" icon="el-icon-delete" size="mini"
          @click="removeDataById(scope.row.id)" title="删除"/>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <el-pagination
      :current-page="page"
      :total="total"
      :page-size="limit"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="fetchData"
    />

  </div>
</template>
<script>
//引入定义接口的js文件
import api from '@/api/system/sysRole'

export default{
  // vue代码结构
  // 初始值
  data(){
    return{
      list:[],//角色列表
      page:1,//当前页
      limit:3,//每页显示记录数
      total:0,//总记录数
      searchObj:{}//条件对象
    }
  },
  created() { //渲染之前执行
    this.fetchData()
  },
  methods:{ //操作方法
    // 条件分页查询
    fetchData(current = 1){
      this.page = current
      api.getPageList(this.page,this.limit,this.searchObj)
          .then(response => {
            this.list = response.data.records
            this.total = response.data.records.length;
      })
    }        
  }
}
</script>

 列表显示结果