乐趣区

关于app:一篇文章教你如何创建一个电商APP

jiezi

Kendo UI for jQuery 最新版下载

在本教程中，咱们将应用 HTML、CSS、jQuery 和 Kendo UI 提供的一些组件来构建电商 APP。在本教程中，咱们将构建电子商务应用程序的根本版本。

从头开始构建组件有时会十分耗时，为了不便的解决应用程序，咱们将应用 Kendo UI 组件，这将节俭大量工夫。

Kendo UI 是由 Progress 的 Telerik 团队开发的 JavaScript 库，它能帮忙您疾速构建 Web 应用程序的 UI。Kendo UI 的外围库提供了一系列易于应用的 UI 组件，例如网格、文本框、数字文本框、图表等，Kendo UI 提供了风行的 JavaScript 库（如 jQuery，Angular，React 和 Vue）的组件。

先决条件

要构建此应用程序，请应用以下一些工具：

  • Kendo UI
  • HTML/CSS
  • jQuery

初始化应用程序

尽管开发功能齐全 / 可扩大的电子商务应用程序可能会很麻烦，然而实现根本版本很容易创立，咱们将应用 HTML/CSS, jQuery 和 Kendo UI 创立一个利用。

创立一个名为 marketplace 的文件夹，并在其中定义此文件夹构造：

marketplace/
css/
styles.css
js/
items.js
functions.js
index.html

对于咱们的应用程序，将应用一种非常简单的办法：

  • 定义一个 css 文件夹来保留样式表。
  • 定义一个保留 jQuery 函数的 js 和一个蕴含市场商品的 item.js 文件。
  • 最初在文件夹的底部创立一个 index.html 文件，以用作应用程序的入口点。

首先筹备 index.html 文件来接管和显示内容，在索引文件中，输出以下代码行：

`<!– ./index.html –>
<html>
<head>
<title>Awesome Market</title>
<link rel=”stylesheet” href=”css/styles.css”>
<link rel=”stylesheet” href=” https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css”>
<link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.7.2/css/all.css” integrity=”sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr” crossorigin=”anonymous”>
</head>
<body>
<main>
<header>
<nav class=”navbar navbar-light bg-light justify-content-between”>
MarketPlace
<div id=”cart-container”>
<div id=”cart”>
cart

Empty cart </div>
<span id=”itemCount”></span>
</div>
</nav>
</header>
<div id=”shoppingCart”>
<div id=”cartItemsContainer”>
<h2>Items in your cart</h2>

<div id=”cartItems”></div>
<span id=”cartTotal”></span>
</div>
</div>
<div id=”products” class=”row”> </div>
</main>
<script src=”https://code.jquery.com/jquery-3.3.1.js”
integrity=”sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=”
crossorigin=”anonymous”>
</script>
<script src=”js/functions.js”></script>
</body>
</html>`

  • 通过 CDN 导入所有相干资源，资源包含 jQuery、Bootstrap 和 fontawesome，以及自定义样式表。
  • 定义将显示我的项目的区域。
  • 题目蕴含以后购物车我的项目和一个用于清空图表的按钮。
  • 定义 div 在每次查看时保留图表项。
  • div 为空，将主动从 jQuery 函数动静注入产品。
  • 导入 jQuery 和自定义 js 文件

到目前为止，咱们曾经定义了一个样式表和一个蕴含空内容的函数文件，持续填充它们。

关上您的 CSS 文件并增加文件，并向其中增加以下代码：

