乐优项目（二）——Vue+nginx

最新推荐文章于 2021-10-21 14:47:09 发布

HexString

最新推荐文章于 2021-10-21 14:47:09 发布

阅读量243

点赞数

分类专栏： Java基础

本文链接：https://blog.csdn.net/HexString/article/details/104659694

版权

Java基础专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.搭建后台管理前端

open前端项目
在终端输入：npm install 安装依赖
输入：npm run dev 运行项目

2.项目结构
在这里插入图片描述
调用关系：index.html:html模板文件，定义了空的div，其id为‘app

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>leyou-manage-web</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
’

main.js: 实例化模板，这个是index.html中绑定的数据

import Vue from 'vue'
import App from './App'
import router from './router/index'
import Vuetify from 'vuetify'
import config from './config'
import MyComponent from './components/MyComponent'
import './http';
import 'vuetify/dist/vuetify.min.css'
import qs from 'qs'
import 'element-ui/lib/theme-chalk/index.css';
import './assets/material.css'

Vue.use(Vuetify, { theme: config.theme})
Vue.use(MyComponent)
Vue.prototype.$qs = qs;
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

这个main.js指向App.vue
App.vue中没有内容，而定义了vue-router的锚点

<template>
    <router-view></router-view>
</template>

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

点击左侧的菜单栏项目，右边的内容就会根据左侧的选项进行改变，这是怎么做到的呢？就像下面的这个一样
在这里插入图片描述

<template>
  <v-app :dark="dark">
    <!--中间内容-->
    <v-content>
          <v-breadcrumbs>
            <v-icon slot="divider">chevron_right</v-icon>
            <v-breadcrumbs-item>{{item1}}</v-breadcrumbs-item>
            <v-breadcrumbs-item>{{item2}}</v-breadcrumbs-item>
          </v-breadcrumbs>
          <div>
            <!--锚点-->
            <router-view> </router-view>
          </div>
    </v-content>
  </v-app>
</template>

在这里插入图片描述
Layout中定义了一个锚点，在路由中，children中的子组件会自动渲染到父组件中
我们安装好nginx，和解决域名问题，它的访问流程如下
1.浏览器准备发起请求，访问http://manage.leyou.com，但是需要进行域名解析
2.优先进行本地域名解析，因为我们修改了hosts,所以解析成功，得到地址：127.0.0.1，
3.请求被发往解析得到的ip，并且默认使用80端口：http://127.0.0.1:80,本机一直监听这80端口，因此捕获这个请求
4.nginx中配置了反向代理规则，将manage.leyou.com代理到127.0.0.1，因此请求被转发，
5.后台系统的webpack server监听的端口是9001，得到并且处理，完成后将相应返回到nginx
6.nginx将得到的结果返回到浏览器
在这里插入图片描述