vue.js 3.0及前端技术

社会在发展,技术在进步。前端技术日新月异,虽然之前学过一篇关于vue.js的学习心得,但如今又有新的玩法,故再写一篇关于最新的前端技术。

前端常用技术

vue.jsvue-cli(基于vue的脚手架工具)、webpackvue-routervuex

element UIiview UIvux UI(主要针对手机端)

构建项目

安装好node.js后,也就集成安装了npm工具。通过npm,全局安装vue-cli脚手架,具体安装可参考vue-cli官方网站。

通过vue-cli脚手架,即可一键生成基于vue的项目,具体也可查看vue-cli官方。

基于vue-cli 3.0 脚手架,可通过vue add命令添加相关组件,比如添加vue-router,vuex,以及UI框架(如:elementUI和iViewUI),可以两个同时添加进去,想用哪个就用哪个,不会出现冲突的。

前端开发

具体开发,可参考vue.js官方网站或对应UI框架官网。

接口请求

所谓前后端分离,即前端通过REST API方式请求后端数据,前端后端相当于是两个服务,当然,也可以放到同一个web服务器上。前端rest api的配置,需要配置相关的代理请求。本质上是通过基于webpack的代理,现在的基于vue-cli 3.0,可直接在vue-config.js上配置,如没有对应文件,可自行添加在与package.json同级根目录下。

代理配置参考:


var proxyConfig = require('./config/proxyConfig')
// vue.config.js
module.exports = {
    // 选项...
    devServer: {
        open: true,
        host: '0.0.0.0',
        port: 8080,
        https: false,
        //以上的ip和端口是我们本机的;下面为需要跨域的
        proxy: proxyConfig.proxy,
        before: function(app, server) {
          app.use(
            "/static",
            express.static(path.resolve(__dirname, "public/static/"))
          );
        }
    },
...
}

config/proxyConfig.js如下:


module.exports = {
    proxy: {
        '/api': {
            // target: 'https://diwang.webshao.com', // 接口域名
            target: 'http://127.0.0.1:3000', // 接口本地
            ws: true,
            changeOrigin: true, //是否跨域
            pathRewrite: {
                '^/api': '/api'
              }
        }
    }
}

即可实现,前端以/api开头的请求,都进入到后端服务端口为3000的本地服务,且入口地址也是以/api开头。

前端请求可以使用基于jQuery的ajax,但是有些重,也可以使用轻量级的axios

打包运行

完成开发后,可通过npm run build进行打包,打包后,会生成dist文件夹,直接复制这个文件夹到一个web服务器上,如:apache、nginx、IIS、或者直接基于nodejs的express或者其他。但是要注意,代理需要重新在web服务器上进行配置。具体可自行百度。提供nodejs的配置方式:


app.use('/api', proxy('http://127.0.0.1:3000', {
  proxyReqPathResolver: function (req) {
    return new Promise(function (resolve, reject) {
      setTimeout(function () { // simulate async
        var parts = req.url.split('?');
        var queryString = parts[1];
        var updatedPath = parts[0].replace(/test/, 'tent');
        var resolvedPathValue = '' + updatedPath + (queryString ? '?' + queryString : '');
        resolve(resolvedPathValue);
      }, 20);
    });
  }
}));

直接在创建web服务器的时候,添加对应的以/api开头的请求,代理到本地服务端口为3000的web服务。

安全性

用户信息

一般用户登录后,后台通过用户名和密码,以及登录时间之类的信息,生成token认证。登录成果后,后端把生成的认证码发送给前端,前端存储在浏览器的localStorage中,然后在请求的全局配置中,验证是否有认证信息,并且把认证信息添加到请求的header中,后端来统一判断认证是否有效。

权限信息

权限信息如权限菜单列表等信息,可在登录时候直接请求一次,然后存储在localStorage中,以此就不需要每次刷新都要去请求用户权限信息。

状态信息

一些实时状态信息,如监控系统的设备状态信息等,可通过socket.io的方式传输,前端可通过配置vuex来与socket.io通讯,绑定到对应的vuex中,在需要用到的组件当中,直接使用vuex,这样能够达到状态的及时响应。vuex能够有很好的实时性和大数据I/O。

1 thought on “vue.js 3.0及前端技术”

Leave a Reply

Your email address will not be published. Required fields are marked *