文章目录

(一)搭建管理后台的前端
(二)项目结构
(三)vuetify
(四)使用域名访问后台页面
(五)nginx的介绍
(六)nginx的使用

(一)搭建管理后台的前端

把资料包中提供的leyou-manage-web拷贝到工作空间，如下：

用IDEA打开，如下：

选择Run npm install，或者自己在控制台输入npm install命令，如下：

在package.json文件中有scripts启动脚本配置，如下：

可以输入命令：npm run dev或者npm start，运行效果如下：

(二)项目结构

.vue文件由两部分组成：<template>（存放html代码）和<script>（存放js代码）
有时候还会使用<style定义一些样式

可以看到整个Vue项目只有index.html一个页面，其它的都是组件，如下：

main.js把App.vue（组件）通过router与index.html（单页面）绑定在一起，如下：

App.vue（组件）中只有一个锚点（<router-view></router-view>）
在index.js（在main.js中CTRL+单击new Vue里面的router可跳转）定义了路由，如下：

配置path:"/"就是根路由，对应的组件是Layout.vue，如下：

左侧导航条和顶部工具条基本数不会发送变化，我们可以写死它
经常发送改变的只是中间内容主体，我们可以放置一个锚点，让Layout的子组件在这里显示

其中的route()方法是被封装起来的，如下：

所以说main.js是纽带文件，它把路由、页面和组件三者关联起来

补充：我们刚打开页面显示的路径并不是http://localhost:9001/，而是http://localhost:9001/#/index/dashboard，是因为做了重定向，如下：

(三)vuetify

Vue虽然会帮我们进行视图的渲染，但样式还是由我们自己来完成。这显然不是我们的强项，因此后端开发人员一般都喜欢使用一些现成的UI组件，拿来即用，常见的例如：

BootStrap
LayUI
EasyUI
ZUI

然而这些UI组件的基因天生与Vue不合，因为他们更多的是利用DOM操作，借助于jQuery实现，而不是MVVM的思想。

而目前与Vue吻合的UI框架也非常的多，国内比较知名的如：

element-ui：饿了么出品
i-view：某公司出品

然而我们都不用，我们今天推荐的是一款国外的框架：Vuetify

(四)使用域名访问后台页面

我们不可能去购买一个域名，但是我们可以伪造本地的hosts文件，实现对域名的解析
修改本地的host为：

127.0.0.1 api.leyou.com
127.0.0.1 manage.leyou.com

这样就实现了域名的关系映射了，但是每次在C盘寻找hosts文件并修改是非常麻烦的
给大家推荐一个快捷修改host的工具，在课前资料中可以找到：

运行过程中出错可以看：SwitchHosts以管理员身份运行出错的解决方案
点击左下角的➕，可以添加一条hosts映射，如下：

配置内容如下：

# leyou
127.0.0.1 api.leyou.com #我们的网关Zuul
127.0.0.1 manage.leyou.com #我们的后台系统地址

其中的backup是我们原本配置好的，我们保留，如下：

修改webpack.dev.conf.js，如下：

重启vue项目后，访问http://manage.leyou.com:9001/，效果如下：

(五)nginx的介绍

域名问题解决了，但是现在要访问后台页面，还得自己加上端口：http://manage.leyou.com:9001/
这就不够优雅了，我们希望的是直接域名访问：http://manage.leyou.com
这种情况下端口默认是80，如何才能把请求转移到9001端口呢？
如果直接把http://manage.leyou.com映射到80端口，那其它域名就不能映射到80端口了
这里就要用到反向代理工具：Nginx
我们可以把80端口映射给Nginx，让Nginx统一管理

nginx

nginx可以作为web服务器，但更多的时候，我们把它作为网关，因为它具备网关必备的功能：

反向代理
负载均衡
动态路由
请求过滤

服务器分类

Web服务器分2类：

web应用服务器，如：
- tomcat
- resin
- jetty
web服务器，如：
- Apache 服务器
- Nginx
- IIS

区分：web服务器不能解析jsp等页面，只能处理js、css、html等静态资源
并发：web服务器的并发能力远高于web应用服务器

反向代理

什么是反向代理？

代理：通过客户机的配置，实现让一台服务器代理客户机，客户的所有请求都交给代理服务器处理
反向代理：用一台服务器，代理真实服务器，用户访问时，不再是访问真实服务器，而是代理服务器

nginx可以当做反向代理服务器来使用：

我们需要提前在nginx中配置好反向代理的规则，不同的请求，交给不同的真实服务器处理
当请求到达nginx，nginx会根据已经定义的规则进行请求的转发，从而实现路由功能

利用反向代理，就可以解决我们前面所说的端口问题，如图：

(六)nginx的使用

我们在本地安装一台nginx：

解压后，目录结构：

conf：配置目录
contrib：第三方依赖
html：默认的静态资源目录，类似于tomcat的webapps
logs：日志目录
nginx.exe：启动程序（可双击运行，但不建议这么做，建议在CMD或者PS中运行）

打开config目录的nginx.conf文件进行配置，如下：
其中的worker_processes是工作进程数量，通常不要超过CPU核数
我们配置一个，现在是1个工作进程 + 1个主进程，一共有两个进程

其中的worker_connnections为1个进程中的线程数，即连接池中的连接数量，如下：

server配置如下：

nginx中的每个server就是一个反向代理配置，可以有多个server

完整配置如下：

