目的：快速构建一个vue后台项目。
通过初始化和查询element组件，可以解决大部分问题，因为大部分都是表格的处理。

资料：

  • element UI 各种组件
  • vue element Admin 提供全面的功能，预览页面，包含：Element UI & axios & iconfont & permission control & lint等基础模块
  • vue-admin-template 提供基础功能，建议初始化使用

vue-admin-templat

新建项目

完成 动态路由导航、登录、axios等基础功能

  1. # 克隆项目
  2. git clone https://github.com/PanJiaChen/vue-admin-template.git
  4. # 进入项目目录
  5. cd vue-admin-template
  7. # 安装依赖
  8. npm install
  10. # 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
  11. npm install --registry=https://registry.npm.taobao.org
  13. # 启动服务
  14. npm run dev

项目初始化

request.js

修改axios的过滤器，结果如下

  1. import axios from 'axios'
  2. import store from '@/store'
  3. import { getToken } from '@/utils/auth'
  5. // create an axios instance
  6. const service = axios.create({
  7.   baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  8.   // withCredentials: true, // send cookies when cross-domain requests
  9.   timeout: 5000 // request timeout
  10. })
  12. // request interceptor
  13. service.interceptors.request.use(
  14.   config => {
  15.     // do something before request is sent
  17.     if (store.getters.token) {
  18.       // let each request carry token
  19.       // ['X-Token'] is a custom headers key
  20.       // please modify it according to the actual situation
  21.       config.headers['X-Token'] = getToken()
  22.     }
  23.     return config
  24.   },
  25.   error => {
  26.     // do something with request error
  27.     console.log(error) // for debug
  28.     return Promise.reject(error)
  29.   }
  30. )
  32. // response interceptor
  33. service.interceptors.response.use(
  34.   /**
  35.    * If you want to get http information such as headers or status
  36.    * Please return  response => response
  37.   */
  39.   /**
  40.    * Determine the request status by custom code
  41.    * Here is just an example
  42.    * You can also judge the status by HTTP Status Code
  43.    */
  44.   response => {
  45.     const res = response.data
  47.     return res
  48.   },
  49.   error => {
  50.     console.log('err' + error) // for debug
  51.     Message({
  52.       message: error.message,
  53.       type: 'error',
  54.       duration: 5 * 1000
  55.     })
  56.     return Promise.reject(error)
  57.   }
  58. )
  60. export default service

表格页面示例

效果：

image.png

新建api请求

  1. import request from '@/utils/request'
  3. export function fetchList(query) {
  4.   return request({
  5.     url: '/article/list',
  6.     method: 'get',
  7.     params: query
  8.   })
  9. }
  11. export function fetchOne(id) {
  12.   return request({
  13.     url: '/article/detail',
  14.     method: 'get',
  15.     params: { id }
  16.   })
  17. }
  19. // create Or update
  20. export function saveOne(data) {
  21.   return request({
  22.     url: '/article/save',
  23.     method: 'post',
  24.     data
  25.   })
  26. }
  28. export function deleteOne(id) {
  29.   return request({
  30.     url: '/article/delete',
  31.     method: 'post',
  32.     params: { id }
  33.   })
  34. }

