第一次独立完成项目的经验之谈

我不是码神QAQ

已于 2022-10-29 22:30:14 修改

阅读量226

点赞数

文章标签： java servlet 数据库

于 2022-10-10 00:15:34 首次发布

本文链接：https://blog.csdn.net/m0_51135621/article/details/127236574

版权

第一次独立完成项目的经验之谈

想到哪写到哪

跨域问题

import org.springframework.context.annotation.Configuration;

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Configuration
public class CorsConfig implements Filter {
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;

        String origin = request.getHeader("Origin");
        if(origin!=null) {
            response.setHeader("Access-Control-Allow-Origin", origin);
        }

        String headers = request.getHeader("Access-Control-Request-Headers");
        if(headers!=null) {
            response.setHeader("Access-Control-Allow-Headers", headers);
            response.setHeader("Access-Control-Expose-Headers", headers);
        }

        response.setHeader("Access-Control-Allow-Methods", "*");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Credentials", "true");

        chain.doFilter(request, response);
    }

    @Override
    public void init(FilterConfig filterConfig) {

    }

    @Override
    public void destroy() {
    }
}

在config下创建CorsConfig文件然后复制上述代码，即可解决跨域问题。

springboot的项目框架

在这里插入图片描述

controller类
- 注解@RestController，@Autowired调用service层的接口，@postmapping填写前端调用的url
- 在前端传入数据时，数据类型切记要相同，并加上@RequestParm注解于变量前面
service类
- 在service下写接口
- 在service下创建impl文件夹，写关于接口的实现
- impl实现时需添加@Service的注解，并在实现方法
pojo类
- 每个数据库对应一个pojo，pojo里需创建与数据库对应的变量
- 切记使用驼峰命名法
- 添加@Data，@AllArgsConstructor，@NoArgsConstructor
mapper类
- 在mapper文件夹下编写接口，添加@Mapper注解，并让接口继承BaseMapper，方便使用
config类
- 存放组件，例如上述的corsconfig
utils类
- 放垃圾用的

ajax

$.ajax({
    url: "http://localhost:3000/pk/bot/",
    type: "post",
    traditional:true,
    data:{
        aMap: store.state.pk.aMap,
        bMap:store.state.pk.bMap,
        point:pointB.value,
    },
    success(resp) {
        store.state.pk.bMap[resp] = pointB.value;
        check_delete(resp);
        if(check_match_end()){
            game_result();
            alert("游戏结束");
    	}
    },
    error(resp) {
        console.log(resp);
    }
});

使用ajax格式如上，若需要验证时需要填写

headers: {
	Authorization: "Bearer " + context.state.token,
},

url：指定路径
type:指定类型
data：存放数据
success：没有报错时从后端返回的数据
error：报错时后端返回的数据
headers：验证头

vue

基本格式

<template>
</template>
<script>
</script>
<style scoped>
</style>

奇怪要求
- 定义变量时要
```
let a = ref();
```
- 定义函数时要
```
const restart = ("这里填参数") => {
}
```
- 使用变量时要
```
a.value;
```
- 结束时要
```
return {a，restart}
```
- 上述写在
```
<script>
import { ref } from 'vue'
	export default {
		setup() {
			这里
		}
	}
</script>
```
- 切忌在template里随便使用’:'，：在vue代表v-bind，用于需要在下一语句中调用变量
- 在store下写js时用commit调用mutation函数，用于同步操作，用dispatch调用action函数，用于异步操作
好用的东西
- onmounted与onUnmounted分别在打开网页与退出或刷新网页时各执行一次
- ```
div.user-photo > img {
    border-radius: 50%;
    width: 20vh;
}
```
  用于修改前端样式，可以使得class=“user-photo”的样式覆盖过img

WebSocket

            const socketUrl = `ws://localhost:3000/websocket/${store.state.user.token}`
            
            socket = new WebSocket(socketUrl);

            socket.onopen = () => {
                console.log('connected!');
                store.commit("updateSocket", socket)
            }

            socket.onmessage = msg => {
                const data = JSON.parse(msg.data);
                if (data.event === "match_success") {
                    store.commit("updateOpponent", {
                        username: data.opponent_username,
                        photo: data.opponent_photo
                    }),

                    setTimeout(() => {
                        store.commit("updateStatus", "playing")
                    }, 1000);

                    store.commit("updateGame", data.game);

                    console.log('match found!')
                } else if (data.event === 'result') store.commit("updateRes", data);
                else if (data.event === 'rollA') store.commit("updateApoint", data);
                else if (data.event === 'rollB') store.commit("updateBpoint", data);
                else if (data.event === 'curMap') store.commit("updateCurMap", data);
                else if(data.event === 'Bot') store.commit("updateBotStatus",data);

                socket.onclose = () => {
                    console.log("disconnected!")
                }
            }

socket = new WebSocket(socketUrl) 用于连接后端通信
socket.onopen 在打开网页时初始化连接
socket.onmessage = msg 用于接收后端发了的信息，即msg
socket.onclose 在网页关闭或断开连接后执行操作
socket.send 给后端发送消息,需要用JSON转换字符
- ```
socket.send(JSON.stringify({
	event: "botA"
}));
```
后端同理