`// css/styles.css
main {
padding: 10px 0;
width: 1024px;
margin: 0 auto;
}

cart-container {

float: right;
width: 210px;
position: relative;
}

itemCount {

position: absolute;
display: none;
top: -10px;
left: -10px;
width: 20px;
height: 20px;
border-radius: 50%;
background: red;
color: white;
text-align: center;
}
nav {
margin-bottom: 30px;

nav ul {
list-style: none;
overflow: auto;
width: 100%;
background: #444444;
}
nav ul li {
float: left;
padding: 5px 20px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
nav ul li:hover {
color: #444444;
background: #cccccc;
}
nav ul li:hover a {
color: #444444;
}
img {
width: 100%;
}
.item {
width: 31%;
float: left;
margin: 1%;
}
.itemText p {
margin-bottom: 20px;
}
.price-container {
margin-top: 20px;
}
i:hover {
cursor: pointer;
}

shoppingCart {

top: 0;
left: 0;
height: 100%;
width: 100%;
display: none;
position: absolute;
z-index: 9999;
background: rgba(0, 0, 0, 0.6);
}

cartItemsContainer {

position: relative;
width: 600px;
left: 50%;
top: 150px;
margin-left: -300px;
padding: 40px;
box-shadow: 0 0 10px black;
background: #e9e9e9;
overflow: auto;
}

cartItemsContainer i {

position: absolute;
top: 20px;
right: 20px;
}

cartItemsContainer .itemDetails {

overflow: auto;
width: 100%;
margin-bottom: 40px;
}

emptyCart {

display: none;
}

cartItemsContainer .itemImage {

float: left;
width: 260px;
padding: 0 40px;
}

cartItemsContainer .itemText {

float: right;
width: 260px;
padding: 0 40px;
}

cartItemsContainer .itemText .price-container {

margin-top: 0;
}
.removeItem {
margin-left: 40px;
}
.col-sm-4 {
margin-bottom: 15px;
}`

当初，用产品填充 items.js 文件，向其增加以下代码：

`// js/items.js
[
{
“name”: “Berries”,
“price”: 23.54,
“image”: “https://images.unsplash.com/photo-1488900128323-21503983a07e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80”,
“description”: “Sweet popsicles to help with the heat”
},
{
“name”: “Orange”,
“price”: 10.33,
“image”: “https://images.unsplash.com/photo-1504185945330-7a3ca1380535?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&h=340&w=340&q=80”,
“description”: “Mouth watering burger. Who cares if it’s healthy”
},
{
“name”: “Lemons”,
“price”: 12.13,
“image”: “https://images.unsplash.com/photo-1504382262782-5b4ece78642b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80”,
“description”: “Sumptuous egg sandwich”
},
{
“name”: “Bananas”,
“price”: 10.33,
“image”: “https://images.unsplash.com/photo-1478369402113-1fd53f17e8b4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80”,
“description”: “A great tower of pancakes. Dig in!”
},
{
“name”: “Apples”,
“price”: 10.33,
“image”: “https://images.unsplash.com/photo-1505253304499-671c55fb57fe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80”,
“description”: “Great looking Waffle to start the day”
},
{
“name”: “Sharifa”,
“price”: 10.33,
“image”: “https://images.unsplash.com/photo-1470119693884-47d3a1d1f180?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&h=400&q=80”,
“description”: “What’s greater than 5 minutes with grilled corn”
}
]`

当初关上您的 functions.js 文件，并向其中增加以下代码：

`// js/functions.js

function init(){

// read our array of products and display it
$.getJSON(“js/items.js”, function( json) {

json.forEach(function (item) {
$(“#products”).append(‘<div class=”col-sm-4″><div class=”card”>’ +
‘<img class=”card-img-top” src=”‘ + item.image + ‘”>’ +
‘<div class=”card-body”>’ +
‘<h5 class=”card-title”>’ + item.name + ‘</h5>’ +
‘<p class=”card-text price”>’ + “Price: $” + item.price + ‘</p>’ +
‘<p class=”card-text price”>’ + item.description + ‘</p>’ +
‘Add to cart’ +
‘</div>’ +
‘</div></div>’);
});
});
}
$(init);`

应用 jQuery：

  • 从 items.js 文件中读取内容
  • 构建产品 DOM 元素
  • 附加并显示在 index.html 文件中

当初，当您尝试加载 index.html 时，将看到一个空白屏幕。那是因为浏览器因为访问控制源而无奈读取 JSON 文件。为了解决这个问题，须要应用 http 服务器来加载文件。

首先通过在终端中输出以下命令来装置 http-server：

