Homework answers / question archive / Overview In this project, you will implement the same two pages you implemented in the previous project (home page and category page)

Overview In this project, you will implement the same two pages you implemented in the previous project (home page and category page)

Computer Science

Share With

---

Overview

In this project, you will implement the same two pages you implemented in the previous project (home page and category page). But this time you will be using the Vue framework. Vue is a JavaScript framework that makes use of multiple components to implement a Single-Page Application (SPA). A single-page application just has one HTML page (index.html). It uses JavaScript to modify that page so that it can look like any traditional web page in your application. Therefore, you will not technically be implementing two different pages. Instead you will be implementing two views -- a home-page view and a category-page view. The results will be almost exactly the same, but there will be some subtle differences. For example, instead of this in the address bar:

 

http://localhost:8080/DrKBookstoreHtml/category?name=mystery

 

We would see something like this:

 

http://localhost:8080/DrKBookstoreVue/category/mystery

 

But the web page would look the same.

Setting up the Project        Submit Assignment

Use the Client-Server slides       (https://drive.google.com/file/d/1-qJkFZnUoThWPdhZYSdkuG7EpySK79K/view?usp=sharing) to setup your Project 3.

Regarding the Vue setup, please choose the following (the same information is in the slides):

Unselect Babel package (it is selected by default)

Select the Vue router package (it is not selected by default)

Select ESLint package

Choose Vue 2.x (we are *not* going to use Vue 3 in this course)

Choose ESLint + Prettier

Choose to Lint on save

Place config in a dedicated config file

Once you've done all this, Vue-CLI will run as usual and create your project structure. After it does, make sure it runs (using npm run serve). Stop the server (press Control-C in the terminal), and then replace the entire "src" folder (directly under "client") with the "src" folder that I give you in the resources.

Finally, inside the "client" folder, create a JS file named "vue.config.js", and put the following inside:

 

module

.

exports

=

{

publicPath

:

"/[Name]BookstoreVue/"

}

;

 

This will ensure that [Name]BookstoreVue is included in your URL paths.

 

Take some time to explore the code.

 

Implement your Page Views using Vue

Now implement your page views. Your home and category pages in this project should look exactly like the home and category pages in the previous project (where you implemented them using HTML and CSS). They should behave the same also.

Submit your Project

To submit your project, you will have to package it for distribution and upload it to the server.

Note: Make sure you have a vue.config.js file in your client folder. It's contents should be

 

module.exports = {

publicPath: "/[Name]BookstoreVue/",

}

;

 

1. Clean up: Delete your "dist" folder from your client module. Delete everything except the WEB-INF directory from your "webapp" folder in your server module.
2. Run "npm run build" to create a dist folder in your client module
3. Move all files from the dist folder to the "webapp" folder in your server module
4. Use a Tomcat run configuration to see if everything works

 This is an important step. You should see your Vue project running in the Tomcat server now. It is running on your local machine on port 8080.

5. Under the build/libs directory in your server module, you should see a server.war file
6. Move the server.war file to your desktop and rename it [Name]BookstoreVue.war

I go through this process in the latest Q&A.