vue pc客户端项目总结

1.搭建前端环境框架用到的是vue，使用vue脚手架的环境1.全局安装vue脚手架vue-clinpm i vue-cli -g2.下载vue项目vue init webpack my-project3.安装依赖npm i2.解决跨域我们公司的前端要在后台运行的情况下编写，公司端口是8080，我需要把vue的端口改成其他的比如8081在config目录下打开index.js,把port的8080改

oumaharuki

6039人浏览 · 2017-12-21 11:30:49

oumaharuki · 2017-12-21 11:30:49 发布

1.搭建前端环境框架用到的是vue，使用vue脚手架的环境
1.全局安装vue脚手架vue-cli

npm i vue-cli -g

2.下载vue项目

vue init webpack my-project

3.安装依赖

npm i

2.解决跨域

我们公司的前端要在后台运行的情况下编写，公司端口是8080，我需要把vue的端口改成其他的比如8081

在config目录下打开index.js,把port的8080改成8081

port: 8081

数据请求，后台不允许跨域，所有需要修改配置

在在config目录下打开index.js,添加以下代码

dev: {
  // Various Dev Server settings
  host: 'localhost', // can be overwritten by process.env.HOST
  port: 8081, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
  errorOverlay: true,
  notifyOnErrors: true,
  poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
  autoOpenBrowser: true,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {
    '/api':{
      target:'http://localhost:8080',
      changeOrigin:true,
      pathRewrite:{
        '^/api':'/api'
      }
    }
  },

接着去build文件夹，打开webpack.dev.conf.js在devserver下添加

proxy: {
  '*': {//*表示所有url
    target: 'http://localhost:8080',
    changeOrigin: true,
    secure: false,
    ws: false
  },
  '/static/*': {
    target: 'http://localhost:8080',
    changeOrigin: true,
    secure: false
  }
}

最后重启服务

完成以上两步开始项目

目录结构

build

config

src

---api//存放url地址

---base//存放基础组件

---common//存放公共样式，图片，js

---img

---css

---js//尽量不用，但是有些必须不得不操作dom的时候添加js

---components//存放组件

---router//存放路由

---store//存放vuex

---util//存放封装的cookice

---App.vue

---main.js

package.json

index.html

在main.js放了一个修改wds一直请求的bug

if (module.hot) {//解决wds一直请求的bug
  module.hot.accept();
}

main.js主要代码

import Vue from 'vue'
import App from './App'
import router from './router'
import iView from 'iview';
import 'iview/dist/styles/iview.css';
import store from './store';
import axios from 'axios';
import 'common/css/base.css';
import 'common/css/animate.css';
import jquery from 'jquery';
Vue.use(iView);
Vue.config.productionTip = false;
Vue.prototype.$http=axios;
Vue.prototype.$=jquery;
if (module.hot) {//解决wds一直请求的bug
  module.hot.accept();
}
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)

｝）

项目被要求用四层路由，这一点我是拒绝的，四层路由，马拉个币，其他的用vuex不就好了，奈何我是小前端路由这块需要判断登录类似于后台的登录拦截

router.beforeEach((to, from, next) => {
  //to即将进入的目标路由对象，from当前导航正要离开的路由， next  :  下一步执行的函数钩子
  if(to.path === '/login'||to.path === '/register'){
    next()
  }  // 如果即将进入登录路由或者进入注册，则直接放行
  else {     //进入的不是登录路由
    if(util.getCookie('userInfo')){
      //如果需要登录验证，或者已经登录成功，则直接放行
      if(islogin.getislogin()){

      }
      next()
    }

    else{
      //下一跳路由需要登录验证，并且还未登录，则路由定向到  登录路由
      next({
        path: '/login'
      })
    }
  }

})

项目中用到codemirror，jquery-slimscroll，ztree,Markdown,echarts等插件，其中只讲一两个简

单的，复杂的另开一篇讲。 jquery-slimscroll：

所实现的功能是在鼠标悬浮到盒子上方时出现滚动条，是一个滚动条插件。

两种方法使用，一种直接引：

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript" src="jquery.slimscroll.min.js"></script>

