vue+node+mySql实现前后端分离_基于node和vue前后端分离商品查询，2024物联网嵌入式开发笔试题总结

if (content.length != 0) { alert("登录成功！"); }else{ alert("账户密码错误！"); } },function(response){ console.log(response); }) }, submit_req: function(){ var reg_name = this.regData.username; var reg_psw = this.regData.psw; if(reg_psw !== this.regData.tpsw){ alert("两次输入密码不正确！"); this.regData.username = ""; this.regData.psw = ""; this.regData.tpsw = ""; }else{ var url="/api/addUser";

this.$http.post(url,{ username: this.regData.username, userpsw: this.regData.psw },{}).then(function(data){ console.log("注册请求成攻！ ",data.body); if (data.body.affectedRows >0) { alert("注册成攻！"); document.getElementById("login_in").style.display="block"; } },function(response){ console.log(response); }) } } } }

.Login{ width: 70%; height: 70%; background: rgba(255,255,255,0.8); border: 5px solid #E23A6E; margin: 0 auto; margin-top: 5%; } .Login a{ text-decoration: none; color: #E23A6E; } .Login form{ width: 100%; height: 100%; } .Login input{ width: 50%; height: 40px; margin-top: 30px; border: 1px solid #E23A6E; border-radius: 20px; outline: none; font-family: "arial rounded mt bold"; padding-left: 10px; font-size: 18px; } .sub\_btn{ cursor: pointer; background: none; color: #E23A6E; } .sub\_btn:hover{ background: #E23A6E; color: #FFFFFF; }

### 新建服务器目录


直接在vue项目中建立servser文件夹node文件都可以放到项目中。![这里写图片描述](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/d86d297e2a9d4d528e58e02cac178c5a~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5py65Zmo5a2m5Lmg5LmL5b-DQUk=:q75.awebp?rk3s=f64ab15b&x-expires=1771856438&x-signature=RPfm1p9tHZbwjfdS4DSsJW9XGiU%3D)   
 最后npm run build会生成dist文件夹！文件夹中的文件是最后的页面。


### node代码


首先建立服务

// node 后端服务器

const userApi = require('./api'); const fs = require('fs'); const path = require('path'); const bodyParser = require('body-parser'); const express = require('express'); const app = express();

app.use(bodyParser.json()); app.use(bodyParser.urlencoded({extended: false})); // 服务开启后访问指定编译好的dist文件下的数据 app.use(express.static(path.resolve(__dirname, '../dist'))) app.get('*', function(req, res) { const html = fs.readFileSync(path.resolve(__dirname, '../dist/index.html'), 'utf-8') res.send(html) }) // 后端api路由 app.use('/api', userApi); // 监听端口 app.listen(8088); console.log('success listen at port:8088......');

### 建立api接口

var models = require('./db');//数据库链接信息 var express = require('express'); var router = express.Router(); var mysql = require('mysql'); var $sql = require('./sqlfun');//sql语句

// 连接数据库 var conn = mysql.createConnection(models.mysql);

conn.connect(); var jsonWrite = function(res, ret) { if(typeof ret === 'undefined') { res.json({ code: '1', msg: '操作失败' }); } else { res.json(ret); } };

// 登录用户接口 router.post('/login', (req, res) => { var sql = sql.user.login; var params = req.body; console.log("sql",sql); console.log("params",params); conn.query(sql, [params.username], function(err, result) { if (err) { console.log(err); } if (result) { jsonWrite(res, result); for(var i = 0; i < result.length; i++){ console.log("请求回来！",result[i]) console.log("请求结果！",typeof result[i],result[i].userpsw); if (result[i].userpsw == params.userpsw) { res.send("返回回来了！"); } } res.end('is over'); } }) }); // 增加用户接口 router.post('/addUser', (req, res) => { var sql = sql.user.add; var params = req.body; console.log("sql",sql); console.log("params",params); conn.query(sql, [params.username,params.userpsw], function(err, result) { if (err) { console.log(err); } if (result) { jsonWrite(res, result); for(var i = 0; i < result.length; i++){ console.log("请求回来！",result[i]) console.log("请求结果！",typeof result[i],result[i].userpsw); if (result[i].userpsw == params.userpsw) { res.send("返回回来了！"); } } res.end('is over'); } }) }); module.exports = router;

### 数据库

// 数据库连接配置 module.exports = { mysql: { host: 'localhost', user: 'root', password: '', database: 'qyk', port: '3306' } }

// sql语句 var sqlMap = { // 用户 user: { login: 'SELECT userpsw FROM admin WHERE username = ?;', add: 'insert into admin(username, userpsw) values ( ?, ?);' } }

module.exports = sqlMap;

### vue路由管理 和跨域管理


在config文件夹下index.js文件中 dev: 中添加如下代码。

proxyTable: {        
    '/api': {
        target: 'http://localhost:8088/api/',
        changeOrigin: true,
        pathRewrite: {                
            '^/api': ''
        }
    }
}

直接运行localhost：8088


### ok了



**收集整理了一份《2024年最新物联网嵌入式全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升的朋友。**
![img](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/0e79859324c74b7e8551841fc76acd44~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5py65Zmo5a2m5Lmg5LmL5b-DQUk=:q75.awebp?rk3s=f64ab15b&x-expires=1771856438&x-signature=hYIKwTifHtHph5hUUe30eLdTBgM%3D)
![img](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/44d4e52a62fc48b5b936ef3747089bd6~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5py65Zmo5a2m5Lmg5LmL5b-DQUk=:q75.awebp?rk3s=f64ab15b&x-expires=1771856438&x-signature=rNq%2BE7oEolG%2BFrcvUwP5289PKGw%3D)

**[如果你需要这些资料，可以戳这里获取](https://gitee.com/vip204888)**

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人**

**都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**