老龄化项目
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. 后端项目启动与跨域问题解决
在启动后端项目时,前端需要与后端项目建立连接,并使用 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
)来实现该功能。
主要代码实现
在前端代码中,使用 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: 老龄化项目后端代码] [aging-front-code: 老龄化项目前端代码]