另一种用npm

npm i jquery-slimscroll --save

代码

$("#inner-content").slimScroll({
        width: '100%', //可滚动区域宽度
        height: '100%', //可滚动区域高度
        size: '10px', //滚动条宽度，即组件宽度
        color: '#000', //滚动条颜色
        position: 'right', //组件位置：left/right
        distance: '0px', //组件与侧边之间的距离
        start: 'top', //默认滚动位置：top/bottom
        opacity: .4, //滚动条透明度
        alwaysVisible: true, //是否 始终显示组件
        disableFadeOut: false, //是否 鼠标经过可滚动区域时显示组件，离开时隐藏组件
        railVisible: true, //是否 显示轨道
        railColor: '#333', //轨道颜色
        railOpacity: .2, //轨道透明度
        railDraggable: true, //是否 滚动条可拖动
        railClass: 'slimScrollRail', //轨道div类名 
        barClass: 'slimScrollBar', //滚动条div类名
        wrapperClass: 'slimScrollDiv', //外包div类名
        allowPageScroll: true, //是否 使用滚轮到达顶端/底端时，滚动窗口
        wheelStep: 20, //滚轮滚动量
        touchScrollStep: 200, //滚动量当用户使用手势
        borderRadius: '7px', //滚动条圆角
        railBorderRadius: '7px' //轨道圆角
    });

$('#innerDiv').slimScroll().bind('slimscroll', function(e, pos){ //滚动条到底部执行的事件 
                if(pos=='bottom'){
                   // 执行其他逻辑
                }
            });

Markdown

Markdown 的目标是实现「易读易写」。可读性，无论如何，都是最重要的。一份使用 Markdown 格式撰写的文件应该可以直接以纯文本发布，并且看起来不会像是由许多标签或是格式指令所构成。Markdown 语法受到一些既有 text-to-HTML 格式的影响，包括 Setext、atx、Textile、reStructuredText、Grutatext 和 EtText，而最大灵感来源其实是纯文本电子邮件的格式。

也就是我们现在用到的博客文章显示的插件。

两种方式使用

代码直接引入marked.js

另一种npm安装

npm i marked --save

两种都能够使用，在普通html页面需要实现双向数据绑定，所以这样实现：

var obj = {};

 Object.defineProperty(obj,'code',{
       set:function(newVal){
           document.getElementById('code-text').value = newVal;//要编辑的编辑器
           document.getElementById('text').innerHTML = marked(newVal);
       }
 });
document.addEventListener('keyup',function(e){
        obj.code = e.target.value;
});

还有ctrl+s保存编辑的文档：

 $("#code-text")[0].οnkeydοwn=function(event) {
       if (event.ctrlKey == true && event.keyCode == 83) {//Ctrl+S
                  event.preventDefault();
                  update(res.Document.uuid,$("#code-text").html())
        }
 }

