Sherry期末总结

Spring Boot、Vue、ElementUI、UniApp学期总结

前言

本学期，我主要学习了 Spring Boot、Vue、ElementUI、UniApp四个技术栈。其中，Spring Boot是后端框架，Vue和ElementUI是前端框架，UniApp则是一款跨平台的开发框架。在此，我将对我学习这些技术栈的经历进行总结，分享我所学到的知识和技能。
愿许秋风离别意，散我心中意难平

Sprinig Boot

简介

Spring Boot是基于Spring框架的快速开发框架。它简化了基于Spring的应用程序的搭建和部署，使开发者可以更专注于业务逻辑的开发而不必花费太多时间在配置环境上。Spring Boot遵循约定优于配置的原则，提供了许多默认配置和开箱即用的工具，极大地方便了开发人员。

经验

在学习Spring Boot过程中，我遇到了以下几个问题：

1. 如何配置多数据源？
2. 如何集成MyBatis-Plus？
3. 如何使用Spring Security进行权限控制？

对于第一个问题，我在配置文件中分别配置了两个数据源，并通过@Qualifier注解进行区分。对于第二个问题，我添加了MyBatis-Plus的依赖，并在启动类上添加了@MapperScan注解。最后，对于第三个问题，我添加了Spring Security的依赖，并编写了相应的配置类和UserDetailsService接口。

以下是我在Spring Boot中实现的一个简单的登录功能：

@RestController
public class LoginController {
    @Autowired
    private UserDetailsService userDetailsService;

    @PostMapping("/login")
    public String login(String username, String password) {
        UserDetails userDetails = userDetailsService.loadUserByUsername(username);
        if (userDetails == null || !userDetails.getPassword().equals(password)) {
            return "用户名或密码错误";
        }
        return "登录成功";
    }
}

Vue

简介

Vue是一款流行的JavaScript框架，它可以用于构建单页面应用程序和组件化应用程序。Vue提供了轻量级的响应式数据绑定、组件系统、路由器和状态管理库等功能，使得开发者可以更方便地开发交互式Web应用程序。

经验

在学习Vue过程中，我遇到了以下几个问题：

1. 如何与后端接口进行交互？
2. 如何使用Vuex进行状态管理？
3. 如何实现表单验证？

对于第一个问题，我使用了axios库进行HTTP请求，并在Vue中封装了一个包含baseURL和通用请求方法的API对象。对于第二个问题，我使用了Vuex进行状态管理，并将不同模块的状态分别存储在不同的文件中。最后，对于第三个问题，我使用了element-ui中的表单组件和自定义验证规则进行表单验证。

以下是我在Vue中实现的一个简单的登录功能：

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username" />
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="form.password" type="password" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="login">登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    };
  },
  methods: {
    login() {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return;
        }
        this.$api.post('/login', this.form).then(res => {
          alert(res.data);
        });
      });
    }
  }
};
</script>

ElementUI

简介

ElementUI是一套基于Vue的桌面端UI组件库。它提供了各种常见的UI组件，包括基本布局、表单、表格、弹框、导航等，并提供了丰富的可定制的主题。使用ElementUI可以快速构建美观、易用的Web应用程序。

经验

在学习ElementUI过程中，我遇到了以下几个问题：

1. 如何使用基本布局组件？
2. 如何使用表单和表格组件？
3. 如何自定义主题？

对于第一个问题，我使用了element-ui提供的栅格和容器组件进行基本布局。对于第二个问题，我使用了el-form和el-table组件，并结合后端接口进行数据交互。最后，对于第三个问题，我使用了element-ui提供的在线主题生成器，定制了自己的主题。

以下是我在ElementUI中实现的一个简单的用户列表功能：

<template>
  <el-container>
    <el-header>用户列表</el-header>
    <el-main>
      <el-form :model="searchForm" inline>
        <el-form-item label="用户名">
          <el-input v-model="searchForm.username" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" stripe>
        <el-table-column prop="id" label="ID" />
        <el-table-column prop="username" label="用户名" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="phone" label="电话" />
      </el-table>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      searchForm: {},
      tableData: []
    };
  },
  methods: {
    search() {
      this.$api.get('/user', { params: this.searchForm }).then(res => {
        this.tableData = res.data;
      });
    }
  }
};
</script>

UniApp

简介

UniApp是一款跨平台的开发框架，它基于Vue.js和微信小程序开发框架。UniApp可以将同一份代码编译成多个平台的应用程序，包括iOS、Android、Web、微信小程序等。UniApp提供了类似于Vue的开发体验，并且可以调用原生API进行开发。

经验

在学习UniApp过程中，我遇到了以下几个问题：

1. 如何使用uni-ui提供的组件？
2. 如何调用原生API？
3. 如何打包发布应用程序？

对于第一个问题，我使用了uni-ui提供的各种常用组件，并根据需要进行自定义组件开发。对于第二个问题，我使用了uni-app提供的API封装和uni-app插件市场提供的第三方插件。最后，对于第三个问题，我使用了HBuilderX集成开发环境进行项目打包并发布应用程序。

以下是我在UniApp中实现的一个简单的计数器功能：

<template>
  <view class="content">
    <text class="counter">{{ count }}</text>
    <button class="button" @click="increment">+</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

<style scoped>
.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.counter {
  font-size: 56rpx;
  margin-bottom: 20rpx;
}

.button {
  width: 160rpx;
  height: 80rpx;
  border-radius: 40rpx;
  font-size: 32rpx;
  color: #fff;
  background-color: #f00;
}
</style>

总结

本学期，我通过学习Spring Boot、Vue、ElementUI、UniApp四个技术栈，深入了解了现代Web应用程序开发的方方面面。我学习了如何搭建后端框架、如何使用前端框架进行页面开发、如何进行接口交互和数据管理、以及如何跨平台地开发应用程序等知识和技能。在以后的学习和工作中，我将继续深入学习这些技术，并不断提升自己的技术水平。喜欢多多，很喜欢