网站首页 > 技术文章正文

Vue + SpringBoot 项目实战(三):我的助手之项目运行流程与依赖

nanyue 2025-01-11 15:54:01 技术文章 2 ℃

前端项目

在前面的文章中，我进行了以下补充，在 public 下进行了展开。下面就说下前端项目中的 index.html、App.vue、router、Main.js等内容。

index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

它是一个普普通通的 html 文件，让它不平凡的是 <div id="app"></div> ，下面有一行注释，构建的文件将会被自动注入，也就是说我们编写的其它的内容都将在这个 div 中展示。

整个项目只有这一个 html 文件，所以这是一个单页面应用，当我们打开这个应用，表面上可以有很多页面，实际上它们都只不过在一个 div 中。下面是我去查的一些知识。

当使用 npm run serve 或者 yarn serve 启动开发服务器时，Vue CLI 会执行一系列构建和启动步骤，在这个过程中，Vue CLI会使用 Webpack 作为模块打包器，并配置 HtmlWebpackPlugin 插件来生成最终的 index.html 文件。而 HtmlWebpackPlugin 插件会读取到 public 目录下的 index.html 文件作为模版，然后将其中的占位符（如<%= BASE_URL %> 和 <%= htmlWebpackPlugin.options.title %>）替换为实际的值，同时，HtmlWebpackPlugin 还会自动的将构建的 JavaScript、CSS等文件注入到 index.html 文件的合适位置。

在构建过程中，Vue CLI还会生成一个Vue应用程序的实例，这个实例通常在 src/main.js 或 src/main.ts 文件中进行创建的，下面的是第一种。

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

这段代码表明，整个应用被渲染并挂载到了 ID为app的DOM元素上，形成了一个单页面应用。

单页面应用

相关链接：https://cn.vuejs.org/guide/extras/ways-of-using-vue.html#single-page-application-spa

其中，去专门查询了一下什么是单页面应用。单页面应用（Single Page Application，简称SPA）是一种特殊类型的网页应用，它加载时会获取必要的HTML、CSS和JavaScript，并在用户的浏览器上动态更新内容，而不是 通过传统的页面重新加载 来显示新内容。这意味着用户可以在不离开当前页面的情况下，与应用进行交互并获取新的数据或视图。这个地方有个印象即可。

App.vue

上面图上我把这个文件称为“根组件”，因为其它的组件又都包含在这个组件中。.vue 文件是一种自定义文件类型，在结构上类似 html，一个 .vue 文件即是一个 vue 组件。先看它的初始代码

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

这里有一句 <div id="app"> 但跟 index.html 里的那个是没有关系的。这个 id="app" 只是跟下面的<style> </style> 中的代码。这个文件最关键的一点其实是第四行，也就是 <router-view/> 。这个它是表示是一个容器，名字叫“路由容器”。意思是当前路由（ URL）指向的内容将显示在这个容器中。也就是说，其它的组件即使拥有自己的路由（URL，需要在 router 文件夹的 index.js 文件里定义），也只不过表面上是一个单独的页面，实际上只是在根组件 App.vue 中。

下面就说一下这个“路由容器”，它负责根据当前的路由匹配情况来渲染对应的组件。首先是在 src/router 文件夹中的index.js 文件进行定义。

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
// 导入刚才编写的组件
import AppIndex from '@/components/home/AppIndex'
import Login from '@/components/Login'

Vue.use(Router)

export default new Router({
  routes: [
  // 下面都是固定的写法
    {
      path: '/loginIn',
      name: 'LoginIn',
      component: LoginIn
    },
    {
      path: '/index',
      name: 'Home',
      component: HomePage
    }
  ]
})

src\main.js

import Vue from 'vue'
import App from './App'
import router from './router'
// 设置反向代理，前端请求默认发送到 http://localhost:8443/api
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8843/api'
// 全局注册，之后可在其他组件中通过 this.$axios 发送数据
Vue.prototype.$axios = axios
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

执行流程

首先，先按照我们“设想”的逻辑进行模拟，在前面的文章中，我们在 LoginIn.vue 组件中，定义了一个登录方法。代码如下：

login () {
  this.$axios.post('/login', {
    username: this.loginForm.username,
    password: this.loginForm.password
  }).then(successResponse => {
    if (successResponse.data.code === 200) {
      this.$router.replace({path: '/index'})
    }
  }).catch(failResponse => {
  })
}

其中， then 后面的代码表示，当登录成功之后，会执行 then 后面的代码。其中，this.$router.replace({path: '/index'})。表示将当前页面的路由（URL）替换为新的路由（URL），而不会在浏览器的历史记录中留下当前页面的记录。

而 App.vue 作为 “路由容器”。根据上面讲述的内容，当前路由（ URL）指向的内容将显示在这个容器中。也就是说，其它的组件即使拥有自己的路由（URL，需要在 router 文件夹的 index.js 文件里定义），也只不过表面上是一个单独的页面，实际上只是在根组件 App.vue 中。

而我们在 router/index.js 中定义了相关页面的路径。也就是说，它会来到 /index 路径下的页面。暂时就整理这么多了。先有一个印象。

补充内容

后端项目的POM.xml文件如下：

 <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.11</version>
        <relativePath/>
    </parent>
    <groupId>com.eh</groupId>
    <artifactId>lbh</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>easy_life</name>
    <description>easy_life</description>

 <dependencies>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-autoconfigure</artifactId>
            <version>2.7.11</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.5.13</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.26</version>
        </dependency>

        <!--MyBatis-Plus-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.3.2</version>
        </dependency>

        <!--数据库驱动-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.37</version>
        </dependency>

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.1.22</version>
        </dependency>
    </dependencies>

<build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>2.7.11</version>
            </plugin>
        </plugins>
    </build>

前端项目依赖

打开前端中的 package.json 文件，能够看到相关的依赖。

  "dependencies": {
    "axios": "^1.7.2",
    "core-js": "^3.8.3",
    "element-ui": "^2.15.14",
    "particles.js": "^2.0.0",
    "vue": "^2.6.14",
    "vue-particles": "^1.0.9",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "vue-template-compiler": "^2.6.14"
  },

使用命令行 npm -v 和 node -v 进行查看相关的依赖。

以上就是进行的依赖补充。

上一篇： Vue Router用法详解，使用Vue Router做单页面应用
下一篇：构建React基础及理解与Vue的区别

网站首页 > 技术文章 正文