当前位置 博文首页 > 海棠花未眠的博客：vue+springboot小项目的经验之道
去年写一个小项目，与layui结缘，用起来不得说，对于我们这种后台开发人员写起界面来也方便了很多，要想要是自己设计能力好的话，css学的足够精通，还学UI库干什么呢。当然，使用ui库，真的可以提高我们的开发效率。上周接了一个别人的毕设项目，本来就很有兴趣学习一下vue，这不就 ，边学边学用了10+天。
layui作为一个前端UI项目，我用的最多的还是它的弹窗…，其他树形组建也没用过。官方的文档 也写的蛮详细的，这里我就不提了，因为自己也很菜。就是想总结一下常用的一些技巧使用。
以下
${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 ="<select name='type' >";
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 += '<option value="'+id+'">'+text +'</option>';
}
str += '</select>'
$("#column").html(str)
console.log(str)
layui.form.render('select');
}
我本来以为elementUI跟layui搭配应该会不兼容，可能是我太菜了才会这么觉得吧。其实还不错。
引入elementUI、CDN相关CDN地址即可
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- elementUI JavaScript -->
<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里面的地址
}
}
}
/api了。axios.defaults.baseURL = '/api'
Vue.prototype.$axios = axios
如下请求，springboot不用多做配置，直接让参数名与该参数id名字保持一致即可。
this.$axios.get("/recharge?id=" + this.rechargeOrderId, {
headers: {
'Content-type': 'application/json;charset=UTF-8'
}}).then(res => {
console.log(res.data);
})
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");
}
购物车付款时（假若用户没有登陆）这里提示需要登录，自然用户需要登陆的话要跳转到登陆界面，登陆成功我们应该返回到购物车这个页面。
我的解决方案是：跳转到 /login之前携带一个参数，这里是携带的即就是当前页面/shopping
this.$confirm('登陆可享会员优惠95折，是否需要登录?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$router.push({ name: 'login', params: { redirect: "/shoppingCar" } });
}).catch
