数据库多表or单表/Vue.js 计算属性/Nginx+Tomcat配置-CFANZ编程社区

单表还是多表

这里以存储用户意见反馈为例：

需要存储的内容包括用户的意见反馈、用户名、邮箱和附件，附件图片数量是不确定的

多表的方案就是设计三个表，分别存储

用户信息表 (users)
意见表 (feedback)
附件表 (attachments)

具体步骤：

首先检查用户是否已存在，如果不存在则插入新用户
插入意见信息，并获取生成的 feedback_id
对于每张附件图片，将文件路径和文件名到 attachments 表

单表虽然实现简单，查询更快，但缺点是显而易见的，

冗余：每张图片都需要重复存储用户名、邮箱和意见，导致数据冗余。
扩展性差：如果需要添加更多用户信息或意见相关的字段，会变得复杂。
维护困难：数据冗余和缺乏规范化会导致数据维护困难。

Vue.js 计算属性（Computed Properties）

什么是计算属性？

计算属性是基于其他响应式数据的衍生值。它们依赖于数据，当依赖的数据发生变化时，计算属性会自动重新计算。

计算属性的特点

缓存机制：计算属性的值会被缓存，只有当依赖的数据发生变化时，才会重新计算。
响应式更新：依赖的数据变化时，计算属性会自动重新计算并更新视图。
简洁易维护：将复杂逻辑放在计算属性中，使模板更简洁。

为什么使用计算属性而不是 methods？

性能优化

计算属性有缓存：避免不必要的计算。
methods 无缓存：每次调用都会执行，可能导致性能损耗。

代码复用

计算属性复用逻辑：确保逻辑一致，减少代码重复。
methods 需要重复调用：增加代码冗余。

简化模板

计算属性简化模板：使模板更简洁清晰。
methods 使模板复杂：模板中需要调用方法，增加复杂性。

何时适合使用计算属性？

依赖响应式数据：根据其他响应式数据计算新值。
需要缓存结果：依赖数据不变时，结果不需要重新计算。
简化模板逻辑：模板中需要使用复杂逻辑计算值。

示例

data() {
return {
  items: [
    { name: '苹果', price: 10, quantity: 2 },
    { name: '香蕉', price: 5, quantity: 3 }
  ]
};
},
computed: {
totalPrice() {
  return this.items.reduce((total, item) => {
    return total + item.price * item.quantity;
  }, 0);
}
}

Nginx+Tomcat配置

假设Tomcat已经配置完成，之前的访问是通过xx.xx.xx.xx:8060/ssmxxx/访问的，现在由于微信小程序要求必须通过https访问，因此需要通过nginx，映射到域名上

server {
        listen 443 ssl;
        server_name www.yoururl.xyz;

        ssl_certificate /root/cert/yoururl.xyz.pem;
        ssl_certificate_key /root/cert/yoururl.xyz.key;

        location /ssmxxx  {
            proxy_pass http://127.0.0.1:8060;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }
    }

这里有需要注意的是，其中8060为tomcat对应端口

然后前端就可以通过https://www.yoururl.xyz/ssmxxx/进行访问