我的毕业设计前端技术栈

后端使用的springboot。 前端我使用的是 Vue  之前也没怎么写过前端。这个前端写的我是相当爽啊。各种奇葩问题我都遇到过、至于学习的方式。我是看官网的一些文档学的。由于没怎么做过前端。一些细节我也解释不清楚。

一.使用到的模块

使用到了 webpack  element-ui  vue-router  vue-resource  vue-awesome-swiper   sessionStorage

二.安装和初始化

由于之前简单使用过node 所以我的Vue是直接用vue-cli来进行的。 node怎么安装就不写了、

我用的windows. node安装可以查看这篇博客：https://www.cnblogs.com/zhouyu2017/p/6485265.html

配置淘宝镜像：npm config set registry https://registry.npm.taobao.org

npm ls -g --depth 0   查看当前node 全局安装了什么模块。 去掉-g是查看当前项目安装啥模块了。

关于node的命令什么的就不做介绍了。下面说下vue

npm install webpack -g    把文件打包成浏览器能识别的文件。  安装后使用npm run dev就可以起项目了。

npm install vue-cli -g     

vue init webpack-simple 工程名字 创建一个vue模板的项目。 npm install  下载modules 

npm install  vue-router vue-resource --save  安装vue 路由和网络请求模块。并添加到package.json中。

在package.json同级目录使用 npm run dev 启动项目

三.模块

下面我附加一下我的main.js文件内容。也算是配置文件的内容。  标红的是element-ui 由于在main.js中引入的，在哪都能用。

import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router";
import VueResource from 'vue-resource';
import Element from 'element-ui';
import Vuex from 'vuex'
import 'element-ui/lib/theme-chalk/index.css';
import 'swiper/dist/css/swiper.css'
//（如果使用的是2.6.0以上的版本需要自己手动去加载css）
import VueAwesomeSwiper from 'vue-awesome-swiper'
//开启debug模式
Vue.config.debug = true;
Vue.use(Vuex)
Vue.use(VueAwesomeSwiper)
Vue.use(Element)
Vue.use(VueRouter);
Vue.use(VueResource);

import login from './components/login/login';
// 创建一个路由器实例
// 并且配置路由规则
const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    {
      path: '/healthy',
      component: healthy
    }
  ]
})

// 路由器会创建一个 App 实例，并且挂载到选择符 #app 匹配的元素上。
const app = new Vue({
  router: router,
  render: h => h(App)
}).$mount('#app')

四.关于vue-resource

最开始使用的就是vue-resource是因为看得文档中介绍的是这个。后来发现vue2.0时更匹配的做请求调用的是axios。但是已经写了好多代码了。避免改崩就没有换。下面是一个例子。

因为进行了跨域请求，直接访问会出现问题。后端添加这个 response.addHeader("Access-Control-Allow-Origin", "*"); 其实这个*可以改成具体的，或者其他配置的方式。我也就懒得改了。

this.$http.get('http://127.0.0.1:8088/index', {}, {
  headers: {

  },
  emulateJSON: true             //设置为表单传值。
}).then(function(response) {
  // 这里是处理正确的回调
  console.log(response)
}, function(response) {
  // 这里是处理错误的回调
  console.log("error")
});

五：关于swiper

我用的vue-awesome-swiper来做轮播组件。

import VueAwesomeSwiper from 'vue-awesome-swiper' 

import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper) 我直接放代码了。注意这个引入图片时的路径。  即使在同级目录下也不要忘了加./否则会导致图片路径获取不到。

<template>
  <div class="scroll" id="outDiv">
    <swiper :options="swiperOption" ref="mySwiper">
      <!-- slides -->
      <swiper-slide><img src="./9.jpg" alt=""></swiper-slide>
      <swiper-slide><img src="./9.jpg" alt=""></swiper-slide>
      <swiper-slide><img src="./9.jpg" alt=""></swiper-slide>
      <swiper-slide><img src="./9.jpg" alt=""></swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination "  slot="pagination"></div>
      <div class="swiper-button-prev swiper-button-black" slot="button-prev"></div>
      <div class="swiper-button-next swiper-button-black" slot="button-next"></div>
      <!-- <div class="swiper-scrollbar"   slot="scrollbar"></div> -->
    </swiper>
  </div>
