Vue+ElementUI整合记录

一、软件安装

按网上的安装过程，先装node.js，再装vue，再装ElementUI，Axios，再装Electron，还有生成实验数据的Mock。总之用到什么装什么。安装完成后开始整合配置。

二、初始化一个vue项目

使用vue init webpack vue002

基本目录结构如图，其中mock是后建的，在项目目录内，使用命令行输入

npm run dev

试着运行一下这个项目，如果可以看到

就说明之前的安装都正确，如果不正确在编译时，命令行窗口会提示错误。

三、接下来整合ElementUI

在main.js中加入

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

四、配置路由

为测试ElementUI，建立一个新页面，再配置一下路由

在components目录下新建EnterPage.vue

<template>
  <div class="CopClass">
    <h1>{{ msg }}</h1>
    <h2>Element UI Button</h2>
    <el-button>默认按钮</el-button>
    <el-button type="primary" v-on:click="getData()">主要按钮</el-button>
    <el-button type="text">文字按钮</el-button>
  </div>
</template>

<script>
export default {
  name: 'CopName',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

再配置一下router目录下的index.js

import Vue from 'vue'
import Router from 'vue-router'
import CopClass from '@/components/EnterPage'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/enter/',
      name: 'CopName',
      component: CopClass
    }
  ]
})

其中的path是访问的路由，name是EnterPage.vue页面中加载的<script>中的相关数据名，component是页面中加载的div组件

http://localhost:9001/#/enter

输入以上地址，看到下图，就可以了。

五、按钮添加事件

在按钮上添加点击事件，模拟点击按钮从后台取得数据，后台数据使用Mock生成

首先整合Mock。先建立一个mock目录，再目录下新建index.js

// 首先引入Mock
const Mock = require('mockjs')

// 设置拦截ajax请求的相应时间
Mock.setup({
  timeout: '200-600'
})

let configArray = []

// 使用webpack的require.context()遍历所有mock文件
const files = require.context('.', true, /\.js$/)
files.keys().forEach((key) => {
  if (key === './index.js') return
  configArray = configArray.concat(files(key).default)
})

// 注册所有的mock服务
configArray.forEach((item) => {
  for (let [path, target] of Object.entries(item)) {
    let protocol = path.split('|')
    Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target)
  }
})

这个文件会遍历此目录下所有的js文件，并注册所有的接口服务。

再建立一个模拟数据的js文件，demoList.js

let demoList = [{
  id: 1,
  name: 'zh',
  age: '23',
  job: '前端工程师'
}, {
  id: 2,
  name: 'ly',
  age: '24',
  job: '后端工程师'
}]

export default {
  'get|/api/data': option => {
    return {
      status: 200,
      message: 'success',
      data: demoList
    }
  }
}

get|/api/data是请求方式和接口地址，在注册服务时会先取得/api/data，打开mock.js会看到

/*
    * Mock.mock( template )
    * Mock.mock( function() )
    * Mock.mock( rurl, template )
    * Mock.mock( rurl, function(options) )
    * Mock.mock( rurl, rtype, template )
    * Mock.mock( rurl, rtype, function(options) )

    根据数据模板生成模拟数据。
*/
Mock.mock = function(rurl, rtype, template) {
    // Mock.mock(template)
    if (arguments.length === 1) {
        return Handler.gen(rurl)
    }
    // Mock.mock(rurl, template)
    if (arguments.length === 2) {
        template = rtype
        rtype = undefined
    }
    // 拦截 XHR
    if (XHR) window.XMLHttpRequest = XHR
    Mock._mocked[rurl + (rtype || '')] = {
        rurl: rurl,
        rtype: rtype,
        template: template
    }
    return Mock
}

六、axiox数据交互

mock配置完后，在main.js中加入

require('./mock')

将整个mock目录引入，之后就用到了Axios，详细解读看说明：https://www.kancloud.cn/yunye/axios/234845

在main.js中导入axios

