vue-travel travel travel website github

Write_hand: Project Introduction

This project is a web application that realizes online booking of tourism vacation products, leisure tourism booking platform, providing domestic, foreign, peripheral tourism and tourism strategy functions.

Project demonstration Demo address

Project function:

1: User Module
    User registration (including ajax checking mailbox format and duplication)
    User Activation (Mail Activation)
    User login
    User exit
 2: Tourist attractions module
    List of attractions (with paging)
    Details of attractions
 3: Order Module
    Confirm the order (fill in the date of departure, number of persons, place of departure, etc.)
    Generate orders (save order information to database)
    Order Details Show
    Order Payment (Ebao Payment)
    
Extended functions:
    1: User 7 days login-free function (automatic login function)
    2: My order list display (with pagination)
    

Project Initialization

1. In any file, open git bash, or cmd to open the command line window, and enter the command vue create vue-travel
2. Next, select the option, switch the up and down arrows, and select the option in the blank space. See the final result:

Vue CLI v3.9.3
┌────────────────────────────┐
│  Update available: 3.11.0  │
└────────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter        
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
? Save this as a preset for future projects? No

I chose Babel, Router, Vuex, CSS Pre-processors (Stylus) and Linter to install the corresponding plug-ins according to my own needs.

Ultimately, if a project is successfully initialized using vue-cli 3.x, the following will appear:

Vue CLI v3.9.3
✨  Creating project in F:\Front-end\vue-project\vue-travel.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...



added 77 packages from 80 contributors, updated 2 packages and moved 9 packages in 29.384s
⚓  Running completion hooks...

�📄  Generating README.md...

�🎉  Successfully created project vue-travel.
�👉  Get started with the following commands:

 $ cd vue-travel
 $ npm run serve

• Next, in the command-line window, execute the CD vue-traveling switch to the new vue-traveling root directory, and open a simple development server by executing NPM run server, so that we can quickly see the results of our development when we are developing the project.

 DONE  Compiled successfully in 42812ms                                                                                                                                                          16:22:10

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.155.4:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build. 

alt + left mouse button select Local: http://localhost:8080/ Quickly open the browser, and access the home page of the project.

Our project results:

1. View the final generated project folder directory as follows

vue-travel -- Project Catalogue
 - node_modules -- module directory for NPM installation
 - public -- Static Picture Resource File
 - src -- Source directory
    - assets -- Static resource catalog referenced by one's own project
    - components -- Component Catalogue
    - views -- Project Page Directory
    - App.vue -- Project Root Component
    main.js -- project entry file
      - router.js -- Project Routing Profile
    - store. JS - Vuex configuration file

Project development

Add login and register pages to the project, along with related routing.

1. Open the router.js file and modify the routing configuration. We removed the About option, added login and register options, and added login and registration pages for the project. The specific configuration is as follows:

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
++  {
      path: '/login',
      name: 'login',
      component: () => import(/* webpackChunkName: "about" */ './views/Login.vue')
    },
++  {
      path: '/register',
      name: 'register',
      component: () => import(/* webpackChunkName: "about" */ './views/Register.vue')
    }
  ]
})

1. Open the views file, delete About.vue file, add new Login.vue and Register.vue file

/**Login**/
<template>
  <div class="login">
    <h1>This is an login page</h1>
  </div>
</template>

/**Register**/
<template>
  <div class="register">
    <h1>This is an register page</h1>
  </div>
</template>

Open the browser:

Enter http://localhost:8080/login and http://localhost:8080/register to access the corresponding page.

Common Header and Footer components for development projects

1. Create new Header.vue and Footer.vue files under the components folder. The specific code is as follows:

/**Header Component **/
<template>
  <div class="header">
    <h3>this is header component</h3>
  </div>
</template>

/**Footer Component **/
<template>
  <div class="footer">
    <h3>this is footer component</h3>
  </div>
</template>

1. Refer to this component in the project.

• The first way is to register the head and tail components with the component that uses the Header/Footer component by import ing the component locally.

For example, in the folder views/Home.vue, I use two components, Header and Footer, as follows:

/**Home.vue**/
<template>
  <div class="home">
     /**Using the Header component we wrote**/ 
    <Header/>
    <div>
      content
    </div>
     /**Using the Footer component we wrote**/ 
    <Footer/>
  </div>
</template>

<script>
// @ is an alias to /src
//Introduce the Header/Footer component we wrote through import
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'

export default {
  name: 'home',
  components: {
    // Register our introduced components
    Header,
    Footer
  }
}
</script>

• Another way is to register components globally, instead of having to import and register components for every component that uses Header and Footer. The concrete realization way is as follows:

  • First, create a new index.js under the components folder to export public components

  /**/components/index.js**/
  
  import Header from './Header.vue'
  import Footer from './Footer.vue'
  
  
  function commonComponents (Vue) {
  
    // Check that these components have been installed globally
    if (commonComponents.install) return 
  
    Vue.component('Header', Header)
    Vue.component('Footer', Footer)
  }
  
  export default commonComponents

  • Register these exported common components in the main.js file under the src folder.

  import Vue from 'vue'
  import App from './App.vue'
  import router from './router'
  import store from './store'
  
  + import commonComponents from './components/index.js'
  
  Vue.config.productionTip = false
  
    // Global Hanging in Components
  + Vue.use(commonComponents)
  
  new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount('#app')
  

  • Use the exported common components directly in other components. Here I use Header and Footer components in App.vue

  /**App.vue**/
  
  <template>
    <div id="app">
      <div id="nav">
        <router-link to="/">Home</router-link> |
        <router-link to="/login">login</router-link> |
        <router-link to="/register">register</router-link> |
      </div>
      <router-view/>
      <div>
   +    <Header></Header>
   +    <Footer></Footer>
      </div>
    </div>
  </template>

Project download and operation

> open git bash Execute a command

git clone https://github.com/ZhengMaster2020/vue-travel

npm install

npm run serve

Update...