新建vue页面

  1. <template>
  2.   <div class="app-container">
  3.     <el-form :inline="true" :model="param" class="demo-form-inline">
  4.       <el-form-item label="名字">
  5.         <el-input v-model="param.name" placeholder="名字" />
  6.       </el-form-item>
  7.       <el-form-item label="日期">
  8.         <el-input v-model="param.date" />
  9.       </el-form-item>
  10.       <el-form-item>
  11.         <el-button type="primary" @click="queryList">查询</el-button>
  12.       </el-form-item>
  13.     </el-form>
  14.     <template>
  15.       <!--添加-->
  16.       <el-row>
  17.         <el-button @click="createOne()">添加</el-button>
  18.       </el-row>
  19.       <!--数据-->
  20.       <el-table
  21.         :data="tableData"
  22.         border
  23.         style="width: 100%"
  24.       >
  25.         <el-table-column
  26.           fixed
  27.           prop="date"
  28.           label="日期"
  29.           width="150"
  30.         />
  31.         <el-table-column
  32.           prop="name"
  33.           label="姓名"
  34.           width="150"
  35.         />
  36.         <el-table-column
  37.           prop="email"
  38.           label="email地址"
  39.           width="300"
  40.         />
  41.         <el-table-column
  42.           fixed="right"
  43.           label="操作"
  44.           width="100"
  45.         >
  46.           <template slot-scope="scope">
  47.             <el-button
  48.               type="text"
  49.               size="small"
  50.               @click="editOne(scope.row)"
  51.             >编辑
  52.             </el-button>
  53.             <el-button
  54.               size="small"
  55.               type="text"
  56.               @click="deleteAlert(scope.row.id)"
  57.             >删除
  58.             </el-button>
  59.           </template>
  60.         </el-table-column>
  61.       </el-table>
  63.       <!--编辑层-->
  64.       <el-dialog title="编辑" :visible.sync="dialogFormVisible">
  65.         <el-form :model="editNews">
  66.           <el-form-item label="姓名" :label-width="formLabelWidth">
  67.             <el-input v-model="editNews.name" autocomplete="off" />
  68.           </el-form-item>
  69.           <el-form-item label="Email" :label-width="formLabelWidth">
  70.             <el-input v-model="editNews.email" placeholder="" />
  71.           </el-form-item>
  72.         </el-form>
  73.         <div slot="footer" class="dialog-footer">
  74.           <el-button @click="dialogFormVisible = false">取 消</el-button>
  75.           <el-button type="primary" @click="saveOne">确 定</el-button>
  76.         </div>
  77.       </el-dialog>
  79.       <!--删除提示-->
  80.       <el-dialog
  81.         title="提示"
  82.         :visible.sync="dialogVisible"
  83.         width="30%"
  84.         :before-close="handleClose"
  85.       >
  86.         <span>真的要删吗？</span>
  87.         <div slot="footer" class="dialog-footer">
  88.           <el-button @click="dialogVisible = false">取 消</el-button>
  89.           <el-button type="primary" @click="deleteOne">确 定</el-button>
  90.         </div>
  91.       </el-dialog>
  93.       <!--分页-->
  94.       <div class="block">
  95.         <el-pagination
  96.           :current-page="param.page"
  97.           :page-sizes="[10, 20, 30, 40]"
  98.           :page-size="param.size"
  99.           layout="total, sizes, prev, pager, next, jumper"
  100.           :total="total"
  101.           @size-change="handleSizeChange"
  102.           @current-change="handleCurrentChange"
  103.         />
  104.       </div>
  105.     </template>
  106.   </div>
  107. </template>
  109. <script>
  110. import { deleteOne, fetchList, fetchOne, saveOne } from '@/api/article'
  111. export default {
  112.   data() {
  113.     return {
  114.       tableData: [],
  115.       // 删除层隐藏
  116.       dialogVisible: false,
  117.       // 弹出层隐藏
  118.       dialogFormVisible: false,
  119.       // 弹出层内容
  120.       editNews: {
  121.         name: '',
  122.         email: ''
  123.       },
  124.       // 弹出层大小
  125.       formLabelWidth: '120px',
  126.       // 删除使用的id
  127.       id: '',
  128.       // 查询参数
  129.       param: {
  130.         name: '',
  131.         date: '',
  132.         page: 1,
  133.         size: 10
  134.       },
  135.       // 查询返回总条数
  136.       total: 0
  137.     }
  138.   },
  139.   mounted() {
  140.     this.queryList()
  141.   },
  142.   methods: {
  143.     // 修改页面展示数据大小
  144.     handleSizeChange(val) {
  145.       this.param.size = val
  146.       this.queryList()
  147.     },
  148.     // 修改页码
  149.     handleCurrentChange(val) {
  150.       this.param.page = val
  151.       this.queryList()
  152.     },
  153.     // 点击编辑，从后台获取数据
  154.     editOne(row) {
  155.       console.log(row)
  156.       fetchOne(row.id).then(res => {
  157.         if (res.flag) {
  158.           this.editNews = res.data
  159.         }
  160.       })
  161.       this.dialogFormVisible = true
  162.     },
  163.     // 获取删除行的id
  164.     deleteAlert(id) {
  165.       this.id = id
  166.       this.dialogVisible = true
  167.     },
  168.     // 删除
  169.     deleteOne() {
  170.       deleteOne(this.id).then(res => {
  171.         if (res.flag) {
  172.           this.dialogFormVisible = false
  173.           this.queryList()
  174.         } else {
  175.           alert('删除失败')
  176.         }
  177.       })
  178.       this.dialogVisible = false
  179.     },
  180.     // 关闭提示框时，提示是否要关闭
  181.     handleClose(done) {
  182.       this.$confirm('确认关闭？')
  183.         .then(() => {
  184.           done()
  185.         })
  186.         .catch(() => {
  187.         })
  188.     },
  189.     // 点击添加按钮清空
  190.     createOne() {
  191.       this.editNews = {}
  192.       this.dialogFormVisible = true
  193.     },
  194.     // 点击确定后发送请求
  195.     saveOne() {
  196.       saveOne(this.editNews).then(res => {
  197.         if (res.flag) {
  198.           this.dialogFormVisible = false
  199.           this.queryList()
  200.         } else {
  201.           this.$message('添加失败')
  202.         }
  203.       })
  204.     },
  205.     // 获取数据
  206.     queryList() {
  207.       fetchList(this.param).then(res => {
  208.         if (res.flag) {
  209.           this.tableData = res.data.list
  210.           this.total = res.data.total
  211.         } else {
  212.           this.tableData = {}
  213.         }
  214.       })
  215.     }
  216.   }
  217. }
  218. </script>