项目中特别加了一个截图直接粘贴到编辑器：

 var imgReader = function( item ){
        var blob = item.getAsFile(),//直接拿到的file文件
            reader = new FileReader();
        // 读取文件后将其显示在网页中
        reader.onload = function( e ){
            var img = new Image();
            console.log(e.target.result)//拿到粘贴的图片的base64编码
            console.log(JSON.stringify(blob))
            console.log(typeof blob)
            img.src = e.target.result; document.body.appendChild( img );
        }; // 读取文件
        reader.readAsDataURL( blob );
    };
    document.getElementById( 'code-text' ).addEventListener( 'paste', function( e ){ // 添加到事件对象中的访问系统剪贴板的接口
        var clipboardData = e.clipboardData, i = 0, items, item, types;
        if( clipboardData ){
            items = clipboardData.items;
            if( !items )
            { return; }
            item = items[0]; // 保存在剪贴板中的数据类型
            types = clipboardData.types || [];
            for( ; i < types.length; i++ ){
                if( types[i] === 'Files' ){
                    item = items[i]; break;
                }
            } // 判断是否为图片数据
            if( item && item.kind === 'file' && item.type.match(/^image\//i) ){ imgReader( item );
            }
        }
    });

在vue中这样使用Markdown ：

inputMarkdown: function() {
            var rendererMD = new marked.Renderer();
            marked.setOptions({
              renderer: rendererMD,
              gfm: true,
              tables: true,
              breaks: false,
              pedantic: false,
              sanitize: false,
              smartLists: true,
              smartypants: false
});
this.html = marked(this.md);

付一个 Markdown 的网站http://jsfiddle.net/ygjack/2kx696aa/
在vue项目开发中，用到一个缓存和半缓存，缓存呢，是说页面只加载一次，以后的多次除非你刷新，否则不会再加载。半缓存是页面部分组件缓存，部分请求步缓存。

<keep-alive include="edit,server">
      <router-view></router-view>
</keep-alive>

include标明要缓存的组件名，名字写在组件开头

 export default {
    name:'edit',//组建的名字
    data(){
      return{

在vue开发中总是遇到这样的错误

这是因为你有一个组件的名字叫“menu”的名字和vue产生冲突，

    export default {
        name:"menu"
    }

把name去掉或者改个名字就好。

半缓存需要用到vue的钩子：activated，这个钩子是你每进去一次页面就运行一次，所以当你需要步缓存某些请求时可以放在activated里面：

activated(){
      this.getList()
｝

在项目中，涉及到一个多层数组查询里面是否有某个元素，传统方法是递归遍历，这个对于我们前端来说简直就是让初学日语的人说一大串很流利的日语。反正我是不会用那么复杂的方法。es6给我们提供了两个好的语法糖：

startWith，endWith,includes

这三个都是需要es6语法才能运行的，而且是在字符串中使用，所以用之前需要先声明方法，否则浏览器识别不了：

String.prototype.startWith=function(str){//重新定义startWith
     if(str==null||str==""||this.length==0||str.length>this.length)
          return false;
     if(this.substr(0,str.length)==str)
          return true;
     else
          return false;
     return true;
}

不懂什么是 prototype的可以回去再学一下js。

let names=_this.names;
for(let i=0;i<names.length;i++){
    if(names[i].path.startWith(path)){
          names.splice(i,1)
    }
}

很多时候我们需要用到这种情况，当我从固定某个页面路由跳转到另一个页面时，我需要去到另一个页面的某个固定的页面，也就是另一个页面的某个子路由：

if (from.path == '/home/edit'&&to.path == '/home/server/serverlist'){
    next({
      path: '/home/server/robot'
    })

  }

这句话放到router里面 router .beforeEach里

router.beforeEach((to, from, next) => {
｝)

现在说一下WebSocket

项目中用到持续推送数据。

WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。

我在vue的main中这样实现：

function RobotWebSocketPlugin (traderKey,robotKey) {
  let addr = 'ws://'+window.location.host+'/api/subscription/robot?traderKey='+traderKey+'&robotKey='+robotKey;//推送数据的连接

  let socket = new WebSocket(addr);//声明一个WebSocket

  // let p = new robothostSubscription();
  socket.onmessage = function(event) {//event就是拿到的数据内容
    // console.log(event.data);
    let data = JSON.parse(event.data);

    // console.log(data);
    switch (data.Topic){
      case "OnMarketStatusChanged":

      case "OnRobotStatusChanged":
      // do something...
        
      case "OnLog":
      // do something...
   
      case "OnOrder":
      // do something...

      case "Indicator":
      // do something...
       
    }
  };
  socket.onopen = function(event) {
    // loadRobotAndRobothost(store);

  };
}

j接着我把socket映射到vue上：

let RobotWebSocket = {
};
RobotWebSocket.socketBind = function (traderKey,robotKey) {
  RobotWebSocketPlugin(traderKey,robotKey)
};
Vue.prototype.RobotWebSocket = RobotWebSocket;

在vue的所有地方我都可以用到这个方法

ctrl实现多选

let _this=this;
this.$(document).on('keydown',function (e) {
    if(e.keyCode==17){
      _this.isCtrl=true;
    }
})
this.$(document).on('keyup',function (e) {
    if(e.keyCode==17){
       _this.isCtrl=false;
    }
})

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^