Vue中Element-UI构建管理后台代码分享

本文主要和大家分享Vue中Elememt-UI构建管理后台代码，希望能帮助到大家。

安装

我使用的是 vue-cli 初始化项目，命令如下：

  npm i -g vue-cli
mkdir my-project && cd my-project
vue init webpack

修改 package.json 文件：

   ...
"dependencies": {
  "vue": "^2.5.2",
  "vue-router": "^3.0.1",
  "element-ui": "^2.0.7",  // element-ui
  "axios": "^0.17.1"  // http 请求库
}
...

之后执行 npm install 进行安装依赖，如果安装速度有点慢的话，可以试一下 cnpm ，具体安装和用法自行查找。

简单介绍下项目的目录结构：

├─build  // 构建配置
├─config  // 配置文件
├─src  // vue 开发源文件目录
├────assets  // css/js 文件
├────components  // vue 组件
├────router   // 路由
├────App.vue   // 启动组件
├────main.js  // 入口文件
├─static  // 静态文件目录
├─test  // 测试目录

之后在项目根目录执行 npm run dev ，打开浏览器输入 http://localhost:8080 就可以查看了。

立即学习“前端免费学习笔记（深入）”；

目标

 登录页面，登录，退出功能

 首页，调用接口渲染列表

路由

路由使用的是 vue-router，具体用法可参考 官方文档
我们这里需要两个路由：
src/router/index.js

   import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/components/Index'
import Login from '@/components/Login'
Vue.use(Router)
const routers =  new Router({
  routes: [
    {
      path: '/index',
      name: 'index',
      component: Index
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    }
  ]
})
routers.beforeEach((to, from, next) => {
  if (to.name !== 'login' && !localStorage.getItem('token')) {
    next({path: 'login'})
  } else {
    next()
  }
})
export default routers

登录页面

src/components/Login.vue

首页

src/components/Index.vue

App

成新网络商城购物系统

使用模板与程序分离的方式构建，依靠专门设计的数据库操作类实现数据库存取，具有专有错误处理模块，通过 Email 实时报告数据库错误，除具有满足购物需要的全部功能外，成新商城购物系统还对购物系统体系做了丰富的扩展，全新设计的搜索功能，自定义成新商城购物系统代码功能代码已经全面优化，杜绝SQL注入漏洞前台测试用户名：admin密码：admin888后台管理员名：admin密码：admin888

下载

src/App.vue

调用 API

src/api/index.js

   import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:8000/'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token')
export default {
  setToken: function (token) {
    localStorage.setItem('token', token)
    axios.defaults.headers.common['Authorization'] = 'Bearer ' + token
  },
  login: function (param) {
    return axios.post('oauth/token', param)
  },
  index: function (params) {
    return axios.get('api/user/list', {
      params: params
    })
  }
}

config

src/config.js 这里配置登录 oauth 需要的 client_id 和 secret

   export default {
  oauth_client_id: 2,
  oauth_secret: ''
}

main.js

src/main.js

   import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
Vue.config.productionTip = false
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

api 接口

主要用到两个接口，一个是 api/oauth/token 登录获取 token 接口，一个获取列表 api/user/list。
第一个接口是用到 laravel oauth，第二个接口直接是一个简单的查询用户列表接口，详细讲会在下一篇文章中讲述。

相关推荐：

微信公众平台开发管理后台开发

基于thinkphp5开发的管理后台

Vue的elementUI实现自定义主题