mock模拟数据

  1. import Mock from 'mockjs'
  3. export default [
  4.   {
  5.     url: '/article/list',
  6.     type: 'get',
  7.     response: config => {
  8.       console.log(config.query)
  9.       console.log(config.body)
  11.       const data = Mock.mock({
  12.         code: 20000,
  13.         flag: true,
  14.         data: {
  15.           'total|100-200': 1,
  16.           'list|10': [{
  17.             'id|+1': 1,
  18.             name: '@name',
  19.             email: '@email',
  20.             date: '@date'
  21.           }]
  22.         }
  23.       })
  25.       return data
  26.     }
  27.   },
  29.   {
  30.     url: '/article/detail',
  31.     type: 'get',
  32.     response: config => {
  33.       const detail = Mock.mock({
  34.         code: 20000,
  35.         flag: true,
  36.         data: {
  37.           'id|1-19': 1,
  38.           name: '@name',
  39.           email: '@email'
  40.         }
  42.       })
  43.       return detail
  44.     }
  45.   },
  47.   {
  48.     url: '/article/save',
  49.     type: 'post',
  50.     response: x => {
  51.       console.log(x.body)
  52.       return {
  53.         code: 20000,
  54.         flag: true,
  55.         data: 'success'
  56.       }
  57.     }
  58.   },
  60.   {
  61.     url: '/article/deleteOne',
  62.     type: 'post',
  63.     response: _ => {
  64.       return {
  65.         code: 20000,
  66.         flag: true,
  67.         data: 'success'
  68.       }
  69.     }
  70.   }
  71. ]

vue-element项目

项目包下载：vue-element-admin-master.zip

也可以：git clone https://github.com/PanJiaChen/vue-element-admin.git

所有的功能模块，需要的时候方便查找

  1. - 登录 / 注销
  3. - 权限验证
  4.   - 页面权限
  5.   - 指令权限
  6.   - 权限配置
  7.   - 二步登录
  9. - 多环境发布
  10.   - dev sit stage prod
  12. - 全局功能
  13.   - 国际化多语言
  14.   - 多种动态换肤
  15.   - 动态侧边栏（支持多级路由嵌套）
  16.   - 动态面包屑
  17.   - 快捷导航(标签页)
  18.   - Svg Sprite 图标
  19.   - 本地/后端 mock 数据
  20.   - Screenfull全屏
  21.   - 自适应收缩侧边栏
  23. - 编辑器
  24.   - 富文本
  25.   - Markdown
  26.   - JSON 等多格式
  28. - Excel
  29.   - 导出excel
  30.   - 导入excel
  31.   - 前端可视化excel
  32.   - 导出zip
  34. - 表格
  35.   - 动态表格
  36.   - 拖拽表格
  37.   - 内联编辑
  39. - 错误页面
  40.   - 401
  41.   - 404
  43. - 組件
  44.   - 头像上传
  45.   - 返回顶部
  46.   - 拖拽Dialog
  47.   - 拖拽Select
  48.   - 拖拽看板
  49.   - 列表拖拽
  50.   - SplitPane
  51.   - Dropzone
  52.   - Sticky
  53.   - CountTo
  55. - 综合实例
  56. - 错误日志
  57. - Dashboard
  58. - 引导页
  59. - ECharts 图表
  60. - Clipboard(剪贴复制)
  61. - Markdown2html