#user  nobody;
worker_processes  1;#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;#pid        logs/nginx.pid;events {worker_connections  1024;
}http {include       mime.types;default_type  application/octet-stream;#log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '#                  '$status $body_bytes_sent "$http_referer" '#                  '"$http_user_agent" "$http_x_forwarded_for"';#access_log  logs/access.log  main;sendfile        on;#tcp_nopush     on;#keepalive_timeout  0;keepalive_timeout  65;#gzip  on;server {listen       80;server_name  manage.leyou.com;proxy_set_header X-Forwarded-Host $host;proxy_set_header X-Forwarded-Server $host;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;location / {proxy_pass http://127.0.0.1:9001;proxy_connect_timeout 600;proxy_read_timeout 600;}}server {listen       80;server_name  api.leyou.com;proxy_set_header X-Forwarded-Host $host;proxy_set_header X-Forwarded-Server $host;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;location / {proxy_pass http://127.0.0.1:10010;proxy_connect_timeout 600;proxy_read_timeout 600;}}# another virtual host using mix of IP-, name-, and port-based configuration##server {#    listen       8000;#    listen       somename:8080;#    server_name  somename  alias  another.alias;#    location / {#        root   html;#        index  index.html index.htm;#    }#}# HTTPS server##server {#    listen       443 ssl;#    server_name  localhost;#    ssl_certificate      cert.pem;#    ssl_certificate_key  cert.key;#    ssl_session_cache    shared:SSL:1m;#    ssl_session_timeout  5m;#    ssl_ciphers  HIGH:!aNULL:!MD5;#    ssl_prefer_server_ciphers  on;#    location / {#        root   html;#        index  index.html index.htm;#    }#}}

配置完成后重新加载即可

启动：start nginx
停止：nginx -s stop
重新加载：nginx -s reload

效果如下：

nginx的执行流程如下：

浏览器准备发起请求，访问http://mamage.leyou.com，但需要进行域名解析
优先进行本地域名解析，因为我们修改了hosts，所以解析成功，得到地址：127.0.0.1
请求被发往解析得到的ip，并且默认使用80端口：http://127.0.0.1:80
本机的nginx一直监听80端口，因此捕获这个请求
nginx中配置了反向代理规则，将manage.leyou.com（虽然域名被解析成127.0.0.1，但是请求时还是会带上解析前的域名，见下图中的Origin）代理到127.0.0.1:9001，因此请求被转发
后台系统的webpack server监听的端口是9001，得到请求并处理，完成后将响应返回到nginx
nginx将得到的结果返回到浏览器

乐优商城之后台管理系统的环境搭建(七)相关推荐

乐优商城之后台管理系统
文章目录商品分类管理实现功能实体类 controller service mapper 跨域问题(cors) 品牌查询 controller PageResult Service 异步查询工具a ...
【javaWeb微服务架构项目——乐优商城day03】——（搭建后台管理前端，Vuetify框架，使用域名访问本地项目，实现商品分类查询，cors解决跨域，品牌的查询）
乐优商城day03 0.学习目标 1.搭建后台管理前端 1.1.导入已有资源 1.2.安装依赖 1.3.运行一下看看 1.4.目录结构 1.5.调用关系 2.Vuetify框架 2.1.为什么要学习U ...
乐优商城（填坑）——后台登录
后台管理模块增加登录验证,与门户网站一样都是采用无状态登录. 一.新增全局函数在main.js中新增用户验证: 二.修改路由先显示登录页面效果: 三.解决cookie写入问题在http.js中 ...
乐优商城之项目搭建(四)
文章目录 (一)项目分类 (二)电商行业 (三)专业术语 (四)项目介绍 (五)技术选型 (六)开发环境 (七)搭建后台环境:父工程 (八)搭建后台环境:eureka (九)搭建后台环境:zuul ( ...
乐优商城（10）--数据同步
乐优商城(10)–数据同步一.RabbitMQ 1.1.问题分析目前已经完成了商品详情和搜索系统的开发.思考一下,是否存在问题? 商品的原始数据保存在数据库中,增删改查都在数据库中完成. 搜索服务 ...
乐优商城之分类查询品牌查询(八)
文章目录 (一)编写分类查询 (二)跨域问题 (三)cors跨域原理 (四)解决跨域问题 (五)品牌查询页面分析 (六)品牌查询后台代码 (七)分页查询排序的原理 (八)axios (一)编写分类查询 ...
乐优商城源码/数据库及笔记总结
文章目录 1 源码 2 笔记 2.1 项目概述 2.2 微服务 3 项目优化 4 项目或学习过程中涉及到的设计模式 5 安全问题 6 高内聚低耦合的体现 7 项目中待优化的地方 1 源码 Github ...
leyou商城项目搭建（1）-电商行业及乐优商城介绍
leyou商城项目搭建(1)-电商行业介绍 1.了解电商行业 1.1.项目分类 1.1.1.传统项目 1.1.2.互联网项目 1.2.电商行业的发展 1.2.1.钱景 1.2.2.数据 1.2.3.技 ...
乐优商城 Day 09（thymeleaf,Rabbitmq,商品详情页，非教程）
乐优商城学习Day09: 注意:此次代码都是在第八天的基础上第八天的链接如下: https://blog.csdn.net/zcylxzyh/article/details/100859210 此次 ...

乐优商城之后台管理系统的环境搭建(七)