后台系统前端模板——WeAdmin

Layui作为后台开发的前端框架，一直以来深受后端开发人员的喜爱。今天这篇文章展示WeAdmin设计巧妙之处，如果需要自定义菜单结构、理解其中的代码和运作原理，这里会给大家演示其修改过程！

下面我给大家截图这个系统的一些具体界面

权限管理

数据分析（饼状图）

编辑功能

删除功能（弹出确认框）

更多的体验，可以下载对应源码然后运行即可

> 下面是自定义菜单结构名称的过程

方法1：

1. 进入fastmock官网并注册账号，https://www.fastmock.site/

2. 创建接口根地址，并添加接口

将项目源码中的json/menu.json文件里的内容复制进接口内容中

3. 复制接口地址，按步骤修改项目中http.js文件（如图所示）

3.1 复制接口的完整地址

3.2 修改http.js文件，将接口地址填入url键中，并修改menuList变量值

方法二（给予思路）：

        通过源码我们可以发现，每次用户打开后台系统主页，都会通过http.js文件发送ajax请求，然后这个请求收到一个带有json格式的数据返回，根据这个思路，我们可以提前编写好菜单结构的json文件，后端通过读取这个json文件，返回其json数据格式的字符串给前端。 

> 源码获取方式

关注公众号，回复"后台模板"即可

> 总结       

     好了，希望这篇文章对你寻找后台前端模板起到作用，建议多去看里面的源码的运行原理，当我们掌握了一套比较好的前端模板的核心技术，将提供我们后端开发的效率！

    如果喜欢，可以点赞 + 收藏 + 关注 

简介

• vue-cli创建vue项目，整合vuex、vue-router、axios、element-ui
• 项目模板下载地址

创建项目

Java+前端项目合集

• 使用vue-cli创建项目，功能选择：Babel、Router、vuex、Linter/Formatter、使用配置文件（文章转载自乐字节）
  
  
  
  
  
• 插件选择vue-cli-plugin-element
  
• 安装运行依赖axios
  
• 使用命令安装开发依赖：less、less-loader

npm install less
npm install less-loader@5.0.0

预期效果

• 访问根路径时重定向到欢迎页面
  
• **点击侧边栏子节点时，路由自动发生改变，且跳转到不同的子组件

**

• 点击【书籍信息】，跳转到bookList.vue，向后端服务器发送axios请求，获取数据，遍历到页面
  

初始化项目

• 查看package.json中dependencies表示安装的运行依赖，devDependencies表示安装的开发依赖
• plugins文件夹下的element.js表示element-ui插件配置成
• 删除router文件夹中index.js中默认生成的代码，同时删除views文件夹及子组件

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
]
const router = new VueRouter({
  routes
})
export default router

• store文件夹表示vuex配置成功，用于共享数据
• 删除根组件App.vue中默认生成的代码，同时删除components文件夹中的子组件

<template>
  <div id="app">
    app根组件
  </div>
</template>
<script>
export default {
  name: 'app'
}
</script>
<style>
</style>

• 编写全局样式global.css，在main.js中导入
• 最后在终端中输入命令，启动项目，浏览器访问该项目，查看是否报错，

element-ui

• element-ui使用步骤参考
• 使用element-ui布局

// 在当前项目element.js中已将所有element-ui组件全部引入了，直接使用即可
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Element)

• 容器布局

<!-- 默认展开的子节点 -->
<el-menu :default-openeds="['1', '3']">
<!-- 默认选中的子节点 -->
<el-menu :default-active="['1-1']">
<!-- 图标 -->
<i class="el-icon-coin"></i>
<!-- 一级菜单-->
index="4"
<!-- 二级菜单 -->
index="5-1"
<!-- 三级菜单 -->
<el-menu-item index="4-1-2">
<!-- 默认选中颜色 -->
<el-menu active-text-color="#409EFF"

<!-- 默认只展开一个子节点 -->
<el-menu unique-opened>

Router

• 路由使用步骤：1.构建项目时已经打开了router功能；2.新建子组件；3.router/index.js中配置路由规则；4.路由出口；5.main.js中router作为vue实例的属性

• 编写欢迎页面

  • 访问根路径时，显示欢迎页面
  • 新建一个welcome.vue
  • router/index.js中引入子组件welcome.vue，配置路由规则

• 侧边栏开启路由

<!-- 1. App.vue中开启侧边栏路由 -->
<el-menu router>

<!-- 2. 子节点中设置path -->
<el-menu-item :index="'/userList'">

<!-- 3. 新建子组件，如userList.vue等，并在router中配置路由规则 -->

axios

• axios使用：main.js中引入axios，默认配置，注册为vue实例的属性
• 新建一个bookList.vue组件，发送axios请求，将返回的数据遍历到页面

<script>
export default {
    data() {
        return {
            books: []
        }
    },
    created(){
        // 将vue对象赋值给_this
        const _this = this;
        _this.$http.get("book/findAll/3/4").then(function(response){
            // then方法中的this表示response
            console.log(response.data.content)
            _this.books = response.data.content;
        });
    }
}
</script>

vuex

• 使用步骤

// 1. 构建项目时已经打开了vuex功能

// store/index.js
import Vuex from 'vuex'      // 2. 引入
Vue.use(Vuex)            // 3. 注册为vue实例的组件
export default new Vuex.Store({
  state: {
    count: 0      // 4. store中皴法共享数据
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

// 入口文件main.js
import store from './store'
new Vue({
  store,                 // 5. 将store挂载到vue实例
  render: h => h(App)
}).$mount('#app')

// 在bookList.vue中使用
<span>vuex使用：{{ $store.state.count }}</span>

（文章转载自乐字节）

模板套用

1、在项目中创建模版对应的jsp文件， 将jsp文件中的basepath代码移动到其他位置

2、将模版中¹的前端资源文件复制到webRoot下。

3、将模版中的HTML代码整个复制到对应的jsp中

4、将basepath在移动到head标签中

前端代码插件的添加

因为my eclipse不是专业的前端编辑工具，如HBuilder、WebStorm等，所以想实现辅助输入功能，需要响应的插件（jar包）

1、插件在资料²中，将查询包放到myEclipse的安装目录中的dropins文件中，然后重启myEclipse即可。

2、安装后快捷键为:ctrl+E