npm install -g http-server

装置后，您就能够在零碎中的任何中央应用 http 服务器，当初在终端中输出以下内容来提供文件：

http-server -c-1

当初，当您在浏览器中拜访 http：// localhost：8080 时，您将看到以下内容：

这意味着曾经可能浏览和显示产品及其信息，接下来，咱们须要编写函数来解决从购物车中增加和删除商品的操作。

关上 functions.js 并增加以下代码：

`// js/functions.js

function init(){
var itemCount = 0;
var priceTotal = 0;
// other code stays same

// Add Item to Cart
$(‘.add’).click(function (){
itemCount ++;

$(‘#itemCount’).text(itemCount).css(‘display’, ‘block’);
$(this).siblings().clone().appendTo(‘#cartItems’).append(‘<button class=”removeItem”>Remove Item</button>’);

// Calculate Total Price
var price = parseInt($(this).siblings().find(‘.price’).text());
priceTotal += price;
$(‘#cartTotal’).text(“Total: $” + priceTotal);
});

// Hide and Show Cart Items
$(‘.openCloseCart’).click(function(){
$(‘#shoppingCart’).toggle();
});

// Empty Cart
$(‘#emptyCart’).click(function() {
itemCount = 0;
priceTotal = 0;
$(‘#itemCount’).css(‘display’, ‘none’);
$(‘#cartItems’).text(”);
$(‘#cartTotal’).text(“Total: $” + priceTotal);
});

// Remove Item From Cart
$(‘#shoppingCart’).on(‘click’, ‘.removeItem’, function(){
$(this).parent().remove();
itemCount –;
$(‘#itemCount’).text(itemCount);

// Remove Cost of Deleted Item from Total Price
var price = parseInt($(this).siblings().find(‘.price’).text());
priceTotal -= price;
$(‘#cartTotal’).text(“Total: €” + priceTotal);

if (itemCount == 0) {
$(‘#itemCount’).css(‘display’, ‘none’);
}
});
}
$(init);`

在这里，咱们定义了应用程序所需的性能。

  • 应用 Click 办法，咱们将特定元素作为指标，并依据所单击的按钮来更新它们的状态
  • 当用户增加、删除、清空或查看以后购物车时，状态会更改
  • 最初，一旦文件加载到索引页上，咱们就应用 jQuery 的 $ 调用 init 函数来初始化文件

至此，咱们有了一个电子商务应用程序的工作版本，通过 Kendo UI 增加另一项性能。

应用 Kendo UI 增加空购物车按钮

您可能曾经留神到，当加载页面时，没有显示空购物车。这是因为咱们最后将其设置为从 CSS 基本不显示。在本节中咱们将：

  • 应用 Kendo UI 按钮组件显示和设置按钮款式
  • 仅在购物车中至多有一件商品后才显示按钮

咱们须要先将 Kendo UI 导入到我的项目中，而后能力拜访按钮组件。

关上 index.html 文件，并向其中增加以下代码行：

`// ./index.html

<head>
//import kendoui through the cdn in your header
<link rel=”stylesheet” href=”https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css”>
<link rel=”stylesheet” href=”https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.rtl.min.css”>
<link rel=”stylesheet” href=”https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.default.min.css”>
<link rel=”stylesheet” href=”https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.mobile.all.min.css”>
<script src=”https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js”> </script>
</head>`

在此文件中，咱们仅通过 CDN 导入 Kendo UI。

当初在 js 文件中初始化函数，关上 functions.js 文件，并将以下代码增加到其中：

`// js/functions.js

// add inside init function
$(“#emptyCart”).kendoButton();

//insert code in bold into this function
$(document).on(“click”, “.add”, function (){
// new code
$(‘#emptyCart’).css(‘display’, ‘inline’);
//other code stays same`

这里咱们做两件事：

  • 初始化按钮
  • 应用 jQuery 显示按钮

当初，重新启动服务器，并在浏览器中拜访 http：// localhost：8080。将商品增加到购物车后，您将看到按钮显示。

退出移动版