vue项目后端连接mysql数据库
时间: 2025-02-18 17:38:42 浏览: 44
### 配置Vue.js前端应用与后端服务器交互
为了使 Vue.js 应用能够连接到 MySQL 数据库,实际操作中并不直接让前端访问数据库;而是通过中间层——Node.js 后端服务来实现这一目标。这不仅提高了安全性,也使得架构更加合理。
#### 设置代理解决跨域问题
为了让前后端更好地协作,在 `vue.config.js` 中设置代理可以有效处理开发环境下的跨域请求:
```javascript
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: { '^/api': '' }
},
},
}
})
```
此配置允许所有的 `/api` 请求被转发给运行于本地 3000 端口上的 Node.js 服务器[^2]。
#### 安全地构建 SQL 查询语句
当涉及到从客户端接收数据并查询数据库时,务必注意防止 SQL 注入攻击。应采用预编译语句的方式执行查询,而不是简单拼接字符串形成 SQL 句子:
```java
PreparedStatement ps = connection.prepareStatement("SELECT account,password FROM admin WHERE account=?");
ps.setString(1, account);
ResultSet rs = ps.executeQuery();
```
这种方式确保即使用户输入特殊字符也不会影响 SQL 的正常解析和执行[^3]。
#### 发送登录请求至后端接口
在 Vue 组件内部定义异步方法用于发起 HTTP POST 请求向后端传递用户名密码信息,并依据返回的状态码判断是否登录成功:
```javascript
async userlogin() {
try {
const response = await this.$http.post('/user/login', {
uname: this.ruleForm.user,
pwd: this.ruleForm.pwd
});
if (response.data.code === 200) {
console.log('Login successful');
} else {
console.error('Failed to login');
}
} catch(error){
console.error(`Error during login ${error}`);
}
}
```
上述代码片段展示了如何利用 Axios 或其他类似的 HTTP 客户端发送 JSON 格式的登录凭证给后端 API 接口[^4]。
阅读全文
相关推荐


















