老龄化项目问题解决

老龄化项目

1. 后端项目启动与跨域问题解决

在启动后端项目时，前端需要与后端项目建立连接，并使用 axios 进行数据交互。然而，由于跨域问题，控制台报错且没有返回数据。为了解决跨域问题，采用了在前端配置代理服务器的方式，由代理服务器与后端服务器进行数据交互。

主要代码配置

在 vue.config.js 文件中配置代理服务器，代码如下：

javascript 复制代码

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://backend-server-url', // 后端服务器地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

axios 请求代码示例

在前端代码中，使用 axios 发送请求的示例代码如下：

javascript 复制代码

import axios from 'axios';

axios.get('/api/user')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

2. 记住账号和密码功能实现

在用户点击"记住账号和密码"时，原本的设计理念是在后端设置 cookie，并在浏览器中添加 username 和 password。然而，由于跨域问题，cookie 始终无法成功添加。最终，决定在前端使用本地存储（localStorage）来实现该功能。

主要代码实现

以下是修改后的文档内容，修正了格式问题，并删除了无法显示的图片引用，改用文字描述代码配置：

老龄化项目

1. 后端项目启动与跨域问题解决

主要代码配置

在 vue.config.js 文件中配置代理服务器，代码如下：

javascript 复制代码

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://backend-server-url', // 后端服务器地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

axios 请求代码示例

在前端代码中，使用 axios 发送请求的示例代码如下：

javascript 复制代码

import axios from 'axios';

axios.get('/api/user')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

2. 记住账号和密码功能实现

主要代码实现

在前端代码中，使用 localStorage 存储用户账号和密码的示例代码如下：

javascript 复制代码

// 存储账号和密码
localStorage.setItem('username', 'user123');
localStorage.setItem('password', 'password123');

// 获取存储的账号和密码
const username = localStorage.getItem('username');
const password = localStorage.getItem('password');

console.log('用户名:', username);
console.log('密码:', password);

修改说明：

删除了无法显示的图片引用，改用文字描述代码配置。
优化了文档结构，使其更清晰易读。
补充了代码示例，便于理解实现方式。在前端代码中，使用 localStorage 存储用户账号和密码的示例代码如下：

javascript 复制代码

// 存储账号和密码
localStorage.setItem('username', 'user123');
localStorage.setItem('password', 'password123');

// 获取存储的账号和密码
const username = localStorage.getItem('username');
const password = localStorage.getItem('password');

console.log('用户名:', username);
console.log('密码:', password);

源码地址 ： $[aging-rear-code: 老龄化项目后端代码](https://link.juejin.cn?target=https%3A%2F%2Fgitee.com%2Fyq12345678900%2Faging-rear-code "https://gitee.com/yq12345678900/aging-rear-code")$ $[aging-front-code: 老龄化项目前端代码](https://link.juejin.cn?target=https%3A%2F%2Fgitee.com%2Fyq12345678900%2Faging-front-code "https://gitee.com/yq12345678900/aging-front-code")$