"),e.text&&(0,s.show)(i),e.customClass)(0,s.addClass)(t,e.customClass),t.setAttribute("data-custom-class",e.customClass);else{var d=t.getAttribute("data-custom-class");(0,s.removeClass)(t,d),t.setAttribute("data-custom-class","")}if((0,s.hide)(t.querySelectorAll(".sa-icon")),e.type&&!(0,a.isIE8)()){var f=function(){for(var o=!1,a=0;a
3 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/src/components/base/loading.vue:
--------------------------------------------------------------------------------
1 |
21 |
22 |
23 |
24 |
4 |
12 | {{title}}
5 | 11 |
13 |
15 |
25 |
26 |
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/src/components/base/modal.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
15 |
16 |
17 |
63 |
--------------------------------------------------------------------------------
/src/components/base/pagination.vue:
--------------------------------------------------------------------------------
1 |
2 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/src/components/editor.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/src/components/registerComponent.js:
--------------------------------------------------------------------------------
1 | import Pagination from './base/pagination';
2 | import Loading from './base/loading';
3 | import BreadCrumb from './base/bread-crumb';
4 | import Modal from './base/modal';
5 |
6 | export default function(Vue){
7 | Vue.component('pagination', Pagination);
8 | Vue.component('loading', Loading);
9 | Vue.component('bread-crumb', BreadCrumb);
10 | Vue.component('modal', Modal);
11 | }
--------------------------------------------------------------------------------
/src/directives/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/liukaijv/vue-admin-template/604857c254ca42e265ec65a5700a93e1a2331a47/src/directives/.gitkeep
--------------------------------------------------------------------------------
/src/directives/base/collapseMenu.js:
--------------------------------------------------------------------------------
1 | export default {
2 | twoWay: true,
3 | priority: 1000,
4 | params: ['options'],
5 | bind: function () {
6 | let self = this;
7 | let defaults = {
8 | toggle: true
9 | };
10 | let settings = $.extend(defaults, self.params.options);
11 | let $this = $(this.el);
12 | let $toggle = settings.toggle;
13 |
14 | $this.find("li.active").has("ul").children("ul").addClass("collapse in");
15 | $this.find("li").not(".active").has("ul").children("ul").addClass("collapse");
16 |
17 | $this.find("li").children("a").on("click" + ".collapseMenu", function (e) {
18 | if($(this).siblings("ul").length){
19 | e.preventDefault();
20 | }
21 | $(this).parent("li").toggleClass("active").children("ul").collapse("toggle");
22 | if ($toggle) {
23 | $(this).parent("li").siblings().removeClass("active").children("ul.in").collapse("hide");
24 | }
25 | });
26 |
27 | },
28 |
29 | update(value) {
30 | // todo
31 | },
32 | unbind() {
33 | $(this.el).off('.collapseMenu');
34 | }
35 | }
--------------------------------------------------------------------------------
/src/directives/base/datepicker.js:
--------------------------------------------------------------------------------
1 | import datepicker from '../../assets/js/plugins/datapicker/bootstrap-datepicker';
2 | import '../../assets/js/plugins/datapicker/datepicker3.css';
3 |
4 | export default {
5 | twoWay: true,
6 | priority: 1000,
7 | params: ['options'],
8 | bind() {
9 | let self = this;
10 | let defaults = {
11 | format: "yyyy-mm-dd",
12 | minViewMode: 1,
13 | keyboardNavigation: false,
14 | forceParse: false,
15 | autoclose: true,
16 | todayHighlight: true
17 | };
18 | let settings = $.extend(defaults, self.params.options);
19 | $(this.el).datepicker(settings);
20 | },
21 | update(value) {
22 | // todo
23 | },
24 | unbind() {
25 | $(this.el).off();
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/src/directives/registerDirective.js:
--------------------------------------------------------------------------------
1 | import menu from './base/collapseMenu';
2 | import datepicker from './base/datepicker';
3 |
4 | export default function(Vue){
5 | Vue.directive('menu', menu);
6 | Vue.directive('datepicker', datepicker);
7 | }
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
4 |
13 |
14 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/src/interceptors/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/liukaijv/vue-admin-template/604857c254ca42e265ec65a5700a93e1a2331a47/src/interceptors/.gitkeep
--------------------------------------------------------------------------------
/src/interceptors/auth_interceptor.js:
--------------------------------------------------------------------------------
1 | export default function authConfig(Vue) {
2 | Vue.http.interceptors.push((request, next) => {
3 | var token, headers;
4 | token = sessionStorage.getItem('jwt_token');
5 | headers = request.headers || (request.headers = {});
6 | if (token !== null && token !== 'undefined') {
7 | request.headers.set('Authorization', 'Bearer ' + token);
8 | }
9 | next((response) => {
10 | if (response.status && response.status.code === 401) {
11 | sessionStorage.removeItem('jwt_token');
12 | }
13 | if (response.headers && response.headers.Authorization) {
14 | sessionStorage.setItem('jwt_token', response.headers.Authorization);
15 | }
16 | if (response.entity && response.entity.token && response.entity.token.length > 10) {
17 | sessionStorage.setItem('jwt_token', 'Bearer ' + response.entity.token);
18 | }
19 | return response;
20 | })
21 | });
22 | }
--------------------------------------------------------------------------------
/src/lib/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/liukaijv/vue-admin-template/604857c254ca42e265ec65a5700a93e1a2331a47/src/lib/.gitkeep
--------------------------------------------------------------------------------
/src/lib/auth.js:
--------------------------------------------------------------------------------
1 | const LOGIN_URL = 'login';
2 | const LOGOUT_URL = 'logout';
3 |
4 | export default {
5 |
6 | user: null,
7 |
8 | authenticated: false,
9 |
10 | login(context, creds) {
11 |
12 | return new Promise(function (resolve, reject) {
13 | let error_result = {flag: false, msg: "登陆失败"};
14 | context.$http.post(LOGIN_URL, creds).then((result) => {
15 | let data = result.data;
16 | if (data.flag === true) {
17 | sessionStorage.setItem('jwt_token', data.jwt_token);
18 | sessionStorage.setItem('jwt_user', JSON.stringify(data.data));
19 | this.authenticated = true;
20 | this.user = data.data;
21 | resolve(result);
22 | } else {
23 | reject(data);
24 | }
25 |
26 | }, (error) => {
27 | reject(error_result);
28 | });
29 |
30 | }.bind(this));
31 |
32 | },
33 |
34 | logout(context) {
35 |
36 | return new Promise(function (resolve, reject) {
37 |
38 | context.$http.post(LOGOUT_URL).then((result)=> {
39 | let data = result.data;
40 | if (data.flag === true) {
41 | sessionStorage.removeItem('jwt_token');
42 | sessionStorage.removeItem('jwt_user');
43 | this.authenticated = false;
44 | this.user = null;
45 | resolve();
46 | } else {
47 | reject();
48 | }
49 | }, (error)=> {
50 | reject(error);
51 | });
52 |
53 | }.bind(this));
54 |
55 | },
56 |
57 | checkAuth() {
58 | let jwt = sessionStorage.getItem('jwt_token');
59 | if (jwt) {
60 | this.authenticated = true;
61 | } else {
62 | this.authenticated = false;
63 | }
64 | },
65 |
66 | getToken() {
67 | return sessionStorage.getItem('jwt_token');
68 | }
69 | };
70 |
--------------------------------------------------------------------------------
/src/lib/utils.js:
--------------------------------------------------------------------------------
1 | export function ucFirst(word) {
2 | return word.replace(/(\w)/, function (v) {
3 | return v.toUpperCase();
4 | });
5 | }
6 |
7 | export function extend(out = {}) {
8 | for (var i = 1; i < arguments.length; i++) {
9 | if (!arguments[i]) {
10 | continue;
11 | }
12 |
13 | for (var key in arguments[i]) {
14 | if (arguments[i].hasOwnProperty(key)) {
15 | out[key] = arguments[i][key];
16 | }
17 | }
18 | }
19 | return out;
20 | }
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import VueRouter from 'vue-router';
3 | import VueResource from 'vue-resource';
4 | import Swal from './plugins/sweetalert';
5 |
6 | Vue.use(VueResource);
7 | Vue.use(VueRouter);
8 | Vue.use(Swal);
9 |
10 | // Style
11 | import './assets/css/bootstrap.css';
12 | import './assets/css/font-awesome.css';
13 | import './assets/css/animate.css';
14 | import './assets/css/style.css';
15 |
16 | // Js
17 | import config from '../config';
18 | import './assets/js/bootstrap';
19 | import App from './app';
20 |
21 | // Common Components
22 | import registerComponent from './components/registerComponent';
23 | registerComponent(Vue);
24 |
25 | // Directives
26 | import registerDirective from './directives/registerDirective';
27 | registerDirective(Vue);
28 |
29 | import authInterceptor from './interceptors/auth_interceptor';
30 | import routeConfig from './routes';
31 |
32 | // Storage
33 | Vue.prototype.$session = window.sessionStorage || {};
34 | Vue.prototype.$store = window.localstorage || {};
35 |
36 | // config
37 | Vue.config.debug = config.debug;
38 | Vue.config.devtools = config.debug;
39 |
40 | Vue.http.options.root = '/backend';
41 |
42 | let router = new VueRouter();
43 | routeConfig(router);
44 |
45 | authInterceptor(Vue);
46 |
47 | router.start(App, '#app');
48 |
49 | window.router = router;
--------------------------------------------------------------------------------
/src/mixins/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/liukaijv/vue-admin-template/604857c254ca42e265ec65a5700a93e1a2331a47/src/mixins/.gitkeep
--------------------------------------------------------------------------------
/src/mixins/auth.js:
--------------------------------------------------------------------------------
1 | import auth from '../lib/auth';
2 |
3 | export default {
4 | methods: {
5 | logout: function () {
6 | let vm = this;
7 | vm.$confirm('确定要退出吗？',function(){
8 | auth.logout(vm).then(function () {
9 | vm.$route.router.go('/login');
10 | });
11 | });
12 | }
13 | }
14 | }
--------------------------------------------------------------------------------
/src/plugins/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/liukaijv/vue-admin-template/604857c254ca42e265ec65a5700a93e1a2331a47/src/plugins/.gitkeep
--------------------------------------------------------------------------------
/src/plugins/sweetalert.js:
--------------------------------------------------------------------------------
1 | import '../assets/js/plugins/sweetalert/sweetalert.css';
2 | import '../assets/js/plugins/sweetalert/themes/bootstrap/bootstrap.css';
3 | import Swal from '../assets/js/plugins/sweetalert/sweetalert.min';
4 |
5 | export default {
6 | install: function (vue) {
7 | "use strict";
8 |
9 | // let defaultParams = {
10 | // title: '',
11 | // text: '',
12 | // type: null,
13 | // allowOutsideClick: false,
14 | // showConfirmButton: true,
15 | // showCancelButton: false,
16 | // closeOnConfirm: true,
17 | // closeOnCancel: true,
18 | // confirmButtonText: 'OK',
19 | // confirmButtonColor: '#8CD4F5',
20 | // cancelButtonText: 'Cancel',
21 | // imageUrl: null,
22 | // imageSize: null,
23 | // timer: null,
24 | // customClass: '',
25 | // html: false,
26 | // animation: true,
27 | // allowEscapeKey: true,
28 | // inputType: 'text',
29 | // inputPlaceholder: '',
30 | // inputValue: '',
31 | // showLoaderOnConfirm: false
32 | // };
33 |
34 | vue.prototype.$swal = Swal;
35 |
36 | // alert
37 | vue.prototype.$alert = function(title="确定要这样吗？", text, callbackOk) {
38 |
39 | if (typeof text === 'function') {
40 | callbackOk = arguments[1];
41 | text = undefined;
42 | }
43 |
44 | return Swal({
45 | title: title,
46 | text: text,
47 | confirmButtonText:'确定'
48 | },function(){
49 | typeof callbackOk === 'function' && callbackOk();
50 | });
51 |
52 | };
53 |
54 | // 确认框
55 | vue.prototype.$confirm = function(title="确定要这样吗？", text, callbackOk, callbackCancel) {
56 | if (typeof text === 'function') {
57 | callbackCancel = arguments[2];
58 | callbackOk = arguments[1];
59 | text = undefined;
60 | }
61 | return Swal({
62 | title: title,
63 | text: text,
64 | showCancelButton: true,
65 | cancelButtonText:'取消',
66 | confirmButtonText:'确定'
67 | },function(isConfirm){
68 | if (isConfirm) {
69 | typeof callbackOk === 'function' && callbackOk();
70 | }else{
71 | typeof callbackCancel === 'function' && callbackCancel();
72 | }
73 |
74 | })
75 | };
76 |
77 | // prompt
78 | vue.prototype.$prompt = function(title="确定要这样吗？", text, callbackOk, callbackCancel) {
79 | if (typeof text === 'function') {
80 | callbackCancel = arguments[2];
81 | callbackOk = arguments[1];
82 | text = undefined;
83 | }
84 | return Swal({
85 | title: title,
86 | text: text,
87 | type: "input",
88 | showCancelButton: true,
89 | cancelButtonText:'取消',
90 | confirmButtonText:'确定',
91 | closeOnConfirm: false,
92 | },function(inputValue ){
93 | if (inputValue === false) {
94 | typeof callbackCancel === 'function' && callbackCancel();
95 | return false;
96 | }else{
97 | typeof callbackOk === 'function' && callbackOk(inputValue);
98 | }
99 |
100 | })
101 | };
102 |
103 | // toast
104 | vue.prototype.$toast = function(title){
105 | return Swal({
106 | title: title,
107 | text: '',
108 | type: "success",
109 | showCancelButton: false,
110 | showConfirmButton:false,
111 | timer:3000,
112 | allowOutsideClick:true
113 | });
114 | }
115 |
116 | }
117 |
118 | }
--------------------------------------------------------------------------------
/src/routes.js:
--------------------------------------------------------------------------------
1 | export default function routeConfig(router) {
2 | router.map({
3 | '/': {
4 | name: 'main',
5 | component: (resolve)=>{require(['./views/layout'],resolve)},
6 | subRoutes: {
7 | '/dashboard': {
8 | name: 'dashboard',
9 | component: (resolve)=>{require(['./views/dashboard'],resolve)}
10 | },
11 | '/user': {
12 | name: 'user',
13 | component: (resolve)=>{require(['./views/user'],resolve)}
14 | }
15 | }
16 | },
17 | '/login': {
18 | name: 'login',
19 | component: (resolve)=>{require(['./views/login'],resolve)}
20 | }
21 | });
22 |
23 | router.redirect({
24 | '*': '/login',
25 | '/': '/dashboard'
26 | });
27 |
28 | router.beforeEach(function (transition) {
29 | let token = sessionStorage.getItem('jwt_token');
30 | if (!token || token === null) {
31 | router.go('/login');
32 | }
33 | transition.next();
34 | });
35 |
36 | }
--------------------------------------------------------------------------------
/src/scss/custom.scss:
--------------------------------------------------------------------------------
1 |
2 | // modal
3 | .modal-title i{
4 | float: left;
5 | margin-top: 10px;
6 | }
7 | .modal-title-body{
8 | margin-left: 20px;
9 | }
10 | .modal-title-text{
11 | font-weight: bold;
12 | font-size: 14px;
13 | }
14 | .modal-title-description{
15 | margin-top: 2px;
16 | }
17 | .nav-tabs > li.active > a,
18 | .nav-tabs > li.active > a:hover,
19 | .nav-tabs > li.active > a:focus{
20 | border-bottom-color:#fff;
21 | }
22 |
23 | .back-bor-null{
24 | background-color: #2f4050;
25 | border-top: medium none #2f4050;
26 | color: #758492;
27 | text-align: center;
28 | }
--------------------------------------------------------------------------------
/src/views/dashboard.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/src/views/layout.vue:
--------------------------------------------------------------------------------
1 |
2 |
8 |
9 |
17 |
18 |
10 |
11 |
16 |
12 |
13 |
14 |
15 |
3 |
4 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/src/views/login.vue:
--------------------------------------------------------------------------------
1 |
23 |
24 |
7 |
8 |
14 |
15 |
25 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/src/views/partial/bottom.vue:
--------------------------------------------------------------------------------
1 |
2 |
7 |
--------------------------------------------------------------------------------
/src/views/partial/sidebar.vue:
--------------------------------------------------------------------------------
1 |
10 |
11 |
55 |
56 |
57 |
--------------------------------------------------------------------------------
/src/views/partial/top.vue:
--------------------------------------------------------------------------------
1 |
2 |
26 |
52 |
53 |
27 |
50 |
51 |
28 |
49 |
29 | 
30 |
31 |
30 | XX后台管理系统（服务商端）
32 | 48 |
3 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/src/views/user/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
7 |
77 |
96 |
97 |
98 |
99 |
100 |
101 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var webpack = require('webpack');
3 | var HtmlWebpackPlugin = require('html-webpack-plugin');
4 | var ExtractTextPlugin = require("extract-text-webpack-plugin");
5 |
6 | var config = require('./config');
7 |
8 | module.exports = {
9 | entry: path.resolve(config.srcPath, 'main.js'),
10 | output:{
11 | path: 'dist',
12 | filename: 'js/[name]-[hash]-bundle.js'
13 | },
14 | resolve: {
15 | extensions: ['', '.js', '.vue']
16 | },
17 | module:{
18 | loaders:[
19 | {
20 | test:/\.vue$/,
21 | loader:'vue'
22 | },
23 | {
24 | test: /\.js?$/,
25 | loader: 'babel',
26 | query: {
27 | presets: ['es2015'],
28 | plugins: ["transform-runtime"],
29 | },
30 | exclude: /node_modules/
31 | },
32 | {
33 | test: /\.scss$/,
34 | loaders: [ 'style', 'css', 'sass' ]
35 | },
36 | {
37 | test:/\.css$/,
38 | loader: ExtractTextPlugin.extract("style-loader", "css-loader")
39 | },
40 | {
41 | test: /\.(woff2?|eot|ttf)(\?.*)?$/,
42 | loader: 'url',
43 | query: {
44 | limit: 10000,
45 | name: 'fonts/[name].[ext]'
46 | }
47 | },
48 | {
49 | test: /\.(png|jpg|gif|svg)(\?.*)?$/,
50 | loader: 'url',
51 | query: {
52 | limit: 10000,
53 | name: 'images/[name].[ext]'
54 | }
55 | }
56 | ]
57 | },
58 | plugins: [
59 | new ExtractTextPlugin('[name].css'),
60 | new HtmlWebpackPlugin({
61 | template: path.join(config.srcPath, 'index.html')
62 | }),
63 | new webpack.ProvidePlugin({
64 | $: "jquery",
65 | jQuery: "jquery",
66 | "window.jQuery": "jquery",
67 | "window.$": "jquery",
68 | })
69 | ],
70 | devServer: {
71 | proxy: {
72 | '/backend/*': {
73 | target: config.apiDomain,
74 | changeOrigin: true
75 | }
76 | }
77 | }
78 | }
--------------------------------------------------------------------------------
8 |
75 |
76 |
9 |
10 |
74 |
11 |
73 |
12 |
20 |
13 |
19 |
14 |
18 |
15 |
17 | 用户列表
16 |
21 |
22 |
39 |
40 |
61 |
62 |
71 |
72 |
23 |
37 |
38 |
24 |
31 |
25 |
26 |
27 |
28 |
29 |
30 |
32 |
36 |
33 |
34 |
35 | | 序号 | 42 |姓名 | 43 |创建时间 | 45 |操作 | 46 ||
| {{$index+1}} | 51 |{{item.name}} | 52 |{{item.email}} | 53 |{{item.created_at}} | 54 |55 | 编辑 56 | 删除 57 | | 58 |
63 |
69 |
70 |
64 |
68 |
65 |
67 |
78 |
91 |
95 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |