我的毕业设计前端技术栈
后端使用的springboot。 前端我使用的是 Vue 之前也没怎么写过前端。这个前端写的我是相当爽啊。各种奇葩问题我都遇到过、至于学习的方式。我是看官网的一些文档学的。由于没怎么做过前端。一些细节我也解释不清楚。一.使用到的模块使用到了 webpack element-ui vue-router vue-resource vue-awesome-swiper sessio...
后端使用的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是双向绑定的。
更多推荐
所有评论(0)