</template>

<script>
  import { swiper, swiperSlide } from 'vue-awesome-swiper';
  export default {
    components: {
      swiper,
      swiperSlide
    },
    data () {
      return {
        swiperOption: {
          autoplay : {
            disableOnInteraction: false, //用户操作后是否禁止自动循环
            delay: 3000 //自自动循环时间
          }, //可选选项，自动滑动
          speed: 1500, //切换速度，即slider自动滑动开始到结束的时间（单位ms）
          loop:true, //循环切换
          grabCursor: true, //设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
          // setWrapperSize: true, //Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。
          autoHeight: false,   //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。
          scrollbar: '.swiper-scrollbar',
          mousewheelControl: true, //设置为true时，能使用鼠标滚轮控制slide滑动
          observeParents: true, //当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper
          pagination: {
            el: '.swiper-pagination',
            // type : 'progressbar', //分页器形状
            clickable :true, //点击分页器的指示点分页器会控制Swiper切换
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        },
        computed: {
          swiper() {
            return this.$refs.mySwiper.swiper
          }
        }
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper;
      }
    },
    mounted () {
      //可以使用swiper这个对象去使用swiper官网中的那些方法
      console.log('this is current swiper instance object', this.swiper);
      // this.swiper.slideTo(0, 0, false);
    }
  }
</script>

 

六.遇到的一些问题

1.在使用element-ui的时候报如下错误。在webpack.config.js中的module.rule下添加

{
  test: /\.(eot|svg|ttf|woff|woff2)$/,     //element-ui problem
  loader: 'file-loader'
}

2.还有就是单页面开发的vue的话。样式设置要是重复会出现问题的。就是单看没事，一进行跳转就会发生问题。

我的解决方式是部分样式写成了行间样式。或者在写的时候 <style  scoped> 就可以了。

3.在路由的时候 <router-link to="/">首页</router-link> 然后在main.js中配置路由分配就好了。我开始以为是用router-view。后来发现这个的使用场景不对。。。

4.在import的时候不要网上咋写你就咋写。随便举一个例子。引入的css  import 'element-ui/lib/theme-chalk/index.css'; 可能版本不同放置index.css的位置不一样。可以看一眼node_modules中具体路径。

5.下面我要说一个找好久的问题，就是后端返回流，前端该如何处理的问题。经过长时间查找我发现ajax是不支持流的。要是后端返回一个流前端需要用blob对象来处理。

this.$http.post('http://127.0.0.1:8088/word', {
  reportName:this.formInline.reportName
}, {
  headers: {

  },
  responseType: 'blob',
  emulateJSON: true
}).then(function (response,request) {
  // 这里是处理正确的回调
  console.log("下载报告  success")
  console.log(response);

  const blob = new Blob([response.data]);
  const fileName = this.formInline.reportName+'.doc';
  const elink = document.createElement('a');
  elink.download = fileName;
  elink.style.display = 'none';
  elink.href = URL.createObjectURL(blob);
  document.body.appendChild(elink);
  elink.click();
  URL.revokeObjectURL(elink.href); // 释放URL 对象
  document.body.removeChild(elink);
}, function (response) {
  // 这里是处理错误的回调
  console.log("下载报告  error")
});

6.还有不要用if(a){}  这样的a一个值作为判断的条件。如果a是字符串的null 字符串的 false  那么返回的还是true 就会导致很多问题。

7.注意你引入的组件名称冲不冲突。 比如你写了一个header组件。想在哪个vue都引入一下。那么你要保证你引入时不冲突。

import swiper from '../util/swiper'
//此处header 名称标签冲突了。所以改成headers
import headers from '../util/header'
components: {swiper,headers}

8.目前我还没将代码部署都服务器上。不确定会导致什么问题呢。哈哈哈哈哈哈哈。在我印象中jsp使用的都是绝对路径。而我在vue中使用的都是相对路径。

9.还有要注意的v-model是双向绑定的。