老龄化项目问题解决

老龄化项目

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,并在浏览器中添加 usernamepassword。然而,由于跨域问题,cookie 始终无法成功添加。最终,决定在前端使用本地存储(localStorage)来实现该功能。

主要代码实现

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


老龄化项目

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,并在浏览器中添加 usernamepassword。然而,由于跨域问题,cookie 始终无法成功添加。最终,决定在前端使用本地存储(localStorage)来实现该功能。

主要代码实现

在前端代码中,使用 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);

修改说明:

  1. 删除了无法显示的图片引用,改用文字描述代码配置。
  2. 优化了文档结构,使其更清晰易读。
  3. 补充了代码示例,便于理解实现方式。 在前端代码中,使用 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: 老龄化项目后端代码] [aging-front-code: 老龄化项目前端代码]

相关推荐
用户名1231 分钟前
我写了个脚本,让前端彻底告别 Swagger 手动搬砖
前端
爱编程的喵3 分钟前
深入理解JavaScript节流函数:从原理到实战应用
前端·javascript·html
尧木晓晓3 分钟前
开发避坑指南:Whistle 代理失效背后,localhost和 127.0.0.1 的 “爱恨情仇” 与终极解决方案
前端·javascript
风无雨35 分钟前
GO启动一个视频下载接口 前端可以边下边放
前端·golang·音视频
aha-凯心1 小时前
前端学习 vben 之 axios interceptors
前端·学习
熊出没2 小时前
Vue前端导出页面为PDF文件
前端·vue.js·pdf
VOLUN2 小时前
Vue3项目中优雅封装API基础接口:getBaseApi设计解析
前端·vue.js·api
用户99045017780092 小时前
告别广告干扰,体验极简 JSON 格式化——这款工具让你专注代码本身
前端
前端极客探险家2 小时前
告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
前端·算法·性能优化
袁煦丞3 小时前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作