山大网安靶场实验平台项目—个人记录（二）

系列文章专栏地址:

山东大学网络安全靶场实验平台

---

本期内容：

• springboot相关准备
• pom.xml
• yml语法
• 注解
• lombok
• 快捷键
• mybatis
• 搭建后端——实现登录

---

springboot相关准备

首先是下载idea企业版，因为社区版好像缺不少东西，然后看教程创建就行。
然后我记录了几个知识点：

1.pom.xml

一个springboot项目，最主要的coding部分就是src，src里面有main和test文件夹，其中main又是最主要的，test甚至可以不用。
pom.xml与src是同一级目录，pom.xml 里面写好了大量依赖，每次添加新的依赖放进去，然后再点击右边的maven刷新，它就可以自动帮你下载配置。

有的时候，右侧找不到这个maven，你需要在搜索栏搜索add maven然后添加即可。

2.yml

src/main/resources/下面有一个application.properties，这是一个配置文件，主要可以修改地址，端口号，以及连接数据库的信息等等。也可以改成.yml文件或者.yaml文件。那么我跟着教程学的是yml语法，所以改成了application.yml

3.注解
springboot大量的注解为我们的开发提供了方便，对于新手可能不太理解什么是注解：
注解就是一种描述数据的数据，比如这个Override注解，它告诉编译器这里是一个重写的方法。

@Override
public String toString() {
    return "welcome to override";
}

注解是一种应用于类、方法、参数、变量、构造器及包声明中的特殊修饰符。它是一种由JSR-175标准选择用来描述元数据的一种工具

4.lombok

刚说完注解，Lombok是一款Java开发插件，可以通过它定义的注解来精简冗长和繁琐的代码，主要针对简单的Java模型对象（POJO）。

好处就显而易见了，可以节省大量重复工作，特别是当POJO类的属性增减时，需要重复修改的Getter/Setter、构造器方法、equals方法和toString方法等。
导入依赖如下：

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>

方法是打开pom.xml，然后放进去

然后刷新等待idea帮你配置。
lombok使用方法之一：在编写类时，添加注解Data，它会自动为你实现getter setter等方法。

5.idea快捷键：
在编写类的时候，可以添加注解让其生成，也可以使用快捷键快速生成
Fn+alt+insert:自动插入get和set方法
可以自己在File->settings->keymap->Main menu->Code->Generate…里面改

6.mybatis
Mybatis是一个框架，它内部封装了JDBC，加载驱动、创建连接、创建statement等繁杂的过程，开发者开发时只需要关注如何编写SQL语句，可以严格控制sql执行性能，灵活度高。
在pom.xml添加依赖：

        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.5.1</version>
        </dependency>

---

搭建后端

我们现在已经有了前端页面，包括主页面，登录页面，靶场页面等等。
我们需要有后端能为其提供数据库的交互。
先创建一个springboot项目，然后将之前写的前端内容放入vue文件夹，最后将这两个文件夹放到同一目录下，这下就可以前后端一起开发了：

然后我们需要给后端连接数据库：连接mysql

输入User（一般是root），密码和数据库名称,测试连接成功后就可以连上了。

我这里建了一个数据库名：csrp，里面只有一个表user，他的属性有userid,username,password,phone等。初学越简单越好，后面再进行完善。

我们想实现登录功能：
1.前端重新修改了界面，背景颜色设置 background-image: linear-gradient(to bottom right, #000000, #483D8B);
就可以设为渐变色。

两个输入框通过v-model绑定username和password，按钮绑定了click事件login

向后端发送post请求，将user传给后端，后端的controller调用service，service再调用mapper，mapper和数据库进行交互验证，然后把信息传回来。我设定了200代表成功，这时候就登录了，然后跳转到主页面

login() {
      request.post("/user/login", this.user).then(res => {
        if (res.code === '200') {
          router.push("/")
        } else {
          this.$message.error(res.msg)
        }
      })
    }

2.后端定义usercontroller、usermapper和userservice
controller层定义login方法，它设置接口的路径，后端的地址我设置的是localhost:9090,我们还需要设置每个接口的地址，这样加以区分不同接口。在usercontroller中地址是/user，这里再加上/login。所以前端要通过localhost:9090/user/login去访问此接口

我们在前端src/utils可以新建一个requesr.js，去简化接口的写法。可以参考别的博客

3.解决跨域问题
因为前端端口是8080，而后端是9090，所以我们程序在访问的时候会访问不到，因为跨域了，解决方法：设置代理跳转到9090，创建vue.config.js文件，内容如下：

// 跨域配置
module.exports = {
    devServer: {                //记住，别写错了devServer//设置本地默认端口  选填
        port: 8080,
        proxy: {                 //设置代理，必须填
            '/api': {              //设置拦截器  拦截器格式   斜杠+拦截器名字，名字可以自己定
                target: 'http://localhost:9090',     //代理的目标地址
                changeOrigin: true,              //是否设置同源，输入是的
                pathRewrite: {                   //路径重写
                    '^/api': ''                     //选择忽略拦截器里面的内容
                }
            }
        }
    }
}

4.定义一些错误码

    String CODE_200 = "200"; //成功
    String CODE_401 = "401";  // 权限不足
    String CODE_400 = "400";  // 参数错误
    String CODE_500 = "500"; // 系统错误
    String CODE_600 = "600"; // 其他业务异常

这就是404等错误的定义处，后端将码返给前端供我们判断问题。

最后测试一下：
数据库中建立一列数据，前端去登录，按F12去看一下POST请求的内容

可见成功了。

---