基于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的管理后台

vue匹配模板简单实现

之前在学习新框架的时候,只是简单的跟着教程一步一步的敲demo,从来没有想过这个框架是如何实现的,简单的功能我能不能实现。最近打算开始学习Vue,觉得还是尝试一下能不能自己简单的实现其中的某些功能吧。

感觉模板引擎后端同学用的多一些,像jade、FreeMarker等,这个通常是在客户端发出HTTP请求之后,应用层的控制器(Controller)接收,通过应用层的服务器(service)访问数据库,然后封装到模型层(Model),再跳转到视图层(View),通过模板引擎生成HTML代码,最后返回给客户端浏览器。

但是Vuejs也是有模板的,他的模板引擎是在客户端浏览器的内存中处理生成的。所以我们用模板的时候,显示出来的是要渲染的数据。

Vue官网的第一个demo

<div id="app">
    {{ message }}
</div>
var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
});

看到这个部分,感觉应该可以通过正则来简单的实现一下:
html部分不变。

正则部分:

首先想到的是匹配两边的大括号,/\{\{\}\}/,注意转译;
然后我们需要匹配大括号中间的内容,[\w]+;
这里需要注意一个问题,在匹配的内容前后可能会有空格,所以这里内容部分我们需要修改成\s*[\w]+\s*;
但是如果需要替换的话,使用正则的分组用法$1会比较轻松的解决这个问题;
所以正则的最终版就变成了/(\{\{\s*([\w]+)\s*\}\})/g;

js部分:
function vue(options) {
    var context = document.querySelector(options.el);
    var html = context.innerHTML;
    var regex = /(\{\{\s*([\w]+)\s*\}\})/g;
    while(regex.test(html)) {
        html = html.replace(RegExp.$1, options.data[RegExp.$2]);
    }
    context.innerHTML = html;
}

$1是最先匹配到的{% raw %}{{}}{% endraw %}
包括其内的部分,$2是匹配的要替换的对象。
使用方法跟vue的使用方法一样。
这样第一个demo我们就简单的实现了。当然相比vue有非常多的缺陷,比如不可以通过app.message来修改数据…

继续阅读vue匹配模板简单实现