vue+springboot小项目的经验之道
去年写一个小项目，与layui结缘，用起来不得说，对于我们这种后台开发人员写起界面来也方便了很多，要想要是自己设计能力好的话，css学的足够精通，还学UI库干什么呢。当然，使用ui库，真的可以提高我们的开发效率。上周接了一个别人的毕设项目，本来就很有兴趣学习一下vue，这不就 ，边学边学用了10+天。
layui的面纱
layui作为一个前端UI项目，我用的最多的还是它的弹窗…，其他树形组建也没用过。官方的文档 也写的蛮详细的，这里我就不提了，因为自己也很菜。就是想总结一下常用的一些技巧使用。
场景1、当我们想点击不同的单选框，然后刷新对应的下拉框的值。
以下
${goods}是后台通过模板引擎分装的数据，循环输出所有商品类型，要的效果就是点击不同的商品类型刷新下拉框列表的数据。
<div class="layui-form-item">
<label class="layui-form-label">商品类型label>
<div class="layui-input-block">
<span th:each="good : ${goods}" th:onclick="'javascript:changeSelect('+${good.id}+')'" >
<input name="select" type="radio" th:value="${good.id}"
th:title="${good.column_type}" >
span>
div>
div>
<div class="layui-form-item">
<label class="layui-form-label">上架栏目label>
<div class="layui-input-block">
<div id="column" >
<select name='type' >
<option value="">请选择上架栏目option>
select>
div>
div>
div>
对应的js实现：
function changeSelect(index) {
console.log(index)
$("#column").html("");
let str =";
for (let j = 0; j < data[index].goods_typeList.length; j++) {
let id = data[index].goods_typeList[j].id;
let text = data[index].goods_typeList[j].small_column
str += 'id+'">'+text +'';
}
str += ''
$("#column").html(str)
console.log(str)
layui.form.render('select');
}
场景二、layui、elementUI、axios、echarts混搭使用
我本来以为elementUI跟layui搭配应该会不兼容，可能是我太菜了才会这么觉得吧。其实还不错。
引入elementUI、CDN相关CDN地址即可
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js">script>
<script src="https://unpkg.com/element-ui/lib/index.js">script>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
<script src="/js/echarts.min.js">script>
然后javascript写如下即可使用axios、charts
Vue.prototype.$axios = axios;
Vue.prototype.$echarts = echarts;
最后说一点 在vue中 axios的常用请求方法：
如果在axios想实现跨域请求，我们需要在脚手架工程文件config/index.js里面设置如下内容：
1.配置访问请求主机
proxyTable: {
'/api': {
target: 'http://localhost:80',//设置你调用的接口域名和端口号 别忘了加http、https
changeOrigin: true,//是否跨域
secure: true, // 允许https请求
pathRewrite: {
'^/api': ''//这里理解成用‘/api’代替target里面的地址
}
}
}
- vue启动 的 main.js 配置内容
为什么要配置如下内容呢？这样每次跨域请求前面就不用加/api了。
axios.defaults.baseURL = '/api'
Vue.prototype.$axios = axios
场景三、请求携带参数 springboot如何接收？
1. url组装型
如下请求，springboot不用多做配置，直接让参数名与该参数id名字保持一致即可。
this.$axios.get("/recharge?id=" + this.rechargeOrderId, {
headers: {
'Content-type': 'application/json;charset=UTF-8'
}}).then(res => {
console.log(res.data);
})
2. post参数型
this.$axios.post("/order/cancelOrder", {
// currOrderIdAll为一个数组。
param: this.currOrderIdAll
}, {
headers: {
'Content-type': 'application/json;charset=UTF-8'
}
}).then(response => {
console.log(response);
}).catch(function (error) {
console.log(error);
});
这个时候我们该怎么接收参数呢?如下：
public JSONObject cancelOrder(@RequestBody JSONObject jsonObject){
JSONObject res = new JSONObject();
ArrayList<Integer> array = (ArrayList)jsonObject.get("param");
}
那如果如下请求的参数是个json数据，后台怎么获取数据呢？
this.$axios.post("/login", {
param: {
id:"123",
password:"dd"
}
}, {
headers: {
'Content-type': 'application/json;charset=UTF-8'
}
}).then(response => {
console.log(response);
}).catch(function (error) {
console.log(error);
});
如下：
public JSONObject login(@RequestBody JSONObject jsonObject){
JSONObject param = jsonObject.get("param");
String vipId = param.getString("id");
String password = param.getString("password");
}
场景四、登陆后跳转到原界面（就是由哪个页面跳转过来的登陆成功应该返回原界面，用户体验效果自然是好）（VUE）
购物车付款时（假若用户没有登陆）这里提示需要登录，自然用户需要登陆的话要跳转到登陆界面，登陆成功我们应该返回到购物车这个页面。
我的解决方案是：跳转到 /login之前携带一个参数，这里是携带的即就是当前页面/shopping
this.$confirm('登陆可享会员优惠95折，是否需要登录?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$router.push({ name: 'login', params: { redirect: "/shoppingCar" } });
}).catch(() => {
console.log(JSON.stringify(this.shoppingCar))
});
登陆成功 应该取出传递过来的参数，并跳转过去即可
this.$axios.post("/vip/login", {
vipId: this.ruleForm.password
}, {
headers: {
'Content-type': 'application/json;charset=UTF-8'
}
}).then(res => {
console.log(res)
if (res.data.state == 200) {
//this.$router.go(-1);
// window.history.back()
// 如果没有 要跳转的地址直接跳入
let msg = res.data.message;
this.setUserInfo(JSON.parse(msg));
if (JSON.stringify(this.$route.params) != '{}') {
console.log("有目标地址传进来" + this.$route.params.redirect)
// 这里写path比较灵活 写name(vue路由时设置的名字) 的话 如果目标地址携带了参数还得 再用 params或者query传过去
// 而path直接接受传来的参数即为要跳转的页面。
this.$router.push({ path: decodeURIComponent(this.$route.params.redirect) });
} else {
console.log("没有目标地址传进来")
this.$router.push({ name: 'personCenter' });
}
} else {
this.$message({
message: res.data.message,
type: "error"
});
}
}).catch(function (error) {
console.log(error);
});
场景五、路由权限设置（VUE）
有些页面，没有登陆状态应该是没有权限访问的，我们需要给路由配置权限，具体做法如下:
在路由配置js下：加入meta属性
{
path: '/personCenter',
name: 'personCenter',
meta: {
auth: true
},
component: personCenter,
children: [
{
path: 'userInfo',
component: userInfo
},
]
}
vue 启动的main.js 加入如下内容
router.beforeEach((to, from, next) => {
//检测是否需要权限校验
if (to.matched.some(record => record.meta.auth)) {
console.log(to.fullPath+"需要验证")
// 检测是否登陆,没登陆则跳转到login界面
if (userGlobal.alreadyLogin()) {
next()
} else {
console.log("进入验证")
//防止无限循环
if (to.name === 'login') {
next();
return
}
next({
path: '/login',
redirect: to.fullPath
});
}
} else {
console.log(to.fullPath+"不需要验证")
next()//若点击的是不需要验证的页面,则进行正常的路由跳转
}
})
场景六、父子组件通信方案（VUE）
1.父组建引用子组建
<goodsWindow ref="goodsWindow" />
import goodsWindow from "@/components/goodsWindow";
//vue组件加入该组建
components: {
goodsWindow
}
这时候，父组建调用子组件很简单 ，直接使用this.$refs.goodsWindow即可获取子组建方法及属性。而子组建引用父组建更简单，直接使用this.$parent即可调用父组件方法及属性。当然这只是一种方法。还有其他好几种方法eg:props、$emit这里就不做过多的介绍了。
场景七、获取起始日期与终止日期的每一天
有时候我们需要获取起始日期与终止日期做个报表，那么前台传来 两个日期，后台肯定 需要解析出 每一天。
static List<String> findDaysStr(String begintTime, String endTime) {
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
Date dBegin = null;
Date dEnd = null;
try {
dBegin = sdf.parse(begintTime);
dEnd = sdf.parse(endTime);
} catch (ParseException e) {
e.printStackTrace();
}
List<String> daysStrList = new ArrayList<String>();
daysStrList.add(sdf.format(dBegin));
Calendar calBegin = Calendar.getInstance();
calBegin.setTime(dBegin);
Calendar calEnd = Calendar.getInstance();
calEnd.setTime(dEnd);
while (dEnd.after(calBegin.getTime())) {
calBegin.add(Calendar.DAY_OF_MONTH, 1);
String dayStr = sdf.format(calBegin.getTime());
daysStrList.add(dayStr);
}
return daysStrList;
}
解析出每一天，然后通过如下SQL语句即可统计每天的消费总营业额。其中#{dateTime}为传来的参数。
SELECT sum(fmoney) as count FROM good_order WHERE
date_format(created_time,'%Y-%m-%d')=date_format(#{dateTime},'%Y-%m-%d');
另外总结下在vue中 如何引入 外部 js 充当全局变量。
首先在 src新建一个util包，新建userGlobal.js ，内容格式如下：
function alreadyLogin(){
return getUserInfo() !== '{}' ? true:false
}
function getUserInfo(){
return sessionStorage.getItem('user')==null?'{}':JSON.parse(sessionStorage.getItem('user'));
}
function setUserInfo(user){
sessionStorage.setItem('user',JSON.stringify(user))
}
export default{
alreadyLogin,getUserInfo,setUserInfo
}
然后在main.js配置：
import userGlobal from '@/util/userGlobal.js'
Vue.prototype.$userGlobal = userGlobal
结语：
完成该项目。其中的心酸历程当然也是一言难尽，每天10小时的超负荷工作… 以及刚开始写的时候电脑硬盘损坏，造成我是数据丢失。所以备份还是挺重要的。vue的组件使用起来也很舒服。便是以后开发项目的首选了。