短学期问题总结
前端
路由问题
在完成此次短学期任务做前端的时候想实现页面之间的跳转，不知道如何实现？最后想到用vue-router组件解决。
- 首先下载router
npm install vue-router
- 创建路由文件,在src目录下创建一个新的文件夹，例如"router"，然后在该文件夹下创建一个新的文件，例如"index.js"。在该文件中编写你的路由配置,在下面的示例中，我们导入了Vue和Vue Router，并创建了一个路由实例。在
routes数组中，我们定义了两个路由，分别对应根路径和"/about"路径，并指定了对应的组件。
// 导入Vue和Vue Router
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
// 创建路由实例
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
});
// 导出路由实例
export default router;
- 在主应用中使用路由
// 导入Vue和路由实例
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
// 创建Vue应用实例并绑定路由
const app = createApp(App);
app.use(router);
app.mount('#app');
- 在主组件中引入
<router-view></router-view>
最后就可以胜利使用啦。
网络请求问题
因为要与后端进行请求所以要用axios，主要解决封装使用问题
前端带cookie问题：前端带cookie，就是在Axios里面添加一句话myAxios.defaults.withCredentials = true;后端要配合跨域
- 引入axios
npm install axios
- 创建一个Axios实例：在你的项目中的某个适当的位置，例如src目录下的一个新文件（例如api.js或axios.js），创建一个新的Axios实例。这将帮助你在整个项目中使用统一的配置和拦截器。
// 导入axios库
import axios from 'axios';
// 创建一个新的axios实例
const instance = axios.create({
baseURL: 'https://api.example.com', // 设置基本URL
timeout: 5000, // 设置超时时间，单位为毫秒
headers: {
'Content-Type': 'application/json', // 设置请求头
},
});
// 添加请求拦截器
instance.interceptors.request.use(
(config) => {
// 在发送请求之前做些什么，例如添加认证信息
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
(error) => {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 添加响应拦截器
instance.interceptors.response.use(
(response) => {
// 对响应数据做些什么，例如处理统一的错误码
return response.data;
},
(error) => {
// 对响应错误做些什么
return Promise.reject(error);
}
);
// 导出axios实例
export default instance;
- 发送请求示例
// 导入axios实例
import axios from './api';
// 发送GET请求的示例
axios.get('/api/data')
.then(response => {
// 处理响应数据
console.log(response);
})
.catch(error => {
// 处理请求错误
console.error(error);
});
// 发送POST请求的示例
axios.post('/api/login', { username: 'user', password: 'pass' })
.then(response => {
// 处理响应数据
console.log(response);
})
.catch(error => {
// 处理请求错误
console.error(error);
});
后端
mybatis框架下自己写SQL如何写
在src/main/resource目录下编写XML
目录结构
我们将UserMapper.xml放在resource下的mapper目录中，我的整个项目目录如下
编写实体类对应的Mapper接口
我们这里自定义了getAll()方法，获取全部用户的信息。
package com.xwhking.mapper;
import com.xwhking.pojo.User;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import org.springframework.stereotype.Repository;
import java.util.List;
@Mapper
public interface UserMapper extends BaseMapper<User> {
public List<User> getAll();
}
编写UserMapper.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.xwhking.mapper.UserMapper">
<select id="getAll" resultType="com.xwhking.pojo.User">
select * from user
</select>
</mapper>
在配置文件中扫描我们的xml配置的位置
appilication.yml
mybatis-plus.mapper-locations=classpath:/mapper/**.xml
测试
import org.springframework.boot.test.context.SpringBootTest;
import java.io.InputStream;
import java.util.ArrayList;
import java.util.List;
@SpringBootTest
class AutoApplicationTests {
@Autowired
private UserMapper userMapper;
@Test
void test() {
List<User> userList=userMapper.getAll();
System.out.println(userList);
}
}
在src/main/java 目录下编写XML
目录结构
编写实体类对应的Mapper接口
package com.xwhking.mapper;
import com.xwhking.pojo.User;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import org.springframework.stereotype.Repository;
import java.util.List;
@Repository
public interface UserMapper extends BaseMapper<User> {
public List<User> getAll();
}
编写UserMapper.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.xwhking.mapper.UserMapper">
<select id="getAll" resultType="com.xwhking.pojo.User">
select * from user
</select>
</mapper>
编写配置文件
application.yml
mybatis-plus.mapper-locations=classpath:com/xwhking/mapper/xml/**.xml
配置pom文件
为什么：这是因为在maven默认情况下是不会将src/main/java目录的xml等资源打包进入class文件夹的，而是直接忽略掉。
我们只需在pom中加入如下配置，告诉idea，在编译的时候将src/main/java下的xml一起打包进class文件夹中，这样也就不会报异常了。
<build>
<resources>
<resource>
<directory>src/main/java</directory>
<includes>
<include>**/*.xml</include>
</includes>
</resource>
</resources>
</build>
测试
import org.springframework.boot.test.context.SpringBootTest;
import java.io.InputStream;
import java.util.ArrayList;
import java.util.List;
@SpringBootTest
class AutoApplicationTests {
@Autowired
private UserMapper userMapper;
@Test
void test() {
List<User> userList=userMapper.getAll();
System.out.println(userList);
}
}
classpath和classpath*的区别
classpath:只会在你的class路径下寻找
classpath*:不仅包含class路径，还包括jar文件中(class路径)进行查找
一般来说，在大型公司的项目开发中都会需要用到classpath*进行文件配置，因为通常会用到第三方的jar，所以大多情况下会需要查找这些jar的配置文件。
参数传递问题
单个参数传递
//在接口中定义放法，参数形式如下
//使用单个参数
Student selectById(int id);
<!--
使用单个参数查询：
parameterType：表示参数数据类型（可不写）
使用 #{参数名} 获取参数的值
对参数名称无要求
-->
<select id="selectById" parameterType="int" resultType="cn.krain.domain.Student">
select * from student where id = #{id}
</select>
//调用方法时只需要传入相应类型的单个值即可
Student student = dao.selectById(2);
使用@param为参数命名传递多个参数
/* 在接口文件的对应方法形参中，使用以下格式进行命名
* 多个参数：为参数命名，在形参前加上 @Param("自定义参数名")
* */
List<Student> selectMultiParam(@Param("myname") String name,
@Param("myage") Integer age);
//调用时传入对应的参数值
List<Student> students = dao.selectMultiParam("康康",23);
<!--
多个参数：使用param命名 使用为参数起得名称 eg：#{命名}
-->
<select id="selectMultiParam" resultType="cn.krain.domain.Student">
select * from student where name=#{myname} or age=#{myage}
</select>
使用Java对象作为方法的参数
//在接口中定义放法，参数形式如下
//多个参数：使用java对象作为方法的参数
List<Student> selectMultiObject(QueryParam queryParam);
<!--
多个参数：使用java对象的属性值作为参数实际值
原始语法：#{属性名, javaType=java中类型名称, jdbcType=数据库中的类型名}
eg: #{queryName, javaType=String, jdbcType=Varchar}
#{queryAge, javaType=Integer, jdbcType=Integer}
简写：#{属性名}
-->
<select id="selectMultiObject" resultType="cn.krain.domain.Student">
select * from student where name=#{queryName} or age=#{queryAge}
</select>
//调用时传入相应对象
List<Student> students = dao.selectMultiObject(queryParam);
使用位置传参
在方法的参数中，形参的顺序对应映射文件中参数的顺序，arg0指形参中第一个值，arg1代表第二个，以此类推。
//在接口中定义放法，参数形式如下
//多个参数：使用位置传参
List<Student> selectMultiPosition(String name, Integer age);
<!--根据参数位置传参 arg后面的数字代表参数所在的位置-->
<select id="selectMultiPosition" resultType="cn.krain.domain.Student">
select * from student where name=#{arg0} or age=#{arg1}
</select>
//调用代码
List<Student> students = dao.selectMultiPosition("康康", 23);
使用map传参
//在接口中定义放法，参数形式如下
//使用Map传递多个参数
List<Student> selectMultiMap(Map<String, Object> map);
<!--使用Map键值对传参，形式：#{key名}-->
<select id="selectMultiMap" resultType="cn.krain.domain.Student">
select * from student where name=#{mapName} or age=#{mapAge}
</select>
//调用
Map<String,Object> data = new HashMap<String,Object>();
data.put("mapName","krain");
data.put("mapAge",23);
List<Student> students = dao.selectMultiMap(data);
配置knife4j
如果springboot version >= 2.6 需要添加如下配置：
spring:
mvc:
pathmatch:
matching-strategy: ANT_PATH_MATCHER
导入依赖
<!-- swagger依赖-->
<dependency>
<groupId>com.github.xiaoymin</groupId>
<artifactId>knife4j-spring-boot-starter</artifactId>
<version>2.0.7</version>
</dependency>
配置类
package com.xwhking.usercenter.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import springfox.documentation.builders.ApiInfoBuilder;
import springfox.documentation.builders.PathSelectors;
import springfox.documentation.builders.RequestHandlerSelectors;
import springfox.documentation.service.ApiInfo;
import springfox.documentation.service.Contact;
import springfox.documentation.spi.DocumentationType;
import springfox.documentation.spring.web.plugins.Docket;
import springfox.documentation.swagger2.annotations.EnableSwagger2WebMvc;
/**
* 自定义接口文档的配置
*/
@Configuration//配置类
@EnableSwagger2WebMvc //swagger注解
public class SwaggerConfig {
@Bean(value = "defaultApi2")
public Docket defaultApi2() {
return new Docket(DocumentationType.SWAGGER_2)
.apiInfo(apiInfo())
.select()
// 这里一定要标注你控制器的位置
.apis(RequestHandlerSelectors.basePackage("com.xwhking.usercenter.controller"))
.paths(PathSelectors.any())
.build();
}
/**
* api 信息
* @return
*/
private ApiInfo apiInfo() {
return new ApiInfoBuilder()
.title("鱼皮用户中心")
.description("鱼皮用户中心接口文档")
.termsOfServiceUrl("https://github.com/liyupi")
.contact(new Contact("yupi","https://github.com/liyupi","xxx@qq.com"))
.version("1.0")
.build();
}
}
访问
自己的项目url/＋doc.html 后面html别忘了，不然会找不到文件
PostgreSQL的双引号问题
在mysql中字段没有大小写之分，在用mybatis用起来非常舒适，配用，但是我们的短学期，学校要求用openGauss写一个应用，而openGauss基于postgreSQL 的数据库，他的字段用双引号括住的话其中的大小写是区分的。这就使我在使用mybatis时对字段的一个对应出了问题
解决：就是用转义字符（\）给字段加上双引号就好。
下面是一个例子
package com.xwhking.ms.domain;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
import java.io.Serializable;
/**
* 班级表，也是依赖于专业表，拥有专业表的外键
* @TableName ZouwClass01
*/
@TableName(value ="\"ZouwClass01\"")
@Data
public class ZouwClass01 implements Serializable {
/**
*
*/
@TableId(type = IdType.AUTO,value = "\"zwId01\"")
private Long zwId01;
/**
*
*/
@TableField(value = "\"zwName01\"")
private String zwName01;
/**
*
*/
@TableField(value = "\"zwMajorId01\"")
private Long zwMajorId01;
@TableField(exist = false)
private static final long serialVersionUID = 1L;
@Override
public boolean equals(Object that) {
if (this == that) {
return true;
}
if (that == null) {
return false;
}
if (getClass() != that.getClass()) {
return false;
}
ZouwClass01 other = (ZouwClass01) that;
return (this.getZwId01() == null ? other.getZwId01() == null : this.getZwId01().equals(other.getZwId01()))
&& (this.getZwName01() == null ? other.getZwName01() == null : this.getZwName01().equals(other.getZwName01()))
&& (this.getZwMajorId01() == null ? other.getZwMajorId01() == null : this.getZwMajorId01().equals(other.getZwMajorId01()));
}
@Override
public int hashCode() {
final int prime = 31;
int result = 1;
result = prime * result + ((getZwId01() == null) ? 0 : getZwId01().hashCode());
result = prime * result + ((getZwName01() == null) ? 0 : getZwName01().hashCode());
result = prime * result + ((getZwMajorId01() == null) ? 0 : getZwMajorId01().hashCode());
return result;
}
@Override
public String toString() {
StringBuilder sb = new StringBuilder();
sb.append(getClass().getSimpleName());
sb.append(" [");
sb.append("Hash = ").append(hashCode());
sb.append(", zwId01=").append(zwId01);
sb.append(", zwName01=").append(zwName01);
sb.append(", zwMajorId01=").append(zwMajorId01);
sb.append(", serialVersionUID=").append(serialVersionUID);
sb.append("]");
return sb.toString();
}
}
跨域
直接在后端配置
package com.xwhking.ms.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")//项目中的所有接口都支持跨域
.allowedOriginPatterns("*")//所有地址都可以访问，也可以配置具体地址
.allowCredentials(true)
.allowedMethods("*")//"GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS"
.maxAge(3600);// 跨域允许时间
}
}
短学期问GPT问题汇总前后端调整问题 (openai.com)
9875
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
