软工第二次作业前后端分离计算器

作业要求

102101117刘建鑫

这个作业属于哪个课程	<2301-计算机学院-软件工程社区-CSDN社区云>
这个作业要求在哪里	<第二次作业--前后端交互计算器-CSDN社区>
这个作业的目标	<第二次作业--前后端交互计算器-CSDN社区>
其他参考文献	csdn，bilibili

psp表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	300	400
• Estimate	• 估计这个任务需要多少时间	600	650
Development	开发	600	650
• Analysis	• 需求分析 (包括学习新技术）	40	30
• Design Spec	• 生成设计文档	50	60
• Design Review	• 设计复审	40	30
• Coding Standard	• 代码规范 (为目前的开发制定合适的规范)	50	60
• Design	• 具体设计	50	80
• Coding	• 具体编码	350	500
• Code Review	• 代码复审	50	40
• Test	• 测试（自我测试，修改代码，提交修改）	90	80
Reporting	报告	50	60
• Test Repor	• 测试报告	60	70
• Size Measurement	• 计算工作量	20	30
• Postmortem & Process Improvement Plan	• 事后总结, 并提出过程改进计划	30	50
	合计	1500	1680

代码链接

GitHub - junfeibai/depart

页面展示

代码说明

具体代码看文件

前端

 <div class="history">
        <h2>历史记录</h2>
        <ul id="historyList"></ul>
    </div>
    <script>
        const historyList = document.getElementById('historyList');

        function appendToInput(value) {
            document.querySelector('.input').value += value;
        }

        function clearInput() {
            document.getElementById('input').value = '';
            document.getElementById('result').textContent = '结果：';
        }

        function backspace() {
            const input = document.querySelector('.input');
            input.value = input.value.slice(0, -1);
        }

        function calculate() {
            const input = document.querySelector('.input').value;
            // 向后端发送计算请求
            fetch('/calculate', {
                method: 'POST',
                body: JSON.stringify({ expression: input }),
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                document.getElementById('result').textContent = `结果：${data.result}`;
                addToHistory(input, data.result);
            })
            .catch(error => {
                document.getElementById('result').textContent = '结果：错误';
            });
        }

        function addToHistory(expression, result) {
            const listItem = document.createElement('li');
            listItem.textContent = `${expression} = ${result}`;
            historyList.appendChild(listItem);
        }

        clearInput();
    </script>
</body>
</html>

后端

@RestController
public class ResController extends ServiceImpl<ResMapper,Param> implements ResService  {

    @PostMapping("/save")
    public String save2(@RequestBody Param param) {
        long l = System.currentTimeMillis();
        param.setMyTime(l);
        this.save(param);
        return "hello";
    }

    @GetMapping("/hi")
    public List<String> his() {
        List<Param> list = this.list();
        LinkedList<String> l = new LinkedList<>();
        for(Param p : list) {
            String s = p.getExp() + "=" + p.getRes();
            l.add(s);
        }
        Collections.reverse(l);
        return l;
    }
}

<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
  <component name="CompilerConfiguration">
    <annotationProcessing>
      <profile default="true" name="Default" enabled="true" />
      <profile name="Maven default annotation processors profile" enabled="true">
        <sourceOutputDir name="target/generated-sources/annotations" />
        <sourceTestOutputDir name="target/generated-test-sources/test-annotations" />
        <outputRelativeToContentRoot value="true" />
        <module name="work" />
      </profile>
    </annotationProcessing>
  </component>
  <component name="JavacSettings">
    <option name="ADDITIONAL_OPTIONS_OVERRIDE">
      <module name="work" options="-parameters" />
    </option>
  </component>
</project>

package com.example.homework.bean;

import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;

@Data
@TableName("results")
public class Param {
    public Integer id;
    public String exp;
    public String res;

    public Long myTime;
}

package com.example.homework.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 {

    public void addCorsMappings(CorsRegistry registry) {
        // 设置允许跨域的路径
        registry.addMapping("/**")
                // 设置允许跨域请求的域名
                .allowedOriginPatterns("*")
                // 是否允许cookie
                .allowCredentials(true)
                // 设置允许的请求方式
                .allowedMethods("GET", "POST", "DELETE", "PUT")
                // 设置允许的header属性
                .allowedHeaders("*")
                // 跨域允许时间
                .maxAge(3600);
    }
}

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    username: root
    password: 123456
    url: jdbc:mysql://localhost:3306/homework
server:
  port: 8090

心路历程

通过这次经历我也学会了怎么设计页面，怎么使用idea，怎么进行前后端分离，收获还是挺大的。但是讲真的有点恶心，总是在不知名的情况下出bug，让人心态爆炸