vue element admin开发

沐雨云楼 web/ vue web

发布时间 : 2020-09-05 11:01

字数:2.6k 阅读 :

1.简介

1-1.vue-element-admin

vue-element-admin是一个后台前端解决方案，它基于vue和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。

vue-element-admin是基于vue-admin-template来开发

注意

本项目的定位是后台集成方案，不太适合当基础模板来进行二次开发。因为本项目集成了很多你可能用不到的功能，会造成不少的代码冗余。如果你的项目不关注这方面的问题，也可以直接基于它进行二次开发。

vue-element-admin官网

1-2.vue-admin-template

vue-element-admin就是基于vue-admin-template来开发改造的。所以我们完全可以基于vue-admin-template来自己改造。

当然对vue-element-admin进行不需要的内容的删除也可以。

如果你想要根据用户角色来动态生成侧边栏和router，可以使用该分支permission-control
如果想使用typescript, 可以使用vue-typescript-admin-template

2.简单配置

下面基于vue-element-admin项目正式开始改造和开发。

本篇基于当前时间(2020年9月5日)最新版4.4.0进行学习和研究。(使用的i18n分支)

# clone项目(打开github下载zip也可以)
git clone -b i18n git@github.com:PanJiaChen/vue-element-admin.git

# 进入目录
cd vue-admin-template

# 安装依赖
npm install --registry=https://registry.npm.taobao.org

# 运行
npm run dev

浏览器地址: http://localhost:9527

2-1.目录结构

├── build                      # 构建相关
├── mock                       # 项目mock 模拟数据
├── plop-templates             # 基本模板
├── public                     # 静态资源
│   │── favicon.ico            # favicon图标
│   └── index.html             # html模板
├── src                        # 源代码
│   ├── api                    # 所有请求
│   ├── assets                 # 主题 字体等静态资源
│   ├── components             # 全局公用组件
│   ├── directive              # 全局指令
│   ├── filters                # 全局 filter
│   ├── icons                  # 项目所有 svg icons
│   ├── lang                   # 国际化 language
│   ├── layout                 # 全局 layout
│   ├── router                 # 路由
│   ├── store                  # 全局 store管理
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用方法
│   ├── vendor                 # 公用vendor
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
│   └── permission.js          # 权限管理
├── tests                      # 测试
├── .env.xxx                   # 环境变量配置
├── .eslintrc.js               # eslint 配置项
├── .babelrc                   # babel-loader 配置
├── .travis.yml                # 自动化CI配置
├── vue.config.js              # vue-cli 配置
├── postcss.config.js          # postcss 配置
└── package.json               # package.json

2-2.setting

文件名(路径)： settings.js

module.exports = {
  webPort: 9527,

  title: 'vue-element-admin',

  showSettings: true,

  tagsView: true,

  fixedHeader: false,

  sidebarLogo: true,

  supportPinyinSearch: true,

  errorLog: 'production'
}

主要几个配置项目，

title: 标题

showSettings：页面的最右边的settings面板是否显示

tagsView: 页面最上面的多个标签是否显示

fixedHeader：头不是否固定

sidebarLogo: 侧边栏的log是否显示

supportPinyinSearch: 搜索是否拼音支持

errorLog：error的log级别，是否打开debugger模式

webPort: 自己添加的web端口，方便配置统一修改

2-3.端口号

有时候端口冲突需要修改默认端口，两种修改方式

配置文件
命令行

a.配置文件修改

文件名(路径)： vue.config.js

const port = process.env.port || process.env.npm_config_port || 8080

可以使用上面的settings定义的后加的变量 const port = process.env.port || process.env.npm_config_port || defaultSettings.webPort

b.命令行修改

npm run dev --port = 8080

2-4.logo

文件名(路径)： src/layout/components/Sidebar/Logo.vue

data() {
    return {
      title: 'Vue Element Admin',
      logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
    }
}

title: 侧边栏的名称
logo: 侧边栏的logo

如何修改自己的图片呢？

<script>
import iworkhPng from '@/assets/custom-images/iworkh.png'

export default {
  data() {
    return {
      title: 'iworkh-fw',
      logo: iworkhPng
    }
  }
}
</script>

import将图片加载进来

2-5.环境api

vue共提供三套环境配置文件，里面定义了不同的环境，走不同的api。三个配置文件分别是

.env.development
.env.production
.env.staging

# just a flag
ENV = 'development'

# base api
#VUE_APP_BASE_API = '/api'
VUE_APP_BASE_API = 'http://localhost:8080/api'

为了和后台交互，将VUE_APP_BASE_API修改下，跟后台能够通信的http地址。

3.删除

下面删除一些不需要的代码，使得代码比较简洁，能够直接进行开发。

删除对象

router
views
components
vendor
lang
icons

最主要要删的是router和views目录下文件，其他看自己。

我只留了个首页和外部链接菜单，其他的都删了。

4.前后端交互

后台springboot，单体架构，数据库mysql。

如果没有springboot基础的，请参照 springboot

4-1.用户

为了简单起见，用户部分只从后台走下，返回结果给前台。没有去数据库进行验证等操作。

本片文章的目的在于：简化一个vue-admin，能够和后台进行交互。其他部分需要读者自己进行扩展和优化。

4-1-1.前台

mock

启动前台代码，通过路由进入的登录页面。这时候登录的验证都是通过mock方式的。

为了和后台的交互而不是mock。所以我们可以将mock直接关闭

文件路径： vue.config.js

devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    }
    //before: require('./mock/mock-server.js')
  },

将before部分注释或者删掉

登录页面

登录部分根据自己需要修改，微信和qq等第三方登录方式。登录的入口文件: src/views/login/index.vue

请求api和返回值