import Axios from 'axios'
import QS from 'qs'

QS是axios在发送post请求时，封装成form数据用的。

再加上一些axios的配置

// 超时时间
Axios.defaults.timeout = 5000

// http请求拦截器

Axios.interceptors.request.use(config => {
  if (config.method === 'post') {
    config.data = QS.stringify(config.data)
  }
  let loading = ElementUI.Loading.service({
    fullscreen: true,
    text: '拼命加载中...'
  })
  loading.close()
  return config
}, error => {
  let loading = ElementUI.Loading.service({})
  loading.close()
  return Promise.reject(error)
})
// http响应拦截器
Axios.interceptors.response.use(data => {
  let loading = ElementUI.Loading.service({})
  loading.close()
  return data
}, error => {
  let loading = ElementUI.Loading.service({
    fullscreen: true,
    text: '拼命加载中...'
  })
  loading.close()
  return Promise.reject(error)
})

最后不要忘了，加上

Vue.prototype.$axios = Axios  //全局注册，使用方法为:this.$axios

七、页面展示

在EnterPage.vue页面中加入按钮点击事件及请求数据的方法

methods: {
    getData: function () {
      this.$axios.get('/api/data').then((response) => {
        console.log(response)
      }).catch((error) => {
        console.log(error)
      })
    }
  }

在export default{}中加入上面的代码，再在按钮中加入事件监听

 v-on:click="getData()"

再运行重新运行，打开页面，点击按钮会在控制台看到

到此，基本整合完毕。

八、VueX配置

最简单常用的就是用户登录，一般的用户登录是输入用户名密码，后台验证，取得token，保存token加到每次访问的header中。

之前已经实现了axios提交数据，然后通过mock返回模拟数据，接下来主要是实现mock模拟登录返回token，然后保存token。

要保存token，就要用到VueX（或Store），具体安装及说明参照：https://vuex.vuejs.org/zh/

九、vuex整合

新建store目录，并在目录下新建index.js配置文件（每新引入一个插件，就建个目录，这样以后管理修改起来会比较方便，个人行为，也可以直接在根目录下建store.js）

index.js内容

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const Store = new Vuex.Store({
  state: {
    token: 'LOGIN'
  },
  mutations: {
    setToken (state, tokenStr) {
      state.token = tokenStr
    }
  }
})

export default Store

这里讲一下，我第一次写这个文件遇到的几个问题：

1、new Vuex.store这个store的s小写了，会报错

2、没有写mutations，不起效果，后来看了网上一位前辈的讲解，说state就是一个数据，mutations就是处理这个数据的方法

3、最后一定不要忘了export

十、mock模拟返回token

之前用mock模拟返回json数据，在这里正好再练习用mock建一个返回token的模拟数据

// token.js
let demoData = [{
  token: 'sadfsadfasdfasdfasdfsadf'
}]

export default {
  'post|/api/account/login/': option => {
    return {
      data: demoData 
    }
  }
}

十一、建立登录页面测试

新建一个登录页面，我也是在网上找的，谢谢大家的无私分享

// Login.vue
<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号" prop="username">
        <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
      title="温馨提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>请输入账号和密码</span>
      <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>
export default{
  name: 'Login',
  data () {
    return {
      form: {
        username: '',
        password: ''
      },
      // 表单验证，需要在 el-form-item 元素中增加 prop 属性
      rules: {
        username: [
          {required: true, message: '账号不可为空', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '密码不可为空', trigger: 'blur'}
        ]
      },
      // 对话框显示和隐藏
      dialogVisible: false
    }
  },
  methods: {
    onSubmit (formName) {
      // 为表单绑定验证功能
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 使用 vue-router 路由到指定页面，该方式称之为编程式导航
          // this.$router.push("/main")
          this.$axios.post('/api/account/login/', {
            username: this.form.username,
            password: this.form.password
          })
            .then(res => {
              console.log(res.data.data[0].token)
              this.$store.commit('setToken', res.data.data[0].token)
              console.log('保存的token:' + this.$store.state.token)
            }).catch(function (err) {
              console.log(err)
            })
        } else {
          this.dialogVisible = true
          return false
        }
      })
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    }
  }
}
</script>

