ASP.NET Core 2 and Vue.js full stack web development with Vue, Vuex, and ASP.NET Core 2.0
Leverage ASP.NET core 2.0 web API and the power of Vue.js at the client side to create modern applications from scratch Key Features Create fast, rich and reactive client side applications with Vue.js and ASP.NET Core. Leverage Vue components efficiently to build state of the art user interfaces. Wo...
| Otros Autores: | |
|---|---|
| Formato: | Libro electrónico |
| Idioma: | Inglés |
| Publicado: |
Birmingham :
Packt
2018.
|
| Edición: | 1st edition |
| Materias: | |
| Ver en Biblioteca Universitat Ramon Llull: | https://discovery.url.edu/permalink/34CSUC_URL/1im36ta/alma991009631501106719 |
Tabla de Contenidos:
- Cover
- Title Page
- Copyright and Credits
- Dedication
- Packt Upsell
- Contributors
- Table of Contents
- Preface
- Chapter 1: Understanding the Fundamentals
- Thinking in components
- What is a component?
- UI composition
- Introduction to Vue
- The Vue instance
- Attaching to the DOM
- Defining data properties
- Rendering data into the DOM using expressions
- Building component trees
- Reactivity
- Component behavior
- State
- Props
- Methods
- Computed properties
- Watchers
- Lifecycle hooks
- Component presentation
- Directives
- Attribute binding with v-bind
- Conditional display with v-show
- Control flow with v-if and v-else
- Rendering lists with v-for
- Event handling with v-on
- Form input binding with v-model
- Parent-child component communication
- ASP.NET Core - what's new?
- Middleware pipeline
- Application startup
- DI is a first-class citizen
- EF Core - what's new?
- Configuring relationships
- Global query filters
- Compiled queries
- In-memory provider for testing
- Summary
- Chapter 2: Setting Up the Development Environment
- Choosing a web browser
- Installing frontend tools and dependencies
- Installing Node and npm
- Installing Vue
- npm or Yarn?
- Installing backend tools and dependencies
- Installing ASP.NET Core
- Installing PostgreSQL
- Choosing and installing an IDE
- Productivity tools
- Installing VS Code extensions
- Installing the Vue.js Chrome devtools extension
- Installing a Terminal Emulator on Windows (optional)
- Summary
- Chapter 3: Getting Started with the Project
- ASP.NET Core SPA templates versus CLI tools
- An introduction to webpack
- What is webpack?
- How does it work?
- Basic webpack configuration
- Bundle splitting
- Production bundles
- Scaffolding a project with the dotnet CLI
- Refactoring the frontend setup.
- Removing TypeScript
- Replacing the default components
- Refactoring the backend setup
- Refactoring to a feature folder structure
- Setting up the database
- Creating a database context
- Registering the database context for DI
- Creating the database
- Creating an initial migration
- Creating and seeding the database on start-up
- Testing the completed setup
- Summary
- Chapter 4: Building Our First Vue.js Components
- Displaying a list of products
- Conditional rendering
- Component composition
- Client-side routing
- Fetching data from an API
- Summary
- Chapter 5: Building a Product Catalog
- Improving the existing UX
- Choosing a UX framework
- What is Bootstrap-Vue?
- Installing additional required dependencies
- Modifying the webpack configuration to support SASS
- Updating the webpack vendor configuration
- Rebuilding the vendor bundle
- Adding application-wide layout elements
- Adding application-wide styles
- Styling the product list and product details components
- Fetching data before navigation
- Adding a page loading indicator
- Adding a transition on page change
- Extending the existing data model
- Dropping the existing database
- Adding new/updating existing entities
- Updating the DbContext class
- Creating a migration to reflect the model changes
- Updating the application's seed data
- Filtering on the server
- Updating controller actions to support filtering
- Testing our filtering logic
- Filtering on the client
- Installing additional dependencies
- Installing Font Awesome
- Installing additional npm packages
- Building an accordion component
- Defining the accordion template structure
- Defining the accordion behavior
- Styling the accordion component
- Building the filters component
- Scaffolding the filters component template
- Adding a brand filter.
- Adding a price filter
- Adding a screen size filter
- Adding the remaining color, OS, and feature filters
- Scaffolding the filters component behavior
- Defining the filters component computed properties
- Defining the filters component methods
- Styling the filters component
- Adding the filters component to the catalog page
- Updating the catalog page template
- Adding the catalog page filter behavior
- Tidying up our existing components
- Testing the completed filtering logic
- Refactoring the filters component
- Highlighting duplication in our existing implementation
- Extracting a common multi-select filter component
- Extracting a common range filter component
- Rendering the new multi-select and range filter components
- Testing that everything still works
- Client-side sorting
- Building a sort component
- Adding the sort component to the catalog page
- Creating a search bar component
- Triggering API requests using watchers
- Debouncing API requests to limit how often they fire
- Summary
- Chapter 6: Building a Shopping Cart
- Evaluating our options
- Persisting to the database
- Persisting to session state
- Persisting to local storage
- Finishing the product details page
- Creating the gallery component
- Adding variants to the product details component
- Introduction to Vuex
- What is Vuex?
- How does Vuex work?
- Mutations
- Actions
- Getters
- Putting it all together
- Installing and configuring Vuex
- Adding products to the cart
- Creating the mutations
- Creating an action
- Creating a shopping cart page
- Creating a CartItem component
- Displaying the list of cart items
- Creating a currency filter
- Removing products from the cart
- Updating cart items
- Adding a getter to display the cart total
- Creating a cart summary component
- Persisting the cart to local storage.
- Improving the UX with add to cart feedback
- Summary
- Chapter 7: User Registration and Authentication
- Adding JWT authentication to the API
- Why JWTs?
- Configuring JWT authentication
- Issuing JWTs
- Adding user role support
- Testing JWT authentication
- User registration
- Authentication and user registration in the client app
- Vuex state properties for authentication
- Vuex mutations for managing authentication state
- Vuex authentication getters
- Vuex login, register, and logout actions
- Authentication modal component
- Login form component
- Register form component
- Auth navigation item component
- Wiring up the new components in App.vue
- Protecting pages with navigation guards
- Setting the authentication state on app startup
- Summary
- Chapter 8: Processing Payments
- Why use Stripe?
- Simple PCI compliance
- Easy integration
- Excellent dashboard
- Getting started with Stripe and client-side validation
- Registering for a Stripe account
- Including the Stripe checkout JavaScript library
- Installing VeeValidate for client-side validation
- Building the checkout components
- Building a cart summary component
- Building a checkout form component
- First look at client-side validation
- Finishing the delivery address form fields
- Capturing payment information
- Initializing Stripe elements
- Validating form input state
- Verifying payment details with Stripe
- Submitting the order to the API
- Adding basic Bootstrap styling to Stripe elements
- Building a checkout success component
- Building a my account page
- Building the OrderList component
- Formatting dates with a reusable date filter
- Linking to the my account page
- Fixing the register form component
- Server-side payment processing
- Adding orders to the data model
- Owned entity types in EF Core 2.0.
- Why use owned entity types?
- Defining an owned type
- Configuring owned types
- Creating the orders migration
- Installing and configuring the Stripe.net NuGet package
- Configuring Stripe
- Processing orders and payments
- Persisting the order object
- Calculating the total order price
- Processing the payment with Stripe
- Adding an order list API endpoint
- Summary
- Chapter 9: Building an Admin Panel
- Extending the authentication endpoint with user roles
- Client-side role-based authorization
- Adding role checks to client-side routes
- Server-side role-based authorization
- Hiding UI elements based on role
- Building the admin panel components
- Configuring nested route definitions
- Refactoring components for reuse
- Product list component
- Creating a product form component
- Creating an add variant modal component
- Vue component inheritance
- Defining a form input base component
- Inheriting from a base component
- Building custom input controls
- Building a custom typeahead control
- Building a multi-select control
- Persisting new products to the database
- Creating a slug generator
- Creating the API endpoint
- Remote validation with Vee-Validate
- Making our app aware of the new custom validation rule
- Creating the validation API endpoint
- Tidying things up
- Linking to the admin panel
- Fixing a logout bug
- Fixing a bug by selecting a product variant
- Summary
- Chapter 10: Deployment
- Registering for an Azure account
- Setting up an Azure environment
- Understanding Azure subscriptions and resources
- Creating a subscription and resource group
- Creating a database
- Creating an app service
- Configuring environment variables
- Preparing the application for deployment
- Configuring multiple database providers
- Tweaking the post-publish build steps
- Configuring Git deployments.
- Finalizing the apps configuration.
