Ratcliffe ASP.NET Core 2 and Vue.js

Full Stack Web Development with Vue, Vuex, and ASP.NET Core 2.0
1. Auflage 2024
ISBN: 978-1-78883-441-4
Verlag: De Gruyter
Format: EPUB
Kopierschutz: Adobe DRM (»Systemvoraussetzungen)

E-Book, Englisch, 556 Seiten

This book will walk you through the process of developing an e-commerce application from start to finish, utilizing an ASP.NET Core web API and Vue.js Single-Page Application (SPA) frontend.
We will build the application using a featureslice approach, whereby in each chapter we will add the required frontend and backend changes to complete an entire feature. In the early chapters, we'll keep things fairly simple to get you started, but by the end of the book, you'll be utilizing some advanced concepts, such as server-side rendering and continuous integration and deployment. You will learn how to set up and configure a modern development environment for building ASP.NET Core web APIs and Vue.js SPA frontends.You will also learn about how ASP.NET Core differs from its predecessors, and how we can utilize those changes to our benefit.
Finally, you will learn the fundamentals of building modern frontend applications using Vue.js, as well as some of the more advanced concepts, which can help make you more productive in your own applications in the future.

Autoren/Hrsg.

Ratcliffe, Stuart

Fachgebiete

• Mathematik | Informatik EDV | Informatik Programmierung | Softwareentwicklung Software Engineering
• Mathematik | Informatik EDV | Informatik Programmierung | Softwareentwicklung Programmier- und Skriptsprachen

Inhaltsverzeichnis

Table of Contents - Understanding the Fundamentals
- Setting up the development environment

- Getting Started with the Project
- Building our first Vue.js components

- Building a product catalogue
- Building a shopping cart

- User registration / authentication

- Processing payments

- Building an admin panel

- Deployment
- Authentication - OpenID Connect
- Server-side rendering

- Continuous integration / deployment

Leseproben

Displaying a list of products

As we'll be building a full e-commerce application, it makes sense to start things off with a list of fictional products that we are going to sell. We'll keep things simple to start with and keep this component contained within our home page before we introduce the additional complexity of multiple pages.

When first starting out with Vue, it is very easy to just keep dropping all of our components in the ClientApp/components folder. However, it will soon get very difficult to find what we're looking for once we have more than a handful of components to maintain. Instead, I tend to group my components by page or feature, with a folder for each inside the components directory. It doesn't really matter what we name these features, as long as it's obvious to us which components belong to each one.

Create a ClientApp/components/products/List.vue file. The

The first thing to note here is that all Vue components must only contain one root element. For most of our components, it is fairly safe to simply wrap everything in a div tag as we have done here. However, certain components intended to render specific tags, such as list items or table rows, would be wrapped in a single li or tr tag instead.

The next most important line is the following:

Here, we are using the v-for directive to loop over a list called products, and render the contents of this div element for each item in the list. Also notice how we use the shorthand for the v-bind syntax to bind a key property to the element. This key property helps Vue to manage the ordering of items in dynamic lists that may change at runtime. It isn't required, and the component will work perfectly fine without it. However, it certainly can't hurt to provide it, and it can seriously improve the performance of the application in certain circumstances, so there really isn't a reason not to.

If you're using VS Code and you followed along in Chapter 2, , you'll have installed the Vetur extension, in which case you'll notice that if you fail to provide a key property, it will underline this line of code in red until you add it!

The last thing to know about the key property is that it has to be unique to the list item being rendered, or it won't do much good in helping to track the items in the list. The ideal value to use is some form of ID value if we are rendering items that are stored in a database; we aren't pulling this data from the API yet, so we have no real ID values, but we will be using a slug property as another unique identifier for a product so that we can use nice friendly URLs for our pages later in this chapter.

The v-for directive also binds a variable representing the list item to the context of the element. In this case, we bound a variable called product. We then made use of this variable in a bunch of other elements as follows:

{{ product.name }}

{{ product.shortDescription }}

{{ product.price }}

With the h3 and p elements, it is a simple case of data binding using string or text interpolation. Any expression placed between a pair of double curly braces, including the braces themselves, is replaced by the value of that expression. In this case, we simply bind the name, shortDescription, and price properties of the product variable to the associated HTML elements.

