系统搭建练习-详述

这个项目是为了应对期末考核而作。记录一下遇到的问题，这个项目并不完善，有诸多Bug。
例如：目前还未解决的二级域名session失效的问题 等

1、前端

开发工具VsCode
前端使用Vue框架 + Element-UI组件库 搭建
使用axios实现前后端通信

//axios示例
const _this=this;
axios.get(_this.$global_msg.host+'/userInfo/detectUser').then(function(res){
          _this.loginMsg=res.data
          if(_this.loginMsg=="请先登录"){
            _this.$confirm('登录后才能使用, 是否登录?', '提示', {
              confirmButtonText: '登录',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              _this.$router.push('/register')
            }).catch(() => { });
          }else{
            // 权限认证
            axios.get(_this.$global_msg.host+'/userInfo/getCurrentUserPermissions').then(function(res){
              if(res.data==2){
                axios.delete(_this.$global_msg.host+'/user/deleteUser/'+row.id).then(function(res){
                _this.$alert('用户：'+row.username+'  删除成功！','消息',{
                          confirmButtonText:'确定',
                          callback:action=>{
                            window.location.reload();
                          }
                });
                })
              }else{
                _this.$notify.error({
                    title: '权限不足'
                  });
              }
            })
          }
        })
图片展示页面
文件列表

问题：
文件传输速度慢
图片存储格式为Base64，可能因为每次都要解析，图片加载也很慢

//图片Base64示例
created(){
      this.url='data:image/png;base64,'+this.img_source
    },
    updated(){
        this.url='data:image/png;base64,'+this.img_source
    },

2、后端

开发工具IntelliJ IDEA
接口测试工具Postman
使用SpringBoot框架 + Maven 搭建

application.yml配置文件

  data:
    mongodb:
      uri: mongodb://username:password@x.x.x.x:27017/DatabaseName?authSource=username
  servlet:  #做限制的参数配置
    multipart:
      enabled: true #默认支持文件上传
      max-file-size: 1024MB # 最大支持文件大小
      max-request-size: 1500MB # 最大支持请求大小
server:
  port: 8080

后端解决跨域问题

/**
 * @Author Xin
 * @Date 2022/5/1 22:21
 * @Description
 */
@Configuration
public class CrosConfig implements WebMvcConfigurer {
    @Override
    public void  addCorsMappings(CorsRegistry registry){
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedMethods("GET","HEAD","POST","PUT","DELETE","POTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

项目结构


目录结构

3、数据库

使用MongoDB
可视化工具MongoDB Compass

MongoDB 默认直接连接，无须身份验证，如果当前机器可以公网访问，且不注意Mongodb 端口（默认 27017）的开放状态，那么Mongodb就会产生安全风险，被利用此配置漏洞，入侵数据库。


被删库

哈哈哈哈，还会被敲诈

所以需要 MongoDB 用户名密码登录

1、起一个终端，运行下列命令

mongo
use admin
db.createUser(
  {
    user: "adminUser",
    pwd: "adminPass",
    roles: [ { role: "userAdminAnyDatabase", db: "admin" } ]
  }
)

管理员创建成功，现在拥有了用户管理员
用户名：adminUser
密码：adminPass

2、Mongodb 用户验证登陆

新建终端

mongo
use admin
db.auth("adminUser", "adminPass")

一定要先切到 admin 库 在使用db.auth命令

3、创建普通用户

db.createUser(
  {
    user: "simpleUser",
    pwd: "simplePass",
    roles: [ { role: "readWrite", db: "test1" },
             { role: "read", db: "test2" } ]
  }
)

现在有了一个普通用户
用户名：simpleUser
密码：simplePass
权限：读写数据库 test1， 只读数据库 test2。

常用权限
Read：允许用户读取指定数据库
readWrite：允许用户读写指定数据库
dbAdmin：允许用户在指定数据库中执行管理函数，如索引创建、删除，查看统计或访问system.profile
userAdmin：允许用户向system.users集合写入，可以找指定数据库里创建、删除和管理用户
clusterAdmin：只在admin数据库中可用，赋予用户所有分片和复制集相关函数的管理权限。
readAnyDatabase：只在admin数据库中可用，赋予用户所有数据库的读权限
readWriteAnyDatabase：只在admin数据库中可用，赋予用户所有数据库的读写权限
userAdminAnyDatabase：只在admin数据库中可用，赋予用户所有数据库的userAdmin权限
dbAdminAnyDatabase：只在admin数据库中可用，赋予用户所有数据库的dbAdmin权限。
root：只在admin数据库中可用。超级账号，超级权限

4、服务器

服务器使用云服务器
镜像：CentOS7.6-Docker20.10.5
远程连接工具：Xshell 7、Xftp 7

5、Docker 部署项目

1、搭建Mongo数据库

docker pull mongo

docker images  #查看镜像

#创建容器
docker run --name mongo -d -p 27017:27017  -v mongo_db:/data/db  mongo --auth

docker ps -a #产看容器

--name 名字
-d 后台运行
-p 27017:27017 端口映射 映射端口:原端口
-v 为设置容器的挂载目录，这里是将本机的/data/mongo目录挂载到容器中的mongo_db中，作为 mongodb 的存储目录
--auth 使用用户名密码登录

2、搭建Springboot项目

目录结构

2.1打包项目为jar包

ImageServer-0.0.1-SNAPSHOT.jar

2.2编写Dockerfile

FROM jdk:8
# 作者
MAINTAINER xin
# VOLUME 指定了临时文件目录为/tmp。
# 其效果是在主机 /var/lib/docker 目录下创建了一个临时文件，并链接到容器的/tmp
VOLUME /tmp 
# 将jar包添加到容器中并更名为app.jar
ADD ImageServer-0.0.1-SNAPSHOT.jar app.jar 
# 运行jar包
RUN bash -c 'touch /app.jar'
ENTRYPOINT ["java","-Djava.security.egd=file:/dev/./urandom","-jar","/app.jar"]

2.3把文件传到服务器同一目录下

2.4生成镜像

docker build -t 为镜像命名 .

最后面的.为Dockerfile文件所在地

2.5启动容器

docker run -d --name 为容器命名 -p 8080:8080 镜像名

3、搭建Vue项目

目录结构

3.1将 vue 项目打包，将打包后的 dist 文件上传到服务器

3.2编写Dockerfile

FROM nginx
MAINTAINER xin
COPY . /usr/share/nginx/html/
COPY Nginx/default.conf /etc/nginx/conf.d/default.conf

3.3编写 nginx 的配置文件 default.conf

server {
listen       80;
server_name  localhost;
#charset koi8-r;
access_log  /var/log/nginx/host.access.log  main;
error_log  /var/log/nginx/error.log  error;
location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
}
#error_page  404              /404.html;
# redirect server error pages to the static page /50x.html
#
error_page   500 502 503 504  /50x.html;
location = /50x.html {
    root   /usr/share/nginx/html;
}
}

6、域名

懒得写了，，有空再补上

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容