登录相关共三个api，可以通过src/api/user.js里查看三个接口。

/vue-element-admin/user/login
/vue-element-admin/user/info
/vue-element-admin/user/logout

为了和后台交互，将接口中的vue-element-admin删了。留着也无所谓，只要跟后面自己写的后台api能够匹配上即可。

而返回的结果，可以通过mock/user.js查看。根据mock里的返回结果，我们就可以知道后台如何写了。

工具类request.js

请求接口一个很重要的工具类request.js

文件路径： src/utils/request.js

response => {
    const res = response.data

    // if the custom code is not 20000, it is judged as an error.
    if (res.code !== 20000) {
      Message({
        message: res.message || 'Error, code must been set',
        type: 'error',
        duration: 5 * 1000
      })

      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // to re-login
        MessageBox.confirm('You have been logged out', 'Confirm logout', {
          confirmButtonText: 'Re-Login',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }

注意

通过代码发现，返回值必须要有code，而且是20000才是正常，否则是异常，这很重要。(如果不想这样，那么自己修改下这部分逻辑)

4-1-2.后台

通过前台request.js和mock返回数据，我们了解到了两件事

请求接口共三种(注意get还是post请求),我接口都改为了
- /user/login
- /user/info
- /user/logout
返回值是什么样的,即返回结果结构(注意有code)

下面用到几个类

ResponseData返回值类

public class ResponseData<T> {

    private boolean success;

    private int code = 20000;

    private String errMsg;

    private T data;

    ...省略setter、getter等方法...
}

PageData分页返回类

public class PageData<T> {

    private int total;

    private int currentPage;

    private int pageSize;

    private List<T> items;

    ...省略setter、getter等方法...
}

CustomCORSConfiguration跨域配置类

@Configuration
public class CustomCORSConfiguration {
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.setAllowCredentials(true);
        return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig());
        return new CorsFilter(source);
    }

}

@RestController
@RequestMapping("/api/user")
public class UserController {

    @PostMapping("/login")
    public ResponseData< Map<String, String>> login(){
        ResponseData< Map<String, String>> result = new ResponseData<>();
        result.setSuccess(true);
        result.setCode(20000);
        Map<String, String> tokenMap= new HashMap<>();
        tokenMap.put("token","admin-token");
        result.setData(tokenMap);
        return result;
    }
}

在controller中直接返回了，都有用户的验证，返回结果。(自己做项目时候，记得自己验证，跟数据和交互。密码是否加密等处理)

用户信息

@RestController
@RequestMapping("/api/user")
public class UserController {

    @GetMapping("/info")
    public ResponseData<UserVo> info(){
        ResponseData<UserVo> result = new ResponseData<>();
        UserVo userVo = new UserVo();
        userVo.setId("1");
        userVo.setName("Super Admin");
        userVo.setAvatar("https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");
        userVo.setIntroduction("I am a super administrator");

        List<String> roles = new ArrayList<>(1);
        roles.add("admin");
        userVo.setRoles(roles);
        result.setSuccess(true);
        result.setCode(20000);
        result.setData(userVo);
        return result;
    }
}

退出

@RestController
@RequestMapping("/api/user")
public class UserController {
    @PostMapping("/logout")
    public ResponseData<String> logout(){
        ResponseData<String> result = new ResponseData<>();
        result.setSuccess(true);
        result.setCode(20000);
        result.setData("success");
        return result;
    }
}

通过上面的代码，其他后，登录页面，点击登录就可以进入到了首页了。

4-2.首页

首页进入后，页面还会报个小错误。请求的/vue-element-admin/transaction/list的api找不到。

4-2-1.前端

文件路径： src/api/remote-search.js

export function transactionList(query) {
  return request({
    url: '/vue-element-admin/transaction/list',
    method: 'get',
    params: query
  })
}

为了统一，我将url修改了，/dashboard/transaction/list

4-2-2.后端

通过mock/remote-search.js文件，我们可以查看返回结果

{
    url: '/vue-element-admin/transaction/list',
    type: 'get',
    response: _ => {
      return {
        code: 20000,
        data: {
          total: 20,
          'items|20': [{
            order_no: '@guid()',
            timestamp: +Mock.Random.date('T'),
            username: '@name()',
            price: '@float(1000, 15000, 0, 2)',
            'status|1': ['success', 'pending']
          }]
        }
      }
    }
}

code: 20000返回值
data: data里是分页信息，总条数total，结果集items是一个list

通过上面的返回结果，我们封装api接口为

DashBoardController首页路由类

@RestController
@RequestMapping("/api/dashboard")
public class DashBoardController {

    @GetMapping("/transaction/list")
    public ResponseData<PageData> transactionList(){
        ResponseData<PageData> result = new ResponseData<>();

        PageData<List> pageData = new PageData();

        List listItem = new ArrayList<>(2);
        // first
        Map<String, Object> dataMapFirst = new HashMap<>(3);
        dataMapFirst.put("order_no","e527-Bbfdfa");
        dataMapFirst.put("price","4640.1");
        dataMapFirst.put("status","pending");
        listItem.add(dataMapFirst);

        // second
        Map<String, Object> dataMapSecond = new HashMap<>(3);
        dataMapSecond.put("order_no","Db3B-Ba26D7");
        dataMapSecond.put("price","12507.85");
        dataMapSecond.put("status","success");
        listItem.add(dataMapSecond);

        // pageData
        pageData.setTotal(2);
        pageData.setItems(listItem);
        // result
        result.setSuccess(true);
        result.setCode(20000);
        result.setData(pageData);
        return result;
    }
}

到这里，整个简单的vue-admin就能和后端进行交互了。下面就是开发添加自己的功能了。

转载请注明来源，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 157162006@qq.com