Node+Express+MySQL+Vue简易项目 (二)

21 篇文章 3 订阅

1.搭建vue-cli

vue init webpack vue-node

2.安装包依赖并运行 

cd vue-node
npm install
npm run dev

3.创建服务端,新建server文件夹

4.安装express+cors中间件(跨域用)+body-parser(解析表单)+mysql中间件

npm install express --save
npm install body-parser --save
npm install cors --save
npm install mysql --save

5.在server文件夹中进行写node相关配置,代码

app.js

var express = require('express');
var app = express();
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({
  extended: false
}));
app.use(bodyParser.json())
 
const cors = require('cors');
app.use(cors());
 
 
// users接口
var users = require('./routes/users');
app.use('/users', users);
 
// 监听
app.listen(3001, function () {
  console.log('success listen...3001');
});

routes/users.js

var express = require('express');
var router = express.Router();
var query = require('../db.js');

 
router.get('/', function (req, res, next) {
    const sqlStr = 'select * from userlist'
    const sqlParams=null
    query(sqlStr,sqlParams,function (err,results) {
        if (err) return res.json({ err_code: 1, message: '资料不存在', affextedRows: 0 })
        res.json({ retCode: 200, data: results, affextedRows: results.affextedRows })
        res.end();
      })
});

router.post('/add', function (req, res, next) {
    const sqlStr = 'insert into userlist set ?'
    const sqlParams=req.body
    sqlParams.id =new Date().getTime()
    query(sqlStr,sqlParams,function (err,results) {
        if (err) return res.json({ err_code: 1, message: err, affectedRows: 0 })
        res.json({ retCode: 200, message: '恭喜成功', affectedRows: results.affectedRows })
        res.end();
      })
});


router.use('/delete', function (req, res) {
    let sqlStr = 'DELETE FROM userlist where id='+req.body.id;
    const sqlParams=null
    query(sqlStr,sqlParams,function (err,results) {
        if (err) return res.json({ err_code: 1, message: err, affectedRows: 0 })
        res.json({ retCode: 200, message: '删除成功', affectedRows: results.affectedRows })
        res.end();
    })
  });

 
module.exports = router;

db.js

const mysql = require("mysql");
//连接上数据库(连接池)
const conn = mysql.createConnection({
    host: 'localhost',//数据库地址
    user: 'root',//账号
    password: '123456',//密码
    database: 'mytest',//库名
    port:'3306',     //端口号
    multipleStatements: true //允许执行多条语句
});

conn.connect();
/*封装数据库操作方法query--用于增删改查*/
const query=function(sql,sqlParams,callback){
      conn.query(sql,sqlParams,function(qerr,vals,fields){
        callback(qerr,vals,fields);
      });
};

module.exports=query;
 

 

回答: 一个vue+node+mysql全栈项目是指使用vue作为前端框架,node作为后端框架,mysql作为数据库的项目。在这个项目中,前端开发者可以使用vue进行前端页面的开发,同时使用node作为后端框架来开发后端接口,通过mysql来存储和管理数据。这样的项目可以实现前后端的完整交互和数据传输,实现全栈开发。在项目中,可以使用express作为node的服务器框架,使用axios进行前后端的跨域访问,使用vuex进行数据管理,使用elementUI来搭建页面。这样的技术栈可以提供丰富的学习资源和开发工具,帮助开发者实现全栈开发的目标。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* *2* [vue+node.js+mysql项目搭建初体验(接口)](https://blog.csdn.net/weixin_48931875/article/details/121156074)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [vue+node+mysql全栈项目完整记录](https://blog.csdn.net/u012848304/article/details/128713937)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值