本人最近在个人博客写一个小型的Vue实战文章，努力中，欢迎各位前往查看，指导点评！ адрес:личный блог Сай
предисловие
Недавно компания, в которой я практиковалась, работала над проектом интернет-магазина, и я отвечал за корзину. Этот проект является веб-проектом, в нем нет разделения на переднюю часть и заднюю часть, но это должно быть сделано на стороне мобильного телефона, что кажется неправильным. . . Веб-фреймворк использует SpringMVC, а шаблонный фреймворк — FreeMarker.Думая о создании мобильного терминала в будущем, я решил использовать json для взаимодействия с данными вместо freemarker. Все статические файлы веб-страницы записываются и размещаются в представлениях springmvc. Само собой разумеется, что лучше разделить переднюю часть и заднюю часть, но те, кто делает веб-страницы, никогда не прикасались к Vue, так что это нормально. . . Поэтому я подумал о том, чтобы представить Vue прямо на странице, но он был разработан в среде интрасети, поэтому мне пришлось загрузить vue.js на свой личный ноутбук, а затем скопировать его на компьютер в интрасети для представления на странице.
текст
Сначала давайте взглянем на рендеринг статической страницы:
Кратко опишите требования к этому функциональному модулю:
- Установите флажок Выбрать все, чтобы выбрать все продукты. При снятии флажка все элементы снимаются.
- Нажмите знаки плюс и минус на отдельном товаре, чтобы увеличить или уменьшить количество, а промежуточный итог справа рассчитает общую стоимость этого товара в режиме реального времени.
- Нажмите кнопку удаления на отдельном товаре, чтобы удалить его из корзины.
- Выбранный элемент внизу отображает проверенные элементы в режиме реального времени, а общая сумма справа отображает сумму промежуточных итогов всех отмеченных элементов в режиме реального времени. (Да вроде спрос не большой, но все же нужно немного поработать, чтобы сделать это в сочетании с фоном, но в этой статье мы не задействуем фон, мы создаем данные на переднем плане)
Давайте начнем сейчас
один, создайте объект Vue и установите данные.
var cart; //全局Vue对象
//通过封装一个方法来创建Vue对象
function createVue(list) { //传入通过后台获取的list
cart = new Vue({
el:'#cart',
data(){
return {
list:list //商品列表
}
}
});
}
два, предполагая, что данные запрашиваются из фона, а затем назначаются объекту Vue
window.onload = function () {
//请求后台代码 。。。。
//请求成功后将获得的list赋值给cart的list
let list = [
{
goodsTitle: "卫龙辣条", //商品名
specifications: "大包", //商品规格
unitPrice: "5", //商品单价
subimage1Filename :"20180317eeftyd.jpg", //商品图片名
purchaseQuantity: 6 //商品数量
},
{
goodsTitle: "雕牌洗衣粉",
specifications: "大包",
unitPrice: "13",
subimage1Filename: "20180317ggptfg.jpg",
purchaseQuantity: 1
},
{
goodsTitle: "旺仔牛奶",
specifications: "20盒装",
unitPrice: "45",
subimage1Filename: "20180317feftyp.jpg",
purchaseQuantity: 1
}];
createVue(list); //执行创建Vue对象方法
}
);
три, измените html-часть кода, чтобы отобразить данные
<tr v-for="(item,index) in list">
<td>
<input type="checkbox" :id="'check'+index" name="checkboxs" />
<label :for="'check'+index"></label>
</td>
<td>
<img :src="'路径前缀/'+item.subimage1Filename" />
</td>
<td style="text-align:left;">
<p>{{item.goodsTitle}}</p>
<p>规格：{{item.specifications}}</p>
</td>
<td>￥{{item.unitPrice}}</td>
<td class="adddel">
<em v-on:click="minius(index)">-</em>
<input type="number" v-model.number="item.purchaseQuantity" />
<em v-on:click="add(index)">+</em>
</td>
<td>￥{{item.unitPrice * item.purchaseQuantity}}</td>
<td><button v-on:click="checkDel(index)">删除</button></td>
</tr>
Таким образом, все части одного товара могут быть напечатаны в цикле, и соответствующая информация может быть напечатана в соответствующей позиции. Схема эффекта выглядит следующим образом:
cart = new Vue({
el: '#cart',
data() {
return {
list: list,
checkeds: new Array(list.length) //初始化成list的长度
}
});
Затем привяжите флажок, соответствующий продукту, к галочкам в html, и измененный код выглядит следующим образом:
<input type="checkbox" :id="'check'+index" name="checkboxs" v-model="checkeds[index]" />
Вычислите сумму цен, используя вычисляемое свойство:
sum () {
let sum = 0;
for (let i in this.list) {
if (this.checkeds[i]) //如果checkeds[i]的结果为truth，则进行累加
sum += this.list[i].unitPrice * this.list[i].purchaseQuantity;
}
return sum;
}
В части HTML мы можем использовать {{sum}} в соответствующей позиции для ее отображения. Таким образом, можно рассчитать сумму промежуточных итогов проверенных элементов. Затем реализуем функцию select-all и добавляем метод checkAll в атрибуте method.Конкретный код выглядит следующим образом:
checkAll (event) { //这里的event就是全选checkbox对象
if (event.checked) { //如果全选的checkbox选中，将checkeds所有的值设置为true，对应商品checkbox的选中状态自动更新
for (let i = 0; i < this.checkeds.length; i++) {
Vue.set(this.checkeds, i, true);
}
else { //否则就进行与上面相反的操作
for (let i = 0; i < this.checkeds.length; i++) {
Vue.set(this.checkeds, i, false);
}
}
}
После вышеописанной волны операций был реализован расчет суммы цен на момент всего выбора и клика. Так же нам нужно подсчитать количество выбранных товаров.Это очень просто.Также мы используем атрибут calculateed для подсчета истинности в проверенных.Код такой:
checkNum: function () {
let num = 0;
for (let i in this.checkeds) {
if (this.checkeds[i]) {
num++;
}
}
return num;
}
Затем подставьте {{checkNum}} в соответствующую позицию в html. Теперь, когда мы выполнили почти половину требований, давайте перейдем к их выполнению!Пятерки, чтобы реализовать единственную функцию удаления элементов корзины покупок, это очень просто, мы добавляем метод del к методам и используем метод splice массива js для достижения этого.
del (index) {
this.list.splice(index, 1); //只需要从数组中移除对应项，视图会自动更新，不得不说，Vue太棒啦！
this.checkeds.splice(index,1); //同时删除对应的选中状态标识
}
Затем нужно привязать событие клика к кнопке удаления (индекс — это нижний индекс при циклическом выполнении списка):
<button v-on:click="del(index)">删除</button>
Таким образом, мы можем легко реализовать необходимость удаления одного продукта, конечно, чтобы пользователи не удалили его по ошибке.Когда пользователь нажимает кнопку удаления, мы можем открыть всплывающее окно подтверждения, чтобы предложить пользователю, и мы не будет реализовывать это здесь.шесть, реализуйте увеличение и уменьшение количества одного товара в корзине и обновляйте промежуточный итог товара в режиме реального времени. Сначала добавьте метод увеличения add и метод уменьшения minius к методам:
add (index) {
this.list[index].purchaseQuantity++; //这里按理来说应该查询后台对应商品库存量来进行限制的，这里不涉及到后台所以没加
},
minius (index) {
if (this.list[index].purchaseQuantity > 1) { //这里添加一个限制，最少要有一个商品
this.list[index].purchaseQuantity--;
}
}
Затем мы связываем события с соответствующими кнопками «плюс» и «минус», чтобы активировать эти два метода (индекс — это индекс, когда список зацикливается):
<td class="adddel">
<em v-on:click="minius(index)">-</em>
<input type="number" v-model.number="item.purchaseQuantity" />
<em v-on:click="add(index)">+</em>
</td>
<td>￥{{item.unitPrice * item.purchaseQuantity}}</td>
Из приведенного выше кода видно, что мы напрямую умножаем цену за единицу и количество продукта в столбце промежуточных итогов, чтобы можно было получить обновление в реальном времени.
На этом наши потребности завершены, и, наконец, мы оставляем два небольших вопроса для размышления каждого.
один, как добиться пакетного удаления?два, после выбора всех, мы отменяем статус товара, выбранное состояние поля выбора всех выбрано, его не следует выбирать в это время, или когда мы проверяем все выбранные состояния продуктов по одному, поле выбора всех по-прежнему находится в выбранном состоянии, и оно должно быть в выбранном состоянии (как показано на следующих двух рисунках).Как решить эту проблему?
эпилог
Весь код в этой статье был размещен на GitHub. Если в коде в этой статье есть какие-либо ошибки, обратитесь к коду на GitHub. Адрес GitHub:GitHub.com/Eason Chan Fun/v UE_…