记得要是路由中加上这个页面的访问路由

接下来就可以实验一下了，npm run dev，打开页面随意输入用户名密码，登录后会看到返回的token，就成功了！

保存的token:sadfsadfasdfasdfasdfsadf

十二、跨域的axiox数据交互配置

服务端不支持跨域请求，会提示

No 'Access-Control-Allow-Origin' header is present on the requested resource. 

跨域的axios数据交互，网上查了一下，可以有两种方法：一是修改服务端，二是用代理

我的服务端使用SpringBoot，所以在服务端接收跨域请求的方法上添加注解

@CrossOrigin(origins = "*")

但有时服务端是自己不可修改的，所以还是推荐使用第二种方法，配置代理。

配置代理分两种：一是在config/index.js中添加在dev，proxyTable中添加代理，二是使用nginx

第一种只在开发阶段可用，第二种开发生产阶段都可用。

1、在config/index.js中添加代理配置

 

proxyTable: {
      "/api":{
        target: 'http://远程服务IP:8080',
        security: false,
        changeOrigin: true,
        pathRewrite:{
          '^/api':''
        }
      }
    }

发起的请求都是/api开头，再通过代理替换掉/api

如果不想修改方法名，可以在axios的配置中加入

Axios.defaults.baseURL = '/api'

这样就会在每个请求前自动加上/api

2、使用Nginx

下载和安装Nginx，可以网上搜索，windows版的不用安装，解压即可

在conf/nginx.conf添加代理配置

#user  nobody;
worker_processes  1;//处理器数量

#error_log  logs/error.log;
error_log  logs/error.log  notice;//日志
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;//连接超时

    #gzip  on;

    server {
        listen       9002;//Nginx服务监听端口
        server_name  localhost;//Nginx服务器名

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }
        
        location /api {//代理配置
            rewrite  ^/api/(.*)$ /$1 break;
            proxy_pass http://远程服务IP;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

以上配置可以实现基本的代理功能，将页面文件放入Nginx的html目录内，启动Nginx，输入localhost:9002，可以看到静态页面了。

十三、axios数据交互

我在测试中报了415错误，查了一下是好像是数据的类型不匹配的原因造成的。

之前在Axios的拦截设置中使用QS.stringify(config.data)来包装上传参数，而后台接收数据用的是JSONObject。

QS包装的数据是form格式的，所以要改成JSON.stringify(config.data)来包装数据。

再设置Axios请求头类型

config.headers = {'Content-Type': 'application/json'}

如果请求头中要加入认证信息

config.headers = {'Authorization': saveToken}

十四、路由中添加访问控制

在main.js中添加路由配置

// router配置
router.beforeEach((to, from, next) => {
  // 获取用户登录成功后储存的登录标志
  let jobNo = saveToken
  // 如果是已经登陆状态
  if (jobNo !== '') {
    next()
  } else {
    // 判断是否需要登陆
    if (to.meta.needLogin === true) {
      router.push('/login')
    } else {
      next()
    }
  }
})

在路由配置文件中加入是否需要登录标识

    {
      path: '/enter/',
      name: 'CopName',
      component: CopClass,
      meta: {
        needLogin: true
      }
    },
    {
      path: '/login/',
      name: 'Login',
      component: Login
    }

然后就可以测试一下，未登录状态下会自动转到登录页面。

十五、使用Electron打包导出的vue项目

在vue项目目录下，输入命令

npm run build

会在项目中生成dist目录，目录下有一个static目录和一个index.html文件

最终Electron打包就用到这两个，可以把这两个文件拷贝到一个Electron项目中打包，也可以试着将Electron整合到vue项目中来。