Where things get a little more complicated is with the img element that we rendered:

Again, we used the v-bind shorthand to data bind the src and alt attributes of the image. This is a great example of where we take a standard HTML attribute and use Vue to interpret it dynamically at runtime. If we hadn't included the colon before the attributes, they would have been treated as normal, that is, as plain text. Instead, we are able to bind the properties of our product variable, which includes a URL to an image that can be used as a thumbnail for the product.

Finally, on each of these elements we also attached a click event handler using the @ shorthand syntax. This click event handler is used to trigger a method, or function, that we'll see contained in the script section of the component shortly. As with data binding, we have access to the product variable declared in the loop, and can pass it as a parameter of this method. This enables us to perform any logic or operations based on the specific product that the user clicks on, such as adding a specific product to a shopping cart, or in this instance selecting a product to view more information about it.

Let's have a look at the script section of this component:

export default {
name: "product-list",
data() {
return {
products: [
//products omitted for brevity
],
selectedProduct: null
};
},
methods: {
select(product) {
this.selectedProduct = product;
}
}
};

There are a few things going on in here, so let's go over this line by line.

First off, we have the export default { } declaration. In order to use this component within another component or page of our app, we need to declare it as a child component, and to do that we need to be able to import it. This line tells webpack that this is a module that can now be imported and used within other modules, or components, in our case. Without it, when we try and display this component within our main App.vue component, it will not be able to find anything to import and display.

Next up, we have the name declaration. This isn't a requirement, and the component would work perfectly fine if we omitted it. However, there are a few benefits to being vigilant and remembering to name each of our custom components. First of all, it makes debugging our components much nicer when using the Chrome DevTools extension that we installed earlier. We can inspect the application with the dev tools to see a nice component tree—if we don't name the component, then it shows up as

The data section is next, which as we already know must be a function that returns an object. We have two simple properties in this component: a products array that, as its name suggests, is a collection of product objects; and a selectedProduct object, which again is fairly self-explanatory and holds the product that the user selects to display further details for. The only thing missing here is the actual product objects within the products array, as the actual data isn't particularly important or interesting to read. Considering these object definitions only differ very slightly in their property values, I chose to omit them to save space. However, as an example, here is one of those product objects:

{
name: "Samsung Galaxy S8",
slug: "samsung-galaxy-s8",
thumbnail: "http://placehold.it/200x300",
shortDescription:
"Samsung Galaxy S8 Android smartphone with
true edge to edge display",
price: 499.99,
description:
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis tempora ad cum laudantium, omnis fugit amet iure animi corporis labore repellat magnam perspiciatis explicabo maiores fuga provident a obcaecati tenetur nostrum, quidem quod dignissimos, voluptatem quasi? Nisi quaerat, fugit voluptas ducimus facilis impedit quod dicta, laborum sint iure nihil veniam aspernatur delectus officia culpa, at cupiditate? Totam minima ut deleniti laboriosam dolores cumque in, nesciunt optio! Quod recusandae voluptate facere pariatur soluta vel corrupti tenetur aut maiores, cumque mollitia fugiat laudantium error odit voluptas nobis laboriosam quo, rem deleniti? Iste quidem amet perferendis sed iusto tempora modi illo tempore quibusdam laborum? Dicta aliquam libero, facere, maxime corporis qui officiis explicabo aspernatur non consequatur mollitia iure magnam odit enim. Eligendi suscipit, optio officiis repellat eos quis iure? Omnis, error aliquid quibusdam iste amet nihil nisi cumque magni sequi enim illo autem nesciunt optio accusantium animi commodi tenetur neque eum vitae est."
}

The other five objects in the array are very similar; just make sure the slug property is unique or the component won't render!...

Über Autor(innen)

Ratcliffe Stuart :

Stuart Ratcliffe is a professional software developer who lives and works in the East Midlands, UK. He has held positions at some of the largest IT companies in the world, working on high-profile projects for the UK government. Currently, he has been working on track-and-trace systems for medical instruments that undergo sterilization. He holds a Tech Lead position on the digital side of a healthcare company, building both web and mobile applications to support the clinical side of the business. He is a full-stack.NET developer who loves to learn new technologies.