基于Vuejs、vue-router、iview的管理后台

上一篇分享的是使用angularjs及materialdesign的管理后台前端页面的实现。因为感觉input的输入框实在是太丑了,并且用户端的页面我早已开发完毕,就等着后端给接口了,所以就萌生出了使用心中一直念念不忘的Vuejs来实现一版管理后台。

这个使用了Vue-cli来构建vue架构,使用vue-router来搭建路由,使用iview来作为UI框架。

项目构建

  1. 安装nodejs
    nodejs安装及常用快捷键
    建议安装nvm来控制nodejs的版本,上面的链接里有详细的步骤,包括启动node服务常用的PM2等等…
  2. 全局安装webpack、vue-cli脚手架
    npm install -g webpack vue-cli;

  3. 创建工程
    vue init webpack-simple <project name>
    这里直接一路回车就可以了。
    注意:工程名不能是中文

  4. 安装项目依赖
    进入工程,输入npm install就可以了。

  5. 安装路由模块vue-router、网络请求模块vue-resource模块
    npm install --save vue-router vue-resource
    这个会安装到package.jsondependencies中。

  6. 安装UI框架 iView
    npm install --save iview

  7. 使用iView、vue-router、vue-resource

# main.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import VueResource from 'vue-resource';
import iview from 'iview';
import 'iview/dist/styles/iview.css';
import App from './App.vue';

Vue.config.debug = true;
Vue.use(VueRouter);
Vue.use(VueResource);
Vue.use(iview);
  1. 修改webpack.config.js配置文件
    因为使用iView需要引用其css,但是最初的webpack.config.js文件里面并没有配置读取css文件和字体文件或者有的设定的有问题,所以这里需要我们自行修改一下:
{
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/
 },
 {
    test: /\.css$/,
    loader: "style-loader!css-loader"
 },
 {
    test: /\.(eot|woff|woff2|ttf)([\\?]?.*)$/,
    loader: "file-loader"
 },
 {
    test: /\.(png|jpg|gif|svg)$/,
    loader: 'file-loader',
    options: {
      name: '[name].[ext]?[hash]'
    }
 }

继续阅读基于Vuejs、vue-router、iview的管理后台

基于angularjs与materialDesign的管理后台

最近换了个公司,乱七八糟的事儿比较多,更新耽误了些…
之前还看过一段时间的Vuejs,想着新公司如果做项目的话,用Vuejs去做。然而新公司的技术架构pc端更倾向于Angularjs,而且有专门的前端架构,架子什么的都搭的差不多了,所以来到新公司的第一个项目就用Angularjs做的。

通过这个项目,我对eslint、gitignore、proxy也算有了接触。毕竟以前做项目的时候也没关注过这些。这个项目是用gulp跟webpack配合使用的。也是直接用的旧有的架子,没做什么改动。
现在就说一下用Angularjs做的这个项目吧。

目录结构

  • app: 源代码
    • views: 一个页面一个文件夹
    • *.ctrl Controller
    • *.html Controller对应的页面
    • *.scss Controller对应页面的样式表
    • services: 服务,一个页面可能有多个服务,与页面一一对应
    • filters: 过滤器
    • app.js: 项目入口文件
    • index.html: index
  • dest: 编译后代码存放的位置,源码中不存在
  • .eslintrc.json: 语法检查
  • .gitignore: git忽略目录
  • .babelrc: babel编译配置
  • … 其他配置

入口文件 app.js

这个项目使用了angular-resource、angular-material等框架,因为Angularjs是依赖注入的,所以所有依赖的框架、插件甚至服务过滤器等等都需要import进来,并且注入到angular程序中。

Dependencies 项目依赖

import angular from 'angular';
import 'angular-material';
import 'angular-resource';
...

View 项目页面,包括其中的Controller及template等

import { Template, Controller } from './views/page1/page1.ctrl';
...

Service 服务

import IndexMenuResource from './services/index-menu.resource'

主程序,所有注入的内容都会在这里体现。

angular.module('app', [
    'ngResource', 'ngRoute', 'ngMaterial' ...
])
.controller('controller', Controller)
.service('IndexMenuResource', IndexMenuResource)
.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/', {
        template: Template,
        controller: Controller,
        controllerAs: 'ctrl'
        }) ...
    }]);

在这里,我每一个只写了一个,需要说明一点,使用controllerAs,在其他页面的对应的controller中,就可以不用$scope,转而使用this就可以了。然后需要在controller对应的template中,每一个变量前面都加上controllerAs的内容,也就是上文中的ctrl
这个地方也可以将路由模块抽离出来,但是,看着这个文件也不大,就放在这里吧,维护起来也还算好维护。

登录模块

登录模块是最后加的,原型图中也没有这个,但是感觉作为一个后台管理系统,如果没有这个模块,岂不是所有人知道网址就能随意修改内容了么…于是跟后端同事商量了一下,就把这个做上了。因为时间比较紧,项目经理就直接说,暂不需要权限管理,注册之类的,直接把这个东西在后台写死就好。但是后端同学还是为user单独建了张表,把权限也留出口来,以后如果有需要直接加上就好了。

继续阅读基于angularjs与materialDesign的管理后台