SSM单体架构项目 （下）

Vue 组件

组件导入

<template>
    <!--转为小写加短划线格式 3.使用组件-->
    <upload-image></upload-image>
</template>

// 1.导入组件
<script>
import UploadImage from "@/comonents/UploadImage"

export default {
// 2.注册
    components: {
        UploadImage
    }
}
</script>

组件传参

props 组件传参,父组件向子组件传参

// 子组件props 定义 变量，函数（作为特殊的变量）
props：["uploadUrl","getUrl"]
//上传成功后的回调函数 ,调用 props 中的函数
uploadSuccess(res, file) { this.getUrl(file); }

// 父组件
<upload-image uploadUrl="" :get-url="show">></upload-image>
methods: { 
    show(file) { 
        console.log(file.name); 
    } 
}

分页

• 引入分页组件 <el-pagination></el-pagination>
  事件
  • @size-change=“handleSizeChange”
  • @current-change=“handleCurrentChange”
    属性
  • :currentPage 当前页
  • :page-sizes=“[10，20]” // 每页显示条数
  • :page-size=“100” //总页数
• 请求后端

日期控件

<el-data-picker
    v-model="dateTime"  
>
</el-data-picker>

confirm按钮

this.$confirm('是否删除该角色','提示',{
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
})

message

this.$message.error("操作失败! ! !");

树形控件勾选

<el-tree ref="tree" node-key="id">
</el-tree>
 
this.$ref.tree.setCheckedKeys()

修改角色拥有的菜单

// 1.获取所有选中节点
const checkedNodes = this.$ref.tree.getCheckedNodes()

// 2. 定义shuz 保存菜单id
const checkedMenuIds= []

// 3.遍历获取菜单id
if（checkedNodes != null  && checkedNodes.length > 0){
    for(let i=0;i<checkedNodes.length;i++) {
        const checkedNode = checkedNodes[i]
        checkedMenuIds.push(checkedNode.id)

        // 判断当前节点是子节点，该子节点的父节点id没有保存
      if (checkedNode.parentId !== -1 && checkedMenuIds.filter(item => checkedNode.parentId).length === 0 ) {
          checkedMenuIds.push(checkedNode.parentId); 
      }     
    }
}

导航守卫

在执行路由之前先执行的一些钩子函数，比如验证用户是否有权限之类的操作,就需要使用.

Nginx

优点

• 占用内存少
• 支持 50000个并发连接
• 支持热部署

应用场景

• http服务器
• 虚拟主机
• 反向代理

NGINX 配置文件

/nginx.conf/

一个server就是一个虚拟主机

 server {
        # 监听的端口
        listen       80; 
        #监听地址
        server_name  localhost;         

        # 默认请求配置
        location / {
            root   html; # 默认网站根目录
            index  index.html index.htm; # 欢迎页
        }

        # 错误提示页面
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

域名级别

• 一级域名 .com
• 二级域名 baidu.com
• 三级域名 image.baidu.com

反向代理

代理

代理是中介

正向代理

代理的是客户端（浏览器），在客户端配置

反向代理

代理的是服务端，在服务端配置

反向代理配置

/nginx.conf/

upstream lagou1 {
    server 192.168.52.100:8080;
}
 server {
        # 监听的端口
        listen       80; 
        #监听地址
        server_name  www.lagou1.com;

        # 默认请求配置
        location / {
            # proxy 可以将请求代理到 upstream
            proxy_pass http://lagou1;
            index  index.html index.htm; # 欢迎页
        }
}

负载均衡

分担访问量，将请求合理分发给不同的服务器, 避免临时的网络堵塞

负载均衡策略

1. 轮询策略
   每个请求按照时间顺序逐一分配到不同的服务器,

# 配置负载均衡
upstream lagou1 {
    server 192.168.52.100:8080;
    server 192.168.52.100:8081;
}
 server {
        # 监听的端口
        listen       80; 
        #监听地址
        server_name  www.lagou1.com;

        # 默认请求配置
        location / {
            # proxy 可以将请求代理到 upstream
            proxy_pass http://lagou1;
            index  index.html index.htm; # 欢迎页
        }
}

2. weight
   根据服务器的实际情况调整服务器权重。权重越高分配的请求越多，权重越低，请求越少

upstream lagou1 {
    server 192.168.52.100:8080 weight=1；
    server 192.168.52.100:8081 weight=10；
}

项目部署

后端打包

/dao/pom.xml/
profile可以定义一系列的配置信息,profile对应不同的激活条件和配置信息

<profiles>
        <profile>
            <id>dev</id>
            <properties>
                <!-- 测试环境 -->
                <env>development</env>
            </properties>
            <activation>
                <activeByDefault>true</activeByDefault>
            </activation>
        </profile>
        <profile>
            <id>prod</id>
            <properties>
                <!-- 正式环境 -->
                <env>product</env>
            </properties>
        </profile>
    </profiles>

    <build>
        <finalName>web</finalName>
        <!-- 指定数据库配置文件路径 -->
        <filters>
            <filter>src/main/resources/filter/${env}.properties</filter>
        </filters>
        <!-- 指定资源目录路径-->
        <resources>
            <resource>
                <directory>src/main/resources</directory>
                <!-- 资源根目录排除各环境的配置 -->
                <excludes>
                    <exclude>filter/*.properties</exclude>

                </excludes>
                <filtering>true</filtering>
            </resource>
